October 2024 Summary

Updates since 2.9

New components and initiatives

Dialog

Introducing Calcite's newest component, Dialog. Dialog is designed for presenting focused interactions, tasks, or workflows to a user. Dialogs can be configured to suit a variety of use cases and interface needs, ranging from brief informational prompts to complex multi-step workflows. For instance, engaging users with onboarding or instructional content, or interrupting a workflow to present a choice or provide guidance.

Some use cases of Dialog may take the form of page-blocking interactions, where the modal property should be used, and a Scrim will be positioned behind the component to prevent interaction with the main content. For more information, visit Dialog's modal behavior.

The component's placement can be specified via the placement property, and offers styles where the component's placement can be further customized with its offset via the --calcite-dialog-offset-x and --calcite-dialog-offset-y CSS properties.

Dialog also offers a widthScale to specify the visual sizing, dragEnabled and resizable to drag and resize the component respectively, content slots, and provides accessibility features such as focus order and keyboard navigation.

Dialog component with dragEnabled and resizable
Dialog component with dragEnabled and resizable.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
<calcite-dialog open width-scale="s" heading="Unsaved changes" placement="top" drag-enabled resizable>
  <p>Are you sure you want to continue?</p>
  <p>There are unsaved changes, and if you proceed the changes will be lost.</p>
  <calcite-button slot="footer-start" appearance="outline" kind="neutral">
    Cancel
  </calcite-button>
  <calcite-button slot="footer-end">
    Proceed without saving
  </calcite-button>
</calcite-dialog>

Global configuration

Global configuration assists with client troubleshooting and detects and communicates the current version of Calcite for developers. Global configuration also provides context on component deprecations, and identifies alternative approaches and which major version the component is planned for removal. To learn more, explore Core concepts.

Detect the version

Since 2.10, developers can use the calciteConfig global variable to detect the Calcite version at runtime.

Use dark colors for code blocksCopy
1
window.addEventListener("load", () => console.log(window.calciteConfig.version));

Log messages

Since 2.11, component deprecations are logged to the console by default. Developers can opt to remove messaging from production environments and builds using calciteConfig:

Use dark colors for code blocksCopy
1
2
3
var calciteConfig = {
  logLevel: "off"
};

Feature enhancements

Component CSS variables

Calcite Design System is working towards support of component tokens, which allow for component customization via CSS variables. Some components already offer customization for designers and developers, and additional configuration with component CSS variables will be supported in future releases.

Some new variables include:

  • Accordion Item's --calcite-accordion-item-background-color
  • Avatar's --calcite-avatar-background-color and --calcite-avatar-corner-radius
  • Dialog and Panel's background color with --calcite-dialog-background-color and --calcite-panel-background-color respectively
  • Input's prefix and suffix sizings with --calcite-input-prefix-size and --calcite-input-suffix-size respectively
  • Text Area's --calcite-text-area-min-height and --calcite-text-area-max-height
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
<style>
  #feedback-notes {
    --calcite-text-area-min-height: 5rem;
    --calcite-text-area-max-height: 10rem;
  }
</style>

<calcite-text-area id="feedback-notes" max-length="500"></calcite-text-area>

Popover's flipPlacements and Block's menuFlipPlacement

Popover now offers a flipPlacements property in tandem with its placement property, and Block provides menuPlacement and menuFlipPlacement properties to set different initial component placement and alter the placement when interacting with your UI.

Popover's flipPlacement property allows the capability to alter the placement of the component
Popover's flipPlacement property can adjust the component's placement when interacting with your UI.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
<calcite-popover placement="bottom" heading="About this data" label="About this data" reference-element="popover-button" closable>
  ...
</calcite-popover>

<script>
  const popoverEl = document.getElementById("sample-popover");
  popoverEl.flipPlacements = ["leading", "trailing"];
</script>

List Item's unavailable property

