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(menu-item): add component tokens #8843

Merged
merged 21 commits into from
Mar 11, 2024
Merged

feat(menu-item): add component tokens #8843

merged 21 commits into from
Mar 11, 2024

Conversation

anveshmekala
Copy link
Contributor

@anveshmekala anveshmekala commented Feb 27, 2024 •
edited
Loading

Related Issue: #7180

Summary

Adds following tokens in calcite-menu-item

--calcite-menu-item-action-background-color-active: defines the background color of an action sub-component when active.
--calcite-menu-item-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
--calcite-menu-item-action-background-color: defines the background color of an action sub-component inside a menu-item.
--calcite-menu-item-action-border-color: Specifies the border inline start color of an action sub-component.
--calcite-menu-item-action-text-color: Specifies the text color of an action sub component.
--calcite-menu-item-background-color: Specifies the background color of the component.
--calcite-menu-item-border-color: Specifies the border color of the component.
--calcite-menu-item-icon-color: Specifies the color of the icon.
--calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
--calcite-menu-item-sub-menu-corner-radius: Specifies the border radius of sub-menu.
--calcite-menu-item-text-color: Specifies the text color of the component.

macandcheese
macandcheese reviewed Feb 29, 2024
View reviewed changes
packages/calcite-components/src/components/menu-item/menu-item.scss Outdated
* @prop --calcite-menu-item-dropdown-icon-color-active: Specifies the color of the dropdown icon when active.
* @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
* @prop --calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
* @porp --calcite-menu-item-sub-menu-background-color: Specifies the background color of sub-menu.
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we can use the same styling for all menu items, if possible.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Agree this might be granular and can be avoided. Dropping them.

Copy link
Contributor Author

@anveshmekala anveshmekala Mar 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

we might need the border-color & border-radius for sub-menu container though.

@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 5, 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 Mar 5, 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 Mar 5, 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 Mar 5, 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 Mar 5, 2024
@anveshmekala anveshmekala marked this pull request as ready for review March 5, 2024 22:54
@anveshmekala anveshmekala requested a review from a team as a code owner March 5, 2024 22:54
@anveshmekala anveshmekala changed the title feat(menu, menu-item): add component tokens feat(menu-item): add component tokens Mar 5, 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 Mar 7, 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 Mar 7, 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 Mar 8, 2024
@anveshmekala anveshmekala marked this pull request as draft March 11, 2024 17:59
@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 Mar 11, 2024
@anveshmekala anveshmekala marked this pull request as ready for review March 11, 2024 21:16
alisonailea
alisonailea approved these changes Mar 11, 2024
View reviewed changes
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.

🎉

@anveshmekala anveshmekala merged commit 86edb76 into epic/7180-component-tokens Mar 11, 2024
7 of 8 checks passed
@anveshmekala anveshmekala deleted the anveshmekala/7180-menu-item-component-tokens branch March 11, 2024 22:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@macandcheese macandcheese macandcheese left review comments

@alisonailea alisonailea alisonailea 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.
3 participants
@anveshmekala @alisonailea @macandcheese