Developers

What’s New in Calcite Design System (June 2024)

Learn all about the key updates in Calcite Design System that we’ve recently released!

Calcite enables you to build beautiful, user-friendly, and consistent experiences across applications with minimal effort. Since March, we’ve made important improvements to components that facilitate responsive app development, introduced new components, and made many updates worth exploring. Read on to explore some of the highlights since March.

Carousel and Carousel Item

The new Carousel and Carousel Item components enable display and navigation between a set of related items.

Carousel and Carousel Item components with the autoplay attribute

Carousel can be used to display onboarding tips, or display messaging, media, or other related content. They can be presented within a Modal or Popover for a fleeting workflow, or within a Block or Panel for a static experience.

Carousel and Carousel Item 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.

Tile redesign

The Tile component is useful for presenting information in a compact, consistent format. We recently redesigned Tile to streamline workflows, provide selection support, and two new slots, where non-actionable content can be placed at the top and bottom of the component.

Tile component with Chips slotted into content-top and content-bottom showing new and available resources respectively.

You can display multiple Tiles using the new Tile Group component. Tile Group enables responsive design by providing multiple scales of the component, accessed via a scale property.

Tile Group component containing multiple Tiles that can be selected.

Enhanced validation

In March we announced form validation support. Over the last few months we’ve enhanced capabilities around validation.

Now form components provide helpful feedback indicating why an element’s value is invalid. This enhancement can be used in variety of use cases, such as patternMismatch, where the user has provided a pattern that fails. To communicate the error with the entry, the form components can display an error message, icon, and status.

Validate form components on blur and on form submission while supplying a custom icon and message.

Slider customization

Slider handle text can be dynamically updated in response to changes in the component. For instance, the handle text can be updated when the component’s value hits certain thresholds.

Slider with the label dynamically changing as the value changes.

Additionally, you can configure which part of the component’s rail is highlighted relative to its handle – either spanning from the start to the current value, or from the value to its end.

Sliders with fill placement positions of start and end.

readOnly and download support

Input Time Zone and Combobox were enhanced with support for the native readOnly property. When specified, the values can be selected, but not modified, preventing unwanted changes.

Additionally, Button supports the native download property, where when coupled with the href property and accessed will download the specified resource. The new offering matches native behavior and enhances functionality.

Display Combobox and Input Time Zone and their values to users with the readOnly property.

Avatar background color generation

Avatar now ensures different backgrounds are generated for similar values specified in its usernamefullName, and userId properties using a randomly generated accessible background color.

Avatar color generation is randomly generated regardless of similarity in username, full name, or user id.

Accessibility improvements

List and List Items provide support sorting for assistive technology and keyboard users with dragEnabled. To move a List Item focus on the component’s drag, or handle, button and press the space key to activate sorting. To move the item to a new position in the List, use the arrow keys for placement.

Move a List's List Item using the space and arrow keys.

List was updated with multiple slotted actions via keyboard. Where multiple Actions are slotted into a List Item using the "actions-start" and "actions-end" slots, the Actions supplied are accessible via keyboard.

Additionally, Combobox provides support to VoiceOver keyboard navigation so users can navigate into the component’s input and manually enter values.

Explore more

Calcite’s releases contain many additional features, bug fixes, and breaking changes that are not mentioned in this blog post. Explore the May summary notes, and in particular the changes since February 2024 for a full list of capabilities offered in Calcite.

Join us at the 2024 Esri UC

Learn more about Esri User Conference, and explore our Calcite technical session, Faster Web Development with ArcGIS Web Components.

The session will bring ArcGIS experiences into an app with a few lines of code. You will learn how to create a compelling web mapping app with maximum productivity when combining Calcite Design System and ArcGIS Maps SDK for JavaScript components and capabilities. We’ll discuss brand-new web components in the ArcGIS Maps SDK for JavaScript, how to build a web app from scratch, key concepts, syntax, accessibility, and design best practices.

Join us at the 2024 Esri User Conference July 15 through 19, 2024 in San Diego, California.

About the authors

Passionate about web map accessibility and bringing the web and maps to wider audiences. A senior product engineer with Calcite Design System. Enjoys exploring Minnesota's wilderness and has a goal to visit every major league baseball stadium across America.

Connect:

Julie Powell is a Principal Product Manager, focusing on Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets. Julie has worked on a wide range of projects and consulting endeavors, including serving as technical lead for web mapping solutions for strategic customers.

Connect:
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

Next Article

What's new in ArcGIS Business Analyst Enterprise | May 2024

Read this article