Changelog for 2.0.0

November 2023

Breaking changes

Stencil's version is set to version 4, previously set to version 2. (#8108) (bcbb79f)
Internationalization: Reduced numbering system support to latn, arab and arabext. The following numbering systems were removed: bali, beng, deva, fullwide, gujr, guru, hanidec, khmr, knda, laoo, limb, mlym, mong, mymr, orya, tamldec, telu, thai, tibt. (#8217) (9946ac1)
React wrapper: Disabled includeImportCustomElements. Make sure to import components from @esri/calcite-components in addition to the React wrappers. For example, the first code snippet in #7185 is now required, or else the custom elements will not be defined in the browser. (#8248) (0948c1a)
button, list, pick-list, value-list: Setting loading prop to true no longer prevents interaction nor applies disabled styles. If you'd like to block interaction when loading, please set disabled along with loading. (#8292) (db3c5c7)
dropdown, modal: For consistency, renames the width property to widthScale. (#8251) (ab12968), (#8252) (6b09245)
card: Removed the deselect message property – this property was deprecated in #6657 as it is no longer being rendered. This is no longer overrideable via messageOverrides. (#8099) (1bab172)
dropdown: Dropdown's default display was changed from inline-flex to inline-block to make it easier to prompt truncation in trigger button text with minimal impact to layout (by setting an explicit width or setting width: 100% or display: block on the dropdown of a width-constrained parent). (#8253) (7c96e9f)
stepper-item: Removed both previousStep and nextStep message properties. These are no longer overrideable via messageOverrides. (#8234) (331aafb)
Design tokens: Changes to @esri/calcite-design-tokens, including the names of CSS variables used to customize component styling. (#8311) (8d7cf3f), (#8299) (4050a91), (#8215) (335d010)
- Change the default export to a tree-shakable list of design tokens in camelCase format rather than a JSON object (import * as tokens from "@esri/calcite-design-tokens";)
- Use font name in core font family tokens
- Remove unnecessary core tokens line-height, font-size, letter-spacing, paragraph-spacing as these can be exclusive to semantic and reference core size tokens
- Core size tokens now use their pixel size in their name
- Change border-radius to corner-radius
- Remove unnecessary border-width tokens none, sm, md, lg
- Platform output
  - Remove component tokens from global output
  - Add new platform output
    - css
      - index
      - global
      - light
      - dark
      - core
      - breakpoint
      - typography classes
    - scss
      - index
      - global
      - light
      - dark
      - core
      - breakpoints
      - typography mixins
  - Replace "headless" with "global"
  - Remove "calcite" from filenames
- Package.json exports
  - @esri/calcite-design-tokens/css/headless is now @esri/calcite-design-tokens/css/global
  - @esri/calcite-design-tokens/scss/headless is now @esri/calcite-design-tokens/scss/global
  - @esri/calcite-design-tokens/js/headless is now @esri/calcite-design-tokens/js/global
  - @esri/calcite-design-tokens/es6/headless is now @esri/calcite-design-tokens/es6/global
- Token paths and values
  - Border
    - Use t-shirt sizing for border width tokens
      - Border.border-width.0 is now border.width.none (--calcite-border-width-none)
      - border.border-width.1 is now border.width.sm (--calcite-border-width-sm)
      - border.border-width.2 is now border.width.md (--calcite-border-width-md)
      - border.border-width.3 is now border.width.lg (--calcite-border-width-lg)
      - border.border-width.4 is removed
    - Remove unused border radius tokens
      - Core.border.border-radius.0
      - Core.border.border-radius.2
      - Core.border.border-radius.3
    - Use t-shirt sizing for border radius (now called corner radius) tokens
      - semantic.ui.border.border-radius is semantic.corner.radius.default
      - Core.border.border-radius.1 is now semantic.corner.radius.sharp
      - Core.border.border-radius.4 is now semantic.corner.radius.round
      - Core.border.border-radius.5 is now semantic.corner.radius.pill
  - Sizing
    - core.sizing. tokens are now core.size.default
  - Breakpoints
    - Move breakpoint tokens to their own separate output file for most platform outputs (except JS)
    - Update breakpoint token path from .breakpoint. to .container-size.
    - Delete unused breakpoint.cols tokens
  - Box Shadow
    - Use t-shirt sizing for global box shadow tokens
      - box-shadow.0 is now shadow.none
      - box-shadow.1 is now shadow.sm
      - box-shadow.2 is now shadow.md
  - Colors
    - Remove "palette" from core color paths
    - core.color.palette.high-saturation is now core.color.high-saturation
  - Light Mode and Dark Mode
    - Semantic color tokens now use the composite color scheme token type to reference "light" and "dark" mode instead of having separate light and dark tokens.
    - .calcite-mode-light and .calcite-mode-dark classes as well as the color scheme media queries are now provided via calcite-design-tokens/css/index.css
    - Provide light and dark mode mixins via calcite-design-tokens/css/index.scss
    - Remove "ui" from output platform names in favor of "color"
    - --calcite-ui-background is now --calcite-color-background
    - --calcite-ui-brand is now --calcite-color-brand
    - --calcite-ui-success is now --calcite-color-status-success
    - --calcite-ui-danger is now --calcite-color-status-danger
    - --calcite-ui-warning is now --calcite-color-status-warning
    - --calcite-ui-hint is now --calcite-color-status-hint
    - --calcite-button-transparent-hover is now --calcite-color-transparent-press

Features

combobox, checkbox, input-time-zone, select, text-area: Add status property (#8304) (a44e9fe)
action-menu:
- Set max height of the action menu (#8275) (ca1be28)
- Support action-groups (#8273) (c07144f)
handle: Add disabled property (#8283) (7aeecd5)
list-item: Add dragDisabled property (#8285) (f091f26)
list: Support multiple selection using the shift key (#8301) (79538be)
stepper: Enable responsive layout (#7744) (556b8bc)
Design tokens:
- Reduce global design tokens in calcite.css (#8215) (335d010)
- Add json to design token output (#8290) (753061f)
- Reduce global design tokens in calcite.css (#8215) (335d010)
- Update default main file output for design tokens (#8299) (4050a91)
- Update json shape for docs (#8308) (6fac3e9)

Bug Fixes

Design tokens: Align tokens with figma variables (#8311) (8d7cf3f)
React wrapper: Disable includeImportCustomElements to resolve initial render issues (#8248) (0948c1a)
button, list, pick-list, value-list: Prevent loading prop from affecting interactivity (#8292) (db3c5c7)
button: Sets aria-disabled instead of disabled on internal anchor element (#8270) (0926eb6)
color-picker, popover, shell-panel, slider, tooltip: Register events on the window instead of the document (#8247) (2aaf592)
combobox, dropdown, input-date-picker, popover, tooltip: Fix positioning of component when component is moved (#8296) (2b2506d)
Dragging floating ui components (#8230) (5a81f6c)
dropdown:
- Change display to inline-block to ease truncation setup (#8253) (7c96e9f)
- Restore trigger container height (51d1ea8)
input-time-zone: Update time zone items when item-dependent props change (#8271) (f77532e)
input: Prevents mutating value on blur when type="number" (#8245) (58ededd)
label: Associate label to component when for prop is set after initialization (#8309) (e81b650)
list-item:
- Adds border between grouped and ungrouped list-items (#8134) (ae9b083)
- Adds border between last item in a group and slotted item (#8262) (9b5cf76)
- An item with an empty slotted list should be openable. (#8240) (d615b39)
- Focus on the first focusable element within the component when using arrow keys (#8291) (b902365)
- Reserve space for empty open lists. (#8239) (484a5aa)
list: Add live region for dynamically changing list items (#8148) (e3c0c06)
stepper: Typo in CSS variable for step bar's fill (#8255) (2e643aa)

CSS variable comparison tables

Colors

Updated/new variable name	Deprecated variable name
`--calcite-color-brand`	`--calcite-ui-brand`
`--calcite-color-brand-hover`	`--calcite-ui-brand-hover`
`--calcite-color-brand-press`	`--calcite-ui-brand-press`
`--calcite-color-brand-underline`
`--calcite-color-background`	`--calcite-ui-background`
`--calcite-color-foreground-1`	`--calcite-ui-foreground-1`
`--calcite-color-foreground-2`	`--calcite-ui-foreground-2`
`--calcite-color-foreground-3`	`--calcite-ui-foreground-3`
`--calcite-color-foreground-current`	`--calcite-semantic-ui-color-foreground-current`
`--calcite-color-foreground-current`	`--calcite-ui-foreground-current`
`--calcite-offset-invert-focus`	`--calcite-ui-focus-offset-invert`
`--calcite-color-transparent`
`--calcite-color-transparent-press`
`--calcite-color-transparent-hover`
`--calcite-color-transparent-scrim`
`--calcite-color-transparent-tint`
`--calcite-color-text-1`	`--calcite-ui-text-1`
`--calcite-color-text-2`	`--calcite-ui-text-2`
`--calcite-color-text-3`	`--calcite-ui-text-3`
`--calcite-color-text-inverse`	`--calcite-ui-text-inverse`
`--calcite-color-text-link`	`--calcite-ui-text-link`
`--calcite-color-border-1`	`--calcite-ui-border-1`
`--calcite-color-border-2`	`--calcite-ui-border-2`
`--calcite-color-border-3`	`--calcite-ui-border-3`
`--calcite-color-border-input`	`--calcite-ui-border-input`
`--calcite-color-border-white`
`--calcite-color-border-ghost`
`--calcite-color-status-info`	`--calcite-ui-info`
`--calcite-color-status-info-hover`	`--calcite-ui-info-hover`
`--calcite-color-status-info-press`	`--calcite-ui-info-press`
`--calcite-color-status-success`	`--calcite-ui-success`
`--calcite-color-status-success-hover`	`--calcite-ui-success-hover`
`--calcite-color-status-success-press`	`--calcite-ui-success-press`
`--calcite-color-status-warning`	`--calcite-ui-warning`
`--calcite-color-status-warning-hover`	`--calcite-ui-warning-hover`
`--calcite-color-status-warning-press`	`--calcite-ui-warning-press`
`--calcite-color-status-danger`	`--calcite-ui-danger`
`--calcite-color-status-danger-hover`	`--calcite-ui-danger-hover`
`--calcite-color-status-danger-press`	`--calcite-ui-danger-press`
`--calcite-color-inverse`	`--calcite-ui-inverse`
`--calcite-color-inverse-press`
`--calcite-color-inverse-hover`

Z-indexes

Updated/new variable name	Deprecated variable name
`--calcite-z-index`	`--calcite-app-z-index`
`--calcite-z-index-tooltip`	`--calcite-app-z-index-tooltip`
`--calcite-z-index-popup`	`--calcite-app-z-index-popup`
`--calcite-z-index-modal`	`--calcite-app-z-index-modal`
`--calcite-z-index-overlay`	`--calcite-app-z-index-overlay`
`--calcite-z-index-dropdown`	`--calcite-app-z-index-dropdown`
`--calcite-z-index-toast`	`--calcite-app-z-index-toast`
`--calcite-z-index-header`	`--calcite-app-z-index-header`
`--calcite-z-index-sticky`	`--calcite-app-z-index-sticky`

Breakpoints

Updated/new variable name	Deprecated variable name
	`--calcite-app-breakpoint-cols-lg`
	`--calcite-app-breakpoint-cols-md`
	`--calcite-app-breakpoint-cols-sm`
	`--calcite-app-breakpoint-cols-xs`
`--calcite-container-size-content-fixed`	`--calcite-app-breakpoint-content-fixed`
`--calcite-container-size-content-fluid`	`--calcite-app-breakpoint-content-fluid`
`--calcite-container-size-width-lg-max`	`--calcite-app-breakpoint-width-lg`
`--calcite-container-size-width-md-max`	`--calcite-app-breakpoint-width-md`
`--calcite-container-size-width-sm-max`	`--calcite-app-breakpoint-width-sm`
`--calcite-container-size-width-xs-max`	`--calcite-app-breakpoint-width-xs`
`--calcite-container-size-width-xxs-max`	`--calcite-app-breakpoint-width-xxs`
`--calcite-container-size-width-lg-min`
`--calcite-container-size-width-md-min`
`--calcite-container-size-width-sm-min`
`--calcite-container-size-width-xs-min`
`--calcite-container-size-width-xxs-min`

Spacing and sizing

Updated/new variable name	Deprecated variable name
	`--calcite-app-spacing-none`
	`--calcite-app-spacing-28`
	`--calcite-app-spacing-27`
	`--calcite-app-spacing-26`
	`--calcite-app-spacing-25`
	`--calcite-app-spacing-24`
	`--calcite-app-spacing-23`
	`--calcite-app-spacing-22`
	`--calcite-app-spacing-21`
	`--calcite-app-spacing-20`
	`--calcite-app-spacing-19`
	`--calcite-app-spacing-18`
	`--calcite-app-spacing-17`
	`--calcite-app-spacing-16`
	`--calcite-app-spacing-15`
	`--calcite-app-spacing-14`
	`--calcite-app-spacing-13`
	`--calcite-app-spacing-12`
`--calcite-spacing-xxxl`	`--calcite-app-spacing-11`
	`--calcite-app-spacing-10`
	`--calcite-app-spacing-9`
`--calcite-spacing-xxl`	`--calcite-app-spacing-8`
`--calcite-spacing-xl`	`--calcite-app-spacing-7`
`--calcite-spacing-lg`	`--calcite-app-spacing-6`
`--calcite-spacing-md`	`--calcite-app-spacing-5`
	`--calcite-app-spacing-4`
`--calcite-spacing-sm`	`--calcite-app-spacing-3`
`--calcite-spacing-xs`	`--calcite-app-spacing-2`
`--calcite-spacing-xxs`	`--calcite-app-spacing-1`
`--calcite-spacing-base`	`--calcite-app-spacing-0`
`--calcite-spacing-px`
	`--calcite-app-sizing-none`
	`--calcite-app-sizing-28`
	`--calcite-app-sizing-27`
	`--calcite-app-sizing-26`
	`--calcite-app-sizing-25`
	`--calcite-app-sizing-24`
	`--calcite-app-sizing-23`
	`--calcite-app-sizing-22`
	`--calcite-app-sizing-21`
	`--calcite-app-sizing-20`
	`--calcite-app-sizing-19`
	`--calcite-app-sizing-18`
	`--calcite-app-sizing-17`
	`--calcite-app-sizing-16`
	`--calcite-app-sizing-15`
	`--calcite-app-sizing-14`
	`--calcite-app-sizing-13`
	`--calcite-app-sizing-12`
`--calcite-size-xxxl`	`--calcite-app-sizing-11`
	`--calcite-app-sizing-10`
`--calcite-size-xxl`	`--calcite-app-sizing-9`
`--calcite-size-xl`	`--calcite-app-sizing-8`
`--calcite-size-lg`	`--calcite-app-sizing-7`
`--calcite-size-md-plus`	`--calcite-app-sizing-6`
`--calcite-size-md`	`--calcite-app-sizing-5`
`--calcite-size-sm-plus`	`--calcite-app-sizing-4`
`--calcite-size-sm`	`--calcite-app-sizing-3`
`--calcite-size-xs`	`--calcite-app-sizing-2`
`--calcite-size-xxs`	`--calcite-app-sizing-1`
`--calcite-size-xxxs`	`--calcite-app-sizing-0`
`--calcite-size-px`

Opacity

Updated/new variable name	Deprecated variable name
`--calcite-opacity-full`	`--calcite-app-opacity-100`
	`--calcite-app-opacity-96`
	`--calcite-app-opacity-92`
	`--calcite-app-opacity-90`
`--calcite-opacity-dark`	`--calcite-app-opacity-85`
	`--calcite-app-opacity-80`
	`--calcite-app-opacity-70`
	`--calcite-app-opacity-60`
`--calcite-opacity-half`	`--calcite-app-opacity-50`
`--calcite-opacity-light`	`--calcite-app-opacity-40`
	`--calcite-app-opacity-30`
	`--calcite-app-opacity-20`
	`--calcite-app-opacity-10`
	`--calcite-app-opacity-8`
	`--calcite-app-opacity-4`
	`--calcite-app-opacity-0`

Borders

Updated/new variable name	Deprecated variable name
`--calcite-border-width-none`	`--calcite-app-border-width-none`
	`--calcite-app-border-width-4`
	`--calcite-app-border-width-3`
`--calcite-border-width-lg`	`--calcite-app-border-width-2`
`--calcite-border-width-md`	`--calcite-app-border-width-1`
`--calcite-border-width-sm`	`--calcite-app-border-width-0`
`--calcite-corner-radius-pill`	`--calcite-app-border-radius-full`
	`--calcite-app-border-radius-half`
`--calcite-corner-radius-sharp`	`--calcite-app-border-radius-none`
	`--calcite-app-border-radius-6`
	`--calcite-app-border-radius-5`
	`--calcite-app-border-radius-4`
	`--calcite-app-border-radius-3`
	`--calcite-app-border-radius-2`
`--calcite-corner-radius-round`	`--calcite-app-border-radius-1`
`--calcite-corner-radius-0`	`--calcite-app-border-radius-0`

Fonts

Updated/new variable name	Deprecated variable name
`--calcite-font-text-case-capitalize`	`--calcite-app-font-text-case-capitalize`
`--calcite-font-text-case-lowercase`	`--calcite-app-font-text-case-lowercase`
`--calcite-font-text-case-uppercase`	`--calcite-app-font-text-case-uppercase`
`--calcite-font-text-case-none`	`--calcite-app-font-text-case-none`
`--calcite-font-text-decoration-underline`	`--calcite-app-font-text-decoration-underline`
`--calcite-font-text-decoration-none`	`--calcite-app-font-text-decoration-none`
`--calcite-font-paragraph-spacing-normal`	`--calcite-app-font-paragraph-spacing-normal`
`--calcite-font-letter-spacing-wide`	`--calcite-app-font-letter-spacing-wide`
`--calcite-font-letter-spacing-normal`	`--calcite-app-font-letter-spacing-normal`
`--calcite-font-letter-spacing-tight`	`--calcite-app-font-letter-spacing-tight`
	`--calcite-app-font-size-15`
	`--calcite-app-font-size-14`
	`--calcite-app-font-size-13`
	`--calcite-app-font-size-12`
	`--calcite-app-font-size-11`
	`--calcite-app-font-size-10`
	`--calcite-app-font-size-9`
	`--calcite-app-font-size-8`
	`--calcite-app-font-size-7`
`--calcite-font-size-xxl`	`--calcite-app-font-size-6`
`--calcite-font-size-xl`	`--calcite-app-font-size-5`
`--calcite-font-size-lg`	`--calcite-app-font-size-4`
`--calcite-font-size-md`	`--calcite-app-font-size-3`
`--calcite-font-size`	`--calcite-app-font-size-2`
`--calcite-font-size-sm`	`--calcite-app-font-size-1`
`--calcite-font-size-xs`	`--calcite-app-font-size-0`
`--calcite-font-line-height-relative-loose`	`--calcite-app-font-line-height-relative-loose`
`--calcite-font-line-height-relative-relaxed`	`--calcite-app-font-line-height-relative-relaxed`
`--calcite-font-line-height-relative-normal`	`--calcite-app-font-line-height-relative-normal`
`--calcite-font-line-height-relative-snug`	`--calcite-app-font-line-height-relative-snug`
`--calcite-font-line-height-relative-tight`	`--calcite-app-font-line-height-relative-tight`
`--calcite-font-line-height-relative`	`--calcite-app-font-line-height-relative`
	`--calcite-app-font-line-height-fixed-12`
	`--calcite-app-font-line-height-fixed-11`
	`--calcite-app-font-line-height-fixed-10`
	`--calcite-app-font-line-height-fixed-9`
	`--calcite-app-font-line-height-fixed-8`
	`--calcite-app-font-line-height-fixed-7`
	`--calcite-app-font-line-height-fixed-6`
	`--calcite-app-font-line-height-fixed-5`
	`--calcite-app-font-line-height-fixed-4`
`--calcite-font-line-height-fixed-xl`	`--calcite-app-font-line-height-fixed-3`
`--calcite-font-line-height-fixed-lg`	`--calcite-app-font-line-height-fixed-2`
	`--calcite-app-font-line-height-fixed-1`
`--calcite-font-line-height-fixed-sm`	`--calcite-app-font-line-height-fixed`
	`--calcite-app-font-weight-heavy`
	`--calcite-app-font-weight-black`
	`--calcite-app-font-weight-extrabold`
`--calcite-font-weight-bold`	`--calcite-app-font-weight-bold`
`--calcite-font-weight-semibold`	`--calcite-app-font-weight-demi`
	`--calcite-app-font-weight-medium-italic`
`--calcite-font-weight-medium`	`--calcite-app-font-weight-medium`
`--calcite-font-weight-regular`	`--calcite-app-font-weight-regular`
`--calcite-font-weight-normal`
`--calcite-font-weight-light`	`--calcite-app-font-weight-light`
	`--calcite-app-font-weight-thin`
	`--calcite-app-font-weight-ultralight`
`--calcite-font-family-code`	`--calcite-app-font-family-code`
	`--calcite-app-font-family-secondary`
`--calcite-font-family-primary`	`--calcite-app-font-family-primary`

Compatibility

The 4.28 release of the ArcGIS Maps SDK for JavaScript supports Calcite version 1.9.2. If you are using version 4.27 it is recommended to use Calcite's 1.4.2 release.

Calcite Design System

Changelog for 2.0.0

Was this page helpful?