{"id":1902472,"date":"2023-06-01T11:59:49","date_gmt":"2023-06-01T18:59:49","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1902472"},"modified":"2024-10-24T15:09:58","modified_gmt":"2024-10-24T22:09:58","slug":"calcite-design-system-may-2023-update","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update","title":{"rendered":"Calcite Design System May 2023 Update"},"author":4271,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191],"tags":[759512],"industry":[],"product":[36601],"class_list":["post-1902472","blog","type-blog","status-publish","format-standard","hentry","category-developers","tag-calcite-design-system","product-developers"],"acf":{"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":1938752,"id":1938752,"title":"MicrosoftTeams-image (18)","filename":"MicrosoftTeams-image-18.png","filesize":2840039,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/microsoftteams-image-18-4","alt":"Orange flowers fading in the background of Calcite's new Chip component.","author":"4271","description":"","caption":"","name":"microsoftteams-image-18-4","status":"inherit","uploaded_to":1902472,"date":"2023-05-19 21:21:20","modified":"2024-10-24 22:09:41","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\/2023\/04\/MicrosoftTeams-image-18-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>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.<\/p>\n<p>Many key improvements and new components have been introduced since the first production release four months ago. Let&#8217;s explore some of the highlights which you can start using in your apps right away.<\/p>\n<h2>Navigation components<\/h2>\n<p>We recently introduced new components that provide a consistent structure and behavior for easily navigating your application.<\/p>\n"},{"acf_fc_layout":"content","content":"<p><img decoding=\"async\" style=\"border: 1px solid #D3D3D3\" title=\"Navigation and its related components provide a consistent structure and behavior for users to reliably and consistently navigation your application.\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/navApp2-scaled.png\" alt=\"Navigation and its related components provide a consistent structure and behavior for users to reliably and consistently navigation your application.\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/navigation\">Navigation<\/a>:<\/p>\n<ul>\n<li>Serves as the primary component for navigating an application or experience.<\/li>\n<li>Contains an application&#8217;s information hierarchy within slotted Menu and Menu Items components.<\/li>\n<li>It is usually placed within the header slot of the Shell as a consistent location for interactive controls.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/navigation-logo\">Navigation Logo<\/a>:<\/p>\n<ul>\n<li>Use this component to display the logo, name, and description of your application.<\/li>\n<li>You can use the active property to indicate that a user is at the &#8220;root&#8221; of an experience.<\/li>\n<li>For interactive maps and demonstrations, to display the title and a description of the experience.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/navigation-user\">Navigation User<\/a>:<\/p>\n<ul>\n<li>This component allows you to display information about a logged in user, for example their name, username, and a thumbnail image. This component can be placed within the Navigation\u2019s user slot.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/menu\">Menu<\/a> and <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/menu-item\">Menu Item<\/a>:<\/p>\n<ul>\n<li>These components provide a consistent menu structure allowing your users to access and navigate pages, routes, or functionality within your application and experience.<\/li>\n<li>They are most often slotted into a Navigation component, but can also be placed in other layout components, such as Shell Panel,\u00a0Panel, and Flow.<\/li>\n<\/ul>\n<p>Here&#8217;s an example of how these components come together in the Navigation component:<\/p>\n"},{"acf_fc_layout":"content","content":"<p><img decoding=\"async\" title=\"Navigation and its related components provide a consistent structure and behavior for users to reliably and consistently navigation your application.\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/Navigation-layout.png\" alt=\"Navigation and its related components provide a consistent structure and behavior for users to reliably and consistently navigation your application.\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Chip Group<\/h2>\n<p>You can use the new <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/chip-group\">Chip Group<\/a> 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 <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/chip\">Chips<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1938792,"id":1938792,"title":"chip-group-fullsize","filename":"chip-group-fullsize.gif","filesize":3269051,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/chip-group-fullsize","alt":"Chip Group containing organizational areas, which can filter content in a map application.","author":"4271","description":"","caption":"","name":"chip-group-fullsize","status":"inherit","uploaded_to":1902472,"date":"2023-05-19 21:51:37","modified":"2023-05-20 15:03:29","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1908,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize.gif","medium-width":461,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize.gif","medium_large-width":768,"medium_large-height":435,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize.gif","large-width":1908,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize-1536x869.gif","1536x1536-width":1536,"1536x1536-height":869,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize.gif","2048x2048-width":1908,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize-822x465.gif","card_image-width":822,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/chip-group-fullsize.gif","wide_image-width":1908,"wide_image-height":1080}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Text Area<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/text-area\">Text Area<\/a> 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 <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/button\">Button<\/a> in the footer start and end slots.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1920382,"id":1920382,"title":"text-area","filename":"text-area.png","filesize":2361,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/text-area","alt":"Text Area component with maxLength and footer-start slot.","author":"4271","description":"","caption":"","name":"text-area","status":"inherit","uploaded_to":1902472,"date":"2023-04-28 19:11:35","modified":"2023-05-20 15:03:10","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":701,"height":115,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area-213x115.png","thumbnail-width":213,"thumbnail-height":115,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area.png","medium-width":464,"medium-height":76,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area.png","medium_large-width":701,"medium_large-height":115,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area.png","large-width":701,"large-height":115,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area.png","1536x1536-width":701,"1536x1536-height":115,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area.png","2048x2048-width":701,"2048x2048-height":115,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area.png","card_image-width":701,"card_image-height":115,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/text-area.png","wide_image-width":701,"wide_image-height":115}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Modal: Sticky top and bottom content<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/modal\">Modal<\/a> now includes two new slots for placing sticky (non-scrolling) content:<\/p>\n<ul>\n<li>Top: add content to the component&#8217;s sticky header, enabling it to remain at the top of the component when scrolling up and down, and<\/li>\n<li>Bottom: add content to the component&#8217;s sticky footer, enabling it to remain at the bottom of the component when scrolling up and down.<\/li>\n<\/ul>\n"},{"acf_fc_layout":"image","image":{"ID":1938842,"id":1938842,"title":"modal-sm","filename":"modal-sm.gif","filesize":4056891,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/modal-sm","alt":"Modal with sticky content slots, content-top and content-bottom.","author":"4271","description":"","caption":"","name":"modal-sm","status":"inherit","uploaded_to":1902472,"date":"2023-05-19 22:10:00","modified":"2023-05-20 15:02:46","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1200,"height":656,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm.gif","medium-width":464,"medium-height":254,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm.gif","medium_large-width":768,"medium_large-height":420,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm.gif","large-width":1200,"large-height":656,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm.gif","1536x1536-width":1200,"1536x1536-height":656,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm.gif","2048x2048-width":1200,"2048x2048-height":656,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm-826x452.gif","card_image-width":826,"card_image-height":452,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/modal-sm.gif","wide_image-width":1200,"wide_image-height":656}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2 id=\"color-picker-transparency\">Color Picker transparency<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/color-picker\">Color Picker<\/a> can be configured to include an alpha channel to enable color transparency.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1934922,"id":1934922,"title":"color-picker","filename":"color-picker-e1684594821723.png","filesize":47947,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-e1684594821723.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/color-picker-4","alt":"Color Picker with an alpha channel enabled to handle transparency with the alphaChannel property.","author":"4271","description":"","caption":"","name":"color-picker-4","status":"inherit","uploaded_to":1902472,"date":"2023-05-16 20:45:13","modified":"2023-05-20 15:02:27","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":316,"height":424,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-e1684594821723-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-e1684594821723-195x261.png","medium-width":195,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-e1684594821723.png","medium_large-width":316,"medium_large-height":424,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-e1684594821723.png","large-width":316,"large-height":424,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-e1684594821723.png","1536x1536-width":316,"1536x1536-height":424,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-e1684594821723.png","2048x2048-width":316,"2048x2048-height":424,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-347x465.png","card_image-width":347,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/color-picker-e1684594821723.png","wide_image-width":316,"wide_image-height":424}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>List enhancements<\/h2>\n<p><strong>Persist a selection:<\/strong> <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list\">Lists<\/a> have several selection modes that you can use, including no selection, single selection, multiple section, and now &#8220;single-persist&#8221;, which allows you to enforce one always selected <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list-item\">List Item<\/a>. 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 <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/dropdown\">Dropdown<\/a> component.<\/p>\n<p><strong>Close list items:<\/strong> If you enable the\u00a0<a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list-item\/#api-reference-properties-closable\"><code>closable<\/code><\/a> property, you can allow your end users to close, or remove, items from the list.<\/p>\n<p><strong>Selection change event<\/strong>: You can listen to the new <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list\/#api-reference-events-calciteListChange\"><code>calciteListChange<\/code><\/a> event for when the selection changes, and get access to any selected list items.<\/p>\n"},{"acf_fc_layout":"content","content":"<p><img decoding=\"async\" style=\"padding: 1rem;border: 1px solid #D3D3D3\" title=\"List with closable List Items.\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/close-list-items.png\" alt=\"List with closable List Items.\" width=\"493px\" height=\"366px\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Shell slots: Organizing your content<\/h2>\n<p>Before we jump into the updates, let&#8217;s do a brief recap on the <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/shell\">Shell<\/a> 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 <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/core-concepts\/#slots\">slots<\/a> where you can choose to place your content within the layout.<\/p>\n<p>In this release, Calcite includes some additional slots for placing content.<\/p>\n<p><strong>Top &amp; bottom panel slots:<\/strong> In the center of the layout, there is now a &#8220;panel-top&#8221;, &#8220;panel-bottom&#8221;, and default slot.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1938862,"id":1938862,"title":"SHELL-2","filename":"SHELL-2.png","filesize":310522,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/shell-2","alt":"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.","author":"4271","description":"","caption":"","name":"shell-2","status":"inherit","uploaded_to":1902472,"date":"2023-05-19 22:11:25","modified":"2023-05-20 15:06:20","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":4400,"height":2417,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2.png","medium-width":464,"medium-height":255,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2.png","medium_large-width":768,"medium_large-height":422,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2.png","large-width":1920,"large-height":1055,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2-1536x844.png","1536x1536-width":1536,"1536x1536-height":844,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2-2048x1125.png","2048x2048-width":2048,"2048x2048-height":1125,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2-826x454.png","card_image-width":826,"card_image-height":454,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/SHELL-2-1920x1055.png","wide_image-width":1920,"wide_image-height":1055}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><strong>Alerts slot: <\/strong><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/alert\">Alerts<\/a> 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 &#8220;alerts&#8221; slot within <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/shell\">Shell<\/a> 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.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1938392,"id":1938392,"title":"alerts-slot","filename":"alerts-slot.png","filesize":295630,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/alerts-slot","alt":"Shell's alerts slot containing an Alert, which is constrained to the extent of the Shell.","author":"4271","description":"","caption":"","name":"alerts-slot","status":"inherit","uploaded_to":1902472,"date":"2023-05-19 15:52:07","modified":"2023-05-20 15:14:13","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":4395,"height":1694,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot.png","medium-width":464,"medium-height":179,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot.png","medium_large-width":768,"medium_large-height":296,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot.png","large-width":1920,"large-height":740,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot-1536x592.png","1536x1536-width":1536,"1536x1536-height":592,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot-2048x789.png","2048x2048-width":2048,"2048x2048-height":789,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot-826x318.png","card_image-width":826,"card_image-height":318,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/alerts-slot-1920x740.png","wide_image-width":1920,"wide_image-height":740}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><strong>Modals slot<\/strong>: <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/modal\">Modals<\/a> 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 &#8220;alerts&#8221; slot, the &#8220;modals&#8221; slot allows you to center the Modal over the <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/shell\">Shell<\/a> rather than the full page.<\/p>\n<h2>Resize Shell Panel &amp; CSS variables<\/h2>\n<p><strong>Resizing panels: <\/strong><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/shell-panel\">Shell Panel<\/a> now has the option to enable interactive resizing of the panel when slotted in the &#8220;top&#8221; or &#8220;bottom&#8221;. When enabled, users can drag the edge of the panel to expand or collapse the height of the component and interact with content.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1943992,"id":1943992,"title":"resizable-panel","filename":"resizable-panel.gif","filesize":2131623,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/resizable-panel","alt":"","author":"309572","description":"","caption":"","name":"resizable-panel","status":"inherit","uploaded_to":1902472,"date":"2023-05-26 20:33:54","modified":"2023-05-26 20:34:12","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1908,"height":861,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel.gif","medium-width":464,"medium-height":209,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel.gif","medium_large-width":768,"medium_large-height":347,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel.gif","large-width":1908,"large-height":861,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel-1536x693.gif","1536x1536-width":1536,"1536x1536-height":693,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel.gif","2048x2048-width":1908,"2048x2048-height":861,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel-826x373.gif","card_image-width":826,"card_image-height":373,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/resizable-panel.gif","wide_image-width":1908,"wide_image-height":861}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><strong>CSS variables for sizing:<\/strong> You can control the sizing of Shell Panels using the following <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/shell-panel\/#styles\">CSS variables<\/a>:<\/p>\n<ul>\n<li><code>--calcite-shell-panel-detached-max-height<\/code>,<\/li>\n<li><code>--calcite-shell-panel-height<\/code>,<\/li>\n<li><code>--calcite-shell-panel-max-height<\/code>,<\/li>\n<li><code>--calcite-shell-panel-max-width<\/code>,<\/li>\n<li><code>--calcite-shell-panel-min-height<\/code>,<\/li>\n<li><code>--calcite-shell-panel-min-width<\/code>,<\/li>\n<li><code>--calcite-shell-panel-width<\/code>, and<\/li>\n<li><code>--calcite-shell-panel-z-index<\/code><\/li>\n<\/ul>\n<h2>Action Bars on Panels and Flow Items<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/action-bar\">Action Bar<\/a> is composed of\u00a0<a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/action\/\">Actions<\/a> 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 &#8220;action-bar&#8221; 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.<\/p>\n"},{"acf_fc_layout":"content","content":"<p><img decoding=\"async\" style=\"border: 1px solid #D3D3D3\" title=\"Panel with a slotted Action Bar.\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/panel-action-bar2.png\" alt=\"Panel with a slotted Action Bar.\" width=\"309px\" height=\"367px\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Focus styling<\/h2>\n<p><strong>Focus color:<\/strong> 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.<\/p>\n<p><strong>Focus placement:<\/strong> By default, the component focus is displayed as an outline around the component. The focus can instead be drawn <em>inset<\/em> within the component using a new CSS variable.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1938582,"id":1938582,"title":"focus-color","filename":"focus-color.gif","filesize":30649,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\/focus-color","alt":"Define unique focus color and adjust the focus offset for your workflow, such as setting individual colors to Chips within a Chip Group.","author":"4271","description":"","caption":"","name":"focus-color","status":"inherit","uploaded_to":1902472,"date":"2023-05-19 17:07:44","modified":"2023-05-20 15:07:52","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1198,"height":96,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color-213x96.gif","thumbnail-width":213,"thumbnail-height":96,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color.gif","medium-width":464,"medium-height":37,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color.gif","medium_large-width":768,"medium_large-height":62,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color.gif","large-width":1198,"large-height":96,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color.gif","1536x1536-width":1198,"1536x1536-height":96,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color.gif","2048x2048-width":1198,"2048x2048-height":96,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color-826x66.gif","card_image-width":826,"card_image-height":66,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/focus-color.gif","wide_image-width":1198,"wide_image-height":96}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Accessibility<\/h2>\n<p id=\"conformance-report\">Building accessible software remains a top priority at Esri. Calcite Components leverage the <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\" target=\"_blank\" rel=\"noopener\">W3C Accessibility Standards<\/a> to ensure the applications and experiences you create are usable by a wide range of audiences. Calcite recently published a <a href=\"https:\/\/www.esri.com\/en-us\/legal\/accessibility\/conformance-reports\">conformance report<\/a>, 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\u00ae).<\/p>\n<p>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 <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/summaries\/2023-05\/#accessibility\">Accessibility<\/a> section of the May release summary.<\/p>\n<h2>There&#8217;s more<\/h2>\n<p>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 <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/summaries\/2023-05\/\">May Summary<\/a>.<\/p>\n"}],"authors":[{"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":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"},{"ID":309572,"user_firstname":"Kitty","user_lastname":"Hurley","nickname":"Kitty Hurley","user_nicename":"khurley","display_name":"Kitty Hurley","user_email":"khurley@esri.com","user_url":"https:\/\/www.github.com\/geospatialem","user_registered":"2022-05-04 21:30:59","user_description":"Kitty is a Principal Product Engineer with Calcite Design System, passionate about expanding access to the web and maps for broader audiences. She is dedicated to creating inclusive, user-friendly web experiences that connect people and places through innovative design and technology. Outside of work, Kitty enjoys exploring the wilderness of Minnesota and has a goal to visit every major league baseball stadium across America.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/03\/Esri_Day2_PSCC2024_H_0127-e1710789483673-261x261.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/card-4.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Calcite Design System May 2023 Update<\/title>\n<meta name=\"description\" content=\"Explore some of the latest updates to Calcite Design System, including new components and improvements to help you build a user-friendly UI\/UX.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Calcite Design System May 2023 Update\" \/>\n<meta property=\"og:description\" content=\"Explore some of the latest updates to Calcite Design System, including new components and improvements to help you build a user-friendly UI\/UX.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-24T22:09:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\"},\"author\":{\"name\":\"Julie Powell\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3ef71df36f6aacca26eb2c7f65f15e88\"},\"headline\":\"Calcite Design System May 2023 Update\",\"datePublished\":\"2023-06-01T18:59:49+00:00\",\"dateModified\":\"2024-10-24T22:09:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\"},\"wordCount\":5,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"Calcite Design System\"],\"articleSection\":[\"Developers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\",\"name\":\"Calcite Design System May 2023 Update\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2023-06-01T18:59:49+00:00\",\"dateModified\":\"2024-10-24T22:09:58+00:00\",\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Calcite Design System May 2023 Update\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3ef71df36f6aacca26eb2c7f65f15e88\",\"name\":\"Julie Powell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png\",\"caption\":\"Julie Powell\"},\"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. 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.\",\"sameAs\":[\"https:\/\/x.com\/JuliePowellGIS\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/julie-powell\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Calcite Design System May 2023 Update","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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update","og_locale":"en_US","og_type":"article","og_title":"Calcite Design System May 2023 Update","og_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.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-10-24T22:09:58+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update"},"author":{"name":"Julie Powell","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3ef71df36f6aacca26eb2c7f65f15e88"},"headline":"Calcite Design System May 2023 Update","datePublished":"2023-06-01T18:59:49+00:00","dateModified":"2024-10-24T22:09:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update"},"wordCount":5,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["Calcite Design System"],"articleSection":["Developers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update","name":"Calcite Design System May 2023 Update","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2023-06-01T18:59:49+00:00","dateModified":"2024-10-24T22:09:58+00:00","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.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Calcite Design System May 2023 Update"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3ef71df36f6aacca26eb2c7f65f15e88","name":"Julie Powell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png","caption":"Julie Powell"},"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. 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.","sameAs":["https:\/\/x.com\/JuliePowellGIS"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/julie-powell"}]}},"text_date":"June 1, 2023","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-may-2023-update","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/04\/MicrosoftTeams-image-18.png","primary_product":"Developers","tag_data":[{"term_id":759512,"name":"Calcite Design System","slug":"calcite-design-system","term_group":0,"term_taxonomy_id":759512,"taxonomy":"post_tag","description":"","parent":0,"count":15,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":423,"filter":"raw"}],"product_data":[{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=developers","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1902472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/4271"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1902472"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1902472\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1902472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1902472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1902472"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1902472"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1902472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}