feat(storybook): modifiers table added to docs #3195

castastrophe · 2024-10-02T17:06:41Z

Description

This creates a custom DocBlock for our docs that displays the boilerplate text for mods on the docs site. I called this component a PropertiesTable with the hope that we can eventually expand this component to document all the custom properties being used by the component.

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

@jawinn

Expect to see a new section added to each component between the ArgsTable and the TaggedReleases (suggest picking 5 pages at random to validate).
Expect heading "Modifiable custom properties" show a link on hover and when the icon is selected, a direct link to that section is added to the window location.
Expect pages like actionmenu to have no custom properties table (as it has no custom properties).

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-10-02T17:06:45Z

⚠️ No Changeset found

Latest commit: c8f2a26

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-10-02T17:15:01Z

File metrics

Summary

Total size: 4.31 MB^*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2024-10-02T17:20:49Z

🚀 Deployed on https://pr-3195--spectrum-css.netlify.app

jawinn

The table showing the list of mods is a great addition.

The two bigger things I noticed when validating:

The anchor link does not appear in the URL after clicking the "Modifiable custom properties" heading, like it does when clicking the other headings on the page
The copy event is logging multiple times for a single click (noted below)

Personally, the copy to clipboard and toast functionality feels excessive to me, for a text list of properties. Would users be copying them that often?

It also may be a little unexpected behavior right now, as the rows show as clickable but without indication that a click would result in changing the contents of the clipboard; one might expect a click would show or link to more information, and it's only clear what will happen after you click one.

.storybook/blocks/PropertiesTable.jsx

jawinn · 2024-10-08T21:02:51Z

.storybook/project.json

What are these changes to project.json and does this need to be validated?

It ensures the report is run before the storybook is built so that every component has the latest metadata.json available for the doc block.

.storybook/blocks/PropertiesTable.jsx

marissahuysentruyt

This is looking excellent! Having the mods surfaced like this will be really helpful I think.

Most of my comments are just questions, but I did see that progress bar is missing the metadata and packageJson imports (I'm assuming you don't want to wait for the fix in the resource link PR 😆)

.storybook/blocks/Typography.jsx

components/progressbar/stories/progressbar.stories.js

components/inlinealert/stories/inlinealert.stories.js

components/checkbox/stories/checkbox.stories.js

components/pickerbutton/stories/pickerbutton.stories.js

components/stepper/stories/stepper.stories.js

components/swatchgroup/stories/swatchgroup.stories.js

generator/templates/stories/{{ folderName }}.stories.js.hbs

components/typography/stories/typography.mdx

.storybook/blocks/PropertiesTable.jsx

castastrophe · 2024-10-09T16:32:01Z

Expect heading "Modifiable custom properties" show a link on hover and when the icon is selected, a direct link to that section is added to the window location.

@jawinn Just pushed up a fix for this - apparently vanilla HTML anchor linking doesn't work b/c React haha so I found an example of how they're doing it in the other Storybook docs and mimic'ed that. It seems to be working well now.

.storybook/blocks/PropertiesTable.jsx

marissahuysentruyt

Thanks for making all of those updates! This is looking really good 🤩 I just had one more comment on the modifiers array for field group!

.storybook/blocks/PropertiesTable.jsx

jawinn

This looks good to me; my previous comments are addressed. The only thing I see is what Marissa already called out for Field group.

jawinn · 2024-10-11T17:15:46Z

.storybook/blocks/PropertiesTable.jsx

+				These are empty CSS custom property hooks available in this component
+				that enable one-off customizations specific to a product implementation.
+			</Body>
+			<Table className="docblock-properties-table sb-unstyled spectrum-Table spectrum-Table--sizeL spectrum-Table--compact">


Small suggestion: I'd add --mod-table-cursor-row-default: auto to the .docblock-properties-table so it doesn't show a pointer.

Oh good idea, yes. I added that and pushed up.

marissahuysentruyt

Thanks for all of this- it looks great!

castastrophe self-assigned this Oct 2, 2024

