feat(checkbox, tree-item, card): add component tokens with fallbacks #8838
Conversation
…components into astump/7180-checkbox
…components into astump/7180-checkbox
…components into astump/7180-checkbox # Conflicts: # packages/calcite-components/src/components/card/card.scss
| * @prop --calcite-card-background-color: Specifies the background color of the component. | ||
| * @prop --calcite-card-border-color: Specifies the border color of the component. | ||
| * @prop --calcite-card-shadow: Specifies the shadow of the component. | ||
| * @prop --calcite-card-checkbox-background-color-checked: *deprecated* defines the background-color of the sub-component when checked. | ||
| * @prop --calcite-card-checkbox-background-color: *deprecated* defines the background-color of the sub-component. |
There was a problem hiding this comment.
Maybe a convention outside the scope of this, but can we use [Deprecated] for this tag?
There was a problem hiding this comment.
Maybe we can have a custom stylelint rule for this? Deprecated should be surrounded by brackets or something.
There was a problem hiding this comment.
Yeah, that's a good idea. Both @prop here and @slot in the tsx files use this as unfortunately you can't use the built-in JSDoc @deprecated functionality. Maybe something Stencil could build into their compiler.
There was a problem hiding this comment.
We could open a stencil request for this but i'm not sure if they would add it.
There was a problem hiding this comment.
Would it be the same as this issue @macandcheese ? ionic-team/stencil#3111
There was a problem hiding this comment.
Similar - the JSDoc @deprecated they mention in the follow-up comment works for props, events, methods, just not for slots / css props.
| * @prop --calcite-card-checkbox-shadow-hover: *deprecated* defines the shadow of the sub-component when hovered. | ||
| * @prop --calcite-card-checkbox-shadow-invalid: *deprecated* defines the shadow of the sub-component when invalid. | ||
| * @prop --calcite-card-checkbox-shadow: *deprecated* defines the shadow of the sub-component. | ||
| * @prop --calcite-card-checkbox-size: *deprecated* defines the size of the sub-component. |
There was a problem hiding this comment.
I don't think we need to allow the checkbox size to be customized when it's rendered within another component. Applies to Tree Item as well.
There was a problem hiding this comment.
This was a previously documented token though. I think we need to deprecate and remove in the next breaking change
There was a problem hiding this comment.
Sorry, I just meant --calcite-card-checkbox-size and --calcite-tree-item-checkbox-size.
| * @prop --calcite-tree-item-checkbox-shadow: defines the shadow of the sub-component. | ||
| * @prop --calcite-tree-item-checkbox-shadow-checked: defines the shadow of the sub-component when checked. | ||
| * @prop --calcite-tree-item-checkbox-shadow-hover: defines the shadow of the sub-component when hovered. | ||
| * @prop --calcite-tree-item-checkbox-shadow-invalid: defines the shadow of the sub-component when invalid. |
There was a problem hiding this comment.
I don't think a Checkbox can be in an invalid state within Tree, so this isn't applicable.
| * @prop --calcite-card-checkbox-icon-color: *deprecated* defines the checkmark color of the sub-component. | ||
| * @prop --calcite-card-checkbox-shadow-checked: *deprecated* defines the shadow of the sub-component when checked. | ||
| * @prop --calcite-card-checkbox-shadow-hover: *deprecated* defines the shadow of the sub-component when hovered. | ||
| * @prop --calcite-card-checkbox-shadow-invalid: *deprecated* defines the shadow of the sub-component when invalid. |
There was a problem hiding this comment.
This one as well - the Checkbox within Card can't be in an invalid state.
Related Issue: #7180
Summary
Checkbox
--calcite-checkbox-background-color: defines the background color of the component
--calcite-checkbox-background-color-checked: defines the background color of the component when it's in a ::checked state
--calcite-checkbox-icon-color: defines the icon color of the checkbox.
--calcite-checkbox-shadow: defines the shadow of the component
--calcite-checkbox-shadow-checked: defines the shadow of the component in a ::checked state
--calcite-checkbox-shadow-hover: defines the shadow of the component in a :hover state.
--calcite-checkbox-shadow-invalid: defines the shadow of the component in an invalid state.
--calcite-checkbox-size: defines the checkbox's size vertically and horizontally.
Tree Item
--calcite-tree-item-checkbox-background-color: defines the background-color of the sub-component.
--calcite-tree-item-checkbox-background-color-checked: defines the background-color of the sub-component when checked.
--calcite-tree-item-checkbox-icon-color: defines the checkmark color of the sub-component.
--calcite-tree-item-checkbox-shadow: defines the shadow of the sub-component.
--calcite-tree-item-checkbox-shadow-checked: defines the shadow of the sub-component when checked.
--calcite-tree-item-checkbox-shadow-hover: defines the shadow of the sub-component when hovered.
--calcite-tree-item-checkbox-shadow-invalid: defines the shadow of the sub-component when invalid.
--calcite-tree-item-checkbox-size: defines the size of the sub-component.
Card
--calcite-card-checkbox-background-color: defines the background-color of the sub-component.
--calcite-card-checkbox-background-color-checked: defines the background-color of the sub-component when checked.
--calcite-card-checkbox-icon-color: defines the checkmark color of the sub-component.
--calcite-card-checkbox-shadow: defines the shadow of the sub-component.
--calcite-card-checkbox-shadow-checked: defines the shadow of the sub-component when checked.
--calcite-card-checkbox-shadow-hover: defines the shadow of the sub-component when hovered.
--calcite-card-checkbox-shadow-invalid: defines the shadow of the sub-component when invalid.
--calcite-card-checkbox-size: defines the size of the sub-component.