"},{"ID":4271,"user_firstname":"Julie","user_lastname":"Powell","nickname":"Julie Powell","user_nicename":"julie-powell","display_name":"Julie Powell","user_email":"julie_powell@esri.com","user_url":"","user_registered":"2018-03-02 00:15:51","user_description":"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. \r\nJulie 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.","user_avatar":"
"}],"short_description":"Explore some of the latest updates to Calcite Design System, including new components and improvements to help you build a user-friendly UI\/UX.","flexible_content":[{"acf_fc_layout":"content","content":"In November 2023, we released version 2.0 (a breaking change release) to increase consistency<\/a> 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, 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.<\/p>\n The new Card Group<\/a> component supports workflows using more than one Card<\/a>, 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.<\/p>\n 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<\/em>.<\/p>\n The new Angular wrapper<\/a> for Calcite components supports:<\/p>\n Explore the Angular wrapper with Calcite’s calcite-components-examples<\/a> repository, or the CodeSandbox template<\/a> for a cloud-based environment. Using React? See the React wrapper<\/a> that supports React\u2019s synthetic event system.<\/p>\n"},{"acf_fc_layout":"content","content":" Form validation messages are displayed with Input Message<\/a>, 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:<\/p>\n 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.<\/p>\n A new slot is available in\u00a0List<\/a> that displays when a filter is enabled and no filter results are found. For instance, a Notice<\/a> can display a message indicating there are no results, and what could result in a successful search.<\/p>\n The disabled property is now supported in Dropdown Item<\/a> to support advanced use cases in apps.<\/p>\n 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<\/a>, and in particular the changes since October 2023<\/a> for a full list of capabilities offered in Calcite.<\/p>\n"},{"acf_fc_layout":"content","content":" 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\u2019s development teams, network with the developer community, and play dodgeball!<\/p>\n Learn more about Esri Developer Summit<\/a>, and explore technical sessions and demo theater presentations featuring Calcite, including:<\/p>\n--calcite-ui-brand<\/code> was changed to --calcite-color-brand<\/code> to indicate that it is a color property. For the full list of property name changes, refer to the CSS variable comparison tables<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"Responsive design<\/a><\/h2>\n
<\/p>\n"},{"acf_fc_layout":"content","content":"
Card Group<\/a><\/h2>\n
<\/p>\n"},{"acf_fc_layout":"content","content":"
Angular wrapper<\/a><\/h2>\n
\n
ngModel<\/code><\/li>\nForm validation<\/a><\/h2>\n
\n
<\/p>\n"},{"acf_fc_layout":"content","content":"
A slot for no filtered results<\/h2>\n
<\/p>\n"},{"acf_fc_layout":"content","content":"
Dropdown Item disabled property<\/h2>\n
<\/p>\n"},{"acf_fc_layout":"content","content":"
Learn more<\/h2>\n
Calcite at the 2024 Esri Developer Summit<\/h2>\n
\n