calcite-design-system

2.2.0 (2024-01-17)

Features

• action-menu: Close menu on blur instead of on tab key. (#8577) (ccfbd0c)
• checkbox, combobox, input-date-picker, input-time-picker, segmented-control, select: Add required property (#8517) (72a1ce4)
• handle, block, list-item: Improve drag handle tooltip to include item label (#8584) (6e643e2)
• handle: Add blurUnselectDisabled property to disable unselecting handle on blur. (#8483) (4d665cc)
• handle: Add selected property and calciteHandleChange event. (#8484) (d2e9880)
• list-item: Add dragSelected property and calciteListItemDragHandleChange event (#8524) (4db2eb7)
• list-item: Add tooltip for expanding and collapsing (#8612) (4964491)
• list: Add "filter-no-results" slot to display content when no filtered items are shown (#8569) (f1fc7f6)
• list: Introduce clearer unselected state (#8510) (f1e836c)
• radio-button-group, segmented control: Add validationMessage, validationIcon, and status properties (#8561) (d4c5efc)
• Reflect validationIcon property (#8583) (b3d38b3)
• table-header: Add style when within a selected Table Row (#8449) (13cfe75)
• tabs: Emit selection-related events when selection is modified after closing the selected tab (#8582) (b15c940)
• tile: Add visual scales (#8496) (7638ec4)
• Use input-message to display validation messages for invalid fields after form submission (#8574) (fd392fe)

Bug Fixes

• action: Update component tokens to support transparent (#8532) (81cb5cc)
• Allow users to control tabindex on interactive components (#8166) (b15c052)
• button: Avoid needlessly overwriting title (#8491) (350a983)
• color-picker: Emit color change when nudging color channels by using the shift key (#8579) (4250598)
• combobox: Only allow deleting visible chips with the keyboard (#8603) (2d38241)
• date-picker: Prevent console error when selecting just an end date for input date picker (#8444) (c0e51c3)
• filter: Prevent console warning from displaying to end users (#8458) (0de7646)
• input-date-picker: Ensure range icon toggles open corresponding date-picker (#8554) (cfafd15)
• input-date-picker: Resolve a hard to reproduce number formatter caching issue that occurred due to the countdown delay in queued Alerts. (5f4fa3e)
• input-message: Add missing margin to scale="s", spacing CSS variable has effect (#8592) (49b0a20)
• input, input-number, input-text: Restore focus on input after browser validation error is displayed and user continues typing (#8563) (5897965)
• input, input-number: Support setting value property to Infinity (#8547) (f6ac698)
• list-item: Store last focused cell from focusing on elements within a cell. (#8494) (28f93b4)
• list, list-item, list-item-group: Honor hidden attribute on list-item and list-item-group (#8541) (3851dc6)
• list: Correct selectedItems value when list is filtered (#8481) (9de1922)
• list: Fix event detail newIndex when down arrow pressed to sort (#8462) (b3d5169)
• list: Fix keyboard arrow navigation (#8470) (57fdaa4)
• modal: Ensure focus trapping in dynamically created, subsequently opened modals (#8593) (4ec6b94)
• table: Fix double border on bordered Table Rows in table-footer (#8509) (c16ea33)
• table: Improve Table overflow behavior (#8424) (79743e1)
• text-area: Prevent infinite render loop when max-length property is defined (#8610) (f30d933)

Reverts

• Chore(modal): remove e2e tests that are covered by dedicated openClose commonTests helper (#8392) (#8471) (4bedf99)

Dependencies

• The following workspace dependencies were updated
  • devDependencies
    • @esri/calcite-design-tokens bumped from ^2.1.1-next.4 to ^2.1.1

2.1.0 (2023-12-19)

Features

• font tokens: Add font family fallbacks (#8389) (b2fd255)
• Update tokens for better documentation (#8395) (ff19630)

Bug Fixes

• color tokens: Fix errors in schema (#8446) (f36a90e)
• color-context tokens: Only apply when .calcite-mode-auto is applied (#8344) (19de817)
• Replace "\n" to support Windows for tokens output (#8352) (02cf5d5)

2.1.0 (2023-12-19)

Miscellaneous Chores

• @esri/calcite-components-angular: Synchronize undefined versions

Dependencies

• The following workspace dependencies were updated
  • dependencies
    • @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.0

2.1.0 (2023-12-19)

Miscellaneous Chores

• @esri/calcite-components-react: Synchronize undefined versions

Dependencies

• The following workspace dependencies were updated
  • dependencies
    • @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.0

2.1.0 (2023-12-19)

Features

• Add validation-message and validation-icon attributes to form components for new internal calcite-input-message (#8305) (a554cfd)
• dropdown-item: Add disabled support (#8312) (4c311c6)
• list-item: Add calciteListItemToggle event. (#8433) (1d2fa04)
• list: Add calciteListDragStart and calciteListDragEnd events for when a drag starts and ends. (#8361) (1314605)
• list: Add drag event details to calciteListDragStart and calciteListDragEnd events (#8438) (e199c08)
• Provide legacy CSS custom props for backwards compatibility (#8355) (b0f063e)

Bug Fixes

• action-menu: Filter hidden or disabled actions via keyboard. (#8336) (11c0007)
• action-menu: Fix closing action menu after a drag occurs (#8339) (dcb8548)
• action-menu: Keep internal popover open property in sync (#8387) (38dff7c)
• dropdown-item: Avoid hover/active styling when disabled (#8398) (35817dc)
• floating-ui: Improve floating element performance (#8409) (4d8cfb8)
• input-date-picker: Ensure range input toggling is consistent (#8414) (cd92586)
• input-date-picker: No longer emits redundant change event (#8341) (cd5b92b)
• input-date-picker: Respect the numberingSystem property when rendering the input (#8383) (395b538)
• list-item: Drag grid cell should be accessible via arrow keys. (#8353) (2718ab3)
• menu-item: Improve keyboard navigability when href populated (#8408) (5b44798)
• modal: Ensure document overflow styles are properly restored when multiple modals are closed/removed (#8390) (f2c6b09)
• Replace "\n" to support Windows for tokens output (#8352) (02cf5d5)
• shell-panel: Adds border at the start when slotted in panel-end (#8314) (2d1a1e2)
• shell, shell-panel: Support resizing shell panel when there is an iframe slotted in shell content (#8317) (e0f69c9)
• stepper: Emits calciteStepperItemChange event when switched to first step (#8422) (508979f)
• table-cell: Fix background css variable (#8439) (9e5c59b)
• tab: Prevent vertical scrollbar on content pane when the height of outer elements are specified (#8399) (9e6d901)
• Use Stencil watchers instead of global attributes util (#8407) (c531d81)

Dependencies

• The following workspace dependencies were updated
  • devDependencies
    • @esri/calcite-design-tokens bumped from ^2.1.0-next.1 to ^2.1.0

1.0.0 (2023-12-02)

⚠ BREAKING CHANGES

• deps: We are treating the @stencil/core@v4 bump as a precautionary measure, particularly due to its potential impact on projects using calcite-components and Stencil.

Build System

• deps: Bump Stencil to v4 (#8108) (bcbb79f)

2.0.0 (2023-12-02)

⚠ BREAKING CHANGES

• 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

• 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

• Align tokens with figma variables (#8311) (8d7cf3f)

2.0.0 (2023-12-02)

⚠ BREAKING CHANGES

• deps: We are treating the @stencil/core@v4 bump as a precautionary measure, particularly due to its potential impact on projects using calcite-components and Stencil.

Build System

• deps: Bump Stencil to v4 (#8108) (bcbb79f)

Dependencies

• The following workspace dependencies were updated
  • dependencies
    • @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0

2.0.0 (2023-12-02)

⚠ BREAKING CHANGES

• react: 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.
• deps: We are treating the @stencil/core@v4 bump as a precautionary measure, particularly due to its potential impact on projects using calcite-components and Stencil.

Bug Fixes

• react: Disable includeImportCustomElements to resolve initial render issues (#8248) (0948c1a)

Build System

• deps: Bump Stencil to v4 (#8108) (bcbb79f)

Dependencies

• The following workspace dependencies were updated
  • dependencies
    • @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0

2.0.0 (2023-12-02)

⚠ BREAKING CHANGES

• tokens: Changes to @esri/calcite-design-tokens, including the names of CSS variables used to customize component styling. See the breaking changes section of the @esri/calcite-design-tokens changelog. (#8311) (8d7cf3f), (#8299) (4050a91), (#8215) (335d010)
• 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: 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)
• dropdown, modal: For consistency, renames the width property to widthScale. (#8251) (ab12968), (#8252) (6b09245)
• react: 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)
• i18n: 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)
• stepper-item: Removed both previousStep and nextStep message properties. These are no longer overrideable via messageOverrides. (#8234) (331aafb)
• 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)
• deps: We are treating the @stencil/core@v4 bump as a precautionary measure, particularly due to its potential impact on projects using calcite-components and Stencil. (#8108) (bcbb79f)

Features

• action-menu: Set max height of the action menu (#8275) (ca1be28)
• action-menu: Support action-groups (#8273) (c07144f)
• combobox, checkbox, input-time-zone, select, text-area: Add status property (#8304) (a44e9fe)
• handle: Add disabled property (#8283) (7aeecd5)
• list-item: Add dragDisabled property (#8285) (f091f26)
• list: Support multiple selection using the shift key (#8301) (79538be)
• Reduce global design tokens in calcite.css (#8215) (335d010)
• stepper: Enable responsive layout (#7744) (556b8bc)

Bug Fixes

• Align tokens with figma variables (#8311) (8d7cf3f)
• 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)
• dropdown: 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)
• list-item: Adds border between last item in a group and slotted item (#8262) (9b5cf76)
• list-item: An item with an empty slotted list should be openable. (#8240) (d615b39)
• list-item: Focus on the first focusable element within the component when using arrow keys (#8291) (b902365)
• list-item: Reserve space for empty open lists. (#8239) (484a5aa)
• list: Add live region for dynamically changing list items (#8148) (e3c0c06)
• react: Disable includeImportCustomElements to resolve initial render issues (#8248) (0948c1a)
• stepper: Typo in CSS variable for step bar's fill (#8255) (2e643aa)

Build System

• deps: Bump Stencil to v4 (#8108) (bcbb79f)

Code Refactoring

• card: Remove deprecated deselected message (#8099) (1bab172)
• dropdown: Rename width property to widthScale (#8251) (ab12968)
• i18n: Reduce list of supported numbering systems to latn, arab, and arabext (#8217) (9946ac1)
• modal: Rename width property to widthScale (#8252) (6b09245)
• stepper-item: No longer supports previousStep and nextStep messages (#8234) (331aafb)

Dependencies

• The following workspace dependencies were updated
  • devDependencies
    • @esri/calcite-design-tokens bumped from 1.1.1-next.2 to 2.0.0
    • @esri/eslint-plugin-calcite-components bumped from 0.2.4-next.0 to 1.0.0

0.2.3 (2023-11-21)

1.11.0 (2023-11-21)

Bug Fixes

• angular: Publish from the dist directory (#8151) (d813f14)

Dependencies

• The following workspace dependencies were updated
  • dependencies
    • @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0

1.11.0 (2023-11-21)

Dependencies

• The following workspace dependencies were updated
  • dependencies
    • @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0

1.11.0 (2023-11-21)

Features

• combobox: Limit display of selected items with new selection-display prop (#7912) (58317ae)
• date-picker: Make component responsive (#7872) (f131218)
• input, input-date-picker, input-number, input-text, input-time-picker: Truncate value and placeholder when input is narrow (#8160) (533eff3)
• list-item: Add content-bottom slot for placing content below the label and description of the component (#8183) (7d400fb)
• list: Specify the element types in the calciteListOrderChange event detail. (#8123) (3e81d7e)
• pagination: Introduce responsive design for xxsmall breakpoint (#8150) (ab20eb0)
• stepper-item: Remove support for previousStep and nextStep in messages (#8222) (213b31d)
• stepper: Enable responsive layout (#7744) (687ca2b)

Bug Fixes

• accordion-item: Update expanded chevron color (#8087) (d3d7688)
• action: Ensure action content is correctly spaced (#8184) (b18dcc8)
• action: Update transparent action styles (#8194) (0f12489)
• block-section: Wraps long text over to a new line when toggle switch is displayed (#8101) (3f90780)
• checkbox: Make label property public (#8181) (d3b9c1f)
• combobox-item: Hide disabled item icon (#8095) (36552f3)
• input-date-picker: Fix date-picker wrapper displaying beyond its bounds (#8172) (01ec024)
• input-number: Prevents mutating value on blur (#8226) (b89a893)
• input-time-zone: Fix Indian/Christmas time zone translation (#8096) (d79d591)
• list-item, stack: Stretch action-menu and handle when placed inside a list-item or stack. (#8185) (8a16a69)
• list-item, stack: Stretch dropdown when placed inside a list-item or stack (#8204) (05e6b65)
• list-item: Adds border between grouped and ungrouped list-items (#8134) (b3c331c)
• list-item: Fix rendering of open icon. (#8207) (a6e1766)
• panel, flow-item: Remove overflow rule (#8055) (d0c3ed2)
• split-button: Fix width layout (#8133) (051f332)

Dependencies

• The following workspace dependencies were updated
  • devDependencies
    • @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3

1.10.0 (2023-11-02)

Adds the @esri/calcite-components-angular package to the monorepo. This release was only created for the CI and was not published to NPM.

1.1.0 (2023-10-30)

Features

• Add icon tokens (#8008) (3623df1)
• Add js platform formats to calcite-design-tokens (#8044) (0e1fefb)
• Add xxs breakpoint to tokens (#7992) (05512b6)
• Reorganize breakpoints (#7994) (c64a059)

1.10.0 (2023-10-30)

Miscellaneous Chores

• @esri/calcite-components-react: Synchronize undefined versions

Dependencies

• The following workspace dependencies were updated
  • dependencies
    • @esri/calcite-components bumped from ^1.10.0-next.11 to ^1.10.0

1.10.0 (2023-10-30)

Features

• block: Ensure chevron is always displayed (#8014) (95fecb2)
• navigation-logo: Adds icon and iconFlipRtl properties (#8054) (049056d)
• stepper,stepper-item: Adds support for built-in translations (#8002) (bb91624)

Bug Fixes

• button, fab, inline-editable, split-button: Prevent redundant opacity when button is both loading and disabled (#8015) (3a1d3fd)
• combobox: Clear custom input value on blur (#8070) (327ff06)
• combobox: Ensure icon scales are consistent (#8075) (babba3b)
• filter: Corrects the accessible label (#8069) (c203084)
• Floating components will now get an initial position even if they are not opened (#8001) (78b680d)
• icon: Use pixel sizes for icons (#8009) (49085d5)
• input-date-picker, input-time-picker: Adjust chevron scale accordingly (#8012) (f894f80)
• input-time-zone: Fix city translations (#8058) (7df7e1f)
• list-item: Restore tabbability when an item's disabled prop is toggled (#8042) (c970603)
• pagination: Prevents console error when page-size is set to zero (#8017) (d09d485)
• segmented-control-item: Fix text color contrast (#8036) (ede8c43)
• stepper: Selects next enabled stepper-item when first one is disabled (#8004) (e0ed54e)

Dependencies

• The following workspace dependencies were updated
  • devDependencies
    • @esri/calcite-design-tokens bumped from ^1.1.0-next.3 to ^1.1.0

1.9.2 (2023-10-12)

Miscellaneous Chores

• @esri/calcite-components-react: Synchronize undefined versions

Dependencies

• The following workspace dependencies were updated
  • dependencies
    • @esri/calcite-components bumped from ^1.9.2-next.3 to ^1.9.2

1.9.2 (2023-10-12)

Bug Fixes

• flow-item: Update collapsed property when collapse button is clicked (#7960) (f6fd55f)
• input-time-zone: Allow searching offsets by Etc/x time zone (#7978) (2c34b42)
• input-time-zone: Fix error caused by time zone group filtering (#7971) (521673e)
• table: Improve scrollbar display (#7967) (593a1bf)