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(icons)!: s2 icons (workflow + ui) v2 #3001

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

jawinn
Copy link
Collaborator

@jawinn jawinn commented Aug 16, 2024

Description

Uses and updates to the latest icon sets for S2.

🚨 This is a breaking change.

Workflow icons

Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work.

UI icons

Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change set in this PR for a full list of changes.

The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset.

Icon component storybook updates

Adds additional templates for displaying and testing the different icon sets. Includes a grid with sizing numbers in the Default story Chromatic template that displays UI icons. See screenshots below.

TO-DO:

  • Newly added UI icons do not yet have tokens available for their sizes (that define width/height for both platform scales). We may need to hide these temporarily unless the tokens can be released first.
    • add-icon-size-50
    • add-icon-size-75
    • add-icon-size-100
    • add-icon-size-200
    • add-icon-size-300
    • drag-handle-icon-size-75
    • drag-handle-icon-size-100
    • drag-handle-icon-size-200
    • drag-handle-icon-size-300
    • gripper-icon-size-100
    • link-out-icon-size-100
    • link-out-icon-size-200
    • link-out-icon-size-300
    • link-out-icon-size-400

History

This branch is a rebased and updated version of #2836 that:

  • Resolves major differences between main and the s2 icons branch after rebase.
  • Adds additional error handling and logging
  • Fixes a few issues with UI icons rendering the wrong size, some missing S1 icons, and sorting.

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

WIP

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. 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.

Screenshots

Default story's updated Chromatic template:
Screenshot 2024-09-19 at 10 56 43 AM

Story: list of workflow icons:
Screenshot 2024-09-19 at 11 37 18 AM

Story: list of UI icons:
Screenshot 2024-09-19 at 11 37 42 AM

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. ✨

@jawinn jawinn added the wip This is a work in progress, don't judge. label Aug 16, 2024
Copy link

changeset-bot bot commented Aug 16, 2024

🦋 Changeset detected

Latest commit: c9694a0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@spectrum-css/preview Major
@spectrum-css/ui-icons Major
@spectrum-css/icon Major

Not sure what this means? Click here to learn what changesets are.

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

Copy link
Contributor

github-actions bot commented Aug 16, 2024

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

Copy link
Contributor

github-actions bot commented Aug 16, 2024

File metrics

Summary

Total size: 6.80 MB*
Total change (Δ): 🔴 ⬆ 2.50 MB (58.00%)

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

Package Size Δ
accordion 17.85 KB 🔴 ⬆ 0.50 KB
actionbar 6.27 KB 🔴 ⬆ 0.06 KB
actionbutton 41.04 KB 🔴 ⬆ 0.31 KB
actiongroup 8.70 KB 🔴 ⬆ 0.35 KB
alertbanner 5.53 KB 🔴 ⬆ 0.05 KB
alertdialog 5.16 KB 🔴 ⬆ 0.05 KB
asset 1.82 KB 🔴 ⬆ 0.05 KB
assetcard 17.01 KB 🔴 ⬆ 1.04 KB
assetlist 8.96 KB 🔴 ⬆ 1.06 KB
avatar 5.13 KB 🔴 ⬆ 0.15 KB
badge 12.13 KB 🔴 ⬆ 0.08 KB
breadcrumb 17.07 KB 🔴 ⬆ 0.44 KB
button 84.28 KB 🔴 ⬆ 0.45 KB
buttongroup 1.71 KB 🔴 ⬆ 0.04 KB
calendar 19.89 KB 🔴 ⬆ 0.63 KB
card 21.30 KB 🔴 ⬆ 0.66 KB
checkbox 29.12 KB 🔴 ⬆ 4.90 KB
clearbutton 8.16 KB 🔴 ⬆ 0.52 KB
closebutton 17.59 KB 🔴 ⬆ 1.76 KB
coachindicator 7.85 KB 🔴 ⬆ 0.06 KB
coachmark 7.81 KB 🔴 ⬆ 0.06 KB
colorarea 3.49 KB 🔴 ⬆ 0.05 KB
colorhandle 5.00 KB 🔴 ⬆ 0.10 KB
colorloupe 3.95 KB 🔴 ⬆ 0.05 KB
colorslider 4.35 KB 🔴 ⬆ 0.06 KB
colorwheel 4.80 KB 🔴 ⬆ 0.05 KB
combobox 29.21 KB 🔴 ⬆ 2.04 KB
contextualhelp 2.82 KB 🔴 ⬆ 0.05 KB
datepicker 15.40 KB 🔴 ⬆ 0.76 KB
dial 12.16 KB 🔴 ⬆ 0.52 KB
dialog 14.75 KB 🔴 ⬆ 0.11 KB
divider 4.70 KB 🔴 ⬆ 0.05 KB
dropindicator 3.42 KB 🔴 ⬆ 0.05 KB
dropzone 9.81 KB 🔴 ⬆ 0.13 KB
fieldgroup 1.72 KB 🔴 ⬆ 0.05 KB
fieldlabel 6.62 KB 🔴 ⬆ 0.07 KB
floatingactionbutton 8.05 KB 🔴 ⬆ 0.48 KB
helptext 7.49 KB 🔴 ⬆ 0.06 KB
icon 11.33 KB 🟢 ⬇ 0.05 KB
illustratedmessage 6.06 KB 🔴 ⬆ 0.05 KB
infieldbutton 19.04 KB 🔴 ⬆ 0.83 KB
inlinealert 8.18 KB 🔴 ⬆ 0.07 KB
link 5.45 KB 🔴 ⬆ 0.41 KB
logicbutton 9.52 KB 🔴 ⬆ 0.31 KB
menu 44.58 KB 🔴 ⬆ 2.70 KB
miller 1.62 KB 🔴 ⬆ 0.04 KB
modal 5.49 KB 🔴 ⬆ 0.06 KB
opacitycheckerboard 1.57 KB 🔴 ⬆ 0.04 KB
page 0.79 KB 🔴 ⬆ 0.04 KB
pagination 2.60 KB 🔴 ⬆ 0.05 KB
picker 31.47 KB 🔴 ⬆ 1.32 KB
pickerbutton 16.13 KB 🔴 ⬆ 0.70 KB
popover 15.96 KB 🔴 ⬆ 0.09 KB
progressbar 11.07 KB 🔴 ⬆ 0.09 KB
progresscircle 10.72 KB 🔴 ⬆ 0.18 KB
radio 19.24 KB 🔴 ⬆ 1.45 KB
rating 11.06 KB 🔴 ⬆ 1.36 KB
search 15.47 KB 🔴 ⬆ 0.28 KB
sidenav 14.89 KB 🔴 ⬆ 0.43 KB
site 14.61 KB 🔴 ⬆ 0.36 KB
slider 33.19 KB 🔴 ⬆ 0.80 KB
splitview 11.86 KB 🔴 ⬆ 0.54 KB
statuslight 11.46 KB 🔴 ⬆ 0.08 KB
steplist 10.10 KB 🔴 ⬆ 0.10 KB
stepper 22.12 KB 🔴 ⬆ 1.47 KB
swatch 11.75 KB 🔴 ⬆ 0.14 KB
swatchgroup 1.32 KB 🔴 ⬆ 0.04 KB
switch 30.90 KB 🔴 ⬆ 6.63 KB
table 48.07 KB 🔴 ⬆ 1.18 KB
tabs 17.55 KB 🔴 ⬆ 0.28 KB
tag 36.36 KB 🔴 ⬆ 0.74 KB
taggroup 1.12 KB 🔴 ⬆ 0.04 KB
textfield 37.03 KB 🔴 ⬆ 1.92 KB
thumbnail 8.33 KB 🔴 ⬆ 0.07 KB
toast 8.96 KB 🔴 ⬆ 0.34 KB
tooltip 36.32 KB 🔴 ⬆ 2.36 KB
tray 3.87 KB 🔴 ⬆ 0.05 KB
treeview 17.60 KB 🔴 ⬆ 0.45 KB
typography 40.31 KB 🔴 ⬆ 0.17 KB
underlay 3.31 KB 🔴 ⬆ 0.04 KB
well 1.47 KB 🔴 ⬆ 0.04 KB

Details

accordion

Filename Head Compared to base
index-base.css 17.86 KB 🔴 ⬆ 0.50 KB (2.83%)
index-vars.css 17.85 KB 🔴 ⬆ 0.50 KB (2.81%)
index.css 17.85 KB 🔴 ⬆ 0.50 KB (2.81%)

actionbar

Filename Head Compared to base
index-base.css 6.28 KB 🔴 ⬆ 0.06 KB (0.96%)
index-vars.css 6.27 KB 🔴 ⬆ 0.06 KB (0.88%)
index.css 6.27 KB 🔴 ⬆ 0.06 KB (0.88%)

actionbutton

Filename Head Compared to base
index-base.css 29.98 KB 🔴 ⬆ 0.31 KB (1.02%)
index-theme.css 11.69 KB 🔴 ⬆ < 0.01 KB (0.01%)
index-vars.css 41.04 KB 🔴 ⬆ 0.31 KB (0.74%)
index.css 41.04 KB 🔴 ⬆ 0.31 KB (0.74%)
themes/express.css 8.96 KB -
themes/spectrum.css 9.15 KB -

actiongroup

Filename Head Compared to base
index-base.css 8.22 KB 🔴 ⬆ 0.35 KB (4.38%)
index-theme.css 1.09 KB 🔴 ⬆ < 0.01 KB (0.09%)
index-vars.css 8.70 KB 🔴 ⬆ 0.35 KB (4.09%)
index.css 8.70 KB 🔴 ⬆ 0.35 KB (4.09%)
themes/express.css 0.93 KB -
themes/spectrum.css 0.82 KB -

alertbanner

