"},{"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":"image","image":{"ID":2550372,"id":2550372,"title":"Calcite-24-Oct-Wide_ 1920px x 1080px","filename":"Calcite-24-Oct-Wide_-1920px-x-1080px.png","filesize":2129402,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-october-2024\/calcite-24-oct-wide_-1920px-x-1080px","alt":"Calcite's October highlights include Shell Panel's displayMode of float-all, Dialog with dragEnabled, Combobox enhancements, and more.","author":"309572","description":"","caption":"","name":"calcite-24-oct-wide_-1920px-x-1080px","status":"inherit","uploaded_to":2538262,"date":"2024-10-29 23:07:59","modified":"2024-10-29 23:09:15","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/Calcite-24-Oct-Wide_-1920px-x-1080px.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Dialog<\/a><\/h2>\nThe new Dialog<\/a> component presents focused interactions, tasks, or workflows to a user. Dialogs can be configured to suit a variety of use cases and interface needs, ranging from brief informational prompts to complex multi-step workflows. For instance, engaging users with onboarding or instructional content, or interrupting a workflow to present a choice or provide guidance.<\/p>\nSome use cases of Dialog may take the form of page-blocking interactions, where the\u00a0modal<\/code>\u00a0property<\/a>\u00a0should be used, and a\u00a0Scrim<\/a> will be positioned behind the dialog to prevent interaction with the main content. The creation of Dialog deprecates the Modal<\/a> component, which is planned for removal in a future major release.<\/p>\nThe component’s placement can be specified via the placement<\/code>\u00a0property, and offers\u00a0styles<\/a> where it’s placement can be further customized.<\/p>\nDialog also offers a\u00a0widthScale<\/code><\/a>\u00a0to specify the visual sizing,\u00a0dragEnabled<\/code><\/a>\u00a0and\u00a0resizable<\/code><\/a>\u00a0to drag and resize the component respectively,\u00a0content slots<\/a>, and provides\u00a0accessibility features<\/a>\u00a0such as focus order and keyboard navigation.<\/p>\n![\"Dialog](\"https:\/\/github.com\/user-attachments\/assets\/52b000dd-0dc1-4d4a-a8e8-9d36b993382f\")
<\/p>\n"},{"acf_fc_layout":"content","content":"
Calcite version & logging<\/a><\/h2>\nA new global variable detects and communicates the current version and provides context on component deprecations, and which major version the component is planned for removal. This can be helpful when troubleshooting an app as well as staying informed about the status of components being used by the application.<\/p>\n
window<\/span>.addEventListener(\"load\"<\/span>, () => console<\/span>.log(window<\/span>.calciteConfig.version));\r\n<\/code><\/pre>\nYou can also use calciteConfig<\/code> to remove messaging from production environments and builds. To learn more, explore Global configuration in October’s summary notes<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"Component CSS variables<\/a><\/h2>\nCalcite is working towards support of component tokens<\/a>, which allow for component customization via CSS variables. Some components already offer customization for designers and developers, and additional configuration via CSS variables will be supported in future releases.<\/p>\nSome new CSS variables available include Text Area’s<\/a>\u00a0--calcite-text-area-min-height<\/code>\u00a0and\u00a0--calcite-text-area-max-height<\/code>, which specify the component’s minimum and maximum height respectively.<\/p>\n<style<\/span>><\/span>\r\n #feedback-comments<\/span> {\r\n --calcite-text-area-min-height<\/span>: 5rem<\/span>;\r\n --calcite-text-area-max-height<\/span>: 10rem<\/span>;\r\n }\r\n<\/style<\/span>><\/span>\r\n\r\n<calcite-text-area<\/span> id<\/span>=\"feedback-comments\"<\/span> max-length<\/span>=\"500\"<\/span>><\/span><\/calcite-text-area<\/span>><\/span>\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"List enhancements<\/a><\/h2>\nList<\/a> supports a filterProps<\/code>\u00a0property to specify which properties to filter when using\u00a0filterEnabled<\/code>, where one or multiple property values can be used to filter. If not set, all properties will be matched including\u00a0label<\/code>,\u00a0description<\/code>,\u00a0metadata<\/code>, and\u00a0value<\/code>.<\/p>\nList Item<\/a> includes a new unavailable<\/code> property which, when enabled, makes the component’s content appear disabled, while allowing users the ability to navigate to the List Item. Designers and developers can also supply additional context, such as why interaction is limited on the component. This differs from the component’s disabled<\/code> property, where interaction is prevented.<\/p>\n![\"List](\"https:\/\/github.com\/user-attachments\/assets\/44b6be8e-79bb-4665-be9f-f2b67c2eb253\")
<\/p>\n
<\/p>\n"},{"acf_fc_layout":"content","content":"
Combobox updates<\/a><\/h2>\nCombobox Item<\/a> was enhanced with description<\/code>\u00a0and\u00a0shortHeading<\/code> properties to support more workflows. Where description<\/code> provides additional context to an item, and shortHeading<\/code> can represent the item in a compact format when the Combobox<\/a>\u00a0is closed. A new\u00a0content-end<\/code> slot has also been introduced for adding non-actionable elements after the component’s content, such as an Avatar<\/a>.<\/p>\n![\"Combobox](\"https:\/\/github.com\/user-attachments\/assets\/14eeddda-64ff-470f-b24b-33ca79324955\")
<\/p>\n
Additionally, Combobox<\/a>‘s filter text value is accessible via the new filterText<\/code>\u00a0property.<\/p>\n![\"Combobox's](\"https:\/\/github.com\/user-attachments\/assets\/2933a09c-679a-4e73-ad6a-e7137f7c32ac\")
<\/p>\n"},{"acf_fc_layout":"content","content":"
Slider improvements<\/a><\/h2>\nSlider<\/a>\u00a0now ensures that only integers can be selected when the\u00a0snap<\/code>\u00a0property is\u00a0true<\/code>\u00a0and\u00a0step<\/code> property is set to an integer.<\/p>\n![\"Slider](\"https:\/\/github.com\/user-attachments\/assets\/5e5c6675-a80b-41cd-8c6c-5aa308c90ab1\")
<\/p>\n"},{"acf_fc_layout":"content","content":"
Input Time Zone usability improvements<\/a><\/h2>\nInput Time Zone<\/a> includes multiple improvements improving its usability, such as the ability to display the region when the mode<\/code>\u00a0is set to\u00a0\"region\"<\/code> and a new search icon is added to the component’s placeholder text.<\/p>\n![\"Input](\"https:\/\/github.com\/user-attachments\/assets\/98da2e14-a1d7-4d12-b668-1033d0f03e84\")
<\/p>\n"},{"acf_fc_layout":"content","content":"
Accessibility and internationalization support<\/a><\/h2>\nYou can shift focus to\u00a0Accordion Item<\/a> programmatically via the new setFocus<\/code> method.<\/p>\n![\"Shift](\"https:\/\/github.com\/user-attachments\/assets\/de0bc499-2294-4b10-8ca8-b3aae3c9cb4a\")
<\/p>\n
Error message context for Input-based components including Combobox<\/a>, Input<\/a>, Select<\/a> and Text Area <\/a>is now provided to assistive technologies (AT) when the component’s status<\/code>\u00a0is reported as\u00a0\"invalid\"<\/code>. The additional context supports users that may have visual or cognitive impairments relying on AT to convey an error is present and more action is needed before form submission.<\/p>\nInput Date Picker<\/a>\u00a0includes additional support for the Bosnian (bs) and Italian – Switzerland (it-CH) locales, where the component was previously cleared erroneously.<\/p>\nExplore the October summary notes for the full list of accessibility and internationalization improvements<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"Visual changes<\/a><\/h2>\nCalcite is a very active, dynamic design system that continues to evolve to meet new design challenges and design trends, meanwhile improving consistency and usability. As a result of this, visual changes are periodically introduced that may impact the visual appearance in your apps.<\/p>\n
For example, one of the recent enhancements to Combobox<\/a>\u00a0introduced a visual change: when performing a search, matching terms are highlighted for easier identification. Custom values are appended to the top of the dropdown list, and the keyboard navigation focus order has been refined when selectionMode<\/code><\/a>\u00a0is set to\u00a0\"multiple\"<\/code>, improving the user experience.<\/p>\n![\"Combobox](\"https:\/\/github.com\/user-attachments\/assets\/e97e8770-1b56-448d-8993-ebb4598205bc\")
<\/p>\n
Additionally, Loader<\/a> includes a new \"determinate-value\"<\/code> display option. This type<\/code>\u00a0displays a percent sign alongside the value, where a user is provided with context on the percentage rather than a specific count in some use cases for improved usability.<\/p>\n![\"Loader](\"https:\/\/github.com\/user-attachments\/assets\/5449f390-f570-41bb-9eee-ea8513253baa\")
<\/p>\n
Explore the October summary notes for the full list of visual changes<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"Deprecations<\/a><\/h2>\nDeprecations are now documented in changelogs to better equip designers and developers prior to major releases and future removal. Explore Calcite’s global configuration<\/a> to assist with troubleshooting, and learn more about deprecations.<\/p>\nIn version 2.11<\/code><\/a>, the Modal<\/a> and Shell Center Row<\/a> components were deprecated. With Modal’s deprecation, use the\u00a0Dialog<\/a>\u00a0component instead.\u00a0Learn more about Dialog<\/a> including its usage, configuration, and support. In place of Shell Center Row, use\u00a0Shell Panel’s<\/a>\u00a0displayMode<\/code>\u00a0property set to\u00a0\"float-content\"<\/code>\u00a0or\u00a0\"float-all\"<\/code>\u00a0instead.<\/p>\n
Some use cases of Dialog may take the form of page-blocking interactions, where the\u00a0 The component’s placement can be specified via the Dialog also offers a\u00a0 A new global variable detects and communicates the current version and provides context on component deprecations, and which major version the component is planned for removal. This can be helpful when troubleshooting an app as well as staying informed about the status of components being used by the application.<\/p>\n You can also use Calcite is working towards support of component tokens<\/a>, which allow for component customization via CSS variables. Some components already offer customization for designers and developers, and additional configuration via CSS variables will be supported in future releases.<\/p>\n Some new CSS variables available include Text Area’s<\/a>\u00a0 List<\/a> supports a List Item<\/a> includes a new <\/p>\n"},{"acf_fc_layout":"content","content":" Combobox Item<\/a> was enhanced with Additionally, Combobox<\/a>‘s filter text value is accessible via the new Slider<\/a>\u00a0now ensures that only integers can be selected when the\u00a0 Input Time Zone<\/a> includes multiple improvements improving its usability, such as the ability to display the region when the You can shift focus to\u00a0Accordion Item<\/a> programmatically via the new Error message context for Input-based components including Combobox<\/a>, Input<\/a>, Select<\/a> and Text Area <\/a>is now provided to assistive technologies (AT) when the component’s Input Date Picker<\/a>\u00a0includes additional support for the Bosnian (bs) and Italian – Switzerland (it-CH) locales, where the component was previously cleared erroneously.<\/p>\n Explore the October summary notes for the full list of accessibility and internationalization improvements<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":" Calcite is a very active, dynamic design system that continues to evolve to meet new design challenges and design trends, meanwhile improving consistency and usability. As a result of this, visual changes are periodically introduced that may impact the visual appearance in your apps.<\/p>\n For example, one of the recent enhancements to Combobox<\/a>\u00a0introduced a visual change: when performing a search, matching terms are highlighted for easier identification. Custom values are appended to the top of the dropdown list, and the keyboard navigation focus order has been refined when Additionally, Loader<\/a> includes a new Explore the October summary notes for the full list of visual changes<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":" Deprecations are now documented in changelogs to better equip designers and developers prior to major releases and future removal. Explore Calcite’s global configuration<\/a> to assist with troubleshooting, and learn more about deprecations.<\/p>\n In version modal<\/code>\u00a0property<\/a>\u00a0should be used, and a\u00a0Scrim<\/a> will be positioned behind the dialog to prevent interaction with the main content. The creation of Dialog deprecates the Modal<\/a> component, which is planned for removal in a future major release.<\/p>\nplacement<\/code>\u00a0property, and offers\u00a0styles<\/a> where it’s placement can be further customized.<\/p>\nwidthScale<\/code><\/a>\u00a0to specify the visual sizing,\u00a0dragEnabled<\/code><\/a>\u00a0and\u00a0resizable<\/code><\/a>\u00a0to drag and resize the component respectively,\u00a0content slots<\/a>, and provides\u00a0accessibility features<\/a>\u00a0such as focus order and keyboard navigation.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
Calcite version & logging<\/a><\/h2>\n
window<\/span>.addEventListener(\"load\"<\/span>, () => console<\/span>.log(window<\/span>.calciteConfig.version));\r\n<\/code><\/pre>\ncalciteConfig<\/code> to remove messaging from production environments and builds. To learn more, explore Global configuration in October’s summary notes<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"Component CSS variables<\/a><\/h2>\n
--calcite-text-area-min-height<\/code>\u00a0and\u00a0--calcite-text-area-max-height<\/code>, which specify the component’s minimum and maximum height respectively.<\/p>\n<style<\/span>><\/span>\r\n #feedback-comments<\/span> {\r\n --calcite-text-area-min-height<\/span>: 5rem<\/span>;\r\n --calcite-text-area-max-height<\/span>: 10rem<\/span>;\r\n }\r\n<\/style<\/span>><\/span>\r\n\r\n<calcite-text-area<\/span> id<\/span>=\"feedback-comments\"<\/span> max-length<\/span>=\"500\"<\/span>><\/span><\/calcite-text-area<\/span>><\/span>\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"List enhancements<\/a><\/h2>\n
filterProps<\/code>\u00a0property to specify which properties to filter when using\u00a0filterEnabled<\/code>, where one or multiple property values can be used to filter. If not set, all properties will be matched including\u00a0label<\/code>,\u00a0description<\/code>,\u00a0metadata<\/code>, and\u00a0value<\/code>.<\/p>\nunavailable<\/code> property which, when enabled, makes the component’s content appear disabled, while allowing users the ability to navigate to the List Item. Designers and developers can also supply additional context, such as why interaction is limited on the component. This differs from the component’s disabled<\/code> property, where interaction is prevented.<\/p>\n<\/p>\n
Combobox updates<\/a><\/h2>\n
description<\/code>\u00a0and\u00a0shortHeading<\/code> properties to support more workflows. Where description<\/code> provides additional context to an item, and shortHeading<\/code> can represent the item in a compact format when the Combobox<\/a>\u00a0is closed. A new\u00a0content-end<\/code> slot has also been introduced for adding non-actionable elements after the component’s content, such as an Avatar<\/a>.<\/p>\n<\/p>\n
filterText<\/code>\u00a0property.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
Slider improvements<\/a><\/h2>\n
snap<\/code>\u00a0property is\u00a0true<\/code>\u00a0and\u00a0step<\/code> property is set to an integer.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
Input Time Zone usability improvements<\/a><\/h2>\n
mode<\/code>\u00a0is set to\u00a0\"region\"<\/code> and a new search icon is added to the component’s placeholder text.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
Accessibility and internationalization support<\/a><\/h2>\n
setFocus<\/code> method.<\/p>\n<\/p>\n
status<\/code>\u00a0is reported as\u00a0\"invalid\"<\/code>. The additional context supports users that may have visual or cognitive impairments relying on AT to convey an error is present and more action is needed before form submission.<\/p>\nVisual changes<\/a><\/h2>\n
selectionMode<\/code><\/a>\u00a0is set to\u00a0\"multiple\"<\/code>, improving the user experience.<\/p>\n<\/p>\n
\"determinate-value\"<\/code> display option. This type<\/code>\u00a0displays a percent sign alongside the value, where a user is provided with context on the percentage rather than a specific count in some use cases for improved usability.<\/p>\n<\/p>\n
Deprecations<\/a><\/h2>\n
2.11<\/code><\/a>, the Modal<\/a> and Shell Center Row<\/a> components were deprecated. With Modal’s deprecation, use the\u00a0Dialog<\/a>\u00a0component instead.\u00a0Learn more about Dialog<\/a> including its usage, configuration, and support. In place of Shell Center Row, use\u00a0Shell Panel’s<\/a>\u00a0displayMode<\/code>\u00a0property set to\u00a0\"float-content\"<\/code>\u00a0or\u00a0\"float-all\"<\/code>\u00a0instead.<\/p>\n