feat: upgrade fundamental-styles to 0.11.0-rc.4 #1082
Conversation
|
Deploy preview for fundamental-react ready! Built with commit c8143af |
| LayoutPanel.Filters = LayoutPanelFilters; | ||
| LayoutPanel.Footer = LayoutPanelFooter; | ||
| LayoutPanel.Head = LayoutPanelHead; | ||
| LayoutPanel.Header = LayoutPanelHeader; |
There was a problem hiding this comment.
I've exported something wrong in layout panel but I can't figure out what found it
src/Select/Select.test.js
Outdated
| @@ -51,7 +51,7 @@ describe('<Select />', () => { | |||
| }); | |||
| }); | |||
|
|
|||
| test('forwards the ref to the button', () => { | |||
| xtest('forwards the ref to the div role="button"', () => { | |||
There was a problem hiding this comment.
@skvale I've done something wrong with how to handle forwarding the ref in Select - could you take a look when you get some time?
There was a problem hiding this comment.
Popover is overriding the ref prop of this control element
let controlProps = {
onClick: onClickFunctions,
ref: (c) => {
this.controlRef = findDOMNode(c);
}
};I'll see if there's way to extend the ref, but still maintain the original ref somehow
There was a problem hiding this comment.
I think we need to do something like this in Popover
let controlProps = {
onClick: onClickFunctions,
ref: (c) => {
this.controlRef = findDOMNode(c);
if (typeof control.ref === 'function') {
control.ref(c);
} else if (typeof control.ref === 'object') {
control.ref.current = c;
}
}
};
src/Select/Select.js
Outdated
| require('fundamental-styles/dist/select.css'); | ||
| } | ||
| }, []); | ||
|
|
||
| const divRef = ref ? ref : useRef(null); |
There was a problem hiding this comment.
We shouldn't conditionally call a hook
const internalDivRef = useRef(null);
const divRef = ref || internalDivRef;
src/StepInput/StepInput.js
Outdated
| 'is-disabled': disabled, | ||
| 'is-readonly': readOnly, | ||
| [`is-${validationState?.state}`]: validationState ?.state |
There was a problem hiding this comment.
I wonder why eslint doesn't pick up on this line having an extra space validationState ?.state
There was a problem hiding this comment.
I'm not sure - good catch though!
| case 'space': | ||
| e.stopPropagation(); | ||
| handleSelect(e, option); | ||
| setFocusedElement(tryFocus(divRef.current)); |
There was a problem hiding this comment.
It looks like the intent of the enter and space is to close the select. This isn't happening.
For some reason it is calling the handleClick immediately after the handleSelect and the handleClick is toggling the isExpanded state back to true
There was a problem hiding this comment.
It works as expected if you call e.preventDefualt(); though
| @@ -1,60 +1,5 @@ | |||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | |||
|
|
|||
| exports[`Storyshots Visual Button Group 1`] = ` | |||
There was a problem hiding this comment.
this was a duplicate of the same storyshot below
Description
BREAKING CHANGES:
Panel: renamedLayoutPanelSelect: underlying html changesStepInput: underlying html changesTile: removedactivepropTile:onClickprop now required - all tiles are clickable by defaultTile: removedproductTilepropTile: removedtabIndexprop (no longer necessary because they are always buttons now)Tile.ActionsremovedTile.MediaremovedTile.Contentno longer takes atitleprop - this should now be added as a child toTile.HeaderTile.Content: removedheadingLevelpropTile.Content: removedtitlePropspropTile.Content: removedproductTilepropTile.Content: underlying html changes related to removal of titleFeatures:
List.Item: addselectedstateSelect: keyboard handling + focus handlingStepInput: newcompactstateTile: newisDoubleprop (this is a bad name Help!) - maxes tile 2x1Tile: newsizepropTile.Header: new subcomponentTile.Footer: new subcomponentTile.Content: newtwoColumnsprop - enabled Content to be split into 2 columnsFixes:
fixes #1071