Filename Head Compared to base
index-base.css 5.25 KB 🔴 ⬆ 0.05 KB (1.02%)
index-theme.css 0.92 KB 🔴 ⬆ < 0.01 KB (0.11%)
index-vars.css 5.53 KB 🔴 ⬆ 0.05 KB (0.91%)
index.css 5.53 KB 🔴 ⬆ 0.05 KB (0.91%)
themes/express.css 0.77 KB -
themes/spectrum.css 0.77 KB -

alertdialog

Filename Head Compared to base
index-base.css 5.16 KB 🔴 ⬆ 0.05 KB (1.03%)
index-vars.css 5.16 KB 🔴 ⬆ 0.05 KB (0.94%)
index.css 5.16 KB 🔴 ⬆ 0.05 KB (0.94%)

asset

Filename Head Compared to base
index-base.css 1.82 KB 🔴 ⬆ 0.05 KB (2.81%)
index-vars.css 1.82 KB 🔴 ⬆ 0.05 KB (2.53%)
index.css 1.82 KB 🔴 ⬆ 0.05 KB (2.53%)

assetcard

Filename Head Compared to base
index-base.css 16.82 KB 🔴 ⬆ 1.05 KB (6.63%)
index-theme.css 0.83 KB 🔴 ⬆ < 0.01 KB (0.12%)
index-vars.css 17.01 KB 🔴 ⬆ 1.04 KB (6.53%)
index.css 17.01 KB 🔴 ⬆ 1.04 KB (6.53%)
themes/express.css 0.73 KB -
themes/spectrum.css 0.72 KB -

assetlist

Filename Head Compared to base
index-base.css 8.96 KB 🔴 ⬆ 1.06 KB (13.45%)
index-vars.css 8.96 KB 🔴 ⬆ 1.06 KB (13.38%)
index.css 8.96 KB 🔴 ⬆ 1.06 KB (13.38%)

avatar

Filename Head Compared to base
index-base.css 5.14 KB 🔴 ⬆ 0.15 KB (2.98%)
index-vars.css 5.13 KB 🔴 ⬆ 0.15 KB (2.88%)
index.css 5.13 KB 🔴 ⬆ 0.15 KB (2.88%)

badge

Filename Head Compared to base
index-base.css 12.14 KB 🔴 ⬆ 0.09 KB (0.71%)
index-vars.css 12.13 KB 🔴 ⬆ 0.08 KB (0.67%)
index.css 12.13 KB 🔴 ⬆ 0.08 KB (0.67%)

breadcrumb

Filename Head Compared to base
index-base.css 17.08 KB 🔴 ⬆ 0.44 KB (2.59%)
index-vars.css 17.07 KB 🔴 ⬆ 0.44 KB (2.56%)
index.css 17.07 KB 🔴 ⬆ 0.44 KB (2.56%)

button

Filename Head Compared to base
index-base.css 54.33 KB 🔴 ⬆ 0.45 KB (0.82%)
index-theme.css 30.56 KB 🔴 ⬆ < 0.01 KB (0.00%)
index-vars.css 84.28 KB 🔴 ⬆ 0.45 KB (0.52%)
index.css 84.28 KB 🔴 ⬆ 0.45 KB (0.52%)
themes/express.css 29.37 KB -
themes/spectrum.css 29.43 KB -

buttongroup

Filename Head Compared to base
index-base.css 1.72 KB 🔴 ⬆ 0.05 KB (2.87%)
index-vars.css 1.71 KB 🔴 ⬆ 0.04 KB (2.58%)
index.css 1.71 KB 🔴 ⬆ 0.04 KB (2.58%)

calendar

Filename Head Compared to base
index-base.css 19.89 KB 🔴 ⬆ 0.63 KB (3.21%)
index-vars.css 19.89 KB 🔴 ⬆ 0.63 KB (3.19%)
index.css 19.89 KB 🔴 ⬆ 0.63 KB (3.19%)

card

Filename Head Compared to base
index-base.css 21.30 KB 🔴 ⬆ 0.66 KB (3.13%)
index-vars.css 21.30 KB 🔴 ⬆ 0.66 KB (3.11%)
index.css 21.30 KB 🔴 ⬆ 0.66 KB (3.11%)

checkbox

Filename Head Compared to base
index-base.css 28.50 KB 🔴 ⬆ 4.91 KB (20.80%)
index-theme.css 1.24 KB 🔴 ⬆ < 0.01 KB (0.08%)
index-vars.css 29.12 KB 🔴 ⬆ 4.90 KB (20.25%)
index.css 29.12 KB 🔴 ⬆ 4.90 KB (20.25%)
themes/express.css 0.95 KB -
themes/spectrum.css 0.94 KB -

clearbutton

Filename Head Compared to base
index-base.css 7.38 KB 🔴 ⬆ 0.52 KB (7.44%)
index-theme.css 1.40 KB 🔴 ⬆ < 0.01 KB (0.07%)
index-vars.css 8.16 KB 🔴 ⬆ 0.52 KB (6.64%)
index.css 8.16 KB 🔴 ⬆ 0.52 KB (6.64%)
themes/express.css 1.03 KB -
themes/spectrum.css 1.00 KB -

closebutton

Filename Head Compared to base
index-base.css 16.95 KB 🔴 ⬆ 1.76 KB (11.60%)
index-theme.css 1.26 KB 🔴 ⬆ < 0.01 KB (0.08%)
index-vars.css 17.59 KB 🔴 ⬆ 1.76 KB (11.11%)
index.css 17.59 KB 🔴 ⬆ 1.76 KB (11.11%)
themes/express.css 0.96 KB -
themes/spectrum.css 0.95 KB -

coachindicator

Filename Head Compared to base
index-base.css 7.86 KB 🔴 ⬆ 0.07 KB (0.84%)
index-vars.css 7.85 KB 🔴 ⬆ 0.06 KB (0.78%)
index.css 7.85 KB 🔴 ⬆ 0.06 KB (0.78%)

coachmark

Filename Head Compared to base
index-base.css 7.82 KB 🔴 ⬆ 0.06 KB (0.78%)
index-vars.css 7.81 KB 🔴 ⬆ 0.06 KB (0.72%)
index.css 7.81 KB 🔴 ⬆ 0.06 KB (0.72%)

colorarea

Filename Head Compared to base
index-base.css 3.49 KB 🔴 ⬆ 0.05 KB (1.50%)
index-vars.css 3.49 KB 🔴 ⬆ 0.05 KB (1.36%)
index.css 3.49 KB 🔴 ⬆ 0.05 KB (1.36%)

colorhandle

Filename Head Compared to base
index-base.css 5.01 KB 🔴 ⬆ 0.10 KB (1.99%)
index-vars.css 5.00 KB 🔴 ⬆ 0.10 KB (1.89%)
index.css 5.00 KB 🔴 ⬆ 0.10 KB (1.89%)

colorloupe

Filename Head Compared to base
index-base.css 3.96 KB 🔴 ⬆ 0.06 KB (1.45%)
index-vars.css 3.95 KB 🔴 ⬆ 0.05 KB (1.33%)
index.css 3.95 KB 🔴 ⬆ 0.05 KB (1.33%)

colorslider

Filename Head Compared to base
index-base.css 4.35 KB 🔴 ⬆ 0.06 KB (1.39%)
index-vars.css 4.35 KB 🔴 ⬆ 0.06 KB (1.27%)
index.css 4.35 KB 🔴 ⬆ 0.06 KB (1.27%)

colorwheel

Filename Head Compared to base
index-base.css 4.80 KB 🔴 ⬆ 0.06 KB (1.15%)
index-vars.css 4.80 KB 🔴 ⬆ 0.05 KB (1.05%)
index.css 4.80 KB 🔴 ⬆ 0.05 KB (1.05%)

combobox

Filename Head Compared to base
index-base.css 28.43 KB 🔴 ⬆ 2.04 KB (7.74%)
index-theme.css 1.40 KB 🔴 ⬆ < 0.01 KB (0.07%)
index-vars.css 29.21 KB 🔴 ⬆ 2.04 KB (7.51%)
index.css 29.21 KB 🔴 ⬆ 2.04 KB (7.51%)
themes/express.css 1.01 KB -
themes/spectrum.css 1.02 KB -

contextualhelp

Filename Head Compared to base
index-base.css 2.83 KB 🔴 ⬆ 0.05 KB (1.83%)
index-vars.css 2.82 KB 🔴 ⬆ 0.05 KB (1.65%)
index.css 2.82 KB 🔴 ⬆ 0.05 KB (1.65%)

datepicker

Filename Head Compared to base
index-base.css 15.20 KB 🔴 ⬆ 0.76 KB (5.13%)
index-theme.css 0.83 KB 🔴 ⬆ < 0.01 KB (0.12%)
index-vars.css 15.40 KB 🔴 ⬆ 0.76 KB (5.04%)
index.css 15.40 KB 🔴 ⬆ 0.76 KB (5.04%)
themes/express.css 0.73 KB -
themes/spectrum.css 0.72 KB -

dial

Filename Head Compared to base
index-base.css 12.16 KB 🔴 ⬆ 0.52 KB (4.39%)
index-vars.css 12.16 KB 🔴 ⬆ 0.52 KB (4.35%)
index.css 12.16 KB 🔴 ⬆ 0.52 KB (4.35%)

dialog

Filename Head Compared to base
index-base.css 14.75 KB 🔴 ⬆ 0.11 KB (0.76%)
index-vars.css 14.75 KB 🔴 ⬆ 0.11 KB (0.73%)
index.css 14.75 KB 🔴 ⬆ 0.11 KB (0.73%)

divider

Filename Head Compared to base
index-base.css 4.71 KB 🔴 ⬆ 0.06 KB (1.22%)
index-vars.css 4.70 KB 🔴 ⬆ 0.05 KB (1.11%)
index.css 4.70 KB 🔴 ⬆ 0.05 KB (1.11%)

dropindicator

