search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
289 stars 76 forks source link

Design token phase II - Integration across components #7180

Open geospatialem opened 1 year ago

geospatialem commented 1 year ago

Description

Addresses the final, or second phase, of our design token integration from #6558. Majority of the effort will be performed in June and July, targeted for early August for additional documentation and pages for the September main release. cc @alisonailea @jcfranco

Acceptance Criteria

  1. [ ] All relevant components have been refactored to use CSS variables which match component design tokens.
    • Token Jam Session 01/12/2024
    • Design Tokens Standup
    • Tracking in Monday
  2. [ ] All relevant components have E2E tests to automate testing of token application. (remaining estimate 1-week)
  3. [ ] All relevant components have one been added to the custom theme Chromatic test page to visually confirm token application. (remaining estimate 1 day)
  4. [ ] All relevant components pass final QA (remaining estimate 5 days)
    • [ ] Design confirmation design-tokens are in alignment between Figma and Web platforms.

      • 9524 (remaining estimate < 1 day)

      • @alisonailea, @ashetland, and @SkyeSeitz to do final review of component tokens names to confirm pattern alignment. (remaining estimate 1 day)
    • [ ] Engineering confirmation that tokens work does not cause breaking changes in Calcite-Components (remaining estimate > 1 day)
      • @DitwanP and @geospatialem to do manual check of all themed demos on a local instance in all major browsers to confirm tokens are applied correctly to the component.
    • [ ] Docs confirmation (remaining estimate > 1 day)
      • Each token as a CSS Custom Property/CSS Variable is listed in the relevant Calcite Component .scss file as a JSDocs @prop "token name": "description"
      • Each token listed in the component's JSDoc section is used in the component code.
      • Each token listed in the component's JSDoc section is listed in the e2e tests under "themed"
        • If a CSS Variable is deprecated, it should be noted in the JSDoc as @prop "token name": [Deprecated] Use "new token name" instead. "description"
      • Confirm any CSS Variables listed as deprecated are tested in E2E tests under a describe("deprecated", () => {}) section

        Relevant Info

    • Component Token Developer Docs
    • For specific component issues, we can use the design-tokens label.
    • add your name and status next to component you're working on (start with high ❗ priority components)

      Components

    • [ ] Global tokens
    • [x] #10510
    • [x] accordion-item @alisonailea merged - 2.12.0
    • [x] #4060
    • [x] #10181 merged - 2.13.0
    • [ ] #4012
    • [x] accordion @alisonailea merged - 2.12.0
    • [x] action-bar @alisonailea merged - 2.12.0
    • [x] action-group @alisonailea merged - 2.12.0
    • [x] action-menu @alisonailea merged - 2.12.0
    • [x] action-pad @alisonailea merged - 2.12.0
    • [x] action @alisonailea merged - 2.12.0 and 2.13.0 verified by KH on 9/24/24 ✔️
    • [x] #8519 merged - 2.2.0
    • [x] #10253
    • [x] alert @aPreciado88 merged - 2.13.0 - verified by DP on 9/26/24
    • [x] #10218
    • [x] #10388
    • [x] #10280
    • [x] avatar high ❗ @alisonailea merged - 2.13.0 - verified by DP on 9/26/24
    • [x] #4900
    • [x] #7651
    • [ ] block-section
    • [ ] block
    • [ ] button high ❗ @alisonailea open PR
    • [ ] #10358
    • [ ] PR - #10358 waiting for VRT
    • Required for split-button
    • [ ] #8922
    • [x] card @alisonailea merged - 2.13.0 - verified by DP on 9/26/24
    • [x] #8597
    • [x] card group @alisonailea merged - 2.13.0 - verified by DP on 9/26/24
    • [x] #8597
    • [x] checkbox @aPreciado88 merged - 2.13.0 - verified by DP on 9/26/24
    • [x] #10221
    • [x] chip-group @alisonailea _merged - 2.13.0 - verified by DP on 9/27/24 (Follow-up question)
    • [x] #10179
    • [x] chip @alisonailea merged - 2.13.0 - verified by DP on 9/27/24 (Resulted in this issue for patch release)
    • [x] #10179
    • [x] #10493
    • [ ] color-picker-hex-input
    • [ ] color-picker-swatch
    • [ ] color-picker
    • [ ] #8463
    • [ ] combobox-item-group
    • [ ] combobox-item
    • [ ] combobox
    • [ ] date-picker-day
    • [ ] date-picker-month-header
    • [ ] date-picker-month
    • [ ] date-picker
    • [ ] dialog high ❗
    • [x] #10093 merged 2.13.0
    • [ ] #8614
    • [x] #10387
    • [ ] dropdown-group high ❗ @alisonailea
    • Required for split-button
    • [ ] dropdown-item high ❗@alisonailea
    • Required for split-button
    • [ ] dropdown high ❗@alisonailea
    • Required for split-button
    • [ ] fab @alisonailea open PR
    • [ ] filter
    • [ ] flow-item
    • [ ] flow
    • [ ] graph
    • [x] handle @Elijbet - merged 2.13.0 verified by KH on 9/25/24 ✔️
    • [x] #8780
    • [x] #10262
    • [x] icon @alisonailea - merged - 2.12.0
    • [x] #10062
    • [ ] inline-editable
    • [ ] input-date-picker
    • [ ] input-message
    • [ ] https://github.com/Esri/calcite-design-system/issues/10620
    • [ ] input-number
    • [ ] input-text
    • [ ] input-time-picker
    • [ ] input high ❗@macandcheese
    • [ ] #8967
    • [x] #8688
    • [ ] #8673
    • [ ] #9083
    • [ ] #7411
    • [ ] #10361
    • [ ] label @driskull #10688
    • [ ] link @driskull #10689
    • [ ] list-item-group @driskull #10669
    • [ ] list-item @driskull #10669
    • [ ] list @driskull #10669
    • [ ] loader high ❗
    • [ ] #6695
    • [ ] menu-item high ❗ @anveshmekala
    • [ ] #8018
    • [ ] #7088
    • [ ] menu high ❗ @anveshmekala
    • [ ] meter
    • [ ] navigation-logo high ❗ @anveshmekala
    • [ ] navigation-user high ❗ @anveshmekala
    • [ ] navigation high ❗ @anveshmekala
    • [ ] notice
    • [ ] pagination
    • [ ] panel high ❗@macandcheese
    • [ ] #8614
    • [ ] #8907
    • [ ] #8675
    • [ ] #8726
    • [x] #10387
    • [x] popover @Elijbet - merged 2.13.0 - verified by KH on 9/24/24 ✔️
    • [x] #8642
    • [x] #10253
    • [x] progress @Elijbet - merged 2.13.0 - verified by KH on 9/24/24 ✔️
    • [x] #8661
    • [x] #10267
    • [ ] radio-group-item @DitwanP
    • [ ] #8658
    • [ ] radio-group @DitwanP
    • [ ] rating @DitwanP
    • [ ] scrim @DitwanP
    • [ ] segmented-control-item
    • [ ] segmented-control
    • [ ] #8832
    • [ ] select
    • [ ] shell-center-row
    • [ ] shell-panel
    • [ ] #8011
    • [ ] shell
    • [ ] slider high ❗
    • [ ] #8049
    • [ ] #7312
    • [ ] split-button high ❗
    • Requires button, dropdown, dropdown-item, and dropdown-group
    • [ ] #7458
    • [ ] #9227
    • [ ] stepper-item
    • [ ] #10487
    • [ ] stepper
    • [ ] switch high ❗ @driskull #10647
    • [ ] #5792
    • [ ] tab-nav
    • [ ] tab-title
    • [ ] tab
    • [ ] table
    • [ ] tabs @jcfranco in-progress
    • [x] text-area high ❗ @benelan merged 2.13.0 - verified by KH on 9/27/24 ✔️
    • [x] #9040
    • [x] #7606
    • [x] #10343
    • [x] tile @eriklharper merged 3.0.0
    • [x] #10476
    • [ ] time-picker
    • [ ] tooltip @driskull #10687
    • [ ] tree-item
    • [ ] tree
    • [x] ~tip-manager (#8782~ future deprecated)
    • [x] ~modal~ (deprecated)
    • [x] ~option-group~ not applicable
    • [x] ~option~ not applicable
    • [x] ~pick-list-group (deprecated)~
    • [x] ~pick-list-item (deprecated)~
    • [x] ~pick-list (deprecated)~
    • [x] ~stack~
    • [x] ~tile-select-group~ (future deprecated by tile-group)
    • [x] ~tile-select~ (future deprecated by tile-group)
    • [x] ~tip-group (8781~ (future deprecated))
    • [x] ~tip (#8641~ future deprecated)
    • [x] ~value-list-item~ (deprecated)
    • [x] ~value-list~ (deprecated)
    • [ ] functional
    • [ ] ExpandToggle
    • [ ] FloatingArrow - Note: tooltip and popover will need adjustments for the floating arrow.
    • [ ] Heading
    • [ ] XButton
      • [ ] #8771

        Example Use Case

        
/**
    • CSS Custom Properties
    • These properties can be overridden using the component's tag as selector.
    • @prop --calcite-my-component-background-color: Specifies the background color of the component.
    • @prop --calcite-el-color-background: [Deprecated] Use --calcite-my-component-background-color instead. Specifies the background color of the component.
    • @prop --calcite-my-component-icon-color: Specifies the color of the icon sub-component. */ div { background-color: var(--calcite-my-component-background-color, var(--calcite-el-color-background, var(--calcite-color-brand))); } // calcite-icon .icon { --calcite-icon-color: var(--calcite-my-component-icon-color, var(--calcite-color-brand)); } 
      ```e2e.ts
describe("theme", () => {
describe("default", () => {
themed(`calcite-my-component`, {
"--calcite-my-component-background-color": {
  shadowSelector: `div`,
  targetProp: "backgroundColor",
},
"--calcite-my-component-icon-color": {
  shadowSelector: `.${CSS.icon}`,
  targetProp: "--calcite-icon-color",
},
});
});
describe("deprecated", () => {
themed(`calcite-my-component`, {
"--calcite-el-color-background": {
  shadowSelector: `div`,
  targetProp: "backgroundColor",
},
});
});
});

      Priority impact

      impact - p2 - want for an upcoming milestone

      Esri team

      Calcite (design)

geospatialem commented 1 year ago

A list of components we could use for exploring tokens to start estimations and next steps:

geospatialem commented 1 year ago

A related issue surfaced with the Maps SDK for JS team regarding a global font family variable, https://github.com/Esri/calcite-design-system/issues/7175. Should we consider the effort as part of the design token epic above? cc @alisonailea

alisonailea commented 11 months ago

Next steps Review tokens in components #4098 Apply font family tokens to all components #7175

geospatialem commented 7 months ago

Once completed, we should verify if #7854 is mitigated, or if follow-up is needed.

anveshmekala commented 1 month ago

date-picker enhancement effort added internal tokens in select & date-picker* components. Watch out for merge conflicts when PR https://github.com/Esri/calcite-design-system/pull/8402 is installed and review the new internal tokens added.

cc @alisonailea @jcfranco @geospatialem