List Item now offers an unavailable property. When enabled, unavailable makes the component's content appear inactive, while allowing users the ability to navigate to the List Item. Designers and developers can also supply additional context, such as why interaction is limited on the component. This differs from the component's disabled property, where interaction is prevented.

List Item's unavailable property allows for more use cases where additional context can be provided on the component's interaction.
List Item's unavailable property allows for more use cases where additional context can be provided on the component's interaction.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
<calcite-list>
  <calcite-block heading="Summarize data" open>
    <calcite-list-item label="Summarize data points" value="analysis">
      <calcite-icon icon="analysis" slot="content-start"></calcite-icon>
    </calcite-list-item>
    <calcite-list-item unavailable label="Summarize raster within" value="raster-within-sum">
      <calcite-icon icon="raster-analysis" slot="content-start"></calcite-icon>
      <calcite-action id="info-tooltip" slot="actions-end" icon="lock" text="Not currently available"></calcite-action>
    </calcite-list-item>
  </calcite-block>
</calcite-list>

Tooltip improvements

Tooltip now correctly animates along the x-axis upon transitioning to the open state for the first time. Additionally, Button and Action now invoke Tooltips on mobile devices using tap, when a user interacts via touch. This feature enhancement adds more UI interactions for users across more devices in your apps.

Tooltip animates in from left to right at ten percent animation speed
Tooltip animates in from left to right at ten percent animation speed.

List's filterProps property

List now provides a filterProps property to specify which properties to filter when using filterEnabled, where one or multiple property values can be used to filter. If not set, all properties will be matched including label, description, metadata, and value.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<calcite-list filter-enabled filter-placeholder="Filter waypoints">
  <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">
  </calcite-list-item>
  <calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
  </calcite-list-item>
  <calcite-list-item label="Rivers" description="Large naturally flowing watercourses." value="rivers">
  </calcite-list-item>
  <calcite-list-item label="Estuaries" description="Where the river meets the sea." value="estuaries">
  </calcite-list-item>
</calcite-list>

<script>
  const listEl = document.querySelector("calcite-list")
  listEl.filterProps = ["label"];
</script>

Alert's timer improvements

When autoClose is present, Alert now pauses the timer when the component is in focus. This improvement provides additional support to the previously offered pausing while hovering over the component via mouse.

Alert will pause closure via its timer when the component is in focus or when the mouse is hovered over the component.
Alert will pause closure via its timer when the component is in focus or when the mouse is hovered over the component.

Slider improvements

Slider now ensures that only integers can be selected when the snap property is true and step property is set to an integer. Additionally, text within the component can no longer be unintentionally highlighted.

Slider correctly snaps to integers
Slider correctly snaps to integers.
Use dark colors for code blocksCopy
1
2
3
4
5
<calcite-label>
    Rating
    <calcite-slider value="1.5" label-ticks max-label="5" min-label="0" ticks=".5" max="5" snap>
    </calcite-slider>
</calcite-label>

Combobox improvements

Combobox Item's description, shortHeading properties and content-end slot

Combobox Item now offers description and shortHeading properties. Where description provides additional context to an item, and shortHeading can represent the item in a compact format when the Combobox is closed. A new content-end slot has also been introduced for adding non-actionable elements after the component's content, such as an Avatar.

Combobox Items utilizing the description and shortHeading properties, as well as Avatars in the content-end slot.
Combobox Items utilizing the description and shortHeading properties, as well as Avatars in the content-end slot.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<calcite-combobox placeholder="Select a character" short-heading="Short">
  <calcite-combobox-item
    value="Bilbo Baggins"
    text-label="Bilbo Baggins"
    description="A strange and wonderful hobbit"
    short-heading="BB"
   >
    <calcite-avatar thumbnail="../images/bilbo.jpg" slot="content-end">content-end</calcite-avatar>
  </calcite-combobox-item>
  <calcite-combobox-item
    value="Frodo Baggins"
    text-label="Frodo Baggins"
    description="The Ring-Bearer"
    short-heading="FB"
  >
    <calcite-avatar thumbnail="../images/frodo.jpg" slot="content-end">content-end</calcite-avatar>
  </calcite-combobox-item>
  <calcite-combobox-item
    value="Gandalf"
    text-label="Gandalf"
    description="Some guy with insane fireworks"
    short-heading="GTG"
  >
    <calcite-avatar thumbnail="../images/gandalf.jpg" slot="content-end">content-end</calcite-avatar>
  </calcite-combobox-item>