Filename Head Compared to base
index-base.css 3.42 KB 🔴 ⬆ 0.05 KB (1.56%)
index-vars.css 3.42 KB 🔴 ⬆ 0.05 KB (1.42%)
index.css 3.42 KB 🔴 ⬆ 0.05 KB (1.42%)

dropzone

Filename Head Compared to base
index-base.css 9.81 KB 🔴 ⬆ 0.14 KB (1.38%)
index-vars.css 9.81 KB 🔴 ⬆ 0.13 KB (1.33%)
index.css 9.81 KB 🔴 ⬆ 0.13 KB (1.33%)

fieldgroup

Filename Head Compared to base
index-base.css 1.72 KB 🔴 ⬆ 0.05 KB (3.09%)
index-vars.css 1.72 KB 🔴 ⬆ 0.05 KB (2.80%)
index.css 1.72 KB 🔴 ⬆ 0.05 KB (2.80%)

fieldlabel

Filename Head Compared to base
index-base.css 6.62 KB 🔴 ⬆ 0.08 KB (1.19%)
index-vars.css 6.62 KB 🔴 ⬆ 0.07 KB (1.12%)
index.css 6.62 KB 🔴 ⬆ 0.07 KB (1.12%)

floatingactionbutton

Filename Head Compared to base
index-base.css 8.06 KB 🔴 ⬆ 0.49 KB (6.27%)
index-vars.css 8.05 KB 🔴 ⬆ 0.48 KB (6.21%)
index.css 8.05 KB 🔴 ⬆ 0.48 KB (6.21%)

helptext

Filename Head Compared to base
index-base.css 7.50 KB 🔴 ⬆ 0.06 KB (0.84%)
index-vars.css 7.49 KB 🔴 ⬆ 0.06 KB (0.77%)
index.css 7.49 KB 🔴 ⬆ 0.06 KB (0.77%)

icon

Filename Head Compared to base
index-base.css 11.33 KB 🟢 ⬇ 0.05 KB (-0.42%)
index-vars.css 11.33 KB 🟢 ⬇ 0.05 KB (-0.46%)
index.css 11.33 KB 🟢 ⬇ 0.05 KB (-0.46%)

illustratedmessage

Filename Head Compared to base
index-base.css 6.06 KB 🔴 ⬆ 0.06 KB (0.96%)
index-vars.css 6.06 KB 🔴 ⬆ 0.05 KB (0.88%)
index.css 6.06 KB 🔴 ⬆ 0.05 KB (0.88%)

infieldbutton

Filename Head Compared to base
index-base.css 16.90 KB 🔴 ⬆ 0.83 KB (5.05%)
index-theme.css 2.75 KB 🔴 ⬆ < 0.01 KB (0.04%)
index-vars.css 19.04 KB 🔴 ⬆ 0.83 KB (4.44%)
index.css 19.04 KB 🔴 ⬆ 0.83 KB (4.44%)
themes/express.css 1.67 KB -
themes/spectrum.css 1.69 KB -

inlinealert

Filename Head Compared to base
index-base.css 8.18 KB 🔴 ⬆ 0.07 KB (0.84%)
index-vars.css 8.18 KB 🔴 ⬆ 0.07 KB (0.78%)
index.css 8.18 KB 🔴 ⬆ 0.07 KB (0.78%)

link

Filename Head Compared to base
index-base.css 5.46 KB 🔴 ⬆ 0.41 KB (7.94%)
index-vars.css 5.45 KB 🔴 ⬆ 0.41 KB (7.85%)
index.css 5.45 KB 🔴 ⬆ 0.41 KB (7.85%)

logicbutton

Filename Head Compared to base
index-base.css 9.52 KB 🔴 ⬆ 0.31 KB (3.33%)
index-vars.css 9.52 KB 🔴 ⬆ 0.31 KB (3.27%)
index.css 9.52 KB 🔴 ⬆ 0.31 KB (3.27%)

menu

Filename Head Compared to base
index-base.css 44.59 KB 🔴 ⬆ 2.71 KB (6.46%)
index-vars.css 44.58 KB 🔴 ⬆ 2.70 KB (6.45%)
index.css 44.58 KB 🔴 ⬆ 2.70 KB (6.45%)

miller

Filename Head Compared to base
index-base.css 1.62 KB 🔴 ⬆ 0.05 KB (2.84%)
index-vars.css 1.62 KB 🔴 ⬆ 0.04 KB (2.54%)
index.css 1.62 KB 🔴 ⬆ 0.04 KB (2.54%)

modal

Filename Head Compared to base
index-base.css 5.49 KB 🔴 ⬆ 0.06 KB (1.10%)
index-vars.css 5.49 KB 🔴 ⬆ 0.06 KB (1.01%)
index.css 5.49 KB 🔴 ⬆ 0.06 KB (1.01%)

opacitycheckerboard

Filename Head Compared to base
index-base.css 1.58 KB 🔴 ⬆ 0.04 KB (2.87%)
index-vars.css 1.57 KB 🔴 ⬆ 0.04 KB (2.55%)
index.css 1.57 KB 🔴 ⬆ 0.04 KB (2.55%)

page

