Developers

Calcite Design System May 2023 Update

Calcite Design System enables you to create beautiful, user-friendly, and consistent experiences across applications with minimal effort. It includes configurable web components along with iconography, a UI kit, and usage guidelines containing best practices.

Many key improvements and new components have been introduced since the first production release four months ago. Let’s explore some of the highlights which you can start using in your apps right away.

Navigation components

We recently introduced new components that provide a consistent structure and behavior for easily navigating your application.

Navigation and its related components provide a consistent structure and behavior for users to reliably and consistently navigation your application.

Navigation:

Navigation Logo:

Navigation User:

Menu and Menu Item:

Here’s an example of how these components come together in the Navigation component:

Navigation and its related components provide a consistent structure and behavior for users to reliably and consistently navigation your application.

Chip Group

You can use the new Chip Group component in your app for selection workflows, filtering patterns, and for toggling categorical data. Chip Group provides consistent spacing, accessible keyboard navigation, and selection modes to multiple Chips.

Chip Group containing organizational areas, which can filter content in a map application.

Text Area

Text Area is a multiple line text input control, which allows users to enter a sizable amount of content in free form text. The component can collect user inputs, such as comments or reviews in forms. You can limit the number of characters input by the user, and embed components such as a Button in the footer start and end slots.

Text Area component with maxLength and footer-start slot.

Modal: Sticky top and bottom content

Modal now includes two new slots for placing sticky (non-scrolling) content:

Modal with sticky content slots, content-top and content-bottom.

Color Picker transparency

Color Picker can be configured to include an alpha channel to enable color transparency.

Color Picker with an alpha channel enabled to handle transparency with the alphaChannel property.

List enhancements

Persist a selection: Lists have several selection modes that you can use, including no selection, single selection, multiple section, and now “single-persist”, which allows you to enforce one always selected List Item. The only exception is if you decide to not have one of the items pre-selected initially. This selection option is also available with other components that offer selection, such as the Dropdown component.

Close list items: If you enable the closable property, you can allow your end users to close, or remove, items from the list.

Selection change event: You can listen to the new calciteListChange event for when the selection changes, and get access to any selected list items.

List with closable List Items.

Shell slots: Organizing your content

Before we jump into the updates, let’s do a brief recap on the Shell component. Shell serves as a foundational layout component in Calcite as it organizes the overall layout of your app. It can be used for a full-page experience, or given a defined width and height. Shell can also be embedded within other experiences or narrative content, and includes a number of slots where you can choose to place your content within the layout.

In this release, Calcite includes some additional slots for placing content.

Top & bottom panel slots: In the center of the layout, there is now a “panel-top”, “panel-bottom”, and default slot.

Shell is a foundational layout component as it organizes the overall layout of your app, such as the start, end, top, default, and bottom slots.

Alerts slot: Alerts are contextual pop-up style messages that can contain actions without obstructing the application. By default, they are positioned over the browser window. With this update, you can choose to place them in a new “alerts” slot within Shell that is dedicated to alerts. When placed in the slot, the Alert is positioned over the Shell rather than the whole page. This is useful for when you have your Shell embedded within other content on a page, and you want to display information positioned over the Shell rather than the full page.

Shell's alerts slot containing an Alert, which is constrained to the extent of the Shell.

Modals slot: Modals are floating containers that can house straightforward messages or custom interfaces that are triggered contextually. By default, they are centered over the browser window. Similar to the “alerts” slot, the “modals” slot allows you to center the Modal over the Shell rather than the full page.

Resize Shell Panel & CSS variables

Resizing panels: Shell Panel now has the option to enable interactive resizing of the panel when slotted in the “top” or “bottom”. When enabled, users can drag the edge of the panel to expand or collapse the height of the component and interact with content.

CSS variables for sizing: You can control the sizing of Shell Panels using the following CSS variables:

Action Bars on Panels and Flow Items

Action Bar is composed of Actions which are typically used for core operations in the interface, and are often seen on the left of right edge of applications. With this update, there is an “action-bar” slot, which serves as a specific placeholder for an Action Bar, at the top of Panels and Flow Items. You can use this to position an Action Bar containing functionality that corresponds to the content within the Panel or Flow Item.

Panel with a slotted Action Bar.

Focus styling

Focus color: By default, the focus color will match the configured brand color. You can override the focus color by using a new global CSS variable available for all components, or set it directly on an individual component.

Focus placement: By default, the component focus is displayed as an outline around the component. The focus can instead be drawn inset within the component using a new CSS variable.

Define unique focus color and adjust the focus offset for your workflow, such as setting individual colors to Chips within a Chip Group.

Accessibility

Building accessible software remains a top priority at Esri. Calcite Components leverage the W3C Accessibility Standards to ensure the applications and experiences you create are usable by a wide range of audiences. Calcite recently published a conformance report, which includes support on the US Access Board (Section 508), Web Content Accessibility Guidelines (WCAG), and current format of the Voluntary Product Accessibility Template (VPAT®).

Each release includes improvements to Calcite Components that are focused on accessibility. To learn about some of the recent accessibility-related updates, please see the Accessibility section of the May release summary.

There’s more

This blog covers some of the highlights released with Calcite over the last four months. There is a lot more to discover, such as Austrian German locale support and custom theming in the component sample playground. For a full overview of updates, please review the May Summary.

About the authors

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:

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:
0 Comments
Inline Feedbacks
View all comments

Next Article

Podcast 3- Hussein Nasser, Esri; When curiosity comes, give it a chance.

Read this article