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(chip, chip group): Add component tokens #8607

Merged

Conversation

macandcheese
Copy link
Contributor

@macandcheese macandcheese commented Jan 13, 2024

Related Issue: #7180

Summary
Adds the following public component css properties:
--calcite-chip-background-color: Specifies the background color of the component.
--calcite-chip-border-color: Specifies the border color of the component.
--calcite-chip-shadow: Specifies the box shadow of the component.
--calcite-chip-corner-radius: Specifies the corner radius of the component.
--calcite-chip-icon-color: Specifies the color of the component's icon property.
--calcite-chip-text-color: Specifies the color of the component's "default" slot.
--calcite-chip-close-icon-color: Specifies the color of the component's closable icon.
--calcite-chip-close-background-color: Specifies the color of the component's closable background color.
--calcite-chip-close-background-color-hover: Specifies the hover color of the component's closable background color.
--calcite-chip-close-background-color-active: Specifies the active color of the component's closable background color.
--calcite-chip-close-background-color-focus: Specifies the focus color of the component's closable background color.
--calcite-chip-close-focus-outline-color: Specifies the focus color of the component's closable background color.

Adds a Chromatic test and a demo page example. Also replaces broken image links in local demo.

@macandcheese macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 13, 2024
box-border
font-medium;
border: var(--calcite-border-width-sm) solid var(--calcite-chip-border-color, var(--calcite-color-border-3));
border-radius: var(--calcite-chip-corner-radius, 9999px);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This 9999px needs to made into a token - in TW this is rounded-full

@benelan benelan added skip visual snapshots Pull requests that do not need visual regression testing. and removed skip visual snapshots Pull requests that do not need visual regression testing. labels Jan 13, 2024
@macandcheese macandcheese marked this pull request as ready for review January 16, 2024 18:07
@macandcheese macandcheese requested a review from a team as a code owner January 16, 2024 18:07
@benelan benelan added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 16, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 17, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 17, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 17, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 17, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 17, 2024
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jan 25, 2024
@macandcheese macandcheese removed the Stale Issues or pull requests that have not had recent activity. label Jan 29, 2024
Copy link
Contributor

github-actions bot commented Feb 6, 2024

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Feb 6, 2024
Copy link
Contributor

@alisonailea alisonailea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lift all tokens into :host and only apply each style prop to an HTML element once with a CSS variable (token) then reassign the variable when the host state changes.

@macandcheese macandcheese removed the Stale Issues or pull requests that have not had recent activity. label Feb 15, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Feb 16, 2024
@macandcheese macandcheese removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 16, 2024
@macandcheese macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 16, 2024
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Feb 16, 2024
@macandcheese macandcheese merged commit 11b46f0 into epic/7180-component-tokens Feb 16, 2024
8 of 9 checks passed
@macandcheese macandcheese deleted the macandcheese/token-update-chip branch February 16, 2024 22:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants