Updates since 2.6
New components and initiatives
Carousel and Carousel Item
Introducing new components, Carousel and Carousel Item, which facilitate the display of and navigation through a set of related items. The components are often used to contextually display related onboarding tips, or display messaging, media, or other related content.
The components support contextual onboarding, which could be presented within a Modal or Popover for a fleeting workflow, or within a Block or Panel for a static experience.
The components also provide autoplay with the autoplay
property. When initialized, Carousel will automatically rotate through its Carousel Items
Explore additional resources on Carousel's autoplay, and Carousel best practices and recommendations.
<calcite-carousel autoplay label="Charting features">
<calcite-carousel-item label="Pie chart">
<div class="carousel-custom-content">
<calcite-chip scale="l" icon="pie-chart"></calcite-chip>
<span>
Pie charts are a great way to visualize data. They're easy to understand
and can be used in a variety of ways.
</span>
</div>
</calcite-carousel-item>
<calcite-carousel-item label="Scatter plot">
<div class="carousel-custom-content">
<calcite-chip scale="l" icon="graph-scatter-plot"></calcite-chip>
<span>
The scatter plot displays the relationship between multiple variables. It's a
great way to visualize data.
</span>
</div>
</calcite-carousel-item>
<calcite-carousel-item label="Histogram">
<div class="carousel-custom-content">
<calcite-chip scale="l" icon="box-chart"></calcite-chip>
<span>
Box charts are another great way to visualize data to illustrate trends and ranges.
</span>
</div>
</calcite-carousel-item>
</calcite-carousel>
Tile redesign
Since February, Tile has been consolidated to support selection, previously only offered through Tile Select. Additionally, a new component, Tile Group, is available that consumes Tile with responsive design in mind, also offering a scale
property.
The redesign provides two new slots content-top
and content-bottom
, where non-actionable content can be placed at the top and bottom of the component respectively.
<calcite-tile icon="heavy-snow" heading="Mount Frost" description="Base snow depth is 41-cm with all lifts open. Surface conditions are good.">
<calcite-chip class="new" kind="brand" slot="content-top" scale="s">New</calcite-chip>
<calcite-chip class="new" kind="outline" slot="content-bottom">Report conditions</calcite-chip>
</calcite-tile>
Validation support
In February's summary form validation was introduced, which included new properties for components in forms, such as the ability to customize validation messages and icons when a form component's status
property is "invalid"
.
Now form components support the Validity
interface representing the validity states that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.
The support enables solutions that can fit use cases, such as pattern
, where if the user has provided a pattern not accepted, an error message, icon, and status can be added to the form component:
<calcite-label for="email-address" layout="inline">Email address:
<calcite-input name="email-address" type="email" id="email-address" pattern="[a-z]{2}.+@example\.com" required />
</calcite-label>
const SHOW_VALIDATION_MESSAGES_ON_BLUR = true;
const VALIDITY_STATES = ["patternMismatch"];
const ELEMENT_CONSTRAINTS = [{
id: "email-address",
patternMismatch: {
message: "Please enter a valid email address with at least three characters."
},
}];
function checkElementConstraints(el, constraints) {
// Clears custom validation message if all constraints are met
if (el?.validity?.valid) {
el.validationMessage = "";
el.validationIcon = false;
el.status = "idle";
return;
}
// Iterates through the validity states and sets the custom validation content
for (const state of VALIDITY_STATES) {
if (el?.validity[state] && Object.hasOwn(constraints, state)) {
el.validationMessage = constraints[state]?.message ?? "";
el.validationIcon = constraints[state]?.icon ?? true;
if (SHOW_VALIDATION_MESSAGES_ON_BLUR) {
el.status = "invalid";
}
return;
}
}
}
window.onload = () => {
// Blurs event listeners to check validation constraints of elements with custom messages
ELEMENT_CONSTRAINTS.forEach((data) => {
document.querySelector(`#${data.id}`)?.addEventListener("blur", ({ target }) =>
checkElementConstraints(target, data)
);
});
};
Feature enhancements
- Slider custom labeling
- Slider fill placement
- Read only support for Input Time Zone and Combobox
- Button adds the
download
property - Color Picker adds
clearable
property - Avatar background color generation
- Panel and Flow Item content slots
- Icon performance improvements
Slider custom labeling
A new property label
is available for Slider, which accepts a synchronous function that dynamically updates the component's handle text to accommodate custom labels in response to changes.
<label>Temperature:</label>
<calcite-slider
id="singleFormattedLabelSlider"
label-handles
label-ticks
ticks="10"
min="0"
max="100"
value="50"
step="1"
min-label="Temperature"
precise
></calcite-slider>
const singleValueSlider = document.getElementById("singleFormattedLabelSlider");
singleValueSlider.labelFormatter = function (value, type) {
if (type === "value") {
return value < 60 ? "🥶" : value > 80 ? "🥵" : "😎";
}
if (type === "tick") {
return value === singleValueSlider.min
? "Cold"
: value === singleValueSlider.max
? "Hot"
: undefined;
}
};
Slider fill placement
Another Slider property, fill
, is available and can be used to specify which part of the component's rail should be highlighted relative to the handle. This property has no effect when the component is configured to show a range of values.
<calcite-label>
Maximum speed (MPH):
<calcite-slider
value="85"
min="0"
max="200"
precise
ticks="50"
label-ticks
label-handles
fill-placement="start"
scale="l"
>
</calcite-slider>
</calcite-label>
Read only support for Input Time Zone and Combobox
The Input Time Zone and Combobox components now support the read
property. This addition ensures consistent styling with other components like Input Date Picker and Input Time Picker. The read
property allows users to view the component's value without enabling editing, maintaining the ability to submit values while preventing unwanted changes.
Button adds the download
property
Button now offers the download
property. When coupled with the href
property, download
can be passed to the underlying element, matching native behavior and enhancing functionality.
<calcite-button icon-start="download" download href="example.jpg">Download image</calcite-button>
Color Picker adds clearable
property
The Color Picker component now includes the clearable
property, deprecating the allow
property for consistency with other components. When present, clearable
allows an empty color (null
) as a value. If false
, a color value is enforced, and clearing the input or blurring will not be permitted. This change standardizes the nomenclature across components.
Panel and Flow Item content slots
Panel and Flow Item include two new slots, "content-top"
and "content-bottom"
, positioned below the action-bar and above the "footer"
slots respectively.
<calcite-flow id="example-flow">
<calcite-flow-item heading="Spatial Data Collaboration Agreement">
<div slot="content-top" id="modal-title">
Read and accept the terms
</div>
<calcite-label slot="content-bottom" layout="inline-space-between">
<calcite-checkbox></calcite-checkbox>I agree to the terms
</calcite-label>
<calcite-button slot="footer" width="full">
Done
</calcite-button>
</calcite-flow-item>
</calcite-flow>
Avatar background color generation
Avatar now ensures different backgrounds are generated for similar values specified in its username
, full
, and user
properties using a randomly generated accessible background color.
<calcite-avatar full-name="John Doe" username="john_doe"></calcite-avatar>
<calcite-avatar full-name="John Doe 1" username="john_doe1"></calcite-avatar>
<calcite-avatar full-name="John Doe 22" username="john_doe-22"></calcite-avatar>
Icon performance improvements
In 2.9
, the Icon component includes additional performance improvements to render sooner if its already visible or been previously loaded.
Accessibility improvements
- List keyboard sorting for screen reader users
- List Item keyboard accessibility for multiple slotted actions
- Combobox role for VoiceOver support
List keyboard sorting for screen reader users
When List is drag
, the component supports assistive technology and keyboard users in moving its child List Item.
To move an item focus on the component's drag, or handle, button and press the space
key to activate sorting on the List Item. To move the item to a new placement in the parent List, use the arrow keys for placement. Explore List's accessibility features for additional keyboard accessibility functionality.
<calcite-list drag-enabled>
<calcite-list-item label="Waterfalls"></calcite-list-item>
<calcite-list-item label="Rivers"></calcite-list-item>
<calcite-list-item label="Hiking trails"></calcite-list-item>
</calcite-list>
List Item keyboard accessibility for multiple slotted actions
List Items now support multiple slotted actions via keyboard. When multiple Actions are slotted into an item using the "actions-start"
and "actions-end"
slots, the Actions supplied are accessible via keyboard.
<calcite-list>
<calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
<calcite-action slot="actions-start" icon="gear" text="Setup the waterfalls layer"></calcite-action>
<calcite-action slot="actions-start" icon="hammer" text="Troubleshoot the waterfalls layer"></calcite-action>
<calcite-action slot="actions-end" icon="bookmark" text="Bookmark waterfalls layer"></calcite-action>
<calcite-action slot="actions-end" icon="plus" text="Add waterfalls layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Rivers" description="Large naturally flowing watercourses." value="rivers">
<calcite-action slot="actions-start" icon="gear" text="Setup the rivers layer"></calcite-action>
<calcite-action slot="actions-start" icon="hammer" text="Troubleshoot the rivers layer"></calcite-action>
<calcite-action slot="actions-end" icon="bookmark" text="Bookmark rivers layer"></calcite-action>
<calcite-action slot="actions-end" icon="plus" text="Add rivers layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">
<calcite-action slot="actions-start" icon="gear" text="Setup the trails layer"></calcite-action>
<calcite-action slot="actions-start" icon="hammer" text="Troubleshoot the trails layer"></calcite-action>
<calcite-action slot="actions-end" icon="bookmark" text="Bookmark trails layer"></calcite-action>
<calcite-action slot="actions-end" icon="plus" text="Add trails layer"></calcite-action>
</calcite-list-item>
</calcite-list>
Combobox role for VoiceOver support
Combobox now supports VoiceOver keyboard navigation, where users of the assistive technology can navigate into inputs and manually enter values. The fix mitigates the Input Date Picker, where the VoiceOver user can focus on the component's input and manually enter a date entry using VoiceOver's key combinations.
Changes since February 2024
A full list of changes since February, include:
Features
- Add calciteInvalid event for form validation (#9211) (a504508)
- Add validity property to form components (#9210) (e49902b)
- Ensure all components inherit font-family (#8388) (90f8923)
- accordion-item: add setFocus (#7211) (88b793e)
- avatar: ensure different backgrounds are generated for similar usernames, full names and user IDs (#9277) (bab77b5)
- block-section: add
icon
property (deprecatesstatus
) (#8110) (c31bf36) - button: Add download property (#8882) (fc55dde)
- carousel: Add Carousel and Carousel Item components (#8995) (b1ba428)
- color-picker: Add
clearable
prop and deprecateallow
(#8910) (f036ac2)Empty - dropdown-item: update spacing of icons (#7095) (c2e5a99)
- enforce-ref-last-prop: Add fixer (#8671) (688bc51)
- flow-item: add content-top slot (#8980) (e932f3d)
- input-time-zone:
- list-item-group: Update list item group styles (#9072) (c734849)
- navigation-logo: Add heading level (#9054) (c2beba8)
- table: Add selection-display property (#9353) (7b52870)
- table-row: Add alignment property (#8961) (1f81fd7)
- pagination: Add navigation methods (#9154) (5ca6a5f)
- panel:
- segmented-control-item: allow displaying and icon when items are empty with a start/end icon (#6413) (9fc610d)
- slider:
- split-button: Make dividers consistent (#8142) (2fa432d)
- stepper, stepper-item: add separate change events to stepper and items (deprecates
calcite
on the parent) (#2094) (cf6a118)Stepper Item Change - tabs: Make component responsive (#8616) (83a2ef4)
- tile: Add content-top and content-bottom slots, deprecate content-start and content-end slots (#8984) (eb000d8)
- tile, tile-group: Support single, multi, single-persist, none selection modes and icon and border selection appearances (#9159) (2d77470)
Bug fixes
- Add type-fest as dependency due to build error (3819688)
- Defer floating-ui updating until component is connected and open (#9443) (6e09589)
- Fix memory leak affecting components using conditionally-rendered slots (#9208) (28701b6)
- preset: Update the focus outline color (#9098) (725f47c)
- t9n: fix error caused by disconnecting components during the setting of initial message overrides (#9240) (192c031)
- action-menu, combobox, dropdown, popover, tooltip: Use click instead of pointerdown for click contexts (#8943) (cd7eed9)
- combobox, input-time-zone: Improve readOnly behavior and styling (#9222) (606d80f)
- input, input-number, input-text, input-date-picker, input-time-picker, filter, menu-item: Ignore canceled events and enforce cancellations where needed (#8952) (d0fa977)
- input-date-picker, date-picker: ensure min/max can be unset (#7889) (89b0bfe)
- input-date-picker, input-time-picker, list: ensure lang change updates messages (#9268) (0213d35)
- action: Maintain equal height when text is not enabled in a small scale (#9051) (407824a)
- block: update text hierarchy and spacing (#9323) (796372e)
- button: Make shadow dom button 100% width (#8490) (dd61b7f)
- calcite-design-tokens: Fix invalid font stacks (#8964) (d55186a)
- card: Do not apply text color to slotted footer items (#8839) (30a2068)
- carousel: Animate items with the same direction (#9325) (6bf7b74)
- checkbox: fix checkbox hit area placement in RTL (#8841) (142ef18)
- chip-group: Improve programmatic Chip selection behavior (#9213) (b7a4c77)
- combobox:
- Prevent spacebar from opening the menu when focused on chip's close button (#8990) (1a20d0e)
- Update the focus and hover chevron icon color (#9187) (a1317da)
- Fix aria-role for proper voiceover support (#9039) (eebe8ca)
- Update the focused chevron icon color (#9202) (27ac02d)
- Fix error that occurs when a click is emitted when the component is appended to the DOM (#9373) (34a2bbe)
- Fix error that occurs in
dist-custom-elements
(components
) output when a click is emitted when the component is appended to the DOM (#9423) (ab521c9)
- date-picker:
- dropdown: Correct positioning behavior when inside a scrollable container (#8973) (2524391)
- dropdown-group: title scale with dropdown scale (#9350) (3529cdd)
- input-date-picker: Update the focus and hover chevron icon color (#9146) (ca895e9)
- input-time-picker:
- input, input-number, input-text:
- list, list-item, list-item-group: Improve drag experience by indenting items (#9169) (88aab49)
- list, list-item:
- list:
- list-item: Decrease horizontal spacing between selection icon and content (#9304) (0e828b6)
- panel: Support cancelling the esc key event to prevent closing a panel (#9032) (ecfa5f1)
- popover: Prevent disabled reference elements from toggling popover (#8983) (9f4b14b)
- radio-button: Display validation message in parent group (#9218) (b1e869f)
- select:
- slider:
- stepper: Fix layout when switching modes dynamically to
horizontal-single
(#8946) (01f58bf) - stepper-item: Remove delay in highlighting item (#8996) (bcf23dd)
- switch: prevent hover state change when disabled (#7723) (7c47808)
- table: Prevent duplicate scrollbars in certain browsers (#8962) (8434eeb)
- tab: Style focus outline of tab content (#8804) (8f0133f)
- tab-nav: Fix custom element creation error in
components
build output (#9021) (cc8eb99) - text-area: remove double transparency applied when disabled (#8374) (90926c2)
- tile:
- tile-group: disallow multiple selected attributes on single selection modes (#9271) (885909e)
- tree:
- tree-item: Do not select when chevron clicked (#9115) (99ad8f1)
Performance updates
- Update
transition-default
Tailwind util to only target common, animatable properties (#8797) (f4d016b) - icon: render icon sooner if already visible or loaded (#9197) (d603ca9)
Reverts
Compatability
The 4.30 release of the ArcGIS Maps SDK for JavaScript supports Calcite version 2.8.5. In your application, we recommend using the same version or any version greater than ^2.8.5
.
If you are using version 4.29 it is recommended to use Calcite's 2.4.0, or any version greater than ^2.4.0
.