refactor(action, action-pad, action-bar, action-group, action-menu, popover): component tokens #8968
Conversation
--calcite-action-background-color: Specifies the background color of the component. --calcite-action-text-color: Specifies the text color of the component. --calcite-action-shadow: Specifies the shadow of the component. --calcite-action-icon-color: Specifies the color of the component's icon. --calcite-action-indicator-color: Specifies the color of the component's indicator. --calcite-action-loader-color: Specifies the color of the component's loader.
--calcite-action-pad-expanded-max-width: When `layout` is `"vertical"`, specifies the expanded max width of the component. --calcite-action-pad-corner-radius: Specifies the corner radius of the component. --calcite-action-pad-background-color: Specifies the background color of the component. --calcite-action-pad-shadow: Specifies the shadow of the component.
--calcite-action-menu-text-color: Specifies the text color of the component.
…components into astump/7180-action-actionPad-actionBar-actionGroup # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
| } | ||
| :host([columns="6"]) { | ||
| --calcite-internal-action-group-columns: 6; | ||
| // :host([columns="1 - 6"]) |
There was a problem hiding this comment.
I don't think this comment is necessary as the code is pretty expressive.
| inset-block-end: calc(-0.275rem); | ||
| inset-inline-end: calc(-0.275rem); | ||
| background-color: var(--calcite-action-indicator-color, var(--calcite-color-brand)); | ||
| * { |
There was a problem hiding this comment.
You can use the base-host mixin to set up box-sizing.
| :host(:hover), | ||
| :host(:focus) { | ||
| .button { | ||
| --calcite-internal-action-text-color: var(--calcite-color-text-1); |
There was a problem hiding this comment.
Why not set at the host-level to simplify the rule? The variable is already prefixed as internal. Wanted to bring this up as a potential way to simplify. We can tackle, if needed, in the ⚡epic⚡ PR review.
There was a problem hiding this comment.
if we nest the assignments within sub-elements of the shadow dom they are protected, a user can't reassign them. But I'm open.
There was a problem hiding this comment.
As long as internal CSS props are properly named, I'm fine to move these to the host if it simplifies the code. cc @macandcheese @driskull
| @@ -3,91 +3,54 @@ | |||
| * | |||
| * These properties can be overridden using the component's tag as selector. | |||
| * | |||
| * @prop --calcite-action-bar-action-background-color: defines the background color of an action sub-component inside the component. | |||
There was a problem hiding this comment.
I may be missing something, but it seems like it is no longer possible to theme some of the internal components:
- action pad/bar ➡️ action-group
- action menu ➡️ action, popover
- action group ➡️ action, action-menu
There was a problem hiding this comment.
oop. thanks for the catch. adding those back
| * @prop --calcite-popover-close-icon-color: defines the component's close icon color. | ||
| * @prop --calcite-popover-close-icon-color-hover: defines the component's close icon color on hover. | ||
| * @prop --calcite-popover-close-icon-color-active: defines the component's close icon color when active. | ||
| * @prop --calcite-popover-background-color: Specifies the background color of the component. |
There was a problem hiding this comment.
Can we add popover to the PR title/conventional commit scope?
| :host(:hover), | ||
| :host(:focus) { | ||
| .button { | ||
| --calcite-internal-action-text-color: var(--calcite-color-text-1); |
There was a problem hiding this comment.
As long as internal CSS props are properly named, I'm fine to move these to the host if it simplifies the code. cc @macandcheese @driskull
Related Issue: #7180
Summary
Action
--calcite-action-shadow: Specifies the shadow of the component.
--calcite-action-icon-color: Specifies the color of the component's icon.
--calcite-action-indicator-color: Specifies the color of the component's indicator.
--calcite-action-loader-color: Specifies the color of the component's loader.
Action Pad
--calcite-action-pad-background-color: Specifies the background color of the component.
--calcite-action-pad-border-color: Specifies the border color of the component.
--calcite-action-pad-corner-radius: Specifies the corner radius of the component.
--calcite-action-pad-expanded-max-width: When
layoutis"vertical", specifies the expanded max width of the component.--calcite-action-pad-popover-background-color: Specifies the background color of the popover in the component.
--calcite-action-pad-popover-border-color: Specifies the border color of the popover in the component.
--calcite-action-pad-popover-corner-radius: Specifies the corner radius of the popover in the component.
--calcite-action-pad-popover-shadow: Specifies the shadow of the popover in the component.
--calcite-action-pad-shadow: Specifies the shadow of the component.
--calcite-action-pad-trigger-background-color-active: Specifies the background color of the nested trigger when active in the component.
--calcite-action-pad-trigger-background-color-focus: Specifies the background color of the nested trigger when focused in the component.
--calcite-action-pad-trigger-background-color-hover: Specifies the background color of the nested trigger when hovered in the component.
--calcite-action-pad-trigger-background-color: Specifies the background color of the nested trigger in the component.
--calcite-action-pad-trigger-icon-color-active: Specifies the icon color color of the nested trigger when active in the component
--calcite-action-pad-trigger-icon-color-focus: Specifies the icon color of the nested trigger when focused in the component.
--calcite-action-pad-trigger-icon-color-hover: Specifies the icon color of the nested trigger when hovered in the component.
--calcite-action-pad-trigger-icon-color: Specifies the icon color of the nested trigger in the component.
--calcite-action-pad-trigger-indicator-color: Specifies the indicator color of the nested trigger in the component.
--calcite-action-pad-trigger-loader-color: Specifies the loader color of the nested trigger in the component component.
--calcite-action-pad-trigger-shadow-active: Specifies the shadow of the nested trigger when active in the component.
--calcite-action-pad-trigger-shadow-focus: Specifies the shadow of the nested trigger when focused in the component.
--calcite-action-pad-trigger-shadow-hover: Specifies the shadow of the nested trigger when hovered in the component.
--calcite-action-pad-trigger-shadow: Specifies the shadow of the nested trigger in the component.
--calcite-action-pad-trigger-text-color-active: Specifies the text color of the nested trigger when active in the component.
--calcite-action-pad-trigger-text-color-focus: Specifies the text color of the nested trigger when focused in the component.
--calcite-action-pad-trigger-text-color-hover: Specifies the text color of the nested trigger when hovered in the component.
--calcite-action-pad-trigger-text-color: Specifies the text color of the nested trigger in the component.
Action Bar
--calcite-action-bar-expanded-max-width: When
layoutis"vertical", specifies the expanded max width of the component.--calcite-action-bar-border-color: Specifies the border color of the component.
--calcite-action-bar-popover-background-color: Specifies the background color of the popover in the component.
--calcite-action-bar-popover-border-color: Specifies the border color of the popover in the component.
--calcite-action-bar-popover-corner-radius: Specifies the corner radius of the popover in the component.
--calcite-action-bar-popover-shadow: Specifies the shadow of the popover in the component.
--calcite-action-bar-trigger-background-color-active: Specifies the background color of the nested trigger when active in the component.
--calcite-action-bar-trigger-background-color-focus: Specifies the background color of the nested trigger when focused in the component.
--calcite-action-bar-trigger-background-color-hover: Specifies the background color of the nested trigger when hovered in the component.
--calcite-action-bar-trigger-background-color: Specifies the background color of the nested trigger in the component.
--calcite-action-bar-trigger-icon-color-active: Specifies the icon color color of the nested trigger when active in the component
--calcite-action-bar-trigger-icon-color-focus: Specifies the icon color of the nested trigger when focused in the component.
--calcite-action-bar-trigger-icon-color-hover: Specifies the icon color of the nested trigger when hovered in the component.
--calcite-action-bar-trigger-icon-color: Specifies the icon color of the nested trigger in the component.
--calcite-action-bar-trigger-indicator-color: Specifies the indicator color of the nested trigger in the component.
--calcite-action-bar-trigger-loader-color: Specifies the loader color of the nested trigger in the component component.
--calcite-action-bar-trigger-shadow-active: Specifies the shadow of the nested trigger when active in the component.
--calcite-action-bar-trigger-shadow-focus: Specifies the shadow of the nested trigger when focused in the component.
--calcite-action-bar-trigger-shadow-hover: Specifies the shadow of the nested trigger when hovered in the component.
--calcite-action-bar-trigger-shadow: Specifies the shadow of the nested trigger in the component.
--calcite-action-bar-trigger-text-color-active: Specifies the text color of the nested trigger when active in the component.
--calcite-action-bar-trigger-text-color-focus: Specifies the text color of the nested trigger when focused in the component.
--calcite-action-bar-trigger-text-color-hover: Specifies the text color of the nested trigger when hovered in the component.
--calcite-action-bar-trigger-text-color: Specifies the text color of the nested trigger in the component.
Action Group
--calcite-action-group-border-color: Specifies the border color of the component.
--calcite-action-group-columns: [Deprecated] Sets number of grid-template-columns when the
layoutproperty is"grid".--calcite-action-group-gap: [Deprecated] Sets the gap (gutters) between rows and columns when the
layoutproperty is"grid".--calcite-action-group-padding: [Deprecated] Sets the padding when the
layoutproperty is"grid".--calcite-action-group-popover-background-color: Specifies the background color of the popover in the component.
--calcite-action-group-popover-border-color: Specifies the border color of the popover in the component.
--calcite-action-group-popover-corner-radius: Specifies the corner radius of the popover in the component.
--calcite-action-group-popover-shadow: Specifies the shadow of the popover in the component.
--calcite-action-group-trigger-background-color-active: Specifies the background color of the nested trigger when active in the component.
--calcite-action-group-trigger-background-color-focus: Specifies the background color of the nested trigger when focused in the component.
--calcite-action-group-trigger-background-color-hover: Specifies the background color of the nested trigger when hovered in the component.
--calcite-action-group-trigger-background-color: Specifies the background color of the nested trigger in the component.
--calcite-action-group-trigger-icon-color-active: Specifies the icon color color of the nested trigger when active in the component
--calcite-action-group-trigger-icon-color-focus: Specifies the icon color of the nested trigger when focused in the component.
--calcite-action-group-trigger-icon-color-hover: Specifies the icon color of the nested trigger when hovered in the component.
--calcite-action-group-trigger-icon-color: Specifies the icon color of the nested trigger in the component.
--calcite-action-group-trigger-indicator-color: Specifies the indicator color of the nested trigger in the component.
--calcite-action-group-trigger-loader-color: Specifies the loader color of the nested trigger in the component component.
--calcite-action-group-trigger-shadow-active: Specifies the shadow of the nested trigger when active in the component.
--calcite-action-group-trigger-shadow-focus: Specifies the shadow of the nested trigger when focused in the component.
--calcite-action-group-trigger-shadow-hover: Specifies the shadow of the nested trigger when hovered in the component.
--calcite-action-group-trigger-shadow: Specifies the shadow of the nested trigger in the component.
--calcite-action-group-trigger-text-color-active: Specifies the text color of the nested trigger when active in the component.
--calcite-action-group-trigger-text-color-focus: Specifies the text color of the nested trigger when focused in the component.
--calcite-action-group-trigger-text-color-hover: Specifies the text color of the nested trigger when hovered in the component.
--calcite-action-group-trigger-text-color: Specifies the text color of the nested trigger in the component.
Action Menu
--calcite-action-menu-close-background-color-active: Specifies the background color of an action sub-component when active inside the component.
--calcite-action-menu-close-background-color-hover: Specifies the background color of an action sub-component when hovered or focused inside the component.
--calcite-action-menu-close-background-color: Specifies the background color of an action sub-component inside the component.
--calcite-action-menu-close-icon-color-active: Specifies the component's close icon color when active.
--calcite-action-menu-close-icon-color-hover: Specifies the component's close icon color on hover.
--calcite-action-menu-close-icon-color: Specifies the component's close icon color.
--calcite-action-menu-close-text-color-active: Specifies the text color of an action sub-component when active inside the component.
--calcite-action-menu-close-text-color-hover: Specifies the text color of an action sub-component when hovered or focused inside the component.
--calcite-action-menu-close-text-color: Specifies the text color of an action sub-component inside the component.
--calcite-action-menu-popover-background-color: Specifies the background color of the component.
--calcite-action-menu-popover-border-color: Specifies the border color of the component.
--calcite-action-menu-popover-corner-radius: Specifies the corner radius of the component.
--calcite-action-menu-popover-shadow: Specifies the shadow of the component.
--calcite-action-menu-popover-text-color: Specifies the text color of the component.
--calcite-action-menu-trigger-background-color-active: Specifies the background color of the component's default trigger when active.
--calcite-action-menu-trigger-background-color-focus: Specifies the background color of the component's default trigger when focused.
--calcite-action-menu-trigger-background-color-hover: Specifies the background color of the component's default trigger when hovered.
--calcite-action-menu-trigger-background-color: Specifies the background color of the component.
--calcite-action-menu-trigger-icon-color-active: Specifies the background color of the component's default trigger when active.
--calcite-action-menu-trigger-icon-color-focus: Specifies the background color of the component's default trigger when focused.
--calcite-action-menu-trigger-icon-color-hover: Specifies the background color of the component's default trigger when hovered.
--calcite-action-menu-trigger-icon-color: Specifies the color of the component's icon.
--calcite-action-menu-trigger-indicator-color: Specifies the color of the component's indicator.
--calcite-action-menu-trigger-loader-color: Specifies the color of the component's loader.
--calcite-action-menu-trigger-shadow: Specifies the shadow of the component.
--calcite-action-menu-trigger-text-color-active: Specifies the background color of the component's default trigger when active.
--calcite-action-menu-trigger-text-color-focus: Specifies the background color of the component's default trigger when focused.
--calcite-action-menu-trigger-text-color-hover: Specifies the background color of the component's default trigger when hovered.
--calcite-action-menu-trigger-text-color: Specifies the text color of the component.
Popover
--calcite-popover-background-color: Specifies the background color of the component.
--calcite-popover-border-color: Specifies the border color of the component.
--calcite-popover-close-background-color-active: Specifies the background color of an action sub-component when active inside the component.
--calcite-popover-close-background-color-hover: Specifies the background color of an action sub-component when hovered or focused inside the component.
--calcite-popover-close-background-color: Specifies the background color of an action sub-component inside the component.
--calcite-popover-close-icon-color-active: Specifies the component's close icon color when active.
--calcite-popover-close-icon-color-hover: Specifies the component's close icon color on hover.
--calcite-popover-close-icon-color: Specifies the component's close icon color.
--calcite-popover-close-text-color-active: Specifies the text color of an action sub-component when active inside the component.
--calcite-popover-close-text-color-hover: Specifies the text color of an action sub-component when hovered or focused inside the component.
--calcite-popover-close-text-color: Specifies the text color of an action sub-component inside the component.
--calcite-popover-corner-radius: Specifies the corner radius of the component.
--calcite-popover-shadow: Specifies the shadow of the component.
--calcite-popover-text-color: Specifies the text color of the component.