[Enhancement] Use part html attribute to make styling easier

[maxpatiiuk]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

A part html attribute exists to allow developers using web components to style elements in shadow DOM.

Calcite does not appear to be using it at all at the moment.

Acceptance Criteria

part and exportparts html attributes are utilized generously in Calcite web components to make styling easier

Alternatively, add more css variables and props to give more control of web component internals

Relevant Info

Stencil docs:

• https://stenciljs.com/docs/styling#css-parts

MDN docs:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part
• https://developer.mozilla.org/en-US/docs/Web/CSS/::part
• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts

Which Component

I need this in <calcite-action> and <calcite-slider> at the moment, but theoretically in all components

Example Use Case

I am using <calcite-action> and <calcite-slider> inside of <calcite-action-group>.

• I need to add border radius for the 4 edge buttons of the d-pad and the slider (can't simply add border radius to <calcite-action-group> as that will cut off the focus outline)

• I wish to add a style like this to only have focus outline when using keyboard:

  button:focus:not(:focus-visible) {
    outline: none !important;
  }

• I need to disable the margin on the slider div container.

• The calcite-action > button has padding-inline and padding-block values that don't match:

  

  As a result, when I put actions in a 3x3 grid, the grid is shaped like a rectangle rather than a square

At the moment, I solve these issues by injecting my styles into the web component by creating a <style> tag inside of it using JavaScript, but that solution is hacky and fragile:

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

ArcGIS Maps SDK for JavaScript

[macandcheese]

Following up from Teams - At this point we aren't planning to add css parts. We've discussed it as something to re-evaluate in the future, but for now we plan to use css variables to expose intended theming.

That said - our upcoming work to introduce design tokens should make overriding things like box-shadow, border-radius, etc., much easier with system or component level theming. This effort can be tracked here: #7180

The Action Pad should be able to achieve that layout in the meantime: https://codepen.io/mac_and_cheese/pen/mdQzRXo?editors=1000