Add part selectors for better control of styling

[jasperwieringa]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

We (from Alliander) need a way to update/access styling of elements within the ShadowRoot.
There are two ways of providing this within an open-source design-system:

1. Ensuring that all components use css-variables that we can override on element level.
2. Adding part selectors to the rendered elements, to allow full control over the styling (if required)

Acceptance Criteria

Every element that is not a slot, should contain part selectors, so the end-users can update the styling of these elements whenever they do not provide the support needed. With this new behaviour, users can change styling like flex-directions, paddings, margins etc. when these are not set through css variables.

Relevant Info

No dependencies and blockers.

Which Component

All components, since it is a low-effort, high-reward approach of making the components more user-friendly.

Example Use Case

<div>
 <div id="header" part="header">
  <slot name="header"></slot>
 </div>
 <div id="body" part="body">
  <slot></slot>
 </div>
 <div id="footer" part="footer">
  <slot name="footer"></slot>
 </div>
</div>

By adding this simple part to an element, a user can now style these specific parts through styling like so:

/** Internal styling of the component */
#header {
 display: flex;
 flex-direction: row;
}

/** Overriding the flex-direction by adding styling to the header part */
my-component::part(header) {
 flex-direction: column;
}

Priority impact

impact - p1 - need for current 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

N/A

[macandcheese]

At this time we do not plan to add support for part selectors (prior issue: #7353).

We are currently working through a large design token effort that should expose many other theming opportunities. This effort can be tracked here: #7180