Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: spectrum 2 #2352

Draft
wants to merge 89 commits into
base: s2-foundations-redux
Choose a base branch
from
Draft

feat!: spectrum 2 #2352

wants to merge 89 commits into from

Conversation

pfulton
Copy link
Collaborator

@pfulton pfulton commented Dec 8, 2023

🚨 DO NOT MERGE 🚨

Spectrum 2 migration branch

s2-gitflow

To-do:

  • Merge custom Spectrum & Express custom properties
  • Merge custom dark and darkest custom properties
  • Take in latest release of @adobe/spectrum-tokens

Copy link
Contributor

github-actions bot commented Dec 8, 2023

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

Copy link
Contributor

github-actions bot commented Dec 8, 2023

File metrics

Summary

Total size: 4.23 MB*
Total change (Δ): ⬇ 254.18 KB (-5.54%)

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.64 KB ⬆ 0.48 KB
actiongroup 5.65 KB ⬇ 2.75 KB
button 30.18 KB ⬇ 53.16 KB
buttongroup 1.39 KB ⬇ 0.24 KB
card 21.17 KB ⬆ 0.34 KB
checkbox 24.61 KB ⬆ 0.16 KB
closebutton 11.16 KB ⬇ 4.76 KB
dial 11.78 KB ⬇ < 0.01 KB
fieldlabel 6.31 KB ⬇ 0.26 KB
modal 5.40 KB ⬇ < 0.01 KB
opacitycheckerboard 1.68 KB ⬆ 0.18 KB
page 0.72 KB ⬇ < 0.01 KB
progressbar 10.88 KB ⬇ 0.06 KB
slider 32.79 KB ⬇ 0.01 KB
splitview 11.26 KB ⬇ < 0.01 KB
switch 25.27 KB ⬆ 0.70 KB
table 47.02 KB ⬇ < 0.01 KB
tokens 205.74 KB ⬆ 6.53 KB

Details

actionbutton

File Head Base Δ
index-base.css 30.45 KB 29.99 KB ⬆ 0.48 KB (1.56%)
index-theme.css 11.77 KB 11.77 KB -
index-vars.css 41.64 KB 41.17 KB ⬆ 0.48 KB (1.13%)
index.css 41.64 KB 41.17 KB ⬆ 0.48 KB (1.13%)
metadata.json 17.66 KB 17.44 KB ⬆ 0.23 KB (1.27%)
themes/express.css 9.01 KB 9.01 KB -
themes/spectrum.css 9.20 KB 9.20 KB -

actiongroup

File Head Base Δ
index-base.css 5.65 KB 7.91 KB ⬇ 2.26 KB (-28.59%)
index-theme.css 0.59 KB 1.07 KB ⬇ 0.50 KB (-45.60%)
index-vars.css 5.65 KB 8.39 KB ⬇ 2.75 KB (-32.73%)
index.css 5.65 KB 8.39 KB ⬇ 2.75 KB (-32.73%)
metadata.json 2.61 KB 3.42 KB ⬇ 0.82 KB (-23.52%)
themes/express.css 0.59 KB 0.90 KB ⬇ 0.30 KB (-33.63%)
themes/spectrum.css 0.59 KB 0.79 KB ⬇ 0.20 KB (-24.91%)

button

File Head Base Δ
index-base.css 30.18 KB 53.08 KB ⬇ 22.89 KB (-43.13%)
index-vars.css 30.18 KB 83.35 KB ⬇ 53.16 KB (-63.78%)
index.css 30.18 KB 83.35 KB ⬇ 53.16 KB (-63.78%)
metadata.json 11.52 KB 33.56 KB ⬇ 22.04 KB (-65.68%)
index-theme.css - 30.85 KB 🚨 deleted, moved, or renamed
themes/express.css - 29.64 KB 🚨 deleted, moved, or renamed
themes/spectrum.css - 29.71 KB 🚨 deleted, moved, or renamed

buttongroup

File Head Base Δ
index-base.css 1.39 KB 1.62 KB ⬇ 0.24 KB (-14.43%)
index-vars.css 1.39 KB 1.62 KB ⬇ 0.24 KB (-14.43%)
index.css 1.39 KB 1.62 KB ⬇ 0.24 KB (-14.43%)
metadata.json 0.53 KB 0.63 KB ⬇ 0.10 KB (-15.66%)

card

File Head Base Δ
index-base.css 21.17 KB 20.84 KB ⬆ 0.34 KB (1.58%)
index-vars.css 21.17 KB 20.84 KB ⬆ 0.34 KB (1.58%)
index.css 21.17 KB 20.84 KB ⬆ 0.34 KB (1.58%)
metadata.json 9.94 KB 9.73 KB ⬆ 0.22 KB (2.18%)

checkbox

File Head Base Δ
index-base.css 23.98 KB 23.83 KB ⬆ 0.16 KB (0.64%)
index-theme.css 1.21 KB 1.21 KB -
index-vars.css 24.61 KB 24.46 KB ⬆ 0.16 KB (0.63%)
index.css 24.61 KB 24.46 KB ⬆ 0.16 KB (0.63%)
metadata.json 13.27 KB 12.92 KB ⬆ 0.36 KB (2.71%)
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.16 KB 15.27 KB ⬇ 4.11 KB (-26.92%)
index-theme.css 0.93 KB 1.23 KB ⬇ 0.33 KB (-26.15%)
index-vars.css 11.16 KB 15.92 KB ⬇ 4.76 KB (-29.91%)
index.css 11.16 KB 15.92 KB ⬇ 4.76 KB (-29.91%)
metadata.json 4.78 KB 8.11 KB ⬇ 3.33 KB (-41.09%)
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.78 KB 11.78 KB ⬇ < 0.01 KB (-0.01%)
index-vars.css 11.78 KB 11.78 KB ⬇ < 0.01 KB (-0.01%)
index.css 11.78 KB 11.78 KB ⬇ < 0.01 KB (-0.01%)
metadata.json 5.23 KB 5.24 KB ⬇ < 0.01 KB (-0.02%)

fieldlabel

File Head Base Δ
index-base.css 6.31 KB 6.56 KB ⬇ 0.26 KB (-3.90%)
index-vars.css 6.31 KB 6.56 KB ⬇ 0.26 KB (-3.90%)
index.css 6.31 KB 6.56 KB ⬇ 0.26 KB (-3.90%)
metadata.json 3.59 KB 3.41 KB ⬆ 0.18 KB (5.27%)

modal

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

opacitycheckerboard

File Head Base Δ
index-base.css 1.68 KB 1.51 KB ⬆ 0.18 KB (11.54%)
index-vars.css 1.68 KB 1.51 KB ⬆ 0.18 KB (11.54%)
index.css 1.68 KB 1.51 KB ⬆ 0.18 KB (11.54%)
metadata.json 0.73 KB 0.61 KB ⬆ 0.12 KB (18.86%)

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%)

progressbar

File Head Base Δ
index-base.css 10.88 KB 10.93 KB ⬇ 0.06 KB (-0.49%)
index-vars.css 10.88 KB 10.93 KB ⬇ 0.06 KB (-0.49%)
index.css 10.88 KB 10.93 KB ⬇ 0.06 KB (-0.49%)
metadata.json 6.01 KB 5.93 KB ⬆ 0.08 KB (1.38%)

slider

File Head Base Δ
index-base.css 30.45 KB 30.45 KB ⬇ < 0.01 KB (-0.01%)
index-theme.css 2.92 KB 2.92 KB ⬇ < 0.01 KB (-0.10%)
index-vars.css 32.79 KB 32.79 KB ⬇ 0.01 KB (-0.01%)
index.css 32.79 KB 32.79 KB ⬇ 0.01 KB (-0.01%)
metadata.json 14.12 KB 14.12 KB ⬇ < 0.01 KB (-0.01%)
themes/express.css 1.76 KB 1.76 KB -
themes/spectrum.css 1.73 KB 1.73 KB ⬇ < 0.01 KB (-0.17%)

splitview

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

switch

File Head Base Δ
index-base.css 25.27 KB 23.23 KB ⬆ 2.04 KB (8.79%)
index-vars.css 25.27 KB 24.59 KB ⬆ 0.70 KB (2.77%)
index.css 25.27 KB 24.59 KB ⬆ 0.70 KB (2.77%)
metadata.json 12.60 KB 12.95 KB ⬇ 0.35 KB (-2.63%)
index-theme.css - 1.94 KB 🚨 deleted, moved, or renamed
themes/express.css - 1.26 KB 🚨 deleted, moved, or renamed
themes/spectrum.css - 1.26 KB 🚨 deleted, moved, or renamed

table

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

tokens

File Head Base Δ
css/dark-vars.css 36.32 KB 24.57 KB ⬆ 11.74 KB (47.79%)
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 52.96 KB 38.23 KB ⬆ 14.73 KB (38.55%)
css/large-vars.css 27.98 KB 24.40 KB ⬆ 3.58 KB (14.68%)
css/light-vars.css 36.31 KB 24.55 KB ⬆ 11.76 KB (47.90%)
css/medium-vars.css 27.91 KB 24.33 KB ⬆ 3.58 KB (14.71%)
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 205.74 KB 199.21 KB ⬆ 6.53 KB (3.28%)
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.

@pfulton pfulton added wip This is a work in progress, don't judge. do not merge A flag for a branch indicating it should not be merged. skip_vrt Add to a PR to skip running VRT (but still pass the action) labels Dec 8, 2023
@pfulton pfulton force-pushed the spectrum-two branch 3 times, most recently from 5ec70af to c4aa5f5 Compare December 13, 2023 15:52
@pfulton pfulton mentioned this pull request Jan 8, 2024
12 tasks
@pfulton pfulton force-pushed the spectrum-two branch 2 times, most recently from d2ac17c to b2fee42 Compare January 11, 2024 14:31
@pfulton pfulton force-pushed the spectrum-two branch 4 times, most recently from 31afc05 to 909f232 Compare January 22, 2024 20:15
@pfulton pfulton force-pushed the spectrum-two branch 3 times, most recently from 9a01c5a to 1b959b3 Compare February 5, 2024 21:12
@pfulton pfulton force-pushed the spectrum-two branch 2 times, most recently from 98335ab to fec70b3 Compare February 26, 2024 19:47
@pfulton pfulton force-pushed the spectrum-two branch 2 times, most recently from 7c86724 to 0a218bc Compare March 28, 2024 14:22
@castastrophe castastrophe force-pushed the spectrum-two branch 4 times, most recently from 13e54aa to 0f20c5b Compare April 4, 2024 21:01
github-actions bot and others added 19 commits December 29, 2024 14:00
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* chore(s2-avatar): initial commit

* chore(s2-avatar): add sizing and border tokens
* feat(thumbnail): migrate to S2

* feat(thumbnail): add customstyles to scope change to thumbnail
* feat(colorarea): s2 migration
* feat(colorarea): remove redundant property
* feat(colorarea): clarify color + rgb implementation
* feat(colorarea): fix gradient border-radius
* feat(colorarea): move forced-colors media query
* feat(colorarea): update changeset
* feat(thumbnail-opacity-checkboard): s2 migration
* feat(thumbnail-opacity-checkboard): fix token rule
* feat(thumbnail-opacity-checkboard): fix typo, update changeset, move rule
* feat(thumbnail-opacity-checkboard): drop unnecessary styles
* feat(thumbnail-opacity-checkboard): update token
* feat(thumbnail-opacity-checkboard): update changeset
* feat(dialog)!: s2 standard dialog migration

* docs(dialog): dialog controls/coverage
- adds new features/behaviors such as the checkbox in the footer,
wrapping for footer/header content, being able to have close button and
button group, hasHeroImage
- removes Divider support in dialog
- adds is-hidden-story to replicate what is on main and remove most
stories from the sidebar
- adds some comments and TODOs giving context to this choice
- removes layout from control table from default argTypes
- removes hasFooter from control table for fullscreen/fullscreenTakeover
argTypes
- adds a comment to explain the custom argTypes changes for those stories
- also adds a comment about multiple conditionals for argTypes

* refactor(modal): use corner-radius-extra-large-default to match design
specs

* fix(underlay): update comment notes for spectrum-overlay-color
- also comments out a duplicated custom property and adds a TODO comment

* refactor(dialog): new css for S2 dialog
- adds some opportunities for mod properties
- fixes dismissible grid spacing between additional header content and
close button
- scope passthrough mods to spectrum-Dialog class
- add flex-direction: column to footer (this should allow the footer
content and button group to stack at small screens at smallest dialog
sizes on the mobile scale.)

* feat(dialog): rebuild mods
- lots of mods are renamed to use "standard dialog" language

* chore(dialog): create changeset

* chore(dialog): update peer deps data
- remove divider from peerDependencies and peerDependenciesMeta
- adds closebutton, checkbox and typography to peerDependenciesMeta

* chore: remove divider tests

* chore(buttongroup): add flex-wrap mod property

* chore(buttongroup): creates buttongroup changeset

* chore(buttongroup,dialog): rebuild mods

* fix(dialog): platform custom variables
- calls for --spectrum-standard-dialog-spacing-edge-to-content

* chore(tokens): create changeset for custom standard dialog token

* chore(tray): fix spelling of isDismissible arg

