feat: update fundamental-styles to 0.7.0-rc.13 #890

jbadan · 2020-02-28T20:28:37Z

Description

Modal

renamed Dialog
removed closeProps
actions now required
Button
underlying class name changes
ButtonGroup
classname changed to fd-segmented-button
Tab
- remove disabled prop
- change underlying html - added span around tab text
Shellbar
- logo <a> is now <span>
- added <div> around Identifier component
Alert
- renamed MessageStrip
- classname changes
- removed Icon from underlying html
Dropdown
- renamed Select
- remove standard prop
ListGroup
- renamed “List”
- classname changes
- so many changes! basically a new component!
MultiInput
- underlying html changes
- Popover body now built with List component
- lots of underlying html changes for validation states
- state prop replaced with validationState - takes object
- localizedText prop removed
Combobox Input
- underlying html changes
- menu prop renamed list - now takes List component
- state prop now validationState - takes an object
FormMessage
- now a <div> from <span>
InputGroup
- state prop now validationState - takes an object
- underlying html changes to include FormMessage when passed validationState
SearchInput
- state prop now validationState - takes an object
- underlying html changes to include FormMessage when passed validationStatefeat: update fundamental-styles to 0.4.1 #885
Toggle
- renamed to “Switch”
- removed size options, now use compact property
- labelProps no longer needed, additional props will be spread to the <label> element
- underlying html changes - no longer wrapped in FormItem

Checkbox
- new children prop
- value prop changed
- underlying html has changed significantly
FormRadioItem
- underlying html has changed significantly
FormMessage
- now an internal component
FormInput
- removed state property
- new validationState property
FormItem
- remove isHorizontal prop
- remove isInline prop (was internal only)
FormRadioGroup
- now outputs <div> instead of Fragment
FormLabel
- remove isCheckbox prop
- remove isRadio prop
- removed isToggle prop

See #888, #885 for a divided pr

Known Issues:
Toggle/Switch
- internalLabel prop not working in prop descriptions
- not an accessible pattern
- this is going to change ASAP as it is currently being redesigned
- icons are misaligned inside switch
Token:
- selected state - did not implement - what is this even used for?
Shellbar
- fd-shellbar__button needs more specificity
ListText
- —no-wrap class only works in selects - this should probably be part of select, not list
Select
- compact not working because —fd-forms-height-compact is not part of our postcss pipeline anymore - just SAP variables: SAP/fundamental-styles#711
MultiInput
- fd-tokenizer__input does not take priority over fd-input - getting the fd-input outline box (needs more specificity)
Validation states
- validation state styling - FS has the validation message as a list item instead of a div:SAP/fundamental-styles#712
- “onClickOutside” is not being handled correctly

jbadan · 2020-02-28T20:31:31Z

.size-limit

@@ -3,6 +3,6 @@
    name: "Fundamental-React Size",
    webpack: true,
    path: "lib/index.js",
-    limit: "180 KB"
+    limit: "200 KB"


it's only 186 but I'm giving myself some headroom

netlify · 2020-02-28T20:32:20Z

Deploy preview for fundamental-react ready!

Built with commit bbd2af7

https://deploy-preview-890--fundamental-react.netlify.com

netlify · 2020-02-28T20:35:37Z

Deploy preview for fundamental-react ready!

Built with commit 24a50ed

https://deploy-preview-890--fundamental-react.netlify.com

skvale · 2020-02-28T21:03:44Z

src/Dialog/Dialog.Component.js

+import { ComponentPage, Example } from '../_playground';
+import React, { Component } from 'react';
+
+export class DialogComponent extends Component {


Could this be a functional component?

oh this is copied from the previous ModalComponent - it just looks new from the name change. I don't really want to rework all the docs 😆

skvale · 2020-02-28T21:04:54Z

src/Dialog/Dialog.js

 import classnames from 'classnames';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import FocusLock from 'react-focus-lock';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import React, { Component } from 'react';
-class Modal extends Component {
-    // select body element to add Modal component too
+class Dialog extends Component {


Doesn't need to happen here, but this could be a functional component pretty easy too.

skvale · 2020-02-28T21:15:58Z

src/MessageStrip/__stories__/MessageStrip.stories.js

+        <MessageStrip {...createProps()}>Default MessageStrip</MessageStrip>
+    ))
+    .add('Dismissable', () => (
+        <MessageStrip dismissable>MessageStrip</MessageStrip>


Looks like it's spelled dismissible everywhere else. But dismissable does seem like the correct spelling...

oh good catch - I can't spell 🤣

dismissible is the correct spelling - I looked through the history and I've had to fix this a couple times because we(me) can't get it right. Maybe we change the prop name in the future 😆

skvale · 2020-02-28T21:17:13Z

src/MessageStrip/MessageStrip.test.js

+        // expect(wrapper.state(['isActive'])).toBeTruthy();
+
+        // wrapper.find('button.fd-message-strip__close').simulate('click');
+        // expect(wrapper.state(['isActive'])).toBeFalsy();


?? Can we take these out now?

bcullman · 2020-02-29T01:14:06Z

a Herculean effort 💪 nice work! Just a few items:

modal looks like it is missing some padding:

TabGroup looks... not right.

validation state on multiinput cause field to shift around:

^ same issues in selects

popover placement in docs seems smushed:

jbadan · 2020-03-02T19:20:55Z

@bcullman

Dialog by default has no padding in the body 🤷‍♀ I added the additional sizes so that consumers can add padding as they wish. See https://fundamental-styles.netlify.com/components/dialog.html#dialog-size-modifiers
I set the defaulted to large to prevent any confusion.
TabGroup is updated with the new span class and I've now added the sizes now (defaulted to large like Dialog since the default from fundamental-styles has no padding). Other features see: Tabs: build out new functionality #891
Popover & validation state jumping fixed on docs site - was a flexbox issue.

skvale

LGTM!
The storyshots-test-js-storyshots-components-message-strip-dismissable-1-snap.png file could be deleted though

meganaconley and others added 30 commits February 24, 2020 14:57

created overlay component

337a092

wip

08d8b2b

rc25

c0bf9ae

cleanup tests for v25

172eb7a

0.4.0rc29

96ec14a

update for 0.4.0-rc.30

8751a5d

compact radio examples

b495c0e

0.4.0-rc.42

38b32da

0.4.0-rc.43

d4fcbe2

0.4.1-rc.4

df196fe

0.4.1-rc.5

d48d902

0.4.1

bd9ca80

new storyshots for added stories:

baf4c0f

update Toggle to Switch

c96989b

remove disabled prop from Tabs

c9c1e96

token updates

69adbb1

shellbar updates

904e3eb

0.6.0-rc.7

637c3ce

0.6.0-rc.8

c9fbeef

0.6.0-rc.25

6a5cdea

new list component

0dd7be4

list component complete

b7f7c92

update list

d97d486

select component

1ad920a

multiinput update

e14c001

combobox update

3b2ff9c

combobox

3304611

updates

dbcf2f3

update List.Icon snapshots

9fd684b

switch breaking changes

7f0d03f

jbadan added 5 commits February 28, 2020 10:28

cleanup validation

08473d8

dialog component

b7f703d

0.7.0-rc.10 - validation states

a2c8d98

button breaking changes updates

bbd2af7

update snapshot

db1ac73

jbadan commented Feb 28, 2020

View reviewed changes

jbadan linked an issue Feb 28, 2020 that may be closed by this pull request

InputGroup: add focus states #886

Closed

jbadan requested a review from a team February 28, 2020 20:44

update popover image

0391b9a

skvale reviewed Feb 28, 2020

View reviewed changes

jbadan added 4 commits March 2, 2020 08:53

dismissible spelling + remove commented out tests

2c93d10

dialog updates

880daf9

tab group updates - add chain function to dialog

3d0edde

fix displays on docs site - popover and validation

79fc753

jbadan requested a review from a team March 2, 2020 19:25

skvale approved these changes Mar 2, 2020

View reviewed changes

jbadan added 2 commits March 2, 2020 11:57

fix dialog button close

fafd4f5

remove unneeded storyshot

24a50ed

jbadan merged commit 9ca9c4d into master Mar 2, 2020

jbadan deleted the feat/update-fs-7 branch March 2, 2020 20:40

This was referenced Mar 4, 2020

enhancement: anchor and icon restructuring #763

Closed

width of menu list is not matched with input box in component ComboboxInput #531

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: update fundamental-styles to 0.7.0-rc.13 #890

feat: update fundamental-styles to 0.7.0-rc.13 #890

Uh oh!

jbadan commented Feb 28, 2020 •

edited

Loading

Uh oh!

jbadan Feb 28, 2020

Uh oh!

netlify bot commented Feb 28, 2020

Uh oh!

netlify bot commented Feb 28, 2020 •

edited

Loading

Uh oh!

skvale Feb 28, 2020

Uh oh!

jbadan Feb 28, 2020

Uh oh!

skvale Feb 28, 2020

Uh oh!

skvale Feb 28, 2020 •

edited

Loading

Uh oh!

jbadan Feb 28, 2020

Uh oh!

jbadan Mar 2, 2020

Uh oh!

skvale Feb 28, 2020

Uh oh!

jbadan Feb 28, 2020

Uh oh!

bcullman commented Feb 29, 2020 •

edited

Loading

Uh oh!

jbadan commented Mar 2, 2020

Uh oh!

skvale left a comment

Uh oh!

Uh oh!

feat: update fundamental-styles to 0.7.0-rc.13 #890

feat: update fundamental-styles to 0.7.0-rc.13 #890

Uh oh!

Conversation

jbadan commented Feb 28, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Feb 28, 2020

Uh oh!

netlify bot commented Feb 28, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skvale Feb 28, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bcullman commented Feb 29, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jbadan commented Mar 2, 2020

Uh oh!

skvale left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jbadan commented Feb 28, 2020 •

edited

Loading

netlify bot commented Feb 28, 2020 •

edited

Loading

skvale Feb 28, 2020 •

edited

Loading

bcullman commented Feb 29, 2020 •

edited

Loading