Changelog for 2.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.