* fix(dialog,modal): custom styles for modal background color
- because modal was originally setting the background color of dialogs,
there was some 'antialiasing bleed through' behind the dialog. By adding
customStyles to Modal, we can set --mod-modal-background-color to
transparent and get rid of the hairline color (especially noticeable
behind a hero image in a dialog)

* docs(dialog): adds modal background color documentation

* fix(dialog): use font-stack instead of font-family

* docs(dialog): rebase fixes
- override layout:centered parameter with layout:padded instead so the
dialogs are visible on their canvases on the docs page.
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Icons were not loading on the spectrum-two branch. The fetchIconSVG
function is not working (this function no longer exists in main). This
is a light touch update so icons appear, until spectrum-two is back up
to date with main.
* feat(alertbanner): start migration to spectrum two

Migrates the component to spectrum two.
- Theme files are removed, and their custom properties integrated into
  the main index.css.
- Renames misspelled mod custom property (noted in docs)
- Simplifies background color styles by changing a single custom
  property per variant, as done on other components.

* feat(alertbanner): spectrum 2 spacing and mod name cleanup

Adjust some spacings to match the Spectrum 2 spec spacing.
And renames some mods so they are more consistent with current naming
conventions, and their purpose is more clear.

=== Update spacing to match the Spectrum 2 spec ===

One issue with the S1 version was that there was too much space between
the text and the button, when the button wrapped to the next line. And
there was a different token defined for the space from the bottom edge
to the text, and vertically between the button and the text.

This helps resolve this by moving some of the spacing to padding on the
AlertBanner-body, and subtracting this value from some of the other
custom properties. Along with using both column-gap and row-gap
properties.

=== adjust storybook template spacing and decorator ===

Improves spacing in Storybook template, especially the Chromatic only
template. Decorator and wrapper styles are modeled after those used in
Action button, so they look more similar. Previously the layout was a
little cramped and the "detail" elements were missing their margins
because they were display inline.

* docs(alertbanner): custom storybook docs page and template updates

Creates a custom MDX docs page in Storybook for the Alert banner
component. And reworks the stories and chromatic-only templates a little
to facilitate and increase coverage.

Includes Storybook VRT coverage for the max width changes in PR #2762 .
Tests the display of the alert banner when in a container larger than
and smaller than its max-inline-size.

* chore(alertbanner): linter updates and update mods

- Add stylelint disable line comments for some false positives caught by
  the linter.
- Re-generate mods file

* docs(alertbanner): use stories and template from main

Use the stories and updated template from main, with a few things left
out that are not yet available in the spectrum-two branch.

* feat(alertbanner): support no close button or no action button

Adds spacing to the end of the alert banner when the close button is
not displayed, or both the close button and action button are not
displayed. These are allowed combinations of options.

* feat(alertbanner): use spec defined line-height token

* feat(alertbanner): add font-family token and mod

* feat(alertbanner): add cjk line-height

* feat(alertbanner): remove unnecessary styles for end element

Remove styles for .spectrum-AlertBanner-end, which were no longer doing
anything after the removal of the divider.
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@castastrophe castastrophe force-pushed the s2-foundations-redux branch 2 times, most recently from 3bbc0e5 to 1f8ce30 Compare January 3, 2025 20:52
jawinn and others added 3 commits January 3, 2025 16:39
Storybook foundations pages now display as a single page instead of in
folders with their example stories appearing.
These now use the newer !dev tag to hide them. The old custom
"foundation" tag was previously used to hide them, but this tag is no
longer used.

Also fixes some linter errors encountered during commit; a couple
unused variables and incorrect typeof comparisons.
* fix(search): restore missing custom properties
* fix(colorwheel): restore missing custom properties
* fix(assetcard): restore missing custom properties
* fix(treeview): restore missing custom properties

Restore missing properties from foundations that were flagged
by the linter.

* fix(combobox): restore missing custom properties

Restore missing properties from foundations that were flagged
by the linter. Also removes a group of duplicate custom property
definitions that were flagged.
…3471)

* fix(popover): define --spectrum-popover-border-width in index.css
* fix(well): define --spectrum-well-border-color in index.css
* fix(tabs): define --spectrum-tabs-font-weight
* fix(toast): define default background color and divider color
* fix(tag): define undefined custom properties
* fix(menu): define menu item background colors
* fix(textfield): define undefined custom properties
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
do not merge A flag for a branch indicating it should not be merged. skip_vrt Add to a PR to skip running VRT (but still pass the action) wip This is a work in progress, don't judge.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants