Skip to content

feat(filter): add component tokens #11885

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

Merged
merged 3 commits into from
Apr 29, 2025
Merged

feat(filter): add component tokens #11885

merged 3 commits into from
Apr 29, 2025

Conversation

driskull
Copy link
Member

@driskull driskull commented Apr 7, 2025

Related Issue: #7180

Summary

Adds the following tokens for filter component.

  • --calcite-filter-content-space: Specifies the padding of the component's content.
  • --calcite-filter-input-background-color: Specifies the input's background color.
  • --calcite-filter-input-border-color: Specifies the input's border color.
  • --calcite-filter-input-corner-radius: Specifies the input's corner radius.
  • --calcite-filter-input-shadow: Specifies the shadow around the input.
  • --calcite-filter-input-icon-color: Specifies the input's icon color.
  • --calcite-filter-input-text-color: Specifies the input's text color.
  • --calcite-filter-input-placeholder-text-color: Specifies the input's placeholder text color.
  • --calcite-filter-input-actions-background-color: Specifies the background color of the input's clearable and number-button-type elements.
  • --calcite-filter-input-actions-background-color-hover: Specifies the background color of the input's clearable and number-button-type elements when hovered.
  • --calcite-filter-input-actions-background-color-press: Specifies the background color of the input's clearable and number-button-type elements when pressed.
  • --calcite-filter-input-actions-icon-color: Specifies the icon color of the input's clearable and number-button-type elements.
  • --calcite-filter-input-actions-icon-color-hover: Specifies the icon color of the input's clearable and number-button-type elements when hovered.
  • --calcite-filter-input-actions-icon-color-press: Specifies the icon color of the input's clearable and number-button-type elements when pressed.
    /nts when pressed.

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Apr 7, 2025
@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 7, 2025
@driskull driskull marked this pull request as ready for review April 7, 2025 20:14
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 Apr 18, 2025
@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Apr 26, 2025
@driskull
Copy link
Member Author

Ping. still need a review on this one.

/**
* CSS Custom Properties
*
* @prop --calcite-filter-content-space: Specifies the padding of the component's content.
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this in practice the space around the input? Might be a little confusing here as it kind of insinuates there is a default slot for Filter. Nothing actionable here I don't think - are we still planning on deprecating the Filter component?

Copy link
Member Author

Choose a reason for hiding this comment

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

I agree, its weird.

are we still planning on deprecating the Filter component?

I would hope so. @jcfranco? We have this issue: #8877

Copy link
Member Author

Choose a reason for hiding this comment

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

I commented on the issue as well.

Copy link
Contributor

@macandcheese macandcheese left a comment

Choose a reason for hiding this comment

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

Looks good, just some nitpick / tangential thoughts.

@driskull driskull 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 Apr 29, 2025
@driskull driskull merged commit e7813f9 into dev Apr 29, 2025
14 checks passed
@driskull driskull deleted the dris0000/filter-tokens branch April 29, 2025 23:31
@github-actions github-actions bot added this to the 2025-04-29 - Apr Milestone milestone Apr 29, 2025
benelan pushed a commit that referenced this pull request May 14, 2025
**Related Issue:** #7180

## Summary

Adds the following tokens for `filter` component.

- --calcite-filter-content-space: Specifies the padding of the
component's content.
- --calcite-filter-input-background-color: Specifies the input's
background color.
- --calcite-filter-input-border-color: Specifies the input's border
color.
- --calcite-filter-input-corner-radius: Specifies the input's corner
radius.
- --calcite-filter-input-shadow: Specifies the shadow around the input.
- --calcite-filter-input-icon-color: Specifies the input's icon color.
- --calcite-filter-input-text-color: Specifies the input's text color.
- --calcite-filter-input-placeholder-text-color: Specifies the input's
placeholder text color.
- --calcite-filter-input-actions-background-color: Specifies the
background color of the input's `clearable` and `number-button-type`
elements.
- --calcite-filter-input-actions-background-color-hover: Specifies the
background color of the input's `clearable` and `number-button-type`
elements when hovered.
- --calcite-filter-input-actions-background-color-press: Specifies the
background color of the input's `clearable` and `number-button-type`
elements when pressed.
- --calcite-filter-input-actions-icon-color: Specifies the icon color of
the input's `clearable` and `number-button-type` elements.
- --calcite-filter-input-actions-icon-color-hover: Specifies the icon
color of the input's `clearable` and `number-button-type` elements when
hovered.
- --calcite-filter-input-actions-icon-color-press: Specifies the icon
color of the input's `clearable` and `number-button-type` elements when
pressed.
/nts when pressed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issues tied to a new feature or request. 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.

2 participants