Skip to content

@esri/calcite-components: v3.0.0

Choose a tag to compare

View all tags
@calcite-admin calcite-admin released this 08 Feb 04:14
@esri/[email protected]
e63242f
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

3.0.0 (2025-02-08)

� BREAKING CHANGES

  • list, list-item, list-item-group, filter: The spacing changes affect content in the actions-start slot in addition to other rendered elements. Some styling updates may need to be applied to slotted actions or other adjustments based on the new scales.
  • tokens: Size and Space token values have changed. Line Height tokens exported for JS and ES6 are now unitless.
  • color-picker: The default width and height of the color-picker have been updated. Developers should review and adjust their layouts to accommodate these changes.
  • list: Choose a displayMode of "nested" or "flat" according to space and nesting requirements.
  • chip: The label property is now required and value is optional.
  • radio-button: Removes the deprecated property guid from calcite-radio-button.
  • progress: Refactors progress to use the value range of 0-100. Developers will need to provide a function to map existing values or use the updated range.
  • shell-panel: Removes the following deprecated properties from calcite-shell-panel: detachedHeightScale, detached and the --calcite-shell-panel-detached-max-height CSS property. Developers will need to replace calcite-shell-panel's detachedHeightScale and detached properties with heightScale and displayMode.
  • color-picker: Removes the following deprecated properties from calcite-color-picker: hideChannels, hideHex and hideSaved.
  • action-group: Removes the deprecated layout property by converting it to an internal property. Developers will need to replace calcite-action-group's layout property with it's parent's layout property (i.e., parent action-pad or action-bar).
  • table: Removes the deprecated property zebra from calcite-table.
  • checkbox: Removes the deprecated guid property from calcite-checkbox.
  • combobox, dropdown, input-date-picker, input-time-picker, split-button: Components will no longer close automatically when disabled. Developers relying on this behavior will also need to update the open property as well.
  • combobox, list: Filtering will no longer include item values by default. If value-filtering is desired, developers will need to configure items' metadata property.
  • modal: This should not require changes, but we are including this in the breaking change release due to the different modal configurations that could be impacted by the default position change.
  • input-time-zone: Developers using messageOverrides will need to make sure they do not reference removed entries.
  • block: The component's label property is a required property and heading is an optional property.
  • list: The component's label property is required to provide context between lists when dragging.
  • Components remain directly consumable, with no wrapper needed.
  • floating-ui elements no longer take up space when closed (#10241)
  • list: Modifies the component's keyboard sorting experience by using a dropdown menu to move list items. The ListItem dragSelected property and calciteListItemDragHandleChange event have been removed due to no longer being relevant.
  • flow, flow-item: The new selected property on calcite-flow-item must be used to define which calcite-flow-item is shown.
  • pick-list, pick-list-group, pick-list-item, value-list, value-list-group, value-list-item: Use the List component instead.
  • action-bar, action-pad: When slotting actions within the component you must now set textEnabled on them if necessary.

Features

  • accordion-item: Custom header and content spacing tokens (#10721) (fafd4d3)
  • accordion-item: Stretch slotted actions to fill its height (#9250) (bf9c64f)
  • accordion-item: Update token naming schema (#11070) (386355b)
  • Add default focus color token (#10512) (92a2be0)
  • autocomplete: Add autocomplete component (#10562) (cdacddd)
  • block-group, block: Add block-group component (#11319) (3f77c6b)
  • block-section: Add component tokens (#11032) (a7a99b1)
  • block: Add component tokens (#11014) (5514944)
  • block: Add required label property and mark heading as optional (#10739) (fcdfff0)
  • button: Add component tokens (#10358) (7fb506f)
  • chip: Add closeOnDelete prop (#10877) (0fab4a5)
  • color-picker: Enable responsive layout (#10904) (289a431)
  • color-picker: Update color field dimensions (#10903) (d951531)
  • combobox-item, combobox-item-group: Update padding indentation for nested groups & items (#10847) (c6ef5e3)
  • combobox-item: Add support for content-start slot (#11250) (82b96fa)
  • combobox-item: Update selection state according to spec (#10945) (d834ed7)
  • combobox, input-time-zone: Highlight text matches consistently (#11193) (d94f099)
  • combobox: Add filterProps (#11180) (8c04175)
  • date-picker: Add component tokens (#11380) (85125dd)
  • Deprecate widthScale/heightScale in favor of width/height (#10786) (4c62b68)
  • dialog, modal, popover, input-date-picker, input-time-picker, sheet: Support stacked component sequential closing with escape (#9231) (c0c5a1c)
  • dialog, modal, popover, sheet: Add options prop to customize focus-trap (#11453) (9c2c677)
  • dialog: Add 'custom-content' slot (#11072) (35897db)
  • dialog: Add focusTrapDisabled property for non-modal dialogs (#11362) (44f486c)
  • filter: Add label property (#11001) (942ad17)
  • flow, flow-item: Add component tokens (#11365) (a69460f)
  • flow, flow-item: Avoids removing flow-items from the DOM and adds selected property (#9390) (96648f5)
  • graph: Add component tokens (#11355) (0a54e2f)
  • icon: Add preload property (#10926) (49f9e3d)
  • inline-editable: Add component tokens (#11357) (e37f8ae)
  • input-date-picker, date-picker: Improve date picking experience (#8402) (d03bfa6)
  • input-time-picker: Add hour-format property (#10997) (7468887)
  • input,input-text,text-area: Support spellcheck property (#10489) (83912f3)
  • input: Add component tokens (#10820) (ee926db)
  • input: Improve display of resize handle for type textarea (#10866) (94072e6)
  • label: Add component tokens (#10688) (f998840)
  • link: Add component tokens (#10689) (9985b51)
  • list-item: Add iconStart, iconEnd and iconFlipRtl props (#11004) (a639c78)
  • list-item: Update single-select icons (#10858) (feb1af6)
  • list, list-item, list-item-group, filter: Add scales, update padding and spacing, update font sizes (#10853) (17b51f3)
  • list, list-item, list-item-group: Add component tokens (#10669) (997b7da)
  • list, list-item: Add non-interactive option to remove hover/pointer changes. (#10473) (cb4a464)
  • list: Add displayMode property to choose between flat and nested lists (#10852) (41283df)
  • list: Add filterLabel property (#11002) (1c2811d)
  • list: Add filterPredicate property to handle custom filtering (#11044) (57a68b9)
  • list: Require label for context when dragging between lists (#10702) (4696d76)
  • list: Support moving between different lists via keyboard (#10480) (ed2c91d)
  • loader: Add component tokens (#10979) (2b4c0bf)
  • loader: Update loader to adhere to the latest spec (#10851) (76d34bf)
  • menu-item: Add component tokens (#10654) (7178050)
  • menu-item: Enhance component's interactive states (#10933) (01d7bbf)
  • navigation-logo: Add component tokens (#10582) (a0b84e1)
  • navigation-logo: Enable interactive states only when href is specified (#11202) (5ac17ef)
  • navigation-user: Add component tokens (#10608) (6cdb98e)
  • navigation: Add component tokens (#10644) (729e487)
  • notice: Add component tokens (#11042) (2fb8715)
  • pagination: Add component tokens (#11157) (f5354cd)
  • pagination: Enhance component's interactive states (#10485) (739ca76)
  • pagination: Remove gap at start and end of component. (#10523) (021a8f2)
  • panel: Add component tokens (#10822) (dfbe3cd)
  • panel: Control panel header action tokens (#11300) (f9f6abd)
  • rating, slider: Add validation message to support form error handling (#10621) (b632449)
  • rating: Add component tokens (#11150) (f23a319)
  • segmented-control, segmented-control-item: Add component tokens (#11359) (91fcb70)
  • select: Add component tokens (#11178) (262cf84)
  • sheet: Add resizable property (#10521) (e599ae0)
  • slider: Add component tokens (#10716) (ce740a7)
  • stepper-item: Update component's active state background color (#10487) (4e0afa4)
  • stepper-item: Update component's active state background color. (#10475) (b5eac59)
  • switch: Add component tokens (#10647) (b339e26)
  • tab-title: Add icon start/end custom CSS prop (#10871) (cb556cc)
  • text-area: Add limitText prop to prevent input beyond max-length (#11440) (2cfc1c9)
  • tile: Add design tokens (#10476) (11c7f1f)
  • time-picker: Expose calciteTimePickerChange event (#11214) (6ebaed9)
  • tooltip: Add component tokens (#10687) (3bf79eb)
  • tree,tree-item: Update indentation (#10990) (3406ea6)

Bug Fixes

  • accordion-item: Fix rendering tied to named-slot content (#10447) (1a7ee66)
  • accordion-item: Split header content padding (#10865) (03b2372)
  • accordion-item: Stretch slotted actions only (#11082) (be90d1a)
  • action-bar, action-pad: Do not modify text-enabled on slotted actions unless expanded is toggled (#9554) (6768696)
  • action-group, input, menu: Fix setFocus issues in Chrome 128+ (#10676) (954a71d)
  • action-menu: Fix toggle logic when action-menu is reconnected (#11139) (064d783)
  • action: Active styles present with transparent appearance (#10988) (cab16f0)
  • action: Component in transparent active mode should use -hover (#11075) (6d46017)
  • action: Create localized template for aria-label (#10969) (cd53fd0)
  • action: Disabled styles (#10987) (9d6572b)
  • action: Reflect the icon property (#11282) (8b986d7)
  • alert: Add public --calcite-alert-offset-size css token (#10872) (4085025)
  • Allow custom Calcite CSS properties in style object type (#11051) (6148cf1)
  • block: Fix rendering tied to named-slot content (#10449) (deab4fe)
  • Bundle-in non-ESM dependencies (#10766) (9994dc0)
  • button, dialog, dropdown, notice, select, sheet, shell-panel, split-button: Fix width types (#10937) (2a4e4e4)
  • carousel: Ensure correct autoplay display and animation (#11338) (21fe6c3)
  • carousel: Improve Carousel navigation display (#11439) (20a3ea8)
  • checkbox: Ensure that border shows in high contrast mode (#10823) (6f270cf)
  • chip: Fix inverse close color (#11363) (3c25b44)
  • chip: Provide label context to assistive technologies (#10888) (2e57ab2)
  • color-picker: Ensure shorthand hex is expanded regardless of alpha channel presence (#11188) (9839ef0)
  • color-picker: Fix error caused by initial value with a different format (#11351) (2cf9d2b)
  • combobox-item-group: Cascade scale from combobox (#10908) (2ef562e)
  • combobox-item: Fix icon color css override (#10874) (a712f17)
  • combobox-item: Fix rendering tied to named-slot content (#10450) (b10dfc4)
  • combobox-item: Replace type-enforced deprecated + required textLabel prop with runtime warning (#10855) (3faad7d)
  • combobox, dropdown: Honor max-items when it matches total items (#10971) (ba8cfb4)
  • combobox, input-time-zone: Fix initial item selection delay (#11326) (61f8c70)
  • combobox, list: Stop filtering on value by default (#10791) (0e87519)
  • combobox, stepper, table: Respect user hidden attribute (#10983) (531663e)
  • combobox: Ensure disabled items get proper scale (#11400) (1df2476)
  • combobox: Fix accessibility when an item's heading or label changes (#11289) (d4c842c)
  • combobox: Fix sporadic change event emitted on initialization (#10952) (242fc49)
  • combobox: Include groups in filtering (#10511) (15cde1b)
  • combobox: Update internal state after custom value is added (#11405) (f6d6052)
  • combobx: Display selected item when initally opened (#11427) (ccffc03)
  • date-picker: No longer disable min/max value month in select menu (#11350) (42492b5)
  • dialog, modal, popover: Add type to focusTrapOptions prop (#11481) (acb0f4d)
  • dialog, panel: Prevent beforeClose from being invoked during initialization (#11038) (18ddcbe)
  • dialog, panel: Restore relative positioning in content area (#10749) (0e02adc)
  • dialog: Fix error when initially opened (#10868) (5f266a3)
  • dialog: No longer modifies slotted panels background color (#11052) (0df6201)
  • dialog: No longer modify slotted panels background color (#11074) (b72e050)
  • dialog: Toggle focus-trap on DOM connect and disconnect (#11429) (58bebb7)
  • dialog: Update content background color to match modal (#10856) (f63fd4a)
  • docs: Use updated translation bundle paths to generate translations.json (#11219) (6b676e4)
  • dropdown-item: Keep focus ring when selected dropdown item is hovered (#10951) (a6bd8fa)
  • dropdown: Avoid showing scroller when max-items equals items (#11480) (dc8f1d0)
  • filter: Remove unnecessary inline margin from internal label element (#10963) (38b6470)
  • Fix core transitions across components (#10836) (7451e6d)
  • Fix open/close event emitting of initially open components (#11306) (06dd8f7)
  • Closed floating elements should not cause scrollbars (#10241) (04524bb)
  • flow-item: Fix TS error caused by FlowItemLike type (#10802) (2195f42)
  • flow: Process items on loaded (#11364) (f208514)
  • form: Add ariaHidden property to the hidden form input (#11418) (f88d4ce)
  • inline-editable: Add tooltips for controls (#10538) (d30bafb)
  • inline-editable: Fix cancel workflow (#11046) (2b1cf65)
  • inline-editable: Fix rendering tied to default slot content (#10456) (50ede48)
  • input-date-picker, input-time-picker, modal, sheet: Closes on escape when focusTrap is disabled (#10578) (0cd3e1f)
  • input-date-picker: Remove hardcoded strings (#10741) (04a5310)
  • input-time-picker: Retain focus inside the input when clicked (#10729) (34ffd20)
  • input-time-zone: Add workaround for Factory time zone error in Chrome (#10964) (7de454f)
  • input-time-zone: Ensure name-mode displays IANA time zone identifiers (#10923) (0923504)
  • input-time-zone: Keep selection in sync when item-related props are set along with value (#11166) (6100abd)
  • input-time-zone: Remove debugging log messages (#11106) (71471fd)
  • input, input-number, input-text: Should not set slotted actions to be disabled (#10458) (6ed32c6)
  • input, input-text, input-number: Restore handling of autofocus global attribute (#11118) (57b9aac)
  • input: Avoid styling on non-reflected attributes (#11089) (8cfe146)
  • input: Fix clipping for type=file with Japanese locale (#11205) (0b099bd)
  • input: Update files property on input event when type="file" (#11262) (42cce75)
  • link: Fix underline animation (#10835) (345c318)
  • list-item: Correct spacing errors in medium and large scales (#10962) (adb3203)
  • list-item: Reflect the sortHandleOpen property (#11323) (62bfc88)
  • list: Drag event properties newIndex and oldIndex should only reflect list item indexes (#11402) (5915ff5)
  • list: Include groups in filtering (#10664) (4fba1c8)
  • list: Only focus on row when clicking a list item (#11310) (c4d3689)
  • list: Update child list components when scale property changes (#10935) (7f71157)
  • meter: Add fill style for high-contrast mode (#11392) (4e1ed10)
  • modal: Fix rendering tied to named-slot content (#10469) (879779b)
  • modal: Use fixed positioning on host to prevent Safari from clipping content in certain layouts (#9545) (cda8331)
  • notice: Fix rendering tied to named-slot content (#10453) (90b4e55)
  • panel: Add correct heading and description line height and alignment (#10944) (6a74411)
  • Popover: Popover reopens when trigger is clicked and autoClose = true (#10842) (9b309e7)
  • Prevent transpilation issues by using this to reference static props (#11088) (e70fae5)
  • progress: Convert value range to 0-100 (#10622) (a5f6767)
  • segmented-control: Ensure change event emits after item update (#10818) (4133b6d)
  • shell-center-row: Ensure deprecation warning doesn�t show when using standalone shell or shell-panel (#10561) (0655f8f)
  • shell-center-row: Fix rendering tied to named-slot content (#10451) (ba0b99a)
  • shell-panel: Fix visual issues in displayMode="float-all" (#11410) (85af56d)
  • slider: Avoid breaking thumb label on edges (#10922) (0d3fee0)
  • sort-handle: Adjust icon color (#10663) (f09c62f)
  • sort-handle: Pass scale to handle action (#10942) (590cdbd)
  • stepper-item: Keep initial focus on newly selected item (#11482) (430fbab)
  • t9n: Make TypeScript inline .json type imports (#10804) (19822fd)
  • table, table-row: Improve programmatic Table Row selection behavior (#11237) (69c6dab)
  • table: Fix bordered styling in Firefox (#11466) (eaf21f3)
  • text-area: Make readOnly prop writable (#11218) (cef861e)
  • tile-group: Keep selection icon size consistent for large tiles (#11215) (0f5d196)
  • tile: Allow percentage inline-size on slotted content to be based on host (#11283) (9b08055)
  • tile: Wrap overflowing text content (#11213) (3640f19)
  • tip: Fix rendering tied to named-slot content (#10470) (9a11aeb)
  • tokens: Correct space and size tokens (#10727) (13c2df8)
  • tooltip, popover: Honor prevented events (#11278) (28904e2)
  • tooltip: Fix closeOnClick property in Safari (#10737) (2967622)
  • tree, tree-item: Fix rendering tied to named-slot content (#10462) (80128f1)
  • tree: Ensures lines length is accurate (#11036) (d27385c)
  • tree: Fix has-children logic (#11347) (971b3b9)
  • Use explicit module imports for dayjs (#11030) (03e02e5)
  • utils/dom: Fix getModeName function to support auto mode (#10683) (98fe7f8)

Performance Improvements

  • combobox: Fix initialization performance regression (#11265) (8d6d848)

Deprecations

  • action: Deprecate tokens (#10986) (b2df2c9)
  • dialog: Deprecate the content slot (35897db)
  • notice: Deprecate --calcite-notice-width token (#11212) (fe711cd)
  • accordion-item: Deprecate --calcite-accordion-item-start-icon-color and --calcite-accordion-item-end-icon-color tokens (386355b)

Code Refactoring

  • action-group: Remove deprecated layout property (#10792) (77c16ef)
  • checkbox: Remove deprecated guid property (#10797) (f4c395d)
  • chip: Make label property required and value optional (#10787) (f95d23e)
  • color-picker: Remove deprecated properties (#10790) (00e8ede)
  • combobox, dropdown, input-date-picker, input-time-picker, split-button: Avoid modifying open based on disabled prop (#10793) (953740d)
  • Drop Angular wrapper (#10675) (f663794)
  • input-time-zone: Drop obsolete time zone translations (#10747) (f70041b)
  • Migrate to Lumina (#10482) (9bffc3f)
  • pick-list, pick-list-group, pick-list-item, value-list, value-list-group, value-list-item: Remove deprecated components. (#10653) (ddfdeeb)
  • radio-button: Remove deprecated guid property (#10799) (4a3f199)
  • shell-panel: Remove deprecated properties (#10794) (fd73980)
  • table: Remove deprecated zebra property (#10795) (ef1e219)

Dependencies

  • The following workspace dependencies were updated
    • dependencies
      • @esri/calcite-ui-icons bumped from 4.0.0-next.13 to 4.0.0
    • devDependencies
      • @esri/calcite-design-tokens bumped from 3.0.0-next.7 to 3.0.0
      • @esri/eslint-plugin-calcite-components bumped from 2.0.0-next.7 to 2.0.0
Assets 3
Loading