What's New in Calcite Design System (March 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 October, 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 October.

Version 2.x: An improved developer experience

In November 2023, we released version 2.0 (a breaking change release) to increase consistency across Calcite, which includes updates to the component’s names, states, and patterns. We also updated CSS property names in order to more accurately represent their use. For example, --calcite-ui-brand was changed to --calcite-color-brand to indicate that it is a color property. For the full list of property name changes, refer to the CSS variable comparison tables.

Responsive design

Responsive web design ensures a positive user experience, regardless of screen size, platform, and orientation. We have made significant improvements to components in order to support more workflows, devices, and use cases. All components underwent a design review, and many were updated with new functionality to fluidly adapt their layout and/or experience based on screen size.

Card Group

The new Card Group component supports workflows using more than one Card, for example to represent content items within a group. Filtering and opt-in selection modes enable you to build interactive workflows with Cards. Card Group predictably spaces Cards and offers accessible keyboard navigation.

Angular wrapper

Web components encapsulate functionality into a reusable package for maximum interoperability between frameworks. When integrating web components into apps built with Angular, a wrapper allows you to work with the components using programming patterns that are native to Angular. Essentially, web components are wrapped as Angular Components.

The new Angular wrapper for Calcite components supports:

• Converting web component events to RxJS observables
• Form control integration with reactive forms or ngModel
• Detaching Angular component wrappers from change detection

Explore the Angular wrapper with Calcite’s calcite-components-examples repository, or the CodeSandbox template for a cloud-based environment. Using React? See the React wrapper that supports React’s synthetic event system.

Form validation

Form validation messages are displayed with Input Message, ensuring uniformity across different browsers and consistency with Calcite design patterns. Additional constraint validation properties have been implemented for preventing form submissions, and improving your UI/UX. When validation is enabled, components will display either:

• A validation message of “Please fill out this field” and the “exclamation-mark-triangle” icon, or
• A customized validation message and icon

The validation constraints are stored as a list of objects that define constraints for the component’s fields. For instance, setting custom validation messages and icons for form fields based on the expected input. If a field’s value matches a pattern or falls outside specified range, such as a “min” or “max”, a custom message and icon will display.

A slot for no filtered results

A new slot is available in List that displays when a filter is enabled and no filter results are found. For instance, a Notice can display a message indicating there are no results, and what could result in a successful search.

Dropdown Item disabled property

The disabled property is now supported in Dropdown Item to support advanced use cases in apps.

Learn more

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

Calcite at the 2024 Esri Developer Summit

Join us at the Esri Developer Summit in Palm Springs from March 12-15, where you can attend technical presentations on Calcite, the ArcGIS Maps SDK for JavaScript, and many other topics about developing with ArcGIS. You can discuss your own project with Esri’s development teams, network with the developer community, and play dodgeball!

Learn more about Esri Developer Summit, and explore technical sessions and demo theater presentations featuring Calcite, including:

• Building Web Apps with ArcGIS Maps SDK for JavaScript and Calcite Design System
• Build Accessible Web Apps with ArcGIS Maps SDK for JavaScript and Calcite Design System
• ArcGIS Maps SDK for JavaScript: Build Custom UIs using API Widgets
• Calcite Design System: What’s New and the Road Ahead
• Building Web Apps with Calcite Design System and React
• Front-End Web Technologies for Geospatial Developers
• Building an Instant App using TypeScript and ArcGIS Maps SDK for JavaScript
• Building Advanced ArcGIS Hub and Enterprise Sites
• Eyes on Design: The Art and Science of Creating Intuitive Interfaces (demo theater)

About the authors

Kitty Hurley

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

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: