feat(shell-panel): add component tokens #8975
Conversation
-shell-panel-background-color: Specifies the background color of the component. --calcite-shell-panel-corner-radius: Specifies the corner radius of the component. --calcite-shell-panel-detached-max-height: [Deprecated] Use the `heightScale` property instead. When `displayMode` is `float`, specifies the maximum height of the component. --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the height of the component. --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component. --calcite-shell-panel-max-width: Specifies the maximum width of the component. --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component. --calcite-shell-panel-min-width: Specifies the minimum width of the component. --calcite-shell-panel-shadow: Specifies the shadow of the component. --calcite-shell-panel-width: Specifies the width of the component. --calcite-shell-panel-z-index: Specifies the z-index value for the component.
fixes visual regression in shell panel
|
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
| @@ -34,7 +34,7 @@ | |||
| } | |||
| } | |||
|
|
|||
| button { | |||
| .button { | |||
There was a problem hiding this comment.
Are these changes intentional? They seem unrelated to shell-panel.
| min-inline-size: var(--calcite-shell-panel-min-width-internal); | ||
| } | ||
| .content { | ||
| inline-size: var(--calcite-shell-panel-width, var(--calcite-internal-shell-panel-width)); |
There was a problem hiding this comment.
Should --calcite-shell-panel-width be renamed to --calcite-shell-panel-content-width?
…components into astump/7180-shell-panel # Conflicts: # packages/calcite-components/src/components/action/action.scss
| @@ -12,7 +12,7 @@ | |||
| * @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component. | |||
| * @prop --calcite-shell-panel-min-width: Specifies the minimum width of the component. | |||
| * @prop --calcite-shell-panel-shadow: Specifies the shadow of the component. | |||
| * @prop --calcite-shell-panel-width: Specifies the width of the component. | |||
| * @prop --calcite-shell-panel-content-width: Specifies the width of the component. | |||
There was a problem hiding this comment.
Should we deprecate this and add a new one for content-width? I think the same would need to apply to min / max here as well.
It's also worth considering if we should just leave the initial name and apply this to the container itself (including slotted action bar), which I think it more in line with use case. A user can already control the width of slotted Panel, or other content, by setting width on that element.
cc @driskull for thoughts.
There was a problem hiding this comment.
It's also worth considering if we should just leave the initial name and apply this to the container itself (including slotted action bar), which I think it more in line with use case. A user can already control the width of slotted Panel, or other content, by setting width on that element.
That sounds reasonable to me.
…components into astump/7180-shell-panel # Conflicts: # packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
Related Issue: #7180
Summary
Shell Panel
--calcite-shell-panel-background-color: Specifies the background color of the component.
--calcite-shell-panel-corner-radius: Specifies the corner radius of the component.
--calcite-shell-panel-detached-max-height: [Deprecated] Use the
heightScaleproperty instead. WhendisplayModeisfloat, specifies the maximum height of the component.--calcite-shell-panel-height: When
layoutishorizontal, orlayoutisverticalanddisplayModeisfloat, specifies the height of the component.--calcite-shell-panel-max-height: When
layoutishorizontal, orlayoutisverticalanddisplayModeisfloat, specifies the maximum height of the component.--calcite-shell-panel-max-width: Specifies the maximum width of the component.
--calcite-shell-panel-min-height: When
layoutishorizontal, orlayoutisverticalanddisplayModeisfloat, specifies the minimum height of the component.--calcite-shell-panel-min-width: Specifies the minimum width of the component.
--calcite-shell-panel-shadow: Specifies the shadow of the component.
--calcite-shell-panel-width: Specifies the width of the component.
--calcite-shell-panel-z-index: Specifies the z-index value for the component.