</calcite-combobox>

Combobox Item's metadata property support

Combobox now features a metadata property, which allows users to provide additional information for items that can be used when filtering.

Combobox filtering using data added to the metadata property.
Combobox filtering using data added to the metadata property.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<calcite-combobox placeholder="Select an animal">
    <calcite-combobox-item value="Lion" text-label="Lion" class="cat"></calcite-combobox-item>
    <calcite-combobox-item value="Tiger" text-label="Tiger" class="cat"></calcite-combobox-item>
    <calcite-combobox-item value="Wolf" text-label="Wolf" class="dog"></calcite-combobox-item>
    <calcite-combobox-item value="Coyote" text-label="Coyote" class="dog"></calcite-combobox-item>
</calcite-combobox>

<script>
  const cats = document.querySelectorAll(".cat");
  const dogs = document.querySelectorAll(".dog");

  cats.forEach(element => {
    element.metadata = { type: 'cat', sound: 'roar' };
  });

  dogs.forEach(element => {
    element.metadata = { type: 'dog', sound: 'howl' };
  });
</script>

Combobox filter text value accessible

Combobox's filter text value is now able to be accessed with the new filterText property.

Combobox's filter text can now be accessed with its filterText property.
Combobox's filter text can now be accessed with its filterText property.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p>Filter text: <span id="filter-text"></span></p>
<calcite-label>
  Sport
  <calcite-combobox placeholder="Select a sport" id="combobox">
    <calcite-combobox-item value="Soccer" text-label="Soccer"></calcite-combobox-item>
    <calcite-combobox-item value="Football" text-label="Football"></calcite-combobox-item>
    <calcite-combobox-item value="Disc Golf" text-label="Disc Golf"></calcite-combobox-item>
    <calcite-combobox-item value="Tennis" text-label="Tennis"></calcite-combobox-item>
    <calcite-combobox-item value="Pond Hockey" text-label="Pond Hockey"></calcite-combobox-item>
  </calcite-combobox>
</calcite-label>

<script>
const combobox = document.getElementById("combobox")
const filterText = document.getElementById("filter-text")

combobox.addEventListener("calciteComboboxFilterChange", function () {
  filterText.textContent = combobox.filterText;
})
</script>

Color Picker's value improvement

Color Picker will now immediately apply a hex value that has been pasted into the component's input. This change creates an expected behavior and improved user experience.

Color Picker instantly applies hex values and displays the resulting color when a new value is pasted in.
Color Picker instantly applies hex values and displays the resulting color when a new value is pasted in.

Segmented Control with icon only

Segmented Control now supports use cases where only an icon is present on a Segmented Control Item. The spacing around the icons is now consistent when there's no text content provided or when there's a value, but no text content.

Segmented Control using icons only
Segmented Control using icons only.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
<calcite-label>
  Marker style
  <calcite-segmented-control>
      <calcite-segmented-control-item value="circle" icon-start="circle"></calcite-segmented-control-item>
      <calcite-segmented-control-item value="square" icon-start="square" checked></calcite-segmented-control-item>
      <calcite-segmented-control-item value="triangle" icon-start="triangle"></calcite-segmented-control-item>
      <calcite-segmented-control-item value="plus" icon-start="diamond"></calcite-segmented-control-item>
  </calcite-segmented-control>
</calcite-label>

Panel and Flow Item's slots

Panel and Flow Item now offer a content-top slot for adding content above the default slot positioned below the action-bar slot, and a content-bottom slot for adding content below the default slot but above the footer. Additionally, Panel now features an alerts slot for placing Alert components within the Panel.

Panel with Notice components slotted in the content-top and content-bottom slots.
Panel with Notice components slotted in the content-top and content-bottom slots.

Table's selectionDisplay property

Table now includes a selectionDisplay property that allows the removal of the selection chip and clear button from above the component. This addition provides a solution to the use case where selectionMode is "single", but the presence of the chip could cause confusion as it implied that a user could select multiple options.

Table before selectionDisplay propertyTable with selectionDisplay of "none"
Table with single selection mode and no selction display propertyTable with single selection mode and selction display property set to none

Dropdown Group, Dropdown and Dropdown Item include additional icon spacing for consistency across the design system, improving nested indentations and visual hierarchy.

Dropdown components before the enhancementDropdown components with improved nested indentations
Dropdown components icon spacing before constrained in the components in larger scalesDropdown components icon spacing after with additional spacing in larger scales

Input Time Picker improvements

Input Time Picker's popup dialog now closes when its value is empty and a user clicks outside of the component.

When Input Time Picker does not contain a value and a user clicks outside of the component it now closes.
When Input Time Picker does not contain a value and a user clicks outside of the component it now closes.

Shell Panel's displayMode

Shell Panel now offers two new displayMode's of "float-content" and "float-all". Where "float-content" does not display at full height with content separately detached from the Action Bar on the top of centered content. While "float-all" is detached from the Panel and Action Bar on top of centered content.

The change deprecates Shell Center Row and Shell Panel's displayMode's "float" value - use "float-content" instead. Learn more on Shell Center Row's deprecation.

Shell Panel's display-mode="float-content"Shell Panel's display-mode="float-all"
Shell Panel's displayMode of float-contentShell Panel's displayMode of float-all

Carousel's display improvements

Carousel now includes support for high Carousel Item counts by adjusting automatically to the number shown as the component's container width changes. The update is consistent with other components, such as Pagination.

Input Time Zone improvements

Input Time Zone includes multiple improvements improving its usability, including:

  • The ability to display the region when mode is set to "region"
  • A new search icon is added to the component's placeholder text
  • Refinement to the component's open and close event order to ensure proper timings before, during, and after it has been opened and closed
Use dark colors for code blocksCopy
1
<calcite-input-time-zone mode="region"></calcite-input-time-zone>
Input Time Zone's new region mode.
Input Time Zone's new region mode.

Accessibility and internationalization improvements

Since May Calcite has included additional accessibility and internationalization enhancements and improvements to reach wider audiences. Explore accessibility and localization resources to learn more.

Action Bar's messageOverrides

Action Bar's collapse menu now offers messageOverrides to adopt for more users. The property allows developers to provide additional context to assistive technologies (AT) without altering the visual appearance to the component's "Collapse" or "Expand" text. Designers and developers can now adjust the visual label with expand and collapse while also supporting the label, and not affecting the visual state via expandLabel and collapseLabel.

Use dark colors for code blocksCopy
1
2
3
4
5
const actionBarEl = document.getElementById("example-action-bar");
actionBarEl.messageOverrides = {
  expandLabel: "Expand accordion sample menu bar",
  collapseLabel: "Collapse accordion sample menu bar"
}

Tree support improvement

Accessibility improvements are now offered when Tree has a selectionMode of "ancestors", where the accompanying checkbox was refactored to an icon and the component's context is provided to AT via a new label property.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
<calcite-tree selection-mode="ancestors">
    <calcite-tree-item label="Midwest Group">Midwest
      <calcite-tree slot="children">
        <calcite-tree-item>Great Lakes</calcite-tree-item>
        <calcite-tree-item>Northwoods</calcite-tree-item>
      </calcite-tree>
    </calcite-tree-item>
</calcite-tree>

Improved Input error context

Error message context to Input-based components is now supported to AT when the components status is reported as "invalid". The additional context provides more support to users that may have visual or cognitive impairments relying on AT to convey an error is present and more action is needed before form submission. Components with error announcements to AT include:

When Dropdown is not open, the arrow up and arrow down keys support opening the component, where the arrow up key will focus on the first Dropdown Item and arrow down on the last item. If there is a selected item either arrow key will shift focus to the first selected item.

Accordion Item's focus support

Accordion Item now supports the setFocus method, where developers can shift focus to the component in their UI.

Use dark colors for code blocksCopy
1
2
3
const accordionItemEl = document.getElementById("example-accordion-item");
const btnFocus = document.getElementById("shift-focus-button");
btnFocus.addEventListener("click", () => accordionItemEl.setFocus());
Shift focus to an Accordion Item with the setFocus method.
Shift focus to an Accordion Item with the setFocus method.

Input Time Picker locale improvements

Input Time Picker includes a fix for the Korean locale, properly displaying the meridiem, in English referred to as "a.m." and "p.m.".

Input Time Picker fix placing the Meridiem for the Korean locale properly at the start of the component.
Input Time Picker fix placing the Meridiem for the Korean locale properly at the start of the component.

Input Date Picker locale improvements

Input Date Picker includes additional support for the Bosnian (bs) and Italian - Switzerland (it-CH) locales, where the component was previously cleared erroneously.

Visual changes

Calcite Design System aims to improve design consistency and usability, however some changes, while not breaking result in visual changes. Below are a list of changes since May, which ensure components align with evolving design standards and consistency, but may visually change in apps.

Block improvements

Block now provides default padding of "0.75rem" for consistency in spacing across the design system. Additionally, Block Section has removed the status property in favor of the new iconStart and iconEnd properties for further icon customization in your apps.

Block with iconStart and iconEnd populated and new padding for Block highlighted.
Block Section with iconStart and iconEnd populated and new padding for Block highlighted.

Color Picker improvements

Color Picker's scope size has been reduced to "14px" circles, ensuring it matches the slider height across all scales for consistency. Additionally, when the alphaChannel is not in use, the sampled color swatch is now adjusted to match the size of the saved color swatches "20px" for small scale and "24px" for medium scale.

Before (No alpha-channel with larger sample swatch and scope)After (No alpha-channel with smaller sample swatch and scope)
Color Picker with larger sample swatch and scopeColor Picker with smaller sample swatch and scope

Combobox changes

When searching Combobox's matching terms are now highlighted for easier identification. Custom values are now appended to the top of the dropdown list, and the keyboard navigation focus order has been refined when selectionMode is set to "multiple", improving the user experience.

Combobox showing search highlighting, custom value added to the top of dropdown list, and keyboard navigation between input and selected chips.
Combobox showing search highlighting, custom value added to the top of dropdown list, and keyboard navigation between input and selected chips.

Loader's new type

An option of "determinate-value" was added to Loader's type property. The new type displays a percent sign alongside the value, where a user is provided with context on the percentage rather than a specific count in some use cases for improved usability.

Loader with type property set to determinate-value.
Loader with type property set to "determinate-value".

Panel and Flow Item's slots

The footer of both Panel and Flow Item were refactored to include footer-start and footer-end slots. This change allows the Dialog component to have the same functionality as the deprecated Modal component.

Panel with buttons slotted in the footer-start and footer-end slots.
Panel with buttons slotted in the "footer-start" and "footer-end" slots.

Split Button's styles

Split Button now has matching styles for its divider across all appearance types for better visual consistency.

Split Button appearance variants before updates to divider styling.
Split Button appearance variants before updates to divider styling.

Table improvements

The select all checkbox in the Table header was visually always selected previously when selection-mode was set to "multiple". The checkbox selection has been improved to properly reflect the different selection states of the component.

Before (Unclear select all state)After (Clear select all state)
Table with select all checkbox that looks selected when only one option is selectedTable with a intermediate select all checkbox that shows a minus icon

Tile changes

Tile has been updated to properly contain slotted content that previously over-extended the boundaries of the component. The spacing for content slotted into the "content-top" and "content-bottom" slots is now more consistent when the component is used without an accompanying heading, description, or icon.

Before (Content over-extending)After (Content contained)
Tile with image over-extending boundaryTile with image correctly contained within boundary
Before (Uneven spacing)After (Even spacing)
Tile with uneven spacing around slotted imagesTile with even spacing around slotted images

Tree icon improvements

Tree's selection affordance now uses icons instead of checkboxes when selectionMode property is set to "ancestors".

Before (Checkboxes)After (Icons)
Tree with checkboxes for selection affordanceTree with icons for selection affordance

New deprecations

Calcite now tracks deprecations in changelogs to better equip designers and developers prior to major releases and future removal. Explore Calcite's global configuration to assist with troubleshooting, and learn more about deprecations.

Modal was deprecated in 2.11, use the Dialog component instead. Learn more about Dialog including its usage, configuration, and support.

Shell Center Row deprecation

Shell Center Row was deprecated in 2.11. Use Shell Panel's displayMode property set to "float-content" or "float-all" instead.

Action's compact property deprecation

Action's compact property was deprecated in 2.11, consider alternative components and configurations based on use cases.

Checkbox and Radio Button's guid property deprecation

The guid property for the Checkbox and Radio Button components has been deprecated in 2.13, use a unique id attribute instead.

Changes since May 2024

A full list of changes since May include:

Features

  • Include version in global config (#9536) (86eefb0), closes #8848
  • Provide info message on stamped version instead of warning (#9739) (b25cb7b)
  • accordion, accordion-item: Add component tokens (#9861) (48f7f08)
  • action, action-bar, action-group, action-menu, action-pad: Add component tokens (#10058) (de96c24)
  • action-group, block, panel: Add menuPlacement and menuFlipPlacements properties (#10249) (5ba3112)
  • action-menu, combobox, dropdown, input-date-picker, popover: allow logical placements for flipPlacements property. #8825 (#9490) (45aabaa)
  • action-bar, action-pad: add expandLabel and collapseLabel to messages (#9497) (12407eb), closes #5539
  • color-picker, color-picker-hex-input: Add input auto commit, blur and auto select enhancements. (#9701) (b2be625)
  • combobox, combobox-item:
    • Add description, shortHeading props and content-end slot (#9771) (78eb555)
    • Add metadata support for filtering (#9819) (5de7787)
  • dialog, panel: Add css properties for background-color (#10387) (d725293)
  • input, input-number, input-text: Add prefix and suffix width css tokens (#10206) (7a6ee82)
  • input-date-picker, input-time-picker: support form validation for min/max constraints (#9677) (38fd878), closes #8065 #9282
  • panel, flow-item:
  • popover, action: Add component tokens (#10253) (80e8112)
  • accordion-item: Update component tokens (ca932b5)
  • alert:
    • Add queue property to prioritize the ordering of alerts when opened (#10029) (3aa47a4)
    • Add component tokens (#10218) (550427b)
    • Apply --calcite-alert-corner-radius to internal close button (#10388) (f50c170)
  • avatar: Add component tokens (#10280) (f8f881b)
  • block: add icon start/end properties (deprecate icon slot and status), add actions-end slot (deprecate control), add content-start (#9535) (7117c6b), closes #4932
  • checkbox: Add component tokens (#10221) (1d87dcf)
  • chip:
  • color-picker: adjust thumb and color preview sizes to follow updated spec (#9523) (41dc551), closes #9412
  • color-picker-hex-input: auto apply new color after typing/pasting hex code (#9561) (8b34583), closes #7057
  • carousel: Improve support for high item counts (#10315) (6ad2612)
  • combobox:
  • combobox-item:
    • Apply heading color according to updated spec (#9883) (9f642ff)
    • Add heading property (deprecates textLabel) and add label property (#9987) (90920a0)
  • dialog:
  • filter: adds ability to match only specific filter data properties (#9541) (137d9ae), closes #5063
  • handle: Add component tokens (#10262) (5e73b44)
  • icon:
  • input-time-zone:
  • list: add filterProps property to specify which properties to filter against (#9622) (a253c00), closes #9619
  • list-item: Add unavailable property (#10377) (9332733)
  • loader: Add determinate-value type (#9957) (7f21726)
  • panel:
  • popover: Apply component tokens to arrow (#10386) (2d19268)
  • progress: Add component tokens (#10267) (8c1259f)
  • shell-panel: Deprecate "float" displayMode and add "float-content" and float-all (#9795) (bf93728)
  • split-button: add placement and flipPlacements property (#9548) (bc2c2c6), closes #9542
  • table: Update multiple selection iconography (#10125) (f2b2016)
  • text-area: Add component tokens (#10343) (d2504b7)
  • tooltip:
    • Support touch events (#9487) (633706b)
    • Allow focusing and clicking on interactive elements within a tooltip (#9914) (a3c144c)

Bug fixes

  • Ensure beforeOpen/open and beforeClose/close events emit properly (#9958) (7e2764f)
  • Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled (#9710) (cd4d52c)
  • Fix regression causing open/close events from emitting in proper order (#9560) (fa5b415), closes #9559
  • Improve browser check to resolve SSR errors (#9897) (bdb225b)
  • Properly set aria attributes on components (#10404) (864f3e3)
  • Remove aria-disabled from components where necessary (#10374) (4f8c16c)
  • Widen icon type to allow string (#9915) (44138b1)
  • deps: Move @types/sortablejs as a dependency so the public types resolve properly (#9786) (3d47c52)
  • combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area: Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging (#10079) (78bc096)
  • dialog, flow-item: Slotted closable panels should not close the component (#10130) (ce2513d)
  • input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area: Provide clear field error messaging for AT (#9880) (46ad7d2)
  • input, input-number, input-text: No longer set focus when a validation message is clicked (#10008) (529bb5a)
  • input-date-picker, date-picker: ensure day selection doesn't activate the previous day in certain scenarios (#9424) (ab77212), closes #9422
  • input-date-picker, input-time-picker: focus input element on setFocus (#9584) (c7b8a68)
  • list, filter: Fix sync between list items and filtered data (#10342) (9a66601)
  • panel, flow-item:
    • Fix footer-padding CSS prop regression (#9757) (f935790)
    • Prevent footer slots from conflicting with each other (#9856) (cffaff8)
  • accordion-item: Align focus styles across browsers (#9944) (2e29b42)
  • action: Prefer disabled in favor of aria-disabled (#10367) (1895c07)
  • action-pad:
    • Fix horizontal action group alignment (#10359) (7b03745)
    • Update layout on action-group elements slotted after initialization (#10355) (cf139fa)
  • alert:
  • block:
  • block-section:
  • card: Properly handle slotted elements (#10378) (99a7148)
  • carousel:
    • Prevent unexpected keyboard autoplay activation (#9621) (f674964), closes #9620
    • Prevent duplicate animation when navigating via keyboard (#9848) (cfdbd44)
  • color-picker: Prevent text selection when using color sliders/field (#10043) (ab33e4d)
  • combobox:
    • fix navigating initially when multiple items are selected (#9613) (5d9509b), closes #6776
    • no longer hides input when a selected item chip is focused (#9625) (24c45b3), closes #6750
    • only open when text exists and filtered items are present (#9618) (9a7f443), closes #9617
    • open the component when typing within it (#9543) (ab09c71), closes #9401
    • allow arrow selection of entered text (#9629) (df5e654), closes #9614
    • Update placeholder-icon color (#9956) (d916ca4)
    • Correctly select an item with selection-mode=‘single-persist’ when items have the same values (5401ea6)
  • combobox-item: Tweak center content font-weight and spacing (#9818) (a67c4af)
  • dialog:
    • Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true (#9891) (4390177)
    • Fix escapeDisabled when the escape key is pressed on the panel (#10097) (9a5f1f1)
    • Allow shell to be slotted inside (#10118) (ea3a6de)
    • Only prevent default on escape key when escapeDisabled is true (#10336) (0083630)
  • dropdown: Open dropdown on ArrowDown & ArrowUp keys (#10264) (98548e4)
  • filter: Fix setFocus method (#10149) (f4a959a)
  • flow-item:
    • fix inverted footer start/end slots (#9681) (69cd6a5), closes #8981
    • Set closed property to true when internal panel is closed (#9715) (f7d2a4f)
  • input-date-picker:
  • input-date-picker: Prevent console error when using a lang (#10162) (e7bf604)
  • input-number: Restore decimal input mode default (#9741) (1165dca)
  • input-time-zone:
  • label: Prevent focusing and toggling elements slotted within a label when a text selection occurs (#9990) (49d6ae1)
  • list:
    • fix mobile device dragging with nested lists (#9573) (6f466aa), closes #9521
    • enable dragging on list items contained within a list that supports dragEnabled (#9660) (5010ef9), closes #9662
  • list-item:
  • pagination: use semantic internal elements (#9479) (b70d7d9), closes #7804
  • panel:
  • popover:
  • radio-button-group: Remove blank clickable space outside of label (#9793) (4cc24a0)
  • segmented-control:
    • Make check state update correctly (#9733) (602c922)
    • Honor appearance, layout and scale when items are added after initialization (#10368) (98177f0)
  • shell:
    • Fix resizing a slotted shell-panel when clicking to resize (#9846) (326001c)
    • Update shell to correctly position calcite shell panel at shell's bottom (#9748) (5959db7)
    • Fix z-index of slotted popover elements (#10325) (7fe1601)
  • slider:
  • stepper-item: Update component to take full width when parent's layout is "vertical" (#10009) (03a5a30)
  • tab-title: Adjust hover styling for bordered Tab Title (#9867) (a77cd27)
  • tabs:
    • Handle tab close events that remove the associated tab-title and tab elements from the DOM (#9768) (bda619c)
    • Update tab title indicator display (#9666) (5f0914b)
  • text-area: Ensure border-color token doesn't override invalid styles (#10390) (699e166)
  • tile:
    • expose selected property (#9583) (d15f667), closes #9582
    • Center align contentTop and contentBottom slots when alignment prop equals "center" (#9732) (1a8393b)
    • Center align slot's text when alignment is equal to center (#9773) (8611bfc)
  • time-picker: Render meridiem first for korean locale (#9842) (897f924)
  • tooltip:
    • Allow focusing on a reference element and then clicking on a tooltip (#9878) (dfca2d4)
    • Closed tooltips should not reappear (#10420) (a2f3925)
  • tree,tree-item: Replace checkbox with div and a11y attributes (#9849) (b1ac951)

Performance improvements

  • input-time-zone: Improve memory footprint by leveraging browser cache and releasing utils after their use (#9945) (a3d2141)

Deprecations

  • checkbox, radio-button: Deprecate 'guid' properties (#10445) (9729ccf)

Compatibility

The 4.31 release of the ArcGIS Maps SDK for JavaScript supports Calcite version 2.12.0. In your application, we recommend using the same version or any minor version greater than ^2.12.0.

If you are using version 4.30 it is recommended to use Calcite's 2.8.5, or any minor version greater than ^2.8.5.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.