Esri/calcite-design-system
View on GitHubDrop `calcite` prefix for internal (shadow DOM) CSS classes
Open
#12,332 opened on Jun 14, 2025
good first issueneeds triagep - lowrefactor
Repository metrics
- Stars
- (367 stars)
- PR merge metrics
- (PR metrics pending)
Description
monday.com sync: #18048641793
Description
The calcite prefix is no longer necessary for internally-scoped CSS classes due to shadow DOM encapsulation.
Proposed Advantages
Simpler code.
Which Component
_floating-ui.scss
- 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
button.scss (2 usages)
card.scss (2 usages)
- 61
:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container) - 66
:host([loading]) .calcite-card-loader-container
calcite--rtl CSS util class + references
There might be others candidates.
Relevant Info
Stems from https://github.com/Esri/calcite-design-system/issues/11606.
Calcite package
- @esri/calcite-components
- @esri/calcite-components-react
- @esri/calcite-design-tokens
- @esri/calcite-ui-icons
- @esri/eslint-plugin-calcite-components