refactor: [M3-7542] - TagsInput & TagsPanel Storybook v7 Stories #9963
Conversation
abailly-akamai
force-pushed
the
M3-7542
branch
from
2042f0a to
d7aa486
Compare
| @@ -89,7 +89,6 @@ const preview: Preview = { | |||
| <Description /> | |||
| <Primary /> | |||
| <Controls /> | |||
| <Stories /> | |||
There was a problem hiding this comment.
Listing all stories in documentation often leads to state issues and it will make things a bit easier to test visual regression by focusing on individual stories.
Documentation is meant to be a playground on the default rendering of the component.
We can always put it back in if people feel it's necessary.
There was a problem hiding this comment.
I'm actually a bit confused where this is referring to 😅 - is this regarding the Documentation section of each story, like here:
There was a problem hiding this comment.
It's to show the list of stories in the Documentation page under the args table
abailly-akamai
requested review from
jdamore-linode,
dwiley-akamai and
coliu-akamai
and removed request for
a team
|
Coverage Report: ✅ |
| @@ -89,7 +89,6 @@ const preview: Preview = { | |||
| <Description /> | |||
| <Primary /> | |||
| <Controls /> | |||
| <Stories /> | |||
There was a problem hiding this comment.
I'm actually a bit confused where this is referring to 😅 - is this regarding the Documentation section of each story, like here:
|
|
||
| return ( | ||
| <Box sx={{ height: 300 }}> | ||
| <TagsPanel {...args} tags={tags} updateTags={handleUpdateTags} /> |
There was a problem hiding this comment.
Should we have better support for disabled and align?
Currently when it's disabled, we lose the click-X-to-remove functionality for tags, but new tags can still be added (this isn't possible in prod Storybook).
Changing the selection for align doesn't seem to have any effect at all (this is true in prod Storybook also).
There was a problem hiding this comment.
Currently when it's disabled, we lose the click-X-to-remove functionality for tags, but new tags can still be added (this isn't possible in prod Storybook).
I wasn't able to reproduce this but I remove align cause it's used nowhere and not even forwarded
| disabled: false, | ||
| hideLabel: false, | ||
| label: '', | ||
| menuPlacement: 'bottom', |
There was a problem hiding this comment.
Should we have better support for menuPlacement? Toggling between "top" and "bottom" has no effect (it's broken in prod Storybook also)
There was a problem hiding this comment.
I also wasn't able to reproduce this - menu placement gets toggled as expected. I did improve the styling of the story so the select sits in the middle of the canvas to help viewing it better tho.
abailly-akamai
force-pushed
the
M3-7542
branch
from
eff758d to
baa799f
Compare
|
|
||
| const queryClient = new QueryClient(); | ||
|
|
||
| const renderWithQueryClient = (ui: any) => { |
There was a problem hiding this comment.
Can we type this? Not sure if JSX.Element is the best or not
Also, should we move this to packages/manager/src/utilities/testHelpers.tsx?
| const renderWithQueryClient = (ui: any) => { | |
| const renderWithQueryClient = (ui: JSX.Element) => { |
There was a problem hiding this comment.
ah yes i left this one out. sure thing - we can be more specific too using
React.ReactElement<TagsPanelProps>
There was a problem hiding this comment.
also moved Tag there - makes sense!
bnussman-akamai
added
Approved
Description 📝
Small PR to handle
.tsxv7 stories forTagsInput&TagsPanelThere is no change that should affect client-side code. This only touches our book.
Changes 🔄
TagsInput&TagsPanelTagsPanelTagsPanel)Preview 📷
How to test 🧪
Verification steps
yarn storybookyarn test TagsPanel.test.tsxAs an Author I have considered 🤔
Check all that apply