spectrum-css
spectrum-css copied to clipboard
docs(modal,pagination,pickerbutton): site docs to storybook
Description
This continues the migration work to move the documentation from the deprecated docs site to Storybook, covering the components Modal, Pagination, and Picker button. Variants shown on the docs site for these components have been added to Storybook as new stories if they did not already exist. No custom MDX files were needed for these components.
Component-specific changes and notes:
- Modal
- Updates docs text and sets Docs story to
inline: false
to avoid it being cut off horizontally - Update to Storybook's decorators that set the background color, to make sure that the modal can be distinguished from the background (like on the docs page); this makes the results of its "variant" control more clear.
- Updates docs text and sets Docs story to
- Pagination
- Makes sure pagination variants are included in the Storybook docs. Note: the "button" style variant is represented in VRTs but not included for users as it is using the deprecated Split button component. I wasn't sure about the best way to document this as deprecated. That variant has no unique CSS and is basically just a Split button with two classes added.
- Picker button
- Creates docs only stories to cover what is on the docs site
- Moves old migration notes to the changelog
- Note on the "Custom icon only" variant from the docs site: this appears to be using a workflow icon but is using the class
spectrum-PickerButton--uiicononly
that gets rid of the padding. It's unclear whether this class should be named something else that applies to both icon sets, ifspectrum-PickerButton--icononly
should use the same CSS (this currently is applied in Storybook if a workflow icon is used), if the component really should only allow UI icons, or if the wrong class was used in the example. I've included both a UI icon and a workflow icon on the Docs story in order to show that these render differently (withoutspectrum-PickerButton--uiicononly
there is extra padding on the left and right).
How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
- Modal - includes all necessary information compared to the docs site
- Pagination - includes all necessary information compared to the docs site 1 docs site 2
- Picker button - includes all necessary information compared to the docs site
Regression testing
Expected VRT changes: label added to quiet Picker button.
Validate:
- The documentation pages for at least two other components are still loading, including:
- [x] The pages render correctly, are accessible, and are responsive.
- If components have been modified, VRTs have been run on this branch:
- [ ] VRTs have been run and looked at.
- [ ] Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.
To-do list
- [x] I have read the contribution guidelines.
- [x] I have updated relevant storybook stories and templates.
- [x] If my change impacts documentation, I have updated the documentation accordingly.
- [ ] ✨ This pull request is ready to merge. ✨