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

feat(input-date-picker): adds sub component tokens #9007

Merged
merged 3 commits into from
Apr 3, 2024
Merged

feat(input-date-picker): adds sub component tokens #9007

merged 3 commits into from
Apr 3, 2024

Conversation

anveshmekala
Copy link
Contributor

@anveshmekala anveshmekala commented Mar 26, 2024 •
edited
Loading

Related Issue: #7180

Summary

Adds following sub component tokens in calcite-input-date-picker :

--calcite-input-date-picker-border-color: defines the border color of the date picker sub component.
--calcite-input-date-picker-corner-radius: defines the corner radius of the date picker sub component.
--calcite-input-date-picker-day-background-color-hover : defines the background color of a day in the date picker sub component when hovered.
--calcite-input-date-picker-day-background-color-selected: defines the background color of a day in the date picker sub component when selected.
--calcite-input-date-picker-day-background-color: defines the background color of a day in the date picker sub component.
--calcite-input-date-picker-day-corner-radius: defines the corner radius of a day in the date picker sub component.
--calcite-input-date-picker-day-range-background-color-hover: defines the background color of day range in the date picker sub component when hovered.
--calcite-input-date-picker-day-range-background-color-selected: defines the background color of day range in the date picker sub component when selected.
--calcite-input-date-picker-day-text-color-hover: defines the text color of a day in the date picker sub component when hovered.
--calcite-input-date-picker-day-text-color: defines the text color of a day in the date picker sub component.
--calcite-input-date-picker-day-text-selected: defines the text color of a day in the date picker sub component when selected.
--calcite-input-date-picker-header-background-color: defines the background color of the header in the date picker sub component.
--calcite-input-date-picker-header-navigation-button-background-color : defines the background color of the navigation button in the date picker sub component.
--calcite-input-date-picker-header-navigation-button-background-color-active: defines the background color of the navigation button in the date picker sub component when active.
--calcite-input-date-picker-header-navigation-button-background-color-hover : defines the background color of the navigation button in the date picker sub component when hovered.
--calcite-input-date-picker-header-navigation-button-text-color-hover: defines the text color of the navigation button in the date picker sub component when hovered.
--calcite-input-date-picker-header-navigation-button-text-color: defines the text color of the navigation button in the date picker sub component.
--calcite-input-date-picker-header-text-color: defines the text color of the header in the date picker sub component.
--calcite-input-date-picker-week-headers-text-color : defines the text color of week headers in the date picker sub component.

@anveshmekala anveshmekala changed the title feat(input-date-pickers): adds sub component tokens feat(input-date-picker): adds sub component tokens Mar 26, 2024
@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 26, 2024
@anveshmekala anveshmekala marked this pull request as ready for review March 26, 2024 22:52
@anveshmekala anveshmekala requested a review from a team as a code owner March 26, 2024 22:52
jcfranco
jcfranco approved these changes Apr 2, 2024
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

Other than a few comments regarding naming, this LGTM! 🚀

packages/calcite-components/src/components/input-date-picker/input-date-picker.scss Outdated
--calcite-date-picker-day-text-color-hover: var(--calcite-input-date-picker-day-text-color-hover);
--calcite-date-picker-day-text-color: var(--calcite-input-date-picker-day-text-color);
--calcite-date-picker-day-text-selected: var(--calcite-input-date-picker-day-text-selected);
--calcite-date-picker-week-headers-text-color: var(--calcite-input-date-picker-week-headers-text-color);
Copy link
Member

Choose a reason for hiding this comment

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

Should this be header (singular) since there's only one week header? Can be tackled in a follow-up PR.

packages/calcite-components/src/components/input-date-picker/input-date-picker.scss Outdated
--calcite-date-picker-header-navigation-button-background-color-active: var(
--calcite-input-date-picker-header-navigation-button-background-color-active
);
--calcite-date-picker-header-navigation-button-background-color-hover: var(
Copy link
Member

Choose a reason for hiding this comment

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

If there's only one type of button in the header, maybe we can drop navigation? Can be tackled in a follow-up PR.

@anveshmekala anveshmekala 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 3, 2024
@anveshmekala anveshmekala 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 3, 2024
@anveshmekala anveshmekala merged commit c284778 into epic/7180-component-tokens Apr 3, 2024
8 checks passed
@anveshmekala anveshmekala deleted the anveshmekala/7180-input-date-picker-add-missing-tokens branch April 3, 2024 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jcfranco jcfranco jcfranco approved these changes

Assignees
No one assigned
Labels
pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@anveshmekala @jcfranco