Filename Head Compared to base
index-base.css 0.80 KB 🔴 ⬆ 0.04 KB (5.86%)
index-vars.css 0.79 KB 🔴 ⬆ 0.04 KB (5.19%)
index.css 0.79 KB 🔴 ⬆ 0.04 KB (5.19%)

pagination

Filename Head Compared to base
index-base.css 2.60 KB 🔴 ⬆ 0.05 KB (1.99%)
index-vars.css 2.60 KB 🔴 ⬆ 0.05 KB (1.80%)
index.css 2.60 KB 🔴 ⬆ 0.05 KB (1.80%)

picker

Filename Head Compared to base
index-base.css 29.58 KB 🔴 ⬆ 1.32 KB (4.66%)
index-theme.css 2.50 KB 🔴 ⬆ < 0.01 KB (0.04%)
index-vars.css 31.47 KB 🔴 ⬆ 1.32 KB (4.36%)
index.css 31.47 KB 🔴 ⬆ 1.32 KB (4.36%)
themes/express.css 1.51 KB -
themes/spectrum.css 1.60 KB -

pickerbutton

Filename Head Compared to base
index-base.css 14.37 KB 🔴 ⬆ 0.70 KB (5.03%)
index-theme.css 2.38 KB 🔴 ⬆ < 0.01 KB (0.04%)
index-vars.css 16.13 KB 🔴 ⬆ 0.70 KB (4.43%)
index.css 16.13 KB 🔴 ⬆ 0.70 KB (4.43%)
themes/express.css 1.51 KB -
themes/spectrum.css 1.47 KB -

popover

Filename Head Compared to base
index-base.css 15.81 KB 🔴 ⬆ 0.09 KB (0.57%)
index-theme.css 0.78 KB 🔴 ⬆ < 0.01 KB (0.13%)
index-vars.css 15.96 KB 🔴 ⬆ 0.09 KB (0.54%)
index.css 15.96 KB 🔴 ⬆ 0.09 KB (0.54%)
themes/express.css 0.69 KB -
themes/spectrum.css 0.72 KB -

progressbar

Filename Head Compared to base
index-base.css 11.07 KB 🔴 ⬆ 0.09 KB (0.81%)
index-vars.css 11.07 KB 🔴 ⬆ 0.09 KB (0.76%)
index.css 11.07 KB 🔴 ⬆ 0.09 KB (0.76%)

progresscircle

Filename Head Compared to base
index-base.css 10.73 KB 🔴 ⬆ 0.19 KB (1.72%)
index-vars.css 10.72 KB 🔴 ⬆ 0.18 KB (1.68%)
index.css 10.72 KB 🔴 ⬆ 0.18 KB (1.68%)

radio

Filename Head Compared to base
index-base.css 18.18 KB 🔴 ⬆ 1.46 KB (8.71%)
index-theme.css 1.67 KB 🔴 ⬆ < 0.01 KB (0.06%)
index-vars.css 19.24 KB 🔴 ⬆ 1.45 KB (8.17%)
index.css 19.24 KB 🔴 ⬆ 1.45 KB (8.17%)
themes/express.css 1.35 KB -
themes/spectrum.css 1.35 KB -

rating

Filename Head Compared to base
index-base.css 10.28 KB 🔴 ⬆ 1.36 KB (15.23%)
index-theme.css 1.40 KB 🔴 ⬆ < 0.01 KB (0.07%)
index-vars.css 11.06 KB 🔴 ⬆ 1.36 KB (13.97%)
index.css 11.06 KB 🔴 ⬆ 1.36 KB (13.97%)
themes/express.css 1.02 KB -
themes/spectrum.css 1.01 KB -

search

Filename Head Compared to base
index-base.css 12.93 KB 🔴 ⬆ 0.29 KB (2.21%)
index-theme.css 3.16 KB 🔴 ⬆ < 0.01 KB (0.03%)
index-vars.css 15.47 KB 🔴 ⬆ 0.28 KB (1.82%)
index.css 15.47 KB 🔴 ⬆ 0.28 KB (1.82%)
themes/express.css 1.93 KB -
themes/spectrum.css 1.84 KB -

sidenav

Filename Head Compared to base
index-base.css 14.89 KB 🔴 ⬆ 0.43 KB (2.92%)
index-vars.css 14.89 KB 🔴 ⬆ 0.43 KB (2.89%)
index.css 14.89 KB 🔴 ⬆ 0.43 KB (2.89%)

site

Filename Head Compared to base
index-base.css 14.61 KB 🔴 ⬆ 0.36 KB (2.50%)
index-vars.css 14.61 KB 🔴 ⬆ 0.36 KB (2.47%)
index.css 14.61 KB 🔴 ⬆ 0.36 KB (2.47%)

slider

Filename Head Compared to base
index-base.css 30.88 KB 🔴 ⬆ 0.80 KB (2.60%)
index-theme.css 2.92 KB 🔴 ⬆ < 0.01 KB (0.03%)
index-vars.css 33.19 KB 🔴 ⬆ 0.80 KB (2.41%)
index.css 33.19 KB 🔴 ⬆ 0.80 KB (2.41%)
themes/express.css 1.78 KB -
themes/spectrum.css 1.75 KB -

splitview

Filename Head Compared to base
index-base.css 11.87 KB 🔴 ⬆ 0.55 KB (4.70%)
index-vars.css 11.86 KB 🔴 ⬆ 0.54 KB (4.66%)
index.css 11.86 KB 🔴 ⬆ 0.54 KB (4.66%)

statuslight

Filename Head Compared to base
index-base.css 11.46 KB 🔴 ⬆ 0.09 KB (0.75%)
index-vars.css 11.46 KB 🔴 ⬆ 0.08 KB (0.70%)
index.css 11.46 KB 🔴 ⬆ 0.08 KB (0.70%)

steplist

Filename Head Compared to base
index-base.css 10.11 KB 🔴 ⬆ 0.10 KB (1.01%)
index-vars.css 10.10 KB 🔴 ⬆ 0.10 KB (0.96%)
index.css 10.10 KB 🔴 ⬆ 0.10 KB (0.96%)

stepper

Filename Head Compared to base
index-base.css 18.72 KB 🔴 ⬆ 1.47 KB (8.52%)
index-theme.css 4.01 KB 🔴 ⬆ < 0.01 KB (0.02%)
index-vars.css 22.12 KB 🔴 ⬆ 1.47 KB (7.10%)
index.css 22.12 KB 🔴 ⬆ 1.47 KB (7.10%)
themes/express.css 2.33 KB -
themes/spectrum.css 2.29 KB -

swatch

Filename Head Compared to base
index-base.css 11.75 KB 🔴 ⬆ 0.14 KB (1.19%)
index-vars.css 11.75 KB 🔴 ⬆ 0.14 KB (1.14%)
index.css 11.75 KB 🔴 ⬆ 0.14 KB (1.14%)

swatchgroup

Filename Head Compared to base
index-base.css 1.32 KB 🔴 ⬆ 0.05 KB (3.51%)
index-vars.css 1.32 KB 🔴 ⬆ 0.04 KB (3.13%)
index.css 1.32 KB 🔴 ⬆ 0.04 KB (3.13%)

switch

Filename Head Compared to base
index-base.css 29.56 KB 🔴 ⬆ 6.64 KB (28.94%)
index-theme.css 1.96 KB 🔴 ⬆ < 0.01 KB (0.05%)
index-vars.css 30.90 KB 🔴 ⬆ 6.63 KB (27.33%)
index.css 30.90 KB 🔴 ⬆ 6.63 KB (27.33%)
themes/express.css 1.29 KB -
themes/spectrum.css 1.28 KB -

table

Filename Head Compared to base
index-base.css 48.08 KB 🔴 ⬆ 1.18 KB (2.52%)
index-vars.css 48.07 KB 🔴 ⬆ 1.18 KB (2.51%)
index.css 48.07 KB 🔴 ⬆ 1.18 KB (2.51%)

tabs

Filename Head Compared to base
index-base.css 17.37 KB 🔴 ⬆ 0.28 KB (1.59%)
index-theme.css 0.81 KB 🔴 ⬆ < 0.01 KB (0.12%)
index-vars.css 17.55 KB 🔴 ⬆ 0.28 KB (1.55%)
index.css 17.55 KB 🔴 ⬆ 0.28 KB (1.55%)
themes/express.css 0.72 KB -
themes/spectrum.css 0.71 KB -

tag

Filename Head Compared to base
index-base.css 31.00 KB 🔴 ⬆ 0.74 KB (2.39%)
index-theme.css 5.97 KB 🔴 ⬆ < 0.01 KB (0.02%)
index-vars.css 36.36 KB 🔴 ⬆ 0.74 KB (2.03%)
index.css 36.36 KB 🔴 ⬆ 0.74 KB (2.03%)
themes/express.css 3.28 KB -
themes/spectrum.css 3.30 KB -

taggroup

Filename Head Compared to base
index-base.css 1.12 KB 🔴 ⬆ 0.04 KB (4.07%)
index-vars.css 1.12 KB 🔴 ⬆ 0.04 KB (3.62%)
index.css 1.12 KB 🔴 ⬆ 0.04 KB (3.62%)

textfield

Filename Head Compared to base
index-base.css 36.10 KB 🔴 ⬆ 1.93 KB (5.64%)
index-theme.css 1.55 KB 🔴 ⬆ < 0.01 KB (0.06%)
index-vars.css 37.03 KB 🔴 ⬆ 1.92 KB (5.48%)
index.css 37.03 KB 🔴 ⬆ 1.92 KB (5.48%)
themes/express.css 1.08 KB -
themes/spectrum.css 1.08 KB -

thumbnail

Filename Head Compared to base
index-base.css 8.33 KB 🔴 ⬆ 0.08 KB (0.93%)
index-vars.css 8.33 KB 🔴 ⬆ 0.07 KB (0.88%)
index.css 8.33 KB 🔴 ⬆ 0.07 KB (0.88%)

