fix(panel): apply custom styles correctly to header actions

[alisonailea]

Related Issue: #11491 #8675 #7180

Summary

Allow calcite-actions to be styled specific to the panel-header.
include ::slotted(calcite-action) in selectors and set proper variable fallbacks
Correctly pass corner-radius through the component

[macandcheese]

My 2c - supporting css parts has been discussed and we decided not to pursue for the near-term. It's a significant shift in customization story.

The css token approach seems more on-story here - I do think it could perhaps be simplified to just target the internally rendered Actions and Action Menu - keeping your new props here and making the user story this:

  .my-great-panel {
    --calcite-panel-header-action-background-color: blue;
    --calcite-panel-header-action-background-color-hover: blue;
    --calcite-panel-header-action-background-color-press: blue;
     etc...
  }

  .my-great-panel calcite-action[slot="header-actions-end"] {
    --calcite-action-background-color: blue;
    --calcite-action-background-color-hover: blue;
    --calcite-action-background-color-press: blue;
    etc... 
  }

This way, a user would just need to style Actions slotted in header-actions-end - internally rendered Action and internally rendered Action Menu for the header-menu-actions slot are handled through the new Panel props you added here, and users wouldn't need to reset any Actions slotted elsewhere in the Panel.

Example : https://github.com/Esri/calcite-design-system/blob/macandcheese/wip-panel-tokens-idea/packages/calcite-components/src/components/panel/panel.scss - this would mean we could remove the "pass through docs" for Action props on Panel to reduce confusion.

[driskull]

I agree with @macandcheese here.

[jcfranco]

@alisonailea Can you fix the typo in the title and update the description with details of the final approach? Thanks!

[macandcheese]

I think we can be more specific here, just assigning these to the internally-rendered Actions (

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

Line 170 in 0e1043f

#close,

)

If so, we can update the css prop descriptions to specifically state the elements affected (like you have for the "part example").

[jcfranco]

Looking good, @alisonailea! 😎 One more pass and this should be good to land.

[jcfranco]

This isn't needed since interaction-container uses display: contents and doesn't produce a box.

[jcfranco]

For posterity: I restored this override as I was completely wrong on this one. display: contents doesn't have any effect on inheritance, so my suggestion broke styling.

[jcfranco]

Does --calcite-action-corner-radius need to be set here? Possibly by --calcite-internal-panel-corner-radius?

[alisonailea]

No this is covered by the corner radius of the action containers.

[driskull]

👍