feat(storybook): add a shared decorator for group rendering and static color settings

[castastrophe]

Description

Many storybook stories require adding layout and/or padding in order to view variants together or snapshot focus states. The goal of this PR is to unify this effort in a shared decorator that can be customized using a new customStorybookStyles object that is leveraged in a story's args settings.

The default storybook styles applied by the decorator are:

const customStorybookStyles = {
  /** @todo: do we really want flex as our default display type? does this make development harder b/c we have to consider how it impacts a component or is it helpful so we can stack components in a view easily? */
  display: "flex",
  // automatically set the background color for static color settings
  backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
  // Gap is only supported for flex and grid so we don't need to set it for other display types
  gap: customStyles.gap ?? (!customStyles.display || customStyles.display && ["flex", "grid"].some(d => customStyles.display.endsWith(d))) ? "10px" : undefined,
  padding: customStyles.padding ?? (customStyles.display && ["flex", "grid", "contents"].every(d => !customStyles.display.endsWith(d))) ? "10px 0" : undefined,
  ...customStyles,
};

Any settings added by the story will override these values. You can unset a value completely using undefined, i.e.:

customStorybookStyles: {
  display: undefined,
}

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

• Accordion: overrides padding settings to 0
• Action bar: overrides display to use "contents" (instead of flex)
• Alert banner: sets flex-direction to "column" (instead of default value of row)
• Checkbox:
  • flex-direction: column
  • gap is unset (should not appear in stylesheet)
  • padding: 1rem
• Opacity checkerboard: inline & block size is 100px
• Radio: flex-direction is "column" and align-items is "flex-start" (instead of default of stretch)
• Stepper: flex-direction is "column" and align-items is "flex-start"
• All other components should default to:
  • display: flex
  • background-color: transparent (unless static-white or static-black settings are active)
  • gap: 1rem

Note: All values set by this decorator should appear as inline-styles assigned to the #root-inner element.

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 3.92 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.

[mdt2]

Continuing review on this one! Here's a few more comments. Also, once I've clicked on a static color story, I'm seeing that background color persist after I click away to a different, non-static-color story. 🤔

[mdt2]

I dig this refactoring with when that you're doing throughout this PR 👍

[mdt2]

Ok I've officially looked at all the code changes 🎉 Between my reviews, it looks like there's a few things to be addressed, so let me know when you need a re-review from me.

[mdt2]

Seems like the visual differences I was seeing in ActionMenu are probably due to these changes in popover. This has been a notoriously tricky one. Recently I did some work to address an issue with Storybook not having the correct offset which seems to be reverted with this refactor (though I agree a refactor is a good idea for this component). And we had so much trouble with nested popovers that we chose to show them statically. Hopefully you can find a way to use this refactored code and still have the offset reflect the spec.

[mdt2]

hahaha excellent