chore(demo): refactor storybook #1265
Conversation
The stories are definitely not the same, nor intended to be. The updates fall in line with the new |
|
I noticed with
|
Similar to the website this is indicating that |
|
There seems to be styling divergence between old Grid and new Grid docs: Old Was this intended? |
@mtomcal yes, this Grid demo is rendering as intended. Demos should render the default state initially and then offer controls (in this case, See previous #1265 (comment) re: similar observation. |
When I see this, I ask myself, "what am I looking at?". I am not sure when I see this. Any chance this could be documented in the story itself about the presence of the "debug" toggle? |
My preference is to keep the component demos essentially doc-free. Given that the Grid demo in particular has caused repeated concern, how would you feel about making an exception for the "default state" rule and allowing |
|
It might be easiest to show the "Docs" tab first then the "Canvas" tab which documents the "debug" toggle front and center. This gives me context and information about this more abstract demo.
Another storybook from the Azure team shows the "Docs" first then the "Preview" (similar to "Canvas") tab. This might also help document the case mentioned here as well: #1265 (comment) |
|
Aside from documenting how to use the demo, this is an amazing update and epic reorganization of the stories. Im looking forward to using this for Splitter component. 👏 |
Garden determined early on that the Canvas was most valuable to the greater audience (design + dev). I'm not keen to reverse that decision here. |
|
@jzempel What would you suggest on messaging "how to use this abstract demo" to the developer? |
@mtomcal sorry, I'm not tracking with you. We're not super interested in documenting "how to use this" as it is primarily a tool for Garden visual testing and the how-to boils down to familiarity with Storybook 6.x. The Garden team is expected to be familiar with Storybook 6.x. |
|
@jzempel Let's take this offline then and follow up there. Thanks! |
| hint = 'Hint', | ||
| hasMessage = true, | ||
| message = 'Message', | ||
| validation, |
There was a problem hiding this comment.
I couldn't tell where this was defined in the story. Can you point me to where it can be found?
There was a problem hiding this comment.
In dropdowns (and fields) validation is a concept that spans both the input and associated Message component. In the case you referenced, it applies styling to both the Combobox and associated Field > Message component. The same control can be seen with dropdowns Autocomplete, Multiselect, Select and similar "Forms" components.
We don't have solid design evidence that validation should apply (as it currently does) disparate from input & message. But the current implementation allows for cases we don't know about.
There was a problem hiding this comment.
p.s. The MDX story does not (should not) need to expose props as args which are inherent in the component identified in <Meta>. Which, in this case, is Combobox and includes validation, focusInset, isBare, isCompact, etc.
| // Reset Downshift refs on every render | ||
| itemIndexRef.current = 0; | ||
| nextItemsHashRef.current = {}; | ||
| previousIndexRef.current = undefined; | ||
| itemSearchRegistry.current = []; | ||
|
|
||
| const popperPlacement = isRtl(props) | ||
| const popperPlacement = themeContext.rtl |
There was a problem hiding this comment.
Do you remember if there are any more instances of isRtl we should modernize or did we get them all? We could track the rest for a future date if there are any left.
There was a problem hiding this comment.
I think we got em' all 😅. My "element" component typedef work will tell us for certain. And we'll follow-on deprecate isRtl for removal in v9.
Description
This PR represents a pretty massive overhaul of the Storybook component demos. You might find that reading through the new demo documentation is the best way to get acquainted with the refactored code.
Detail
Highlights include:
/demofolders to better align with other Garden repos(@smritimadan this recent staging deployment can be used, as needed, for ongoing API doc recovery efforts.)
Checklist
design updates are Garden Designer approved (add thedesigner as a reviewer)
yarn start)?bedrock)includes new unit tests