{"id":2084092,"date":"2023-10-09T14:01:17","date_gmt":"2023-10-09T21:01:17","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2084092"},"modified":"2024-10-24T15:04:20","modified_gmt":"2024-10-24T22:04:20","slug":"calcite-design-system-october-2023-update","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-october-2023-update","title":{"rendered":"Calcite Design System October 2023 Update"},"author":309572,"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,771812],"industry":[],"product":[761642,36601],"class_list":["post-2084092","blog","type-blog","status-publish","format-standard","hentry","category-developers","tag-calcite-design-system","tag-whats-new-october-2023","product-platform","product-developers"],"acf":{"authors":[{"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":""},{"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":2084112,"id":2084112,"title":"","filename":"CalciteOctCover.png","filesize":2633592,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/09\/CalciteOctCover.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/developers\/calcite-design-system-october-2023-update\/calciteoctcover","alt":"Calcite's Table component shown with fall colors","author":"309572","description":"","caption":"","name":"calciteoctcover","status":"inherit","uploaded_to":2084092,"date":"2023-09-26 18:52:22","modified":"2024-10-24 22:03:50","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\/09\/CalciteOctCover-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/09\/CalciteOctCover.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/09\/CalciteOctCover.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/09\/CalciteOctCover.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/09\/CalciteOctCover-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/09\/CalciteOctCover.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/09\/CalciteOctCover-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/09\/CalciteOctCover.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Calcite Design System is comprised of reusable web components guided by design principles and standards, which together create beautiful, consistent, and user-friendly experiences. It includes a UI kit, iconography, and usage guidelines detailing best practices.<\/p>\n

Since May there have many features and bug fixes<\/a>, including new components, a responsive design initiative, component functionality, accessibility, and more. Let’s dive into the new functionality you can use in your apps.<\/p>\n"},{"acf_fc_layout":"content","content":"

Table<\/a><\/h2>\n

The new\u00a0Table<\/a>\u00a0and related components\u00a0Table Header<\/a>,\u00a0Table Row<\/a>, and\u00a0Table Cell<\/a> provide an effective way of organizing your data or content on your page into rows and columns.<\/p>\n

Table is simple and flexible; for example you can construct it with or without headers, make the rows selectable, and limit the number of rows shown per page which automatically enables pagination. You can also embed other components within Table Cells, as shown below.<\/p>\n

\"Table
Table is selectable and numbered, and contains a column header and footer. It also embeds the Meter component within Table Cells.<\/figcaption><\/figure>\n"},{"acf_fc_layout":"content","content":"

Meter<\/a><\/h2>\n

Meter<\/a> can be used to represent an available quantity of a measurable unit, such as the amount of storage used on a hard drive. Meter can also be used to display a count or quantity anytime\u00a0max<\/code> is a known value. For instance, the number of days in a year that precipitation has been recorded.<\/p>\n

\"Meter<\/p>\n"},{"acf_fc_layout":"content","content":"

Sheet<\/a><\/h2>\n

Sheet<\/a> provides an ephemeral\u00a0container for focused workflows and tasks with a page-blocking\u00a0Scrim<\/a> container. The component can be used when providing focused content, short dialogues, and can contain navigation and menu regions.<\/p>\n

It’s use focuses the user’s attention for a task, such as navigating menus, which prevents interaction with the UI until it is closed. For additional considerations, explore\u00a0Sheet’s recommendations<\/a>.<\/p>\n

\"Sheet<\/p>\n"},{"acf_fc_layout":"content","content":"

Input Time Zone<\/a><\/h2>\n

Input Time Zone<\/a> is an input-driven component enabling a user to select from a list of worldwide time zones. Unless configured otherwise, the user’s time zone is selected by default.<\/p>\n

\"Input<\/p>\n"},{"acf_fc_layout":"content","content":"

Responsive Layouts<\/a><\/h2>\n

Most web apps have a requirement to flow between any screen size meanwhile maintaining a user-friendly experience because end users are accessing their apps on a range of devices. While Calcite Components are used today<\/em> to create apps with a responsive design, we are working on making it even easier for developers to build their responsive apps. This initiative will span multiple releases as we enhance various components to automatically adjust their layout based on screen size.<\/p>\n

In this release, we have updated Alert<\/a> and Pagination<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"

Alert<\/a><\/strong><\/p>\n

Alert is scalable across large and smaller devices. Queued alerts and Actions<\/a>\u00a0slotted in\u00a0\"actions-end\"<\/code><\/a> will be placed at the bottom of the component at smaller resolutions.<\/p>\n

\"Alert<\/p>\n"},{"acf_fc_layout":"content","content":"

Pagination<\/a><\/strong><\/p>\n

Pagination will compress to display less page numbers to accommodate a smaller screen width.<\/p>\n

\"Pagination<\/p>\n"},{"acf_fc_layout":"content","content":"

DevSummit and UC Tech Session Recordings<\/h2>\n

2023 Developer Summit and 2023 User Conference technical session recordings are now available. Check out the presentations covering building and designing apps with Calcite in the links below.<\/p>\n

2023 Esri Developer Summit<\/h3>\n