spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard
verified publisher icon adobe

feat(toast): migrate to Spectrum 2

Open pfulton opened this issue 1 year ago • 4 comments

Description

Migration of Toast component to Spectrum 2 tokens/styles. Includes:

  • Adjustments to how spacing is applied in the component (for example, spacing related to close button is now applied to close button or it's container)
  • Renaming of tokens mentioning "divider" since there's no divider in S2 toast
  • Mod changes:
    • --mod-toast-divider-color has been removed. There is no divider included in this version of Toast.
    • --mod-toast-spacing-text-and-action-button-to-divider has been renamed to --spectrum-toast-spacing-action-button-to-close-button
    • --mod-toast-spacing-top-edge-to-divider has been renamed to --mod-toast-spacing-top-edge-to-close-button
    • --mod-toast-spacing-bottom-edge-to-divider has been renamed to --mod-toast-spacing-bottom-edge-to-close-button
    • --mod-toast-spacing-close-button has been renamed to --mod-toast-spacing-close-button-to-edge
  • Removal of unneeded Spectrum/Express theme CSS files
  • Fixing linting errors in the Storybook template

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

  • [ ] Toast tokens match the design spec for S2
  • [ ] Check all variants in storybook:
    • [ ] Only text and close button
    • [ ] Text, action button, and close button
    • [ ] Icon, text, and close button
    • [ ] Icon, text, action button, and close button
  • [ ] Updated mods don't have typos
  • [ ] Check that LTR/RTL look right, specifically when an action button is wrapping

To-do list

  • [x] I have read the contribution guidelines.
  • [x] I have updated relevant storybook stories and templates.
  • [x] 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. ✨

pfulton avatar Mar 20 '24 20:03 pfulton

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

github-actions[bot] avatar Mar 20 '24 20:03 github-actions[bot]

File metrics

Summary

Total size: 4.48 MB* Total change (Δ): ⬇ 27.52 KB (-0.60%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package Size Δ
actionbutton 41.24 KB ⬆ 0.28 KB
actiongroup 5.73 KB ⬇ 2.79 KB
button 83.15 KB ⬆ 0.09 KB
buttongroup 1.38 KB ⬇ 0.53 KB
card 22.88 KB ⬆ 0.35 KB
checkbox 25.10 KB ⬆ 0.17 KB
closebutton 11.79 KB ⬇ 4.35 KB
dial 11.56 KB ⬇ < 0.01 KB
fieldlabel 6.42 KB ⬇ 0.24 KB
logicbutton 9.00 KB ⬇ 0.38 KB
modal 5.23 KB ⬇ < 0.01 KB
page 0.72 KB ⬇ < 0.01 KB
picker 30.67 KB ⬇ 0.20 KB
slider 33.18 KB ⬇ 0.01 KB
splitview 11.42 KB ⬇ < 0.01 KB
table 47.17 KB ⬇ < 0.01 KB
toast 8.60 KB ⬇ 0.64 KB
tokens 200.84 KB ⬆ 1.63 KB

Details

actionbutton

File Head Base Δ
index-base.css 30.17 KB 29.90 KB ⬆ 0.28 KB (0.90%)
index-theme.css 11.65 KB 11.65 KB -
index-vars.css 41.24 KB 40.97 KB ⬆ 0.28 KB (0.66%)
index.css 41.24 KB 40.97 KB ⬆ 0.28 KB (0.66%)
metadata.json 17.55 KB 17.43 KB ⬆ 0.13 KB (0.71%)
themes/express.css 8.92 KB 8.92 KB -
themes/spectrum.css 9.11 KB 9.11 KB -

actiongroup

File Head Base Δ
index-base.css 5.73 KB 8.04 KB ⬇ 2.31 KB (-28.75%)
index-theme.css 0.59 KB 1.06 KB ⬇ 0.49 KB (-45.10%)
index-vars.css 5.73 KB 8.52 KB ⬇ 2.79 KB (-32.74%)
index.css 5.73 KB 8.52 KB ⬇ 2.79 KB (-32.74%)
metadata.json 2.61 KB 3.41 KB ⬇ 0.82 KB (-23.54%)
themes/express.css 0.59 KB 0.89 KB ⬇ 0.29 KB (-33.11%)
themes/spectrum.css 0.59 KB 0.79 KB ⬇ 0.19 KB (-24.62%)

button

File Head Base Δ
index-base.css 53.20 KB 53.11 KB ⬆ 0.09 KB (0.16%)
index-theme.css 30.53 KB 30.53 KB -
index-vars.css 83.15 KB 83.06 KB ⬆ 0.09 KB (0.10%)
index.css 83.15 KB 83.06 KB ⬆ 0.09 KB (0.10%)
metadata.json 33.77 KB 33.56 KB ⬆ 0.22 KB (0.65%)
themes/express.css 29.33 KB 29.33 KB -
themes/spectrum.css 29.40 KB 29.40 KB -

buttongroup

File Head Base Δ
index-base.css 1.38 KB 1.90 KB ⬇ 0.53 KB (-27.32%)
index-vars.css 1.38 KB 1.90 KB ⬇ 0.53 KB (-27.32%)
index.css 1.38 KB 1.90 KB ⬇ 0.53 KB (-27.32%)
metadata.json 0.53 KB 0.64 KB ⬇ 0.11 KB (-16.98%)

card

File Head Base Δ
index-base.css 22.88 KB 22.53 KB ⬆ 0.35 KB (1.53%)
index-vars.css 22.88 KB 22.53 KB ⬆ 0.35 KB (1.53%)
index.css 22.88 KB 22.53 KB ⬆ 0.35 KB (1.53%)
metadata.json 9.71 KB 9.50 KB ⬆ 0.21 KB (2.21%)

checkbox

File Head Base Δ
index-base.css 24.48 KB 24.32 KB ⬆ 0.17 KB (0.67%)
index-theme.css 1.20 KB 1.20 KB -
index-vars.css 25.10 KB 24.94 KB ⬆ 0.17 KB (0.65%)
index.css 25.10 KB 24.94 KB ⬆ 0.17 KB (0.65%)
metadata.json 13.50 KB 13.16 KB ⬆ 0.36 KB (2.66%)
themes/express.css 0.92 KB 0.92 KB -
themes/spectrum.css 0.91 KB 0.91 KB -

closebutton

File Head Base Δ
index-base.css 11.46 KB 15.50 KB ⬇ 4.03 KB (-26.01%)
index-theme.css 0.93 KB 1.22 KB ⬇ 0.33 KB (-26.00%)
index-vars.css 11.79 KB 16.14 KB ⬇ 4.35 KB (-26.95%)
index.css 11.79 KB 16.14 KB ⬇ 4.35 KB (-26.95%)
metadata.json 4.99 KB 8.09 KB ⬇ 3.10 KB (-38.32%)
themes/express.css 0.93 KB 0.93 KB -
themes/spectrum.css 0.92 KB 0.92 KB -

dial

File Head Base Δ
index-base.css 11.56 KB 11.56 KB ⬇ < 0.01 KB (-0.01%)
index-vars.css 11.56 KB 11.56 KB ⬇ < 0.01 KB (-0.01%)
index.css 11.56 KB 11.56 KB ⬇ < 0.01 KB (-0.01%)
metadata.json 4.85 KB 4.85 KB ⬇ < 0.01 KB (-0.02%)

fieldlabel

File Head Base Δ
index-base.css 6.42 KB 6.65 KB ⬇ 0.24 KB (-3.48%)
index-vars.css 6.42 KB 6.65 KB ⬇ 0.24 KB (-3.48%)
index.css 6.42 KB 6.65 KB ⬇ 0.24 KB (-3.48%)
metadata.json 3.59 KB 3.41 KB ⬆ 0.18 KB (5.27%)

logicbutton

File Head Base Δ
index-base.css 9.00 KB 9.37 KB ⬇ 0.38 KB (-3.91%)
index-vars.css 9.00 KB 9.37 KB ⬇ 0.38 KB (-3.91%)
index.css 9.00 KB 9.37 KB ⬇ 0.38 KB (-3.91%)
metadata.json 4.10 KB 4.23 KB ⬇ 0.13 KB (-3.09%)

modal

File Head Base Δ
index-base.css 5.23 KB 5.23 KB ⬇ < 0.01 KB (-0.02%)
index-vars.css 5.23 KB 5.23 KB ⬇ < 0.01 KB (-0.02%)
index.css 5.23 KB 5.23 KB ⬇ < 0.01 KB (-0.02%)
metadata.json 1.82 KB 1.82 KB ⬇ < 0.01 KB (-0.05%)

page

File Head Base Δ
index-base.css 0.72 KB 0.72 KB ⬇ < 0.01 KB (-0.14%)
index-vars.css 0.72 KB 0.72 KB ⬇ < 0.01 KB (-0.14%)
index.css 0.72 KB 0.72 KB ⬇ < 0.01 KB (-0.14%)
metadata.json 0.15 KB 0.15 KB ⬇ < 0.01 KB (-0.68%)

picker

File Head Base Δ
index-base.css 28.78 KB 28.98 KB ⬇ 0.20 KB (-0.68%)
index-theme.css 2.46 KB 2.46 KB -
index-vars.css 30.67 KB 30.87 KB ⬇ 0.20 KB (-0.64%)
index.css 30.67 KB 30.87 KB ⬇ 0.20 KB (-0.64%)
metadata.json 14.55 KB 14.65 KB ⬇ 0.10 KB (-0.67%)
themes/express.css 1.47 KB 1.47 KB -
themes/spectrum.css 1.57 KB 1.57 KB -

slider

File Head Base Δ
index-base.css 30.87 KB 30.87 KB ⬇ < 0.01 KB (-0.01%)
index-theme.css 2.89 KB 2.89 KB ⬇ < 0.01 KB (-0.10%)
index-vars.css 33.18 KB 33.18 KB ⬇ 0.01 KB (-0.01%)
index.css 33.18 KB 33.18 KB ⬇ 0.01 KB (-0.01%)
metadata.json 13.70 KB 13.70 KB ⬇ < 0.01 KB (-0.01%)
themes/express.css 1.75 KB 1.75 KB -
themes/spectrum.css 1.72 KB 1.72 KB ⬇ < 0.01 KB (-0.17%)

splitview

File Head Base Δ
index-base.css 11.42 KB 11.42 KB ⬇ < 0.01 KB (-0.01%)
index-vars.css 11.42 KB 11.42 KB ⬇ < 0.01 KB (-0.01%)
index.css 11.42 KB 11.42 KB ⬇ < 0.01 KB (-0.01%)
metadata.json 4.58 KB 4.59 KB ⬇ < 0.01 KB (-0.02%)

table

File Head Base Δ
index-base.css 47.17 KB 47.17 KB ⬇ < 0.01 KB (-0.00%)
index-vars.css 47.17 KB 47.17 KB ⬇ < 0.01 KB (-0.00%)
index.css 47.17 KB 47.17 KB ⬇ < 0.01 KB (-0.00%)
metadata.json 21.85 KB 21.85 KB ⬇ < 0.01 KB (-0.00%)

toast

File Head Base Δ
index-base.css 8.60 KB 8.98 KB ⬇ 0.39 KB (-4.25%)
index-vars.css 8.60 KB 9.22 KB ⬇ 0.64 KB (-6.76%)
index.css 8.60 KB 9.22 KB ⬇ 0.64 KB (-6.76%)
metadata.json 4.30 KB 4.45 KB ⬇ 0.15 KB (-3.34%)
index-theme.css - 0.84 KB 🚨 deleted, moved, or renamed
themes/express.css - 0.72 KB 🚨 deleted, moved, or renamed
themes/spectrum.css - 0.72 KB 🚨 deleted, moved, or renamed

tokens

File Head Base Δ
css/dark-vars.css 36.07 KB 24.57 KB ⬆ 11.50 KB (46.80%)
css/express/custom-dark-vars.css 0.59 KB 0.59 KB -
css/express/custom-darkest-vars.css 0.59 KB 0.59 KB -
css/express/custom-large-vars.css 0.50 KB 0.50 KB -
css/express/custom-light-vars.css 0.63 KB 0.63 KB -
css/express/custom-medium-vars.css 0.48 KB 0.48 KB -
css/express/custom-vars.css 0.04 KB 0.04 KB -
css/global-vars.css 49.64 KB 38.23 KB ⬆ 11.41 KB (29.85%)
css/large-vars.css 27.44 KB 24.40 KB ⬆ 3.04 KB (12.45%)
css/light-vars.css 36.07 KB 24.55 KB ⬆ 11.52 KB (46.91%)
css/medium-vars.css 27.36 KB 24.33 KB ⬆ 3.03 KB (12.46%)
css/spectrum/custom-dark-vars.css 3.40 KB 3.40 KB -
css/spectrum/custom-darkest-vars.css 3.40 KB 3.40 KB -
css/spectrum/custom-large-vars.css 4.68 KB 4.68 KB -
css/spectrum/custom-light-vars.css 3.40 KB 3.40 KB -
css/spectrum/custom-medium-vars.css 4.92 KB 4.92 KB -
css/spectrum/custom-vars.css 2.18 KB 2.04 KB ⬆ 0.15 KB (7.00%)
index.css 200.84 KB 199.21 KB ⬆ 1.63 KB (0.82%)
css/darkest-vars.css - 24.53 KB 🚨 deleted, moved, or renamed
css/express/global-vars.css - 2.39 KB 🚨 deleted, moved, or renamed
css/express/large-vars.css - 2.52 KB 🚨 deleted, moved, or renamed
css/express/medium-vars.css - 2.51 KB 🚨 deleted, moved, or renamed
css/spectrum/global-vars.css - 2.74 KB 🚨 deleted, moved, or renamed
css/spectrum/large-vars.css - 2.32 KB 🚨 deleted, moved, or renamed
css/spectrum/medium-vars.css - 2.32 KB 🚨 deleted, moved, or renamed
* 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[bot] avatar Mar 20 '24 20:03 github-actions[bot]

Thanks for the reviews!

In response to @jawinn's feedback:

  • Figma comparison: I'll ask about these differences when I send this to design review, thanks for the callouts
  • Docs: Will update these 👍
  • Storybook: I'll work on getting the controls to align more with other components. For the render hooks, since this is an existing issue I'd prefer to punt this to a separate card/PR

In response to @rise-erpelding's feedback:

  • Re: toast to edge spacing (from the outside of toast): We don't have much of a convention around this. It's come up as something that users would be interested in (for example, including space in a component to include the space needed for a focus state), and I think we have a card in the backlog to explore it more.
  • Icon to text spacing: I'm seeing in the design that this should be text-to-visual-300, and that's what I've defined on this token which is already used in the code. Are you referring to a different token maybe? Once I get the S2 icons for this, I'll definitely be going in to double check that all icon-related spacing is aligned with Figma, this is a good callout.
  • Background-color and color: I can't see a reason to set color here 🤔 This might be a leftover thing from a previous migration. I'll look into removing it.

mdt2 avatar Apr 02 '24 17:04 mdt2

Those updates look good to address my suggestions for the docs and Storybook. One small thing; I noticed that the variant control was not set on the "Default" story, since Storybook defaults to undefined. Could you set the default for that control under args:?

jawinn avatar Apr 03 '24 20:04 jawinn

Closed as #3643 replicates this work

rise-erpelding avatar May 23 '25 19:05 rise-erpelding