castastrophe added size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. skip_vrt Add to a PR to skip running VRT (but still pass the action) storybook s1 labels Oct 2, 2024

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from 3c58016 to a80c7c6 Compare October 2, 2024 17:07

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from a80c7c6 to 58cdcfe Compare October 2, 2024 17:17

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch 2 times, most recently from f75b826 to aac5345 Compare October 4, 2024 14:46

castastrophe marked this pull request as ready for review October 4, 2024 14:47

castastrophe added the ready-for-review label Oct 4, 2024

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from aac5345 to 3392907 Compare October 4, 2024 16:21

jawinn self-requested a review October 8, 2024 16:58

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from 3392907 to 6a991cf Compare October 8, 2024 17:30

jawinn requested changes Oct 9, 2024

View reviewed changes

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch 2 times, most recently from 688bc30 to 8d4e8e0 Compare October 9, 2024 15:52

marissahuysentruyt requested changes Oct 9, 2024

View reviewed changes

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from 8d4e8e0 to 86dc54a Compare October 9, 2024 16:30

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from 86dc54a to 995160e Compare October 9, 2024 16:32

marissahuysentruyt reviewed Oct 9, 2024

View reviewed changes

.storybook/blocks/PropertiesTable.jsx Outdated Show resolved Hide resolved

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch 2 times, most recently from ba665e0 to bc5021a Compare October 11, 2024 14:15

castastrophe requested review from jawinn and marissahuysentruyt October 11, 2024 14:17

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from bc5021a to 8cfec9a Compare October 11, 2024 14:50

marissahuysentruyt reviewed Oct 11, 2024

View reviewed changes

.storybook/blocks/PropertiesTable.jsx Show resolved Hide resolved

jawinn approved these changes Oct 11, 2024

View reviewed changes

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from 8cfec9a to 2d49004 Compare October 11, 2024 18:27

feat(storybook): modifiers table added to docs

c8f2a26

castastrophe force-pushed the castastrophe/css-773-mods-doc-block branch from 2d49004 to c8f2a26 Compare October 11, 2024 18:29

marissahuysentruyt approved these changes Oct 11, 2024

View reviewed changes

castastrophe merged commit 19477ac into main Oct 11, 2024
12 checks passed

castastrophe deleted the castastrophe/css-773-mods-doc-block branch October 11, 2024 19:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(storybook): modifiers table added to docs #3195

feat(storybook): modifiers table added to docs #3195

castastrophe commented Oct 2, 2024 •

edited by marissahuysentruyt

Loading

changeset-bot bot commented Oct 2, 2024 •

edited

Loading

github-actions bot commented Oct 2, 2024 •

edited

Loading

github-actions bot commented Oct 2, 2024 •

edited

Loading

jawinn left a comment

jawinn Oct 8, 2024

castastrophe Oct 9, 2024

marissahuysentruyt left a comment

castastrophe commented Oct 9, 2024

marissahuysentruyt left a comment

jawinn left a comment

jawinn Oct 11, 2024

castastrophe Oct 11, 2024

marissahuysentruyt left a comment

feat(storybook): modifiers table added to docs #3195

feat(storybook): modifiers table added to docs #3195

Conversation

castastrophe commented Oct 2, 2024 • edited by marissahuysentruyt Loading

Description

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Oct 2, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Oct 2, 2024 • edited Loading

File metrics

Summary

github-actions bot commented Oct 2, 2024 • edited Loading

jawinn left a comment

Choose a reason for hiding this comment

jawinn Oct 8, 2024

Choose a reason for hiding this comment

castastrophe Oct 9, 2024

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

castastrophe commented Oct 9, 2024

marissahuysentruyt left a comment

Choose a reason for hiding this comment

jawinn left a comment

Choose a reason for hiding this comment

jawinn Oct 11, 2024

Choose a reason for hiding this comment

castastrophe Oct 11, 2024

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

castastrophe commented Oct 2, 2024 •

edited by marissahuysentruyt

Loading

changeset-bot bot commented Oct 2, 2024 •

edited

Loading

github-actions bot commented Oct 2, 2024 •

edited

Loading

github-actions bot commented Oct 2, 2024 •

edited

Loading