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.

Sign up for GitHub

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

Jump to bottom

Design token phase II - Integration across components #7180

Open
geospatialem opened this issue Jun 15, 2023 · 5 comments
Open

Design token phase II - Integration across components #7180

geospatialem opened this issue Jun 15, 2023 · 5 comments
Assignees
@alisonailea
Labels
2 - in development Issues that are actively being worked on. Calcite (design) Issues logged by Calcite designers. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 13 Requires planning and input from team, consider smaller steps. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2024-10-29 - Oct ...

Comments

@geospatialem
Copy link
Member

geospatialem commented Jun 15, 2023 •
edited
Loading

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

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));
}
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 geospatialem added enhancement Issues tied to a new feature or request. p - high Issue should be addressed in the current milestone, impacts component or core functionality 0 - new New issues that need assignment. estimate - 13 Requires planning and input from team, consider smaller steps. labels Jun 15, 2023
@geospatialem geospatialem added this to the 2023 August Priorities milestone Jun 15, 2023
@geospatialem geospatialem added the epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. label Jun 15, 2023
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. p3 - want for upcoming milestone labels Jun 15, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jun 15, 2023
@geospatialem geospatialem added the design-tokens Issues requiring design tokens. label Jun 29, 2023
@macandcheese macandcheese mentioned this issue Jul 26, 2023
Closed
3 tasks
@geospatialem geospatialem mentioned this issue Aug 8, 2023
Open
3 tasks
@jcfranco jcfranco mentioned this issue Aug 17, 2023
Closed
@geospatialem geospatialem mentioned this issue Aug 18, 2023
Open
3 tasks
@geospatialem
Copy link
Member Author

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

  • avatar
  • modal
  • shell-panel
  • tooltip

@jcfranco jcfranco mentioned this issue Aug 18, 2023
Merged
jcfranco added a commit that referenced this issue Aug 18, 2023
@jcfranco
fix: fix open/close event emitting in Safari (#7551)
a68b053 
**Related Issue:** #7180

## Summary

This updates how `onToggleOpenCloseComponent` determines the duration
for the `openTransitionProp` to be more robust to work consistently
across browsers.

The previous approach relied on the computed `transition` property
having all associated transition values laid out per prop, which didn't
work in Safari since it won't include all values if shared.

This change should be covered by existing tests.

cc @Elijbet
@alisonailea alisonailea mentioned this issue Aug 29, 2023
Closed
@macandcheese macandcheese mentioned this issue Sep 5, 2023
Closed
3 tasks
This was referenced Oct 5, 2023
Closed
Merged
@geospatialem geospatialem mentioned this issue Oct 16, 2023
Closed
@geospatialem
Copy link
Member Author

A related issue surfaced with the Maps SDK for JS team regarding a global font family variable, #7175. Should we consider the effort as part of the design token epic above? cc @alisonailea

@geospatialem geospatialem mentioned this issue Nov 6, 2023
Closed
Elijbet added a commit that referenced this issue Sep 12, 2024
@Elijbet
feat(progress): add component tokens (#10267)
8c1259f 
**Related Issue:** #7180

## Summary
Add `progress` component tokens.

`--calcite-progress-background-color`: Defines the background color of
the component.
`--calcite-progress-fill-color`: Defines the background color of the
progress bar.
`--calcite-progress-text-color`: Defines the text color of the
component.
Elijbet added a commit that referenced this issue Sep 13, 2024
@Elijbet
feat(handle): add component tokens (#10262)
5e73b44 
**Related Issue:** #7180

## Summary
Add `handle` component tokens.

`--calcite-handle-background-color`: Specifies the component's
background color.
`--calcite-handle-background-color-hover`: Specifies the component's
background color on hover.
`--calcite-handle-background-color-selected`: Specifies the component's
background color when selected.
`--calcite-handle-icon-color`: Specifies the component's icon color.
`--calcite-handle-icon-color-hover`: Specifies the component's icon
color on hover.
`--calcite-handle-icon-color-selected`: Specifies the component's icon
color when selected.
alisonailea added a commit that referenced this issue Sep 13, 2024
@alisonailea
feat(accordion-item): update component tokens
ca932b5 
**Related Issue:** #7180 #4060

## Summary

While this does not create additional tokens for the background color in
a -hover or -press state explicitly because this is outside of our
current design patterns, it does allow a user to accomplish this by only
targeting the top-level component styles.

```css
calcite-accordion-item:hover {
--calcite-accordion-item-background-color: blue;
}
calcite-accordion-item[expanded] {
--calcite-accordion-item-header-background-color: blue;
}
```

### Tokens

--calcite-accordion-item-background-color: Specifies the component's
background color.
--calcite-accordion-item-border-color: Specifies the component's border
color.
--calcite-accordion-item-content-space: Specifies the component's
padding.
--calcite-accordion-item-header-background-color: Specifies the
background color of the component's header.
--calcite-accordion-item-text-color: Specifies the component's text
color.
--calcite-accordion-item-heading-text-color: Specifies the component's
heading text color.
--calcite-accordion-item-icon-color: Specifies the component's default
icon color.
--calcite-accordion-item-start-icon-color: Specifies the component's
start icon color. Fallback to --calcite-accordion-item-icon-color or
current color.
--calcite-accordion-item-end-icon-color: Specifies the component's end
icon color. Fallback to --calcite-accordion-item-icon-color or current
color.
--calcite-accordion-item-expand-icon-color: Specifies the component's
expand icon color.
 
### Deprecated

--calcite-accordion-border-color: Use
--calcite-accordion-item-border-color. Specifies the component's border
color.
--calcite-accordion-text-color-hover: Use
--calcite-accordion-item-text-color-hover. Specifies the component's
main text color on hover.
--calcite-accordion-text-color-pressed: Use
--calcite-accordion-item-text-color-press. Specifies the component's
main text color when pressed.
--calcite-accordion-text-color: Use --calcite-accordion-item-text-color.
Specifies the component's text color.
aPreciado88 added a commit that referenced this issue Sep 13, 2024
@aPreciado88
feat(checkbox): add component tokens (#10221)
1d87dcf 
**Related Issue:**
[#7180](#7180)

## Summary

Add `checkbox` component tokens.

`--calcite-checkbox-shadow-color`: Specifies the component's color.
`--calcite-checkbox-shadow-color-hover`: Specifies the component's color
when hovered.
`--calcite-checkbox-color`: Specifies the component's font color.
@benelan benelan mentioned this issue Sep 18, 2024
Merged
@alisonailea alisonailea mentioned this issue Sep 19, 2024
Open
alisonailea added a commit that referenced this issue Sep 20, 2024
@alisonailea
feat(avatar): add component tokens (#10280)
f8f881b 
**Related Issue:** #7180 #7651 #4900

## Summary

### Tokens

--calcite-avatar-corner-radius: defines the corner radius of the
component.
--calcite-avatar-color: defines the icon or initial color in the
component.
--calcite-avatar-background-color: defines the background color of the
component.
alisonailea added a commit that referenced this issue Sep 20, 2024
@alisonailea
feat(chip): add component tokens (#10179)
ff82570 
**Related Issue:** #7180

## Summary

Adds tokens, e2e, and custom-theme chromatic tests. This ended up being
a larger refactor to clarify internal tokens.

### Chip Tokens

--calcite-chip-background-color: Specifies the background color of the
component.
--calcite-chip-border-color: Specifies the border color of the
component.
--calcite-chip-corner-radius: Specifies the corner radius of the
component.
--calcite-chip-text-color: Specifies the text color of the component.
--calcite-chip-icon-color: Specifies the icon color of the component.
--calcite-chip-close-icon-color: Specifies the icon color of the close
element of the component.
--calcite-chip-select-icon-color: Specifies the icon color of the
selection element of the component.
--calcite-chip-select-icon-color-pressed: Specifies the icon color of
the selection element of the component when active.

### Chip Group Tokens

--calcite-chip-group-items-space: Specifies spacing between items in the
component.
benelan added a commit that referenced this issue Sep 23, 2024
@benelan
feat(text-area): add component tokens (#10343)
d2504b7 
**Related Issue:** #7180, #7606, #9040

## Summary

Add the following component-scoped CSS Variables to `calcite-text-area`:

`--calcite-text-area-background-color`: Specifies the background color
of the component.
`--calcite-text-area-border-color`: Specifies the border color of the
text area.
`--calcite-text-area-character-limit-text-color`: Specifies the color of
the character limit text displayed in footer of the component.
`--calcite-text-area-divider-color`: Specifies the color of the divider
between the text area and footer.
`--calcite-text-area-font-size`: Specifies the font size of the thext
area and footer.
`--calcite-text-area-max-height`: Specifies the the maximum height of
the text area in the component.
`--calcite-text-area-min-height`: Specifies the minimum height of the
text area in the component.
`--calcite-text-area-text-color`: Specifies the color of text in the
component.
`--calcite-text-area-footer-border-color`: Specifies the border color of
the footer.
Elijbet added a commit that referenced this issue Sep 23, 2024
@Elijbet
feat(popover, action): add component tokens (#10253)
80e8112 
**Related Issue:** #7180

## Summary
Add `popover` component tokens.

`--calcite-popover-background-color`: Specifies the background color of
the component.
`--calcite-popover-border-color`: Specifies the border color of the
component.
`--calcite-popover-corner-radius`: Specifies the corner radius of the
component.
`--calcite-popover-text-color`: Specifies the text color of the
component.

Add `action` component tokens.

`--calcite-action-corner-radius`: Specifies the component's corner
radius.
`--calcite-action-corner-radius-end-end`: Specifies the component's
corner radius end end.
`--calcite-action-corner-radius-end-start`: Specifies the component's
corner radius end start.
`--calcite-action-corner-radius-start-end`: Specifies the component's
corner radius start end.
`--calcite-action-corner-radius-start-start`: Specifies the component's
corner radius start start.
aPreciado88 added a commit that referenced this issue Sep 24, 2024
@aPreciado88
feat(alert): add component tokens (#10218)
550427b 
**Related Issue:**
[#7180](#7180)

## Summary

Add `alert` component tokens.

`--calcite-alert-background-color`: Specifies the component's background
color.
`--calcite-alert-corner-radius`: Specifies the component's border
radius.
`--calcite-alert-shadow`: Specifies the component's shadow.
@jcfranco jcfranco mentioned this issue Sep 25, 2024
Open
@Elijbet Elijbet mentioned this issue Sep 25, 2024
Merged
Elijbet added a commit that referenced this issue Sep 25, 2024
@Elijbet
feat(popover): apply component tokens to arrow (#10386)
2d19268 
**Related Issue:** #7180

## Summary
Apply `popover` component tokens `--calcite-popover-background-color`
and `--calcite-popover-border-color` to `floating arrow`.
@aPreciado88 aPreciado88 mentioned this issue Sep 25, 2024
Merged
@jcfranco jcfranco mentioned this issue Sep 25, 2024
Merged
@benelan benelan mentioned this issue Sep 25, 2024
Merged
macandcheese added a commit that referenced this issue Sep 25, 2024
@macandcheese
feat(dialog, panel): Add css properties for background-color (#10387)
d725293 
**Related Issue:** #10093 

## Summary
Adds `--calcite-dialog-background-color` to Dialog
Adds `--calcite-panel-background-color` to Panel

Further token work may occur through related issues: #7180, #10380, etc.
aPreciado88 added a commit that referenced this issue Sep 25, 2024
@aPreciado88
feat(alert): apply --calcite-alert-corner-radius to internal close bu…
f50c170 
…tton (#10388)

**Related Issue:**
[#7180](#7180)

## Summary
-Apply `calcite-alert-corner-radius` to internal close button.

-Make queue count's container background-color transparent.
benelan added a commit that referenced this issue Sep 26, 2024
@benelan
fix(text-area): ensure border-color token doesn't override invalid st…
699e166 
…yles (#10390)

**Related Issue:** #7180

## Summary

Ensure `--calcite-text-area--border-color` does not override the
`--calcite-color-status-danger` styling.
@anveshmekala
Copy link
Contributor

date-picker enhancement effort added internal tokens in select & date-picker* components. Watch out for merge conflicts when PR #8402 is installed and review the new internal tokens added.

cc @alisonailea @jcfranco @geospatialem

@geospatialem geospatialem mentioned this issue Sep 27, 2024
Merged
geospatialem added a commit that referenced this issue Sep 27, 2024
@geospatialem
docs: component token description consistency (#10430)
33f0c65 
**Related Issue:** #7180 

## Summary
Provide consistency and alignment in our docs across the design system
for component design tokens, also in alignment with our [component token
example PR](#10058). 📚
@eriklharper eriklharper mentioned this issue Oct 2, 2024
Open
@jcfranco jcfranco mentioned this issue Oct 2, 2024
Merged
@geospatialem geospatialem mentioned this issue Oct 9, 2024
Merged
@alisonailea alisonailea mentioned this issue Oct 9, 2024
Open
@macandcheese macandcheese mentioned this issue Oct 10, 2024
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alisonailea alisonailea

Labels
2 - in development Issues that are actively being worked on. Calcite (design) Issues logged by Calcite designers. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 13 Requires planning and input from team, consider smaller steps. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2024-10-29 - Oct Milestone
Development

No branches or pull requests
5 participants
@jcfranco @eriklharper @alisonailea @geospatialem @anveshmekala