Drop undocumented utility classes

[jcfranco]

Description

https://github.com/Esri/calcite-design-system/pull/2028/files introduced a specialized CSS utility class (calcite-match-height) that is not documented. We should remove this in the next breaking release since it was in the shell-panel's readme, which was considered public doc at some point.

The following shows all calcite-prefixed classes that could be in a similar situation.

Targets

Occurrences of .calcite- in Project with mask *.scss
Found occurrences: 68 usages

_animation.scss (7 usages)

• 67 .calcite-animate
• 74 .calcite-animate__in
• 78 .calcite-animate__in-down
• 82 .calcite-animate__in-up
• 86 .calcite-animate__in-right
• 90 .calcite-animate__in-left
• 94 .calcite-animate__in-scale

_floating-ui.scss (8 usages)

• 27 .calcite-floating-ui-anim
• 49 [data-placement^="bottom"] .calcite-floating-ui-anim
• 53 [data-placement^="top"] .calcite-floating-ui-anim
• 57 [data-placement^="left"] .calcite-floating-ui-anim
• 61 [data-placement^="right"] .calcite-floating-ui-anim
• 65 [data-placement] .calcite-floating-ui-anim--active
• 83 .calcite-floating-ui-arrow
• 90 .calcite-floating-ui-arrow__stroke

_sortable.scss (6 usages)

• 2 .calcite-sortable--chosen
• 3 .calcite-sortable--ghost
• 4 .calcite-sortable--drag
• 5 .calcite-sortable--fallback
• 10 .calcite-sortable--ghost::before
• 25 .calcite-sortable--drag

global.scss (1 usage)

• 31 .calcite-mode-auto

accordion-item.scss (2 usages)

• 203 .calcite--rtl .expand-icon
• 245 .calcite--rtl .expand-icon

button.scss (2 usages)

• 215 .calcite-button--loader
• 226 .calcite-button--loader calcite-loader

card.scss (2 usages)

• 61 :host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container)
• 66 :host([loading]) .calcite-card-loader-container

checkbox.scss (2 usages)

• 98 .toggle:not(.calcite--rtl)
• 105 .toggle.calcite--rtl

dropdown.scss (5 usages)

• 14 .calcite-dropdown-wrapper
• 19 @include floating-ui-elem-anim(".calcite-dropdown-wrapper")
• 21 .calcite-dropdown-content
• 30 .calcite-trigger-container
• 49 :host([open]) .calcite-dropdown-wrapper

Proposed Advantages

Avoids internal, specialized CSS classes.

Which Component

See list above.

Relevant Info

Some matches from the above list could be renamed to avoid the prefix since they would be applied within the component's shadow DOM (in a separate issue/PR).

Calcite package

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

[driskull]

Most of those listed above are not utility classes, most are defined in the includes which isn't publicly exposed its only within the shadow of components.

The difference between the match-height class is that it is using the slotted selector making it work in light DOM

The animation classes for example wouldn't work outside of our components shadow DOM

We can remove the calcite- prefixes from them if that makes it clearer

[driskull]

calcite-mode-auto, calcite-mode-light and calcite-mode-dark are valid classes we do and should document but they aren't utility classes.

[driskull]

.calcite-sortable are light DOM classes but that is because the Sortable library requires them to be. The styles are only in shadow DOM but the classes are added in light DOM.