toast

Filename Head Compared to base
index-base.css 8.72 KB 🔴 ⬆ 0.34 KB (3.96%)
index-theme.css 0.88 KB 🔴 ⬆ < 0.01 KB (0.11%)
index-vars.css 8.96 KB 🔴 ⬆ 0.34 KB (3.81%)
index.css 8.96 KB 🔴 ⬆ 0.34 KB (3.81%)
themes/express.css 0.75 KB -
themes/spectrum.css 0.75 KB -

tooltip

Filename Head Compared to base
index-base.css 36.07 KB 🔴 ⬆ 2.36 KB (7.01%)
index-theme.css 0.89 KB 🔴 ⬆ < 0.01 KB (0.11%)
index-vars.css 36.32 KB 🔴 ⬆ 2.36 KB (6.94%)
index.css 36.32 KB 🔴 ⬆ 2.36 KB (6.94%)
themes/express.css 0.76 KB -
themes/spectrum.css 0.76 KB -

tray

Filename Head Compared to base
index-base.css 3.87 KB 🔴 ⬆ 0.06 KB (1.41%)
index-vars.css 3.87 KB 🔴 ⬆ 0.05 KB (1.28%)
index.css 3.87 KB 🔴 ⬆ 0.05 KB (1.28%)

treeview

Filename Head Compared to base
index-base.css 17.60 KB 🔴 ⬆ 0.45 KB (2.57%)
index-vars.css 17.60 KB 🔴 ⬆ 0.45 KB (2.54%)
index.css 17.60 KB 🔴 ⬆ 0.45 KB (2.54%)

typography

Filename Head Compared to base
index-base.css 40.32 KB 🔴 ⬆ 0.18 KB (0.43%)
index-vars.css 40.31 KB 🔴 ⬆ 0.17 KB (0.42%)
index.css 40.31 KB 🔴 ⬆ 0.17 KB (0.42%)

underlay

Filename Head Compared to base
index-base.css 3.32 KB 🔴 ⬆ 0.05 KB (1.49%)
index-vars.css 3.31 KB 🔴 ⬆ 0.04 KB (1.34%)
index.css 3.31 KB 🔴 ⬆ 0.04 KB (1.34%)

well

Filename Head Compared to base
index-base.css 1.48 KB 🔴 ⬆ 0.04 KB (3.00%)
index-vars.css 1.47 KB 🔴 ⬆ 0.04 KB (2.66%)
index.css 1.47 KB 🔴 ⬆ 0.04 KB (2.66%)
* 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.

@jawinn jawinn force-pushed the refactor-s2-icons-workflow-and-ui-v2 branch from 988aa3a to 420eb92 Compare August 16, 2024 20:17
@Rajdeepc
Copy link
Collaborator

@jawinn Can we do a dry run in SWC?

@jawinn
Copy link
Collaborator Author

jawinn commented Aug 19, 2024

@jawinn Can we do a dry run in SWC?

This was a part of the foundations tasks for the followup #3007 . If you need anything else for that, let me know in the Foundations channel, Jira issue, or Foundations Slack list.

@Rajdeepc
Copy link
Collaborator

Rajdeepc commented Aug 20, 2024

#3007

Typically we don't import @adobe/spectrum-tokens as a package in SWC. The icons in SWC are served separately via @spectrum-css/ui-icons and @adobe/spectrum-css-workflow-icons packages. So for the above S2 inheritance do you feel you can surface up some assets so that we can generate S2 icons on our end and test?

@jawinn jawinn force-pushed the refactor-s2-icons-workflow-and-ui-v2 branch 3 times, most recently from 1c4f08b to 8ddbce0 Compare September 19, 2024 19:44
@jawinn
Copy link
Collaborator Author

jawinn commented Sep 19, 2024

I've made a bunch of updates here to help prepare this for going into foundations:

  • Squashed the commits, to remove some of the noise from after the rebase that wasn't necessary to see
  • Fixed an issue with icon's Chromatic template grids due to <br> tags coming from Typography. They're now wrapped in a div to maintain the grid layout.
  • Added a more thorough PR description, with screenshots
  • Added changesets for icon and preview (Storybook)

@jawinn jawinn changed the title feat(icons): s2 icons (workflow + ui) v2 feat(icons)!: s2 icons (workflow + ui) v2 Oct 8, 2024
Uses and updates to the latest icon sets for S2.

==== Workflow icons ====
Uses the latest version of this package. There is a large difference
between the set of icons available for S1 and S2. These differences are
documented separately from this work.

==== UI icons ====
Updates the ui-icons package with the latest set of icons. This includes
deprecations and some new icons. See the change log for a full list of
changes.

The UI icons no longer contain both a medium and a large SVG asset. The
file structure and loading have been changed to use the single asset.
@jawinn jawinn force-pushed the refactor-s2-icons-workflow-and-ui-v2 branch from 8ddbce0 to c9694a0 Compare October 8, 2024 19:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wip This is a work in progress, don't judge.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants