[Panel] Add themeable tokens for corner-radius

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Panel should support overriding the default corner-radius css property, which should be set to "sharp" to maintain its current default.

Acceptance Criteria

Panel has --calcite-panel-corner-radius css property that defaults to the semantic "sharp" value

Relevant Info

Panel is often used as a layout container outside a parent like Shell Panel. In these cases, a theming story may include adding a rounded corner value.

Which Component

Panel

Example Use Case

Priority impact

p3 - want for upcoming milestone

Calcite package

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

Esri team

Calcite (design)

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍡 Verified locally on dev

[github-actions]

Installed and assigned for verification.

[DitwanP]

@macandcheese the token for changing the corner-radius works fine but the panel also has a default border that doesn't follow that radius. I see we have a border color token but no token to for border overall. Is this something we need to account for? Or is there another way to remove the border?

[macandcheese]

@DitwanP can you share a Codepen with the above? We might need to adjust something...

[DitwanP]

@macandcheese https://codepen.io/Ditwan-Price/pen/WbeoOjy?editors=1000

[macandcheese]

Thanks - we'll want to handle that ... I think we can make sure the component clips, without necessarily adding a default box shadow or border. Could you re-open this and assign it back to me?

[DitwanP]

@macandcheese One other small thing to change, the description of of the --calcite-panel-header-background-color in the panel.scss file incorrectly says that it changes the color of the components footer.

calcite-design-system/packages/calcite-components/src/components/panel/panel.scss

Line 12 in 787f3a7

* @prop --calcite-panel-header-background-color: Specifies the background color of the component's footer.

[macandcheese]

Because the :host element is flex displayed, and the panel itself doesn't have css props for box-shadow or border) - this will occur anytime a user sets border or box-shadow directly on the element. There are a few approaches we could take here...

• set border-radius directly on the :host and reference the user-set --calcite-panel-corner-radius.

• do nothing, make a user set border-radius: var(--calcite-panel-corner-radius) (or, any value) alongside box-shadow and border they've declared on :host. At that point, do you need the corner-radius variable?

• Add css properties for border and box-shadow to Panel - and handle this for a user. These would need to "default to off" as the Panel doesn't have a border or box-shadow, and likely require some additional css properties for "outer border" to not have it set when a user overrides the existing properties.

Thoughts on best approach @alisonailea @jcfranco ?

[macandcheese]

Though not ideal, a workaround for now is to also set a border-radius on the element itself.

calcite-panel {
  border-radius: 30px;
  --calcite-panel-corner-radius: 30px;
}