Skip to content

Add tokens to Shell Panel resize-handle #14699

Description

@justinprather

monday.com sync: #12370334714

Check existing issues

Which Component

Shell Panel

Description

I'd like additional design tokens for the Shell Panel resize-handle.

Currently there is:

  • --calcite-shell-panel-resize-icon-color

I'd also like to be able to change:

  • the resize-handle background color
  • the resize-handle border color

Why?

  • In our styling, we are applying a corner radius to the Shell Panel and shadows and margins to elements within the Shell Panel. This gives us a visual presentation that we want.
  • When the resizable property is applied to a Shell Panel, with the resize-handle receiving the corner radius and the background matching --calcite-color-background, we'd like to make the resize-handle visually look like it is sitting within the Shell Panel, which in code, it is.

Acceptance Criteria

Additional tokens for the resize-handle of Shell Panel, including:

  • background color
  • border color

Relevant Info

No response

Example Use Case

Current:

Image

Prospective with additional tokens leveraged:

Image

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/calcite-ui-icons
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Hub

Metadata

Metadata

Assignees

No one assigned

    Labels

    ArcGIS HubIssues logged by ArcGIS Hub team members.c-shell-panelIssues that pertain to the calcite-shell-panel componentcalcite-design-tokensIssues specific to the @esri/calcite-design-tokens package.designIssues that need design consultation prior to, or during, development.enhancementIssues tied to a new feature or request.impact - p2 - want for an upcoming milestoneUser set priority impact status of p2 - want for an upcoming milestoneneeds triagePlanning workflow - pending design/dev review.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions