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 width
to specify the visual sizing, drag
and resizable
to drag and resize the component respectively, content slots, and provides accessibility features such as focus order and keyboard navigation.
<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 calcite
global variable to detect the Calcite version at runtime.
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 calcite
:
var calciteConfig = {
logLevel: "off"
};
Feature enhancements
- Component CSS variables
- Popover's
flip
and Block'sPlacements menu
Flip Placement - List Item's
unavailable
property - Tooltip improvements
- List's
filter
propertyProps - Alert's timer improvements
- Slider improvements
- Combobox improvements
- Color Picker's value improvement
- Segmented Control with icon only
- Panel and Flow Item's slots
- Table's
selection
propertyDisplay - Dropdown's spacing
- Input Time Picker improvements
- Shell Panel's
display
Mode - Carousel's display improvements
- Input Time Zone improvements
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
<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 flip Placements
and Block's menu Flip Placement
Popover now offers a flip
property in tandem with its placement
property, and Block provides menu
and menu
properties to set different initial component placement and alter the placement when interacting with your UI.
<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.
<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.
List's filter Props
property
List now provides a filter
property to specify which properties to filter when using filter
, 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
.
<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 auto
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.
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.
<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
, short Heading
properties and content-end
slot
Combobox Item now offers description
and short
properties. Where description
provides additional context to an item, and short
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.
<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.
<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 filter
property.
<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.
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.
<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.
Table's selection Display
property
Table now includes a selection
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 selection
is "single"
, but the presence of the chip could cause confusion as it implied that a user could select multiple options.
Table before selection property | Table with selection of "none" |
---|---|
Dropdown's spacing
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 enhancement | Dropdown components with improved nested indentations |
---|---|
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.
Shell Panel's display Mode
Shell Panel now offers two new display
'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 display
'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" |
---|---|
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
<calcite-input-time-zone mode="region"></calcite-input-time-zone>
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
message
Overrides - Tree support improvement
- Improved Input error context
- Dropdown opens via arrow keys
- Accordion Item's focus support
- Input Time Picker locale improvements
- Input Date Picker locale improvements
Action Bar's message Overrides
Action Bar's collapse menu now offers message
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 expand
and collapse
.
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 selection
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.
<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:
- Combobox
- Input Date Picker
- Input Number
- Input Text
- Input Time Picker
- Input
- Radio Button Group
- Segmented Control
- Select
- Text Area
Dropdown opens via arrow keys
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 set
method, where developers can shift focus to the component in their UI.
const accordionItemEl = document.getElementById("example-accordion-item");
const btnFocus = document.getElementById("shift-focus-button");
btnFocus.addEventListener("click", () => accordionItemEl.setFocus());
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 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
- Color Picker improvements
- Combobox changes
- Loader's new type
- Panel and Flow Item's slots
- Split Button's styles
- Table improvements
- Tile changes
- Tree icon improvements
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 icon
and icon
properties for further icon customization in your apps.
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 alpha
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) |
---|---|
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 selection
is set to "multiple"
, improving the user experience.
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.
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.
Split Button's styles
Split Button now has matching styles for its divider across all appearance
types for better visual consistency.
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) |
---|---|
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) |
---|---|
Before (Uneven spacing) | After (Even spacing) |
---|---|
Tree icon improvements
Tree's selection affordance now uses icons instead of checkboxes when selection
property is set to "ancestors"
.
Before (Checkboxes) | After (Icons) |
---|---|
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 deprecation
- Shell Center Row deprecation
- Action's
compact
property deprecation - Checkbox and Radio Button's
guid
property deprecation
Modal deprecation
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 display
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
menu
andPlacement menu
properties (#10249) (5ba3112)Flip Placements - action-menu, combobox, dropdown, input-date-picker, popover: allow logical placements for
flip
property. #8825 (#9490) (45aabaa)Placements - action-bar, action-pad: add
expand
andLabel collapse
to messages (#9497) (12407eb), closes #5539Label - color-picker, color-picker-hex-input: Add input auto commit, blur and auto select enhancements. (#9701) (b2be625)
- combobox, combobox-item:
- 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:
- avatar: Add component tokens (#10280) (f8f881b)
- block: add
icon start/end
properties (deprecateicon
slot andstatus
), addactions-end
slot (deprecatecontrol
), addcontent-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:
- dialog:
- Add padding to default slot (#9871) (9d89d1d)
- Adds new dialog component and deprecates the modal component (#9751) (0111c23)
- Add CSS variables to offset the position (#9904) (660f0c5)
- Add
escape
property (#10081) (1ca8fba)Disabled - Add
outside
property (#9978) (f1d89b9)Close Disabled - Add
resizable
anddrag
properties (#9804) (e3e499e)Enabled
- 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"
display
and addMode "float-content"
and float-all (#9795) (bf93728) - split-button: add
placement
andflip
property (#9548) (bc2c2c6), closes #9542Placements - table: Update multiple selection iconography (#10125) (f2b2016)
- text-area: Add component tokens (#10343) (d2504b7)
- tooltip:
Bug fixes
- Ensure
before
/Open open
andbefore
/Close 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
set
(#9584) (c7b8a68)Focus - list, filter: Fix sync between list items and filtered data (#10342) (9a66601)
- panel, flow-item:
- accordion-item: Align focus styles across browsers (#9944) (2e29b42)
- action: Prefer
disabled
in favor ofaria-disabled
(#10367) (1895c07) - action-pad:
- alert:
- block:
- block-section:
- card: Properly handle slotted elements (#10378) (99a7148)
- carousel:
- 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
Arrow
&Down Arrow
keys (#10264) (98548e4)Up - filter: Fix
set
method (#10149) (f4a959a)Focus - flow-item:
- 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:
- 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:
- shell:
- 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:
- text-area: Ensure border-color token doesn't override invalid styles (#10390) (699e166)
- tile:
- time-picker: Render meridiem first for korean locale (#9842) (897f924)
- tooltip:
- 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
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
.