Skip to content

docs(tokens): consistency pass for new component descriptions #12148

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

Merged
merged 4 commits into from
May 15, 2025
Merged

docs(tokens): consistency pass for new component descriptions #12148

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e793941
docs(tokens): consistency pass for new component descriptions
DitwanP May 14, 2025
f51a2e4
feedback changes
DitwanP May 14, 2025
0eff94e
feedback changes
DitwanP May 15, 2025
2e9d5f1
Merge branch 'dev' of https://github.com/Esri/calcite-design-system i…
DitwanP May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/calcite-components/src/components/input-number/input-number.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-input-actions-background-color: Specifies the background color of the component's `clearable` and `number-button-type` elements.
* @prop --calcite-input-actions-background-color-hover: Specifies the background color of the component's `clearable` and `number-button-type` elements. when hovered.
* @prop --calcite-input-actions-background-color-press: Specifies the background color of the component's `clearable` and `number-button-type` elements. when pressed.
* @prop --calcite-input-actions-background-color-hover: Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
* @prop --calcite-input-actions-background-color-press: Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
* @prop --calcite-input-actions-icon-color: Specifies the icon color of the component's `clearable` and `number-button-type` elements.
* @prop --calcite-input-actions-icon-color-hover: Specifies the icon color of the component's `clearable` and `number-button-type` elements. when hovered.
* @prop --calcite-input-actions-icon-color-press: Specifies the icon color of the component's `clearable` and `number-button-type` elements. when pressed.
* @prop --calcite-input-actions-icon-color-hover: Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
* @prop --calcite-input-actions-icon-color-press: Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
* @prop --calcite-input-loading-background-color: Specifies the background color of the `loading` element.
* @prop --calcite-input-loading-fill-color: Specifies the fill color of the `loading` element.
* @prop --calcite-input-number-background-color: Specifies the background color of the component.
Expand Down
12 changes: 6 additions & 6 deletions packages/calcite-components/src/components/sheet/sheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@
* @prop --calcite-sheet-resize-icon-color: Specifies the text color of the resize handle.
*
* @prop --calcite-sheet-scrim-background: Specifies the background color of the sheet scrim.
* @prop --calcite-sheet-width: When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
* @prop --calcite-sheet-max-width: When `position` is `"inline-start"` or `"inline-end"`, specifies the maximum width of the component.
* @prop --calcite-sheet-min-width: When `position` is `"inline-start"` or `"inline-end"`, specifies the minimum width of the component.
* @prop --calcite-sheet-height: When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
* @prop --calcite-sheet-max-height: When `position` is `"block-start"` or `"block-end"`, specifies the maximum height of the component.
* @prop --calcite-sheet-min-height: When `position` is `"block-start"` or `"block-end"`, specifies the minimum height of the component.
* @prop --calcite-sheet-width: Specifies the width of the component when `position` is `"inline-start"` or `"inline-end"`.
* @prop --calcite-sheet-max-width: Specifies the maximum width of the component when `position` is `"inline-start"` or `"inline-end"`.
* @prop --calcite-sheet-min-width: Specifies the minimum width of the component When `position` is `"inline-start"` or `"inline-end"`.
* @prop --calcite-sheet-height: Specifies the height of the component when `position` is `"block-start"` or `"block-end"`.
* @prop --calcite-sheet-max-height: Specifies the maximum height of the component when `position` is `"block-start"` or `"block-end"`.
* @prop --calcite-sheet-min-height: Specifies the minimum height of the component when `position` is `"block-start"` or `"block-end"`.
*
*/

Expand Down
12 changes: 6 additions & 6 deletions packages/calcite-components/src/components/shell-panel/shell-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-shell-panel-background-color: Specifies the background color of the component.
* @prop --calcite-shell-panel-border-color: When `displayMode` is `"float-all"`, specifies the component's border color.
* @prop --calcite-shell-panel-corner-radius: When `displayMode` is `"float-all"`, specifies the component's corner radius
* @prop --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component.
* @prop --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
* @prop --calcite-shell-panel-border-color: Specifies the component's border color when `displayMode` is `"float-all"`.
* @prop --calcite-shell-panel-corner-radius: Specifies the component's corner radius when `displayMode` is `"float-all"`.
* @prop --calcite-shell-panel-height: Specifies the height of the component when `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`.
* @prop --calcite-shell-panel-max-height: Specifies the maximum height of the component when `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`.
* @prop --calcite-shell-panel-max-width: Specifies the maximum width of the component.
* @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component.
* @prop --calcite-shell-panel-min-height: Specifies the minimum height of the component when `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`.
* @prop --calcite-shell-panel-min-width: Specifies the minimum width of the component.
* @prop --calcite-shell-panel-resize-background-color: Specifies the background color of the resize handle.
* @prop --calcite-shell-panel-resize-icon-color: Specifies the text color of the resize handle.
* @prop --calcite-shell-panel-shadow: When `displayMode` is `"float-all"`, specifies the component's shadow.
* @prop --calcite-shell-panel-shadow: Specifies the component's shadow when `displayMode` is `"float-all"`.
* @prop --calcite-shell-panel-text-color: Specifies the text color of the component.
* @prop --calcite-shell-panel-width: Specifies the width of the component.
* @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component.
Expand Down
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/stepper-item/stepper-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
* @prop --calcite-stepper-bar-fill-color: Specifies the component's fill color.
* @prop --calcite-stepper-bar-fill-color-hover: Specifies the component's fill color when hovered or focused.
* @prop --calcite-stepper-bar-complete-fill-color: Specifies the component's fill color when complete.
* @prop --calcite-stepper-bar-complete-fill-color-hover: When item is complete, specifies the component's fill color when hovered or focused.
* @prop --calcite-stepper-bar-error-fill-color: Specifies the component's fill color when in error.
* @prop --calcite-stepper-bar-error-fill-color-hover: When item is error, specifies the component's fill color when hovered or focused.
* @prop --calcite-stepper-bar-complete-fill-color-hover: Specifies the component's fill color when hovered or focused and is complete.
* @prop --calcite-stepper-bar-error-fill-color: Specifies the component's fill color when in an error state.
* @prop --calcite-stepper-bar-error-fill-color-hover: Specifies the component’s fill color when hovered or focused and in an error state.
* @prop --calcite-stepper-bar-selected-fill-color: Specifies the component's fill color when selected.
*/

Expand Down
10 changes: 5 additions & 5 deletions packages/calcite-components/src/components/stepper/stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-stepper-bar-gap: Specifies the space between items in the step bar.
* @prop --calcite-stepper-bar-inactive-fill-color: Specifies the fill color of items in the step bar.
* @prop --calcite-stepper-bar-active-fill-color: Specifies the fill color of active items in the step bar.
* @prop --calcite-stepper-bar-complete-fill-color: Specifies the fill color of complete items in the step bar.
* @prop --calcite-stepper-bar-error-fill-color: Specifies the fill color of error items in the step bar.
* @prop --calcite-stepper-bar-gap: Specifies the space between items in the component.
* @prop --calcite-stepper-bar-inactive-fill-color: Specifies the fill color of items in the component.
* @prop --calcite-stepper-bar-active-fill-color: Specifies the fill color of active items in the component.
* @prop --calcite-stepper-bar-complete-fill-color: Specifies the fill color of complete items in the component.
* @prop --calcite-stepper-bar-error-fill-color: Specifies the fill color of error items in the component.
*/

:host([scale="s"]) {
Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/tab-nav/tab-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tab-background-color: When `calcite-tabs` is `bordered`, specifies the component's background color.
* @prop --calcite-tab-border-color: When `calcite-tabs` is `bordered`, specifies the component's border color.
* @prop --calcite-tab-background-color: Specifies the component's background color when `calcite-tabs` is `bordered`.
* @prop --calcite-tab-border-color: Specifies the component's border color when `calcite-tabs` is `bordered`.
* @prop --calcite-tab-text-color: Specifies the component's `iconStart, `iconEnd`, and text color.
*/

Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/tab-title/tab-title.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* @prop --calcite-tab-text-color: Specifies the component's text color.
* @prop --calcite-tab-border-color: Specifies the component's border color.
* @prop --calcite-tab-background-color: Specifies the component's background color.
* @prop --calcite-tab-background-color-hover: When `calcite-tabs` is `bordered`, specifies the component's background color when hovered.
* @prop --calcite-tab-background-color-hover: Specifies the component's background color when hovered and `calcite-tabs` is `bordered`.
* @prop --calcite-tab-accent-color-press: Specifies the component's accent color when selected or active.
* @prop --calcite-tab-icon-color-end: Specifies the component's `iconEnd` color. Fallback to `--calcite-icon-color`.
* @prop --calcite-tab-icon-color-start: Specifies the component's `iconStart` color. Fallback to `--calcite-icon-color`.
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/tabs/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tab-background-color: When `bordered`, specifies the component's background color.
* @prop --calcite-tab-background-color: Specifies the component's background color when `bordered`.
* @prop --calcite-tab-border-color: Specifies the component's border color.
*/

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/time-picker/time-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-time-picker-background-color: The background color of the time picker.
* @prop --calcite-time-picker-corner-radius: The border radius of the time picker.
* @prop --calcite-time-picker-background-color: Specifies the background color of the time picker.
* @prop --calcite-time-picker-corner-radius: Specifies the border radius of the time picker.
* @prop --calcite-time-picker-button-background-color-hover: Specifies the button's background color when hovered or focused.
* @prop --calcite-time-picker-button-background-color-press: Specifies the button's background color when active.
* @prop --calcite-time-picker-color: Specifies the component's text color.
Expand Down