"}],"short_description":"Explore what's new in February 2025 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":2682172,"id":2682172,"title":"Wide_ 1920px x 1080px 1","filename":"Wide_-1920px-x-1080px-1.png","filesize":2410238,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-february-2025\/wide_-1920px-x-1080px-1","alt":"","author":"309572","description":"","caption":"","name":"wide_-1920px-x-1080px-1","status":"inherit","uploaded_to":2681592,"date":"2025-02-14 00:39:04","modified":"2025-02-14 00:39:04","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":1081,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1.png","large-width":1918,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1-1536x865.png","1536x1536-width":1536,"1536x1536-height":865,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1.png","2048x2048-width":1920,"2048x2048-height":1081,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/Wide_-1920px-x-1080px-1-1918x1080.png","wide_image-width":1918,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Introducing the new Autocomplete<\/a> component, which enhances text input by allowing developers to display dynamic suggestions as users type. The component provides a structured way to present predictive search results, while supporting configuration on how suggestions are fetched, populated, and managed.<\/p>\n The component offers events, which can trigger an asynchronous search, update the list of suggestions, and open the component’s dropdown when results are available. Learn more about the Autocomplete component<\/a> and how to integrate it into your apps.<\/p>\n Block Group<\/a> is a new component that provides organization and functionality to multiple Block<\/a> elements. Block Group can also enable drag-and-drop reordering of grouped Block<\/a> elements, providing a consistent way to manage sortable content.<\/p>\n A new\u00a0global token<\/a>,\u00a0 The\u00a0Date Picker<\/a>\u00a0component includes many new UI improvements, such as when\u00a0 Time Picker<\/a>\u00a0provides support for a 24-hour format using the\u00a0 Sheet<\/a>\u00a0features a\u00a0 List<\/a>\u00a0now supports dragging between different Lists for mouse and keyboard users. The component now offers a menu when interacting with a\u00a0List Item<\/a>\u00a0to move its position within the current List, or with other Lists containing the same\u00a0 Calcite continues to prioritize accessibility and internationalization throughout its components to allow greater access to more audiences. To continue to build your apps with individuals in mind, visit designing for individuals<\/a> and learn about localization<\/a>.<\/p>\n The Norwegian locale code has changed to\u00a0 Meter<\/a> offers high contrast support when users have the high contrast setting enabled on Windows operating systems. The component now displays its Calcite’s 3.0 release removes deprecated components and properties, including the Pick List and Value List components. Use the List<\/a> component instead. Removed components include:<\/p>\n For more details on the removals, visit the February 2025 summary notes removed components<\/a> and removed properties<\/a> sections.<\/p>\n"},{"acf_fc_layout":"content","content":" List<\/a> includes consistency and overall UI improvements including component sizing, updated padding, spacing adjustments, font sizes, and consistency. Now when the component has nested child List Items, there is more distinct visual representation in the component.<\/p>\n Calcite has made changes under the hood to ensure stability, consistency, and support for your apps. For the custom elements build<\/a> you may have different imports for individual components as you migrate your apps to With 3.0, you no longer need to install an Angular wrapper; you can now use Calcite directly in your apps. Additionally, React 19+<\/a> natively supports custom elements, so a wrapper is no longer required. Older React versions can still use the wrapper for smoother integration.<\/p>\n Also, prior to version 3.0, passing boolean attributes to Calcite’s React components converted the values to strings due to compatibility issues with web components. Now in 3.0, boolean attributes should be passed as For a full list of changes, visit Calcite’s February 2025 summary notes<\/a>, which also lists changes since October 2024<\/a> including breaking changes, features, and bug fixes.<\/p>\n Earlier this month Calcite designers and engineer team members presented What’s New: Calcite Design System (February 2025) showcasing 3.0 breaking changes, feature enhancements, and engaged in a live Q&A session. Thank you to all who attended with us live. The event was recorded<\/a> and is available for viewing.<\/p>\n"},{"acf_fc_layout":"youtube","start_time":"0","end_time":"","youtube_video_url":"<\/p>\n"},{"acf_fc_layout":"content","content":"
Block Group component<\/a><\/h2>\n
<\/p>\n"},{"acf_fc_layout":"content","content":"
Focus color token<\/a><\/h2>\n
--calcite-color-focus<\/code>, is available for designers and developers to customize the focus color. The CSS variable allows customization on the focus color in an application, such as supporting a component’s\u00a0kind<\/code> in its focus color.<\/p>\n"},{"acf_fc_layout":"content","content":"Date Picker appearance<\/a><\/h2>\n
range<\/code> is specified, the component displays two calendars in the layout. Additionally, month selection can now be changed via a native select menu to support more workflows.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
Time Picker 24-hour format<\/a><\/h2>\n
hourFormat<\/code> property, offering users more flexibility when selecting times and better compatibility with global time conventions. When specified the format can display the user’s default locale format, 12-hour format, or 24-hour format.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
Sheet’s resizable functionality<\/a><\/h2>\n
resizable<\/code> property, allowing users to adjust its height and width dynamically depending on position. The resizable container is accessible via mouse and keyboard to accommodate a more diverse set of workflows.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
List keyboard dragging between Lists<\/a><\/h2>\n
group<\/code>\u00a0value.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
Accessibility and internationalization improvements<\/a><\/h2>\n
Norwegian locale support<\/h3>\n
no<\/code>\u00a0from\u00a0nb<\/code>. The\u00a0nb<\/code>\u00a0locale is deprecated and will be removed in the future. However, the\u00a0nb<\/code>\u00a0locale is still available so applications using it will continue to receive support for Norwegian until its removal. To learn more, visit\u00a0Calcite’s supported languages<\/a>.<\/p>\n<!-- Norwegian locale support --><\/span>\r\n<calcite-button<\/span> lang<\/span>=\"no\"<\/span> loading<\/span>>Hei<\/calcite-button<\/span>>\r\n\r\n<!-- Deprecated Norwegian locale support --><\/span>\r\n<calcite-button<\/span> lang<\/span>=\"nb\"<\/span> loading<\/span>>Hei<\/calcite-button<\/span>><\/code><\/pre>\nMeter’s high contrast support<\/h3>\n
value<\/code> to support more users when high contrast is enabled on the operating system or browser.<\/p>\n<\/p>\n"},{"acf_fc_layout":"content","content":"
3.0 breaking change highlights<\/a><\/h2>\n"},{"acf_fc_layout":"content","content":"
Removed components and properties<\/h3>\n
\n
List usability improvements<\/a><\/h3>\n
<\/p>\n"},{"acf_fc_layout":"content","content":"
Imports<\/h3>\n
3.0<\/code>.<\/p>\n\/\/ Version 3.0 imports<\/span>\r\nimport<\/span> \"@esri\/calcite-components\/dist\/components\/calcite-button\"<\/span>;\r\nimport<\/span> \"@esri\/calcite-components\/dist\/components\/calcite-icon\"<\/span>;\r\nimport<\/span> \"@esri\/calcite-components\/dist\/components\/calcite-slider\"<\/span>;\r\n\r\n\/\/ Version 2.x imports<\/span>\r\nimport<\/span> \"@esri\/calcite-components\/dist\/components\/calcite-button.js\"<\/span>;\r\nimport<\/span> \"@esri\/calcite-components\/dist\/components\/calcite-icon.js\"<\/span>;\r\nimport<\/span> \"@esri\/calcite-components\/dist\/components\/calcite-slider.js\"<\/span>;\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"Framework integration<\/h3>\n
true<\/code>\u00a0or\u00a0false<\/code>, replacing the previous workaround of using\u00a0true<\/code>\u00a0and\u00a0undefined<\/code>. To learn more, visit boolean attributes<\/a>\u00a0and explore the framework integration page<\/a> to integrate your apps with frameworks and build tools.<\/p>\n"},{"acf_fc_layout":"content","content":"Explore what’s new in 3.0<\/h2>\n