feat(swatch, swatch-group): Add new components by macandcheese · Pull Request #12584 · Esri/calcite-design-system

macandcheese · 2025-07-25T17:06:32Z

Related Issue: #10288

Summary

Adds new public Swatch and Swatch Group components:

Allows for a variety of visual combinations and interaction modes.

Usage

<calcite-swatch-group label="demo-group-label" selection-mode="single">
  <calcite-swatch value="calcite swatch"></calcite-swatch>
  <calcite-swatch color="#ff0000" value="calcite swatch"></calcite-swatch>
  <calcite-swatch value="calcite swatch">
    <img src="_assets/images/pattern-2.png" slot="image" />
  </calcite-swatch>
  <calcite-swatch color="rgba(250,210,150,0.2)" value="calcite swatch">
    <img src="_assets/images/pattern-2.png" slot="image" />
  </calcite-swatch>
  <calcite-swatch value="calcite swatch">
    <img src="_assets/images/hatch-3.png" slot="image" />
  </calcite-swatch>
  <calcite-swatch selected color="rgba(25,25,25,0.1)" value="calcite swatch"></calcite-swatch>
  <calcite-swatch disabled color="#ddd" value="calcite swatch">
    <img src="_assets/images/hatch-3.png" slot="image" />
  </calcite-swatch>
  <calcite-swatch disabled color="#ff00ee" value="calcite swatch"> </calcite-swatch>
</calcite-swatch-group>

Notes:

Still WIP on a couple of tests
cc @jcfranco - this borrows the color logic and tests from existing Color Picker Swatch, please verify.
cc @ashetland - we'll need a couple design review rounds - the spacing / size / selection behavior are a bit off.
cc @Esri/calcite-pes - we'll need to open issues for the following tasks:
Creation of new doc pages for both components, with samples, accessibility behavior, and usage guidelines
Update Color Picker to use this new public component
Deprecate and eventually remove the private / undocumented Calcite Color Swatch component
Unblock any relevant issues

ashetland · 2025-07-28T22:54:00Z

We should probably add a with alpha test story too.

ashetland

Design looking fabulous 👨‍🎤

macandcheese · 2025-08-04T16:43:36Z

@geospatialem @driskull asking for re-review with Franco out - outstanding question seems to be the roving tab index set up - IMO it could be a follow up as this follows our current selectionMode component behavior - and perhaps needs a follow up for all selectionMode components to adjust their behavior (though - I do think adjusting it for just some of the values of this property seems a little strange?)

driskull · 2025-08-04T16:47:31Z

outstanding question seems to be the roving tab index set up - IMO it could be a follow up as this follows our current selectionMode component behavior

Yeah maybe once Franco is back we can discuss when a component should implement a roving index vs when it shouldn't.

driskull

🎉

@jcfranco

**Related Issue:** #10288 ## Summary Adds new public Swatch and Swatch Group components: <img width="276" height="102" alt="Screenshot 2025-07-30 at 12 17 59 PM" src="https://github.com/user-attachments/assets/2a223907-a489-4db7-8410-17fde84cfcf6" /> Allows for a variety of visual combinations and interaction modes. ### Usage ``` <calcite-swatch-group label="demo-group-label" selection-mode="single"> <calcite-swatch value="calcite swatch"></calcite-swatch> <calcite-swatch color="#ff0000" value="calcite swatch"></calcite-swatch> <calcite-swatch value="calcite swatch"> <img src="_assets/images/pattern-2.png" slot="image" /> </calcite-swatch> <calcite-swatch color="rgba(250,210,150,0.2)" value="calcite swatch"> <img src="_assets/images/pattern-2.png" slot="image" /> </calcite-swatch> <calcite-swatch value="calcite swatch"> <img src="_assets/images/hatch-3.png" slot="image" /> </calcite-swatch> <calcite-swatch selected color="rgba(25,25,25,0.1)" value="calcite swatch"></calcite-swatch> <calcite-swatch disabled color="#ddd" value="calcite swatch"> <img src="_assets/images/hatch-3.png" slot="image" /> </calcite-swatch> <calcite-swatch disabled color="#ff00ee" value="calcite swatch"> </calcite-swatch> </calcite-swatch-group> ``` Notes: - Still WIP on a couple of tests cc @jcfranco - this borrows the color logic and tests from existing Color Picker Swatch, please verify. cc @ashetland - we'll need a couple design review rounds - the spacing / size / selection behavior are a bit off. cc @Esri/calcite-pes - we'll need to open issues for the following tasks: - Creation of new doc pages for both components, with samples, accessibility behavior, and usage guidelines - Update Color Picker to use this new public component - Deprecate and eventually remove the private / undocumented Calcite Color Swatch component - Unblock any relevant issues

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.2.0</summary> ## [3.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.1.0...@esri/calcite-design-tokens@3.2.0) (2025-09-16) ### Features * **tokens:** Add foreground-highlight and update referenced core tokens ([#12266](#12266)) ([cf44406](cf44406)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) ### Bug Fixes * Remove breakpoint tokens from semantic output ([#12397](#12397)) ([0f22083](0f22083)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **tokens:** Update `--calcite-font-line-height-relative` to resolve as a valid value ([#12828](#12828)) ([458f99d](458f99d)) </details> <details><summary>@esri/calcite-tailwind-preset: 1.0.1</summary> ## [1.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.0.0...@esri/calcite-tailwind-preset@1.0.1) (2025-09-16) ### Bug Fixes * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * peerDependencies * @esri/calcite-design-tokens bumped from ^3.0.2-next.8 to ^3.2.0 </details> <details><summary>@esri/calcite-ui-icons: 4.3.0</summary> ## [4.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.2.0...@esri/calcite-ui-icons@4.3.0) (2025-09-16) ### Features * Add arrow left 10 and arrow right 10 ([#12541](#12541)) ([dec51d6](dec51d6)) * Add catalog and magic wand ([#12596](#12596)) ([67daada](67daada)) * Add content side by side right ([#12350](#12350)) ([95a1c0b](95a1c0b)) * Add dimensions centered ([#12483](#12483)) ([4c0876e](4c0876e)) * Add filled envelope icon ([#12654](#12654)) ([b2fb080](b2fb080)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * Add js-api icons ([#12435](#12435)) ([ca8aad1](ca8aad1)) * Add layer 3d ([#12819](#12819)) ([fb5db21](fb5db21)) * Add location local ([#12406](#12406)) ([0310075](0310075)) * Add person magnifying glass ([#12509](#12509)) ([99ee95a](99ee95a)) * Add rtl of list icons ([#12685](#12685)) ([1c95c2b](1c95c2b)) * Add select row icon ([#12768](#12768)) ([7f3b7a7](7f3b7a7)) * Add shopping-cart-f, shopping cart plus, carousel frames ([#12758](#12758)) ([370aaf0](370aaf0)) * Add spike, browser, tapestry and transfer icons ([#12251](#12251)) ([ad01162](ad01162)) * Add subheading icons ([#12303](#12303)) ([d965e4f](d965e4f)) * Added camera sensor icons ([#12738](#12738)) ([0a70c9f](0a70c9f)) * Added navigation icons ([#12323](#12323)) ([9e2bb42](9e2bb42)) * Schema report, video, classification, and advance drawing tools icons ([#12679](#12679)) ([7be3f5c](7be3f5c)) ### Bug Fixes * Select row icon ([#12793](#12793)) ([5b3788d](5b3788d)) * Tapestry icons ([#12315](#12315)) ([7fbedfc](7fbedfc)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.3</summary> ## [2.0.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.2...@esri/eslint-plugin-calcite-components@2.0.3) (2025-09-16) </details> <details><summary>@esri/calcite-components: 3.3.0</summary> ## [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.2.1...@esri/calcite-components@3.3.0) (2025-09-16) ### Features * **accordion-item:** Add content-start and content-end slots ([#12849](#12849)) ([67a9509](67a9509)) * **accordion-item:** Add headingLevel property ([#12240](#12240)) ([5f02b5c](5f02b5c)) * **accordion-item:** Add title to expand icon ([#12657](#12657)) ([e691a3a](e691a3a)) * **action:** Add type property ([#12624](#12624)) ([c9dd7d9](c9dd7d9)) * **action:** Make actions fill full width of parent ([#12047](#12047)) ([7b9dfd7](7b9dfd7)) * Add focus options support ([#12555](#12555)) ([58148cc](58148cc)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * **autocomplete-item:** Add `calciteAutocompleteItemSelect` event ([#12655](#12655)) ([61dcbfa](61dcbfa)) * **block, block-section, block-group:** Add scale property ([#12382](#12382)) ([28b9da8](28b9da8)) * **block:** Add --calcite-block-content-space css token ([#12704](#12704)) ([7f1167a](7f1167a)) * **button:** Add css property for shadow ([#12603](#12603)) ([12bfdae](12bfdae)) * **carousel:** Add component tokens ([#12474](#12474)) ([385a83b](385a83b)) * **checkbox:** Enhance component's interactivity states ([#12207](#12207)) ([f00e45b](f00e45b)) * **color-picker:** Add component tokens ([#12862](#12862)) ([5dffbf3](5dffbf3)) * **color-picker:** Support hiding color-field ([#12484](#12484)) ([c4e42b6](c4e42b6)) * **combobox:** Add `--calcite-combobox-divider-color` ([#12223](#12223)) ([9d5b55d](9d5b55d)) * **combobox:** Provide context when filtering and there are no matching results ([#12525](#12525)) ([e1b32b9](e1b32b9)) * **combobox:** Single-persist mode ignores clearDisabled ([#12757](#12757)) ([ce36c6c](ce36c6c)) * **date-picker, input-date-picker:** Add `calendars` property to support one month view in range ([#12479](#12479)) ([f5357c6](f5357c6)) * **dialog, modal, popover, sheet:** Add `setReturnFocus` to `focusTrapOptions` ([#12513](#12513)) ([50a371a](50a371a)) * **dialog, panel, flow-item:** Add `icon` and `iconFlipRtl` properties ([#12176](#12176)) ([e03222c](e03222c)) * **dialog:** Add component tokens ([#12553](#12553)) ([0088f2e](0088f2e)) * Emit `expanded`/`collapsed` end-state events for expandable components ([#12580](#12580)) ([e0e686b](e0e686b)) * **input-date-picker:** Add component tokens ([#11734](#11734)) ([a3c152a](a3c152a)) * **input-number, input-text:** Add center alignment ([#12695](#12695)) ([6e0739b](6e0739b)) * **input-text:** Add component tokens ([#12242](#12242)) ([9edff0c](9edff0c)) * **input-time-picker:** Add component tokens ([#12874](#12874)) ([5134270](5134270)) * **input:** Add title to clear button ([#12807](#12807)) ([6b160c0](6b160c0)) * **label:** Add new layout "block" ([#12552](#12552)) ([66c4b7b](66c4b7b)) * **list, block-group, sort-handle:** Add sortDisabled property to prevent reordering ([#12615](#12615)) ([2a41b0f](2a41b0f)) * **list, block-group, sort-handle:** Add support for cloning dragged items ([#12628](#12628)) ([2f0246a](2f0246a)) * Make version console message easier to disable ([#12194](#12194)) ([b2f8ddf](b2f8ddf)) * **panel:** Add `collapseDirection` as public property ([#12813](#12813)) ([9675814](9675814)) * **popover:** Add token for specifying the max width ([#12516](#12516)) ([bb8dac9](bb8dac9)) * **radio-button:** Enhance component's interactivity states ([#12169](#12169)) ([5999bac](5999bac)) * **select:** Add component tokens ([#12812](#12812)) ([25de1ca](25de1ca)) * **split-button:** Add component tokens ([#12756](#12756)) ([82f107e](82f107e)) * **stepper-item:** Improve single selection icon color ([#12436](#12436)) ([c2c6037](c2c6037)) * **swatch, swatch-group:** Add new components ([#12584](#12584)) ([6d6d3d1](6d6d3d1)) * **swatch:** Use label for visual title ([#12841](#12841)) ([7dbbc91](7dbbc91)) * **table, table-row, table-header, table-cell:** Add component tokens ([#11770](#11770)) ([8a0168c](8a0168c)) * **time-picker:** Apply consistent styling for floating elements ([#12467](#12467)) ([c1d13ba](c1d13ba)) * **time-picker:** Apply rounded corners inside popover ([#12502](#12502)) ([3ad12dd](3ad12dd)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * **tooltip:** Add css custom property for setting max size ([#12865](#12865)) ([83911fc](83911fc)) ### Bug Fixes * **accordion-item:** Fix font size for headingLevel property ([#12269](#12269)) ([448880d](448880d)) * **action-menu:** Ensure children are ready before setting a11y attributes ([#12533](#12533)) ([1f83000](1f83000)) * **action:** Fix applied tokens when active ([#12686](#12686)) ([d58901e](d58901e)) * **autocomplete:** Announce result to screen readers using aria-live attribute ([#12443](#12443)) ([0988e98](0988e98)) * **block:** Allow customizing heading text color when expanded & deprecate tokens ([#12777](#12777)) ([98b4348](98b4348)) * **block:** Icon-end aligns with header container when collapsible is false ([#12784](#12784)) ([4565b90](4565b90)) * **block:** No longer renders an empty header ([#12801](#12801)) ([9904507](9904507)) * **card:** Ensure `setFocus` focuses card when it contains nested interactive children ([#12724](#12724)) ([2fbcd99](2fbcd99)) * **chip:** Adjust interactivity states enhancements ([#12329](#12329)) ([608c006](608c006)) * **color-picker:** Adjust component spacing ([#12767](#12767)) ([4325d8b](4325d8b)) * **color-picker:** Ensure channel values are rounded ([#12239](#12239)) ([ba4e470](ba4e470)) * **combobox:** Adjust padding for no-matches context ([#12781](#12781)) ([e309828](e309828)) * **date-picker:** Honor `minAsDate` & `maxAsDate` when set ([#12706](#12706)) ([de8afed](de8afed)) * **date-picker:** Improve color contrast for days ([#12705](#12705)) ([0930c30](0930c30)) * **dialog, flow-item, panel:** Fix `iconFlipRtl` not working in RTL contexts ([#12668](#12668)) ([b2c22c9](b2c22c9)) * **dialog:** Ensure beforeClose is called once and fix animation on dialog ([#12152](#12152)) ([0898b7c](0898b7c)) * **dialog:** Fix for corner radius token ([#12859](#12859)) ([ee05c4d](ee05c4d)) * **dialog:** Restrict resizing once minimum size has been reached ([#12175](#12175)) ([cd03d14](cd03d14)) * Emit `beforeOpen` and `beforeClose` immediately on toggle ([#11965](#11965)) ([5955929](5955929)) * Ensure initial transitions are applied consistently ([#12392](#12392)) ([a82aeb2](a82aeb2)) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **input-date-picker:** Announces the purpose of each input in the range mode ([#12238](#12238)) ([c64169e](c64169e)) * **input-date-picker:** No longer close when non-interactive areas are clicked in Safari ([#12139](#12139)) ([69016b1](69016b1)) * **input-date-picker:** Update start & end date correctly when `proximity-selection-disabled` is true ([#12681](#12681)) ([67336ab](67336ab)) * **input-number:** Add token to customize icon color ([#12414](#12414)) ([63c68b8](63c68b8)) * **input-time-picker:** Add label property ([#12276](#12276)) ([2e06dd1](2e06dd1)) * **input-time-picker:** Apply aria-label and aria-controls attributes correctly to support NVDA and JAWS ([#12312](#12312)) ([ffd0cd7](ffd0cd7)) * **input-time-zone:** Address code review comments ([#12293](#12293)) ([c86df52](c86df52)) * **input-time-zone:** Display 'city, country' when control closed and value set programatically ([#12252](#12252)) ([684062e](684062e)) * **input-time-zone:** Fix selected time zone label flicker and scroll delay for region mode ([#12384](#12384)) ([f0b67f4](f0b67f4)) * **input, input-number, input-text:** Ensure overlay does not obscure input icon ([#12716](#12716)) ([926826f](926826f)) * **input, input-number, input-text:** Stretch the height of slot container to match with component ([#12339](#12339)) ([3d24364](3d24364)) * **input:** Do not obscure picker button with type=datetime-local ([#12081](#12081)) ([db4bd12](db4bd12)) * **link:** Emit click event on enter key when the component doesn't have href defined ([#12191](#12191)) ([409915c](409915c)) * **list, block-group:** Emit calciteListOrderChange on destination when adding or moving from the menu ([#12799](#12799)) ([916f081](916f081)) * **list, block-group:** Fix canPull when cloning and "Add to" menu on block-group ([#12741](#12741)) ([78b15e2](78b15e2)) * **list, block-group:** Sort handle menu should respond to new lists or label changes ([#12848](#12848)) ([df453bb](df453bb)) * **list, block-group:** Update menu item labels and call `canPut` / `canPull` to filter items before opening a sort handle menu ([#12487](#12487)) ([9c9ff9c](9c9ff9c)) * **list, block-group:** Update sort handle move items before dropdown menu is opened ([#12722](#12722)) ([298a7f1](298a7f1)) * **list:** Added scrim for empty list ([#12595](#12595)) ([7a5cc96](7a5cc96)) * **list:** Fix visual artifacts when you initiate a drag operation with the drag handle menu open ([#12611](#12611)) ([b317e50](b317e50)) * **list:** Prevent drag flickering while sorting ([#12631](#12631)) ([accef27](accef27)) * Map `bs` locale to `sr-Latn-CS` ([#12566](#12566)) ([298a7ba](298a7ba)) * **pagination:** Prevent invalid start-item and set default to 1 ([#12557](#12557)) ([494e33f](494e33f)) * **pagination:** Restore original default value for totalItems ([#12569](#12569)) ([e65b461](e65b461)) * **panel:** Alert slot should not take up any height ([#12802](#12802)) ([c51b968](c51b968)) * **panel:** Prevent child panels from closing parent panels ([#12646](#12646)) ([15da3ce](15da3ce)) * **popover, tooltip:** Do not close when a click was initiated inside the component ([#12543](#12543)) ([a35e96a](a35e96a)) * **popover, tooltip:** Open when there is selected text on the page ([#12597](#12597)) ([4274d65](4274d65)) * **radio-button:** Fix navigation with disabled buttons ([#12514](#12514)) ([d1b1ccb](d1b1ccb)) * **segmented-control:** Avoid changing focus from programmatic item selection ([#12181](#12181)) ([e3be05e](e3be05e)) * **select:** Fix error thrown when component is removed before initialization ([#12630](#12630)) ([ec661db](ec661db)) * **shell-center-row:** Fix rendering tied to named-slot content ([#10451](#10451)) ([5b15a02](5b15a02)) * **shell-panel:** Allow content to extend the full height of the panel ([#12860](#12860)) ([52bed19](52bed19)) * **shell-panel:** Restore resized size after expanding ([#12691](#12691)) ([0779250](0779250)) * **slider:** Allow range handle dragging in either direction when both handles share the same position ([#12527](#12527)) ([d9c7bfa](d9c7bfa)) * **slider:** Remove fill color when dragged handle is released and no longer has focus ([#12511](#12511)) ([5db048f](5db048f)) * **stepper-item:** Remove margin when slotted content is empty ([#12298](#12298)) ([6b1d099](6b1d099)) * **stepper:** Disallow navigation to disabled items ([#12217](#12217)) ([cbe160f](cbe160f)) * **swatch:** Ensure corner radius css property is correctly applied ([#12855](#12855)) ([50405aa](50405aa)) * **title:** Apply alignment on slotted content ([#12451](#12451)) ([93b470a](93b470a)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) ### Deprecations * **combobox:** Remove `--calcite-combobox-item-border-color` ([9d5b55d](9d5b55d)) * **label:** Deprecate `"default"` layout value. ([66c4b7b](66c4b7b)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.3.0-next.23 to 4.3.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * @esri/calcite-tailwind-preset bumped from 1.0.1-next.18 to 1.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.3-next.5 to 2.0.3 </details> <details><summary>@esri/calcite-components-react: 3.3.0</summary> ## [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.2.1...@esri/calcite-components-react@3.3.0) (2025-09-16) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.3.0-next.111 to 3.3.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.2.0</summary> [3.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.1.0...@esri/calcite-design-tokens@3.2.0) (2025-09-16) * **tokens:** Add foreground-highlight and update referenced core tokens ([#12266](#12266)) ([cf44406](cf44406)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * Remove breakpoint tokens from semantic output ([#12397](#12397)) ([0f22083](0f22083)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **tokens:** Update `--calcite-font-line-height-relative` to resolve as a valid value ([#12828](#12828)) ([458f99d](458f99d)) </details> <details><summary>@esri/calcite-tailwind-preset: 1.0.1</summary> [1.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.0.0...@esri/calcite-tailwind-preset@1.0.1) (2025-09-16) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * The following workspace dependencies were updated * dependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * peerDependencies * @esri/calcite-design-tokens bumped from ^3.0.2-next.8 to ^3.2.0 </details> <details><summary>@esri/calcite-ui-icons: 4.3.0</summary> [4.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.2.0...@esri/calcite-ui-icons@4.3.0) (2025-09-16) * Add arrow left 10 and arrow right 10 ([#12541](#12541)) ([dec51d6](dec51d6)) * Add catalog and magic wand ([#12596](#12596)) ([67daada](67daada)) * Add content side by side right ([#12350](#12350)) ([95a1c0b](95a1c0b)) * Add dimensions centered ([#12483](#12483)) ([4c0876e](4c0876e)) * Add filled envelope icon ([#12654](#12654)) ([b2fb080](b2fb080)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * Add js-api icons ([#12435](#12435)) ([ca8aad1](ca8aad1)) * Add layer 3d ([#12819](#12819)) ([fb5db21](fb5db21)) * Add location local ([#12406](#12406)) ([0310075](0310075)) * Add person magnifying glass ([#12509](#12509)) ([99ee95a](99ee95a)) * Add rtl of list icons ([#12685](#12685)) ([1c95c2b](1c95c2b)) * Add select row icon ([#12768](#12768)) ([7f3b7a7](7f3b7a7)) * Add shopping-cart-f, shopping cart plus, carousel frames ([#12758](#12758)) ([370aaf0](370aaf0)) * Add spike, browser, tapestry and transfer icons ([#12251](#12251)) ([ad01162](ad01162)) * Add subheading icons ([#12303](#12303)) ([d965e4f](d965e4f)) * Added camera sensor icons ([#12738](#12738)) ([0a70c9f](0a70c9f)) * Added navigation icons ([#12323](#12323)) ([9e2bb42](9e2bb42)) * Schema report, video, classification, and advance drawing tools icons ([#12679](#12679)) ([7be3f5c](7be3f5c)) * Select row icon ([#12793](#12793)) ([5b3788d](5b3788d)) * Tapestry icons ([#12315](#12315)) ([7fbedfc](7fbedfc)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.3</summary> [2.0.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.2...@esri/eslint-plugin-calcite-components@2.0.3) (2025-09-16) </details> <details><summary>@esri/calcite-components: 3.3.0</summary> [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.2.1...@esri/calcite-components@3.3.0) (2025-09-16) * **accordion-item:** Add content-start and content-end slots ([#12849](#12849)) ([67a9509](67a9509)) * **accordion-item:** Add headingLevel property ([#12240](#12240)) ([5f02b5c](5f02b5c)) * **accordion-item:** Add title to expand icon ([#12657](#12657)) ([e691a3a](e691a3a)) * **action:** Add type property ([#12624](#12624)) ([c9dd7d9](c9dd7d9)) * **action:** Make actions fill full width of parent ([#12047](#12047)) ([7b9dfd7](7b9dfd7)) * Add focus options support ([#12555](#12555)) ([58148cc](58148cc)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * **autocomplete-item:** Add `calciteAutocompleteItemSelect` event ([#12655](#12655)) ([61dcbfa](61dcbfa)) * **block, block-section, block-group:** Add scale property ([#12382](#12382)) ([28b9da8](28b9da8)) * **block:** Add --calcite-block-content-space css token ([#12704](#12704)) ([7f1167a](7f1167a)) * **button:** Add css property for shadow ([#12603](#12603)) ([12bfdae](12bfdae)) * **carousel:** Add component tokens ([#12474](#12474)) ([385a83b](385a83b)) * **checkbox:** Enhance component's interactivity states ([#12207](#12207)) ([f00e45b](f00e45b)) * **color-picker:** Add component tokens ([#12862](#12862)) ([5dffbf3](5dffbf3)) * **color-picker:** Support hiding color-field ([#12484](#12484)) ([c4e42b6](c4e42b6)) * **combobox:** Add `--calcite-combobox-divider-color` ([#12223](#12223)) ([9d5b55d](9d5b55d)) * **combobox:** Provide context when filtering and there are no matching results ([#12525](#12525)) ([e1b32b9](e1b32b9)) * **combobox:** Single-persist mode ignores clearDisabled ([#12757](#12757)) ([ce36c6c](ce36c6c)) * **date-picker, input-date-picker:** Add `calendars` property to support one month view in range ([#12479](#12479)) ([f5357c6](f5357c6)) * **dialog, modal, popover, sheet:** Add `setReturnFocus` to `focusTrapOptions` ([#12513](#12513)) ([50a371a](50a371a)) * **dialog, panel, flow-item:** Add `icon` and `iconFlipRtl` properties ([#12176](#12176)) ([e03222c](e03222c)) * **dialog:** Add component tokens ([#12553](#12553)) ([0088f2e](0088f2e)) * Emit `expanded`/`collapsed` end-state events for expandable components ([#12580](#12580)) ([e0e686b](e0e686b)) * **input-date-picker:** Add component tokens ([#11734](#11734)) ([a3c152a](a3c152a)) * **input-number, input-text:** Add center alignment ([#12695](#12695)) ([6e0739b](6e0739b)) * **input-text:** Add component tokens ([#12242](#12242)) ([9edff0c](9edff0c)) * **input-time-picker:** Add component tokens ([#12874](#12874)) ([5134270](5134270)) * **input:** Add title to clear button ([#12807](#12807)) ([6b160c0](6b160c0)) * **label:** Add new layout "block" ([#12552](#12552)) ([66c4b7b](66c4b7b)) * **list, block-group, sort-handle:** Add sortDisabled property to prevent reordering ([#12615](#12615)) ([2a41b0f](2a41b0f)) * **list, block-group, sort-handle:** Add support for cloning dragged items ([#12628](#12628)) ([2f0246a](2f0246a)) * Make version console message easier to disable ([#12194](#12194)) ([b2f8ddf](b2f8ddf)) * **panel:** Add `collapseDirection` as public property ([#12813](#12813)) ([9675814](9675814)) * **popover:** Add token for specifying the max width ([#12516](#12516)) ([bb8dac9](bb8dac9)) * **radio-button:** Enhance component's interactivity states ([#12169](#12169)) ([5999bac](5999bac)) * **select:** Add component tokens ([#12812](#12812)) ([25de1ca](25de1ca)) * **split-button:** Add component tokens ([#12756](#12756)) ([82f107e](82f107e)) * **stepper-item:** Improve single selection icon color ([#12436](#12436)) ([c2c6037](c2c6037)) * **swatch, swatch-group:** Add new components ([#12584](#12584)) ([6d6d3d1](6d6d3d1)) * **swatch:** Use label for visual title ([#12841](#12841)) ([7dbbc91](7dbbc91)) * **table, table-row, table-header, table-cell:** Add component tokens ([#11770](#11770)) ([8a0168c](8a0168c)) * **time-picker:** Apply consistent styling for floating elements ([#12467](#12467)) ([c1d13ba](c1d13ba)) * **time-picker:** Apply rounded corners inside popover ([#12502](#12502)) ([3ad12dd](3ad12dd)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * **tooltip:** Add css custom property for setting max size ([#12865](#12865)) ([83911fc](83911fc)) * **accordion-item:** Fix font size for headingLevel property ([#12269](#12269)) ([448880d](448880d)) * **action-menu:** Ensure children are ready before setting a11y attributes ([#12533](#12533)) ([1f83000](1f83000)) * **action:** Fix applied tokens when active ([#12686](#12686)) ([d58901e](d58901e)) * **autocomplete:** Announce result to screen readers using aria-live attribute ([#12443](#12443)) ([0988e98](0988e98)) * **block:** Allow customizing heading text color when expanded & deprecate tokens ([#12777](#12777)) ([98b4348](98b4348)) * **block:** Icon-end aligns with header container when collapsible is false ([#12784](#12784)) ([4565b90](4565b90)) * **block:** No longer renders an empty header ([#12801](#12801)) ([9904507](9904507)) * **card:** Ensure `setFocus` focuses card when it contains nested interactive children ([#12724](#12724)) ([2fbcd99](2fbcd99)) * **chip:** Adjust interactivity states enhancements ([#12329](#12329)) ([608c006](608c006)) * **color-picker:** Adjust component spacing ([#12767](#12767)) ([4325d8b](4325d8b)) * **color-picker:** Ensure channel values are rounded ([#12239](#12239)) ([ba4e470](ba4e470)) * **combobox:** Adjust padding for no-matches context ([#12781](#12781)) ([e309828](e309828)) * **date-picker:** Honor `minAsDate` & `maxAsDate` when set ([#12706](#12706)) ([de8afed](de8afed)) * **date-picker:** Improve color contrast for days ([#12705](#12705)) ([0930c30](0930c30)) * **dialog, flow-item, panel:** Fix `iconFlipRtl` not working in RTL contexts ([#12668](#12668)) ([b2c22c9](b2c22c9)) * **dialog:** Ensure beforeClose is called once and fix animation on dialog ([#12152](#12152)) ([0898b7c](0898b7c)) * **dialog:** Fix for corner radius token ([#12859](#12859)) ([ee05c4d](ee05c4d)) * **dialog:** Restrict resizing once minimum size has been reached ([#12175](#12175)) ([cd03d14](cd03d14)) * Emit `beforeOpen` and `beforeClose` immediately on toggle ([#11965](#11965)) ([5955929](5955929)) * Ensure initial transitions are applied consistently ([#12392](#12392)) ([a82aeb2](a82aeb2)) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **input-date-picker:** Announces the purpose of each input in the range mode ([#12238](#12238)) ([c64169e](c64169e)) * **input-date-picker:** No longer close when non-interactive areas are clicked in Safari ([#12139](#12139)) ([69016b1](69016b1)) * **input-date-picker:** Update start & end date correctly when `proximity-selection-disabled` is true ([#12681](#12681)) ([67336ab](67336ab)) * **input-number:** Add token to customize icon color ([#12414](#12414)) ([63c68b8](63c68b8)) * **input-time-picker:** Add label property ([#12276](#12276)) ([2e06dd1](2e06dd1)) * **input-time-picker:** Apply aria-label and aria-controls attributes correctly to support NVDA and JAWS ([#12312](#12312)) ([ffd0cd7](ffd0cd7)) * **input-time-zone:** Address code review comments ([#12293](#12293)) ([c86df52](c86df52)) * **input-time-zone:** Display 'city, country' when control closed and value set programatically ([#12252](#12252)) ([684062e](684062e)) * **input-time-zone:** Fix selected time zone label flicker and scroll delay for region mode ([#12384](#12384)) ([f0b67f4](f0b67f4)) * **input, input-number, input-text:** Ensure overlay does not obscure input icon ([#12716](#12716)) ([926826f](926826f)) * **input, input-number, input-text:** Stretch the height of slot container to match with component ([#12339](#12339)) ([3d24364](3d24364)) * **input:** Do not obscure picker button with type=datetime-local ([#12081](#12081)) ([db4bd12](db4bd12)) * **link:** Emit click event on enter key when the component doesn't have href defined ([#12191](#12191)) ([409915c](409915c)) * **list, block-group:** Emit calciteListOrderChange on destination when adding or moving from the menu ([#12799](#12799)) ([916f081](916f081)) * **list, block-group:** Fix canPull when cloning and "Add to" menu on block-group ([#12741](#12741)) ([78b15e2](78b15e2)) * **list, block-group:** Sort handle menu should respond to new lists or label changes ([#12848](#12848)) ([df453bb](df453bb)) * **list, block-group:** Update menu item labels and call `canPut` / `canPull` to filter items before opening a sort handle menu ([#12487](#12487)) ([9c9ff9c](9c9ff9c)) * **list, block-group:** Update sort handle move items before dropdown menu is opened ([#12722](#12722)) ([298a7f1](298a7f1)) * **list:** Added scrim for empty list ([#12595](#12595)) ([7a5cc96](7a5cc96)) * **list:** Fix visual artifacts when you initiate a drag operation with the drag handle menu open ([#12611](#12611)) ([b317e50](b317e50)) * **list:** Prevent drag flickering while sorting ([#12631](#12631)) ([accef27](accef27)) * Map `bs` locale to `sr-Latn-CS` ([#12566](#12566)) ([298a7ba](298a7ba)) * **pagination:** Prevent invalid start-item and set default to 1 ([#12557](#12557)) ([494e33f](494e33f)) * **pagination:** Restore original default value for totalItems ([#12569](#12569)) ([e65b461](e65b461)) * **panel:** Alert slot should not take up any height ([#12802](#12802)) ([c51b968](c51b968)) * **panel:** Prevent child panels from closing parent panels ([#12646](#12646)) ([15da3ce](15da3ce)) * **popover, tooltip:** Do not close when a click was initiated inside the component ([#12543](#12543)) ([a35e96a](a35e96a)) * **popover, tooltip:** Open when there is selected text on the page ([#12597](#12597)) ([4274d65](4274d65)) * **radio-button:** Fix navigation with disabled buttons ([#12514](#12514)) ([d1b1ccb](d1b1ccb)) * **segmented-control:** Avoid changing focus from programmatic item selection ([#12181](#12181)) ([e3be05e](e3be05e)) * **select:** Fix error thrown when component is removed before initialization ([#12630](#12630)) ([ec661db](ec661db)) * **shell-center-row:** Fix rendering tied to named-slot content ([#10451](#10451)) ([5b15a02](5b15a02)) * **shell-panel:** Allow content to extend the full height of the panel ([#12860](#12860)) ([52bed19](52bed19)) * **shell-panel:** Restore resized size after expanding ([#12691](#12691)) ([0779250](0779250)) * **slider:** Allow range handle dragging in either direction when both handles share the same position ([#12527](#12527)) ([d9c7bfa](d9c7bfa)) * **slider:** Remove fill color when dragged handle is released and no longer has focus ([#12511](#12511)) ([5db048f](5db048f)) * **stepper-item:** Remove margin when slotted content is empty ([#12298](#12298)) ([6b1d099](6b1d099)) * **stepper:** Disallow navigation to disabled items ([#12217](#12217)) ([cbe160f](cbe160f)) * **swatch:** Ensure corner radius css property is correctly applied ([#12855](#12855)) ([50405aa](50405aa)) * **title:** Apply alignment on slotted content ([#12451](#12451)) ([93b470a](93b470a)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **combobox:** Remove `--calcite-combobox-item-border-color` ([9d5b55d](9d5b55d)) * **label:** Deprecate `"default"` layout value. ([66c4b7b](66c4b7b)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.3.0-next.23 to 4.3.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * @esri/calcite-tailwind-preset bumped from 1.0.1-next.18 to 1.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.3-next.5 to 2.0.3 </details> <details><summary>@esri/calcite-components-react: 3.3.0</summary> [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.2.1...@esri/calcite-components-react@3.3.0) (2025-09-16) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.3.0-next.111 to 3.3.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

feat(swatch, swatch-group): Add new components

31bd7c5

github-actions Bot assigned macandcheese Jul 25, 2025

github-actions Bot added the enhancement Issues tied to a new feature or request. label Jul 25, 2025

macandcheese added new component Issues tied to a new component. pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed enhancement Issues tied to a new feature or request. labels Jul 25, 2025

macandcheese added 2 commits July 25, 2025 12:54

Clean up

e27837c

Merge branch 'dev' into macandcheese/swatch-group

91a2fe7

github-actions Bot added the enhancement Issues tied to a new feature or request. label Jul 25, 2025

macandcheese added 4 commits July 25, 2025 13:17

Clean up

420299e

Clean up

3cc69df

Merge branch 'dev' into macandcheese/swatch-group

368a05f

Clean up

32bff39

macandcheese marked this pull request as ready for review July 28, 2025 22:17

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 28, 2025

macandcheese requested review from ashetland, driskull and jcfranco July 28, 2025 22:20

macandcheese added 2 commits July 28, 2025 15:26

Clean up

cc2ee82

Clean up

78b60e7

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 28, 2025

ashetland requested changes Jul 28, 2025

View reviewed changes

Clean up

a11a72b

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 28, 2025

Clean up

2713571

macandcheese removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 29, 2025

macandcheese added 2 commits July 30, 2025 16:53

Pr feedback

40c0edc

Pr feedback

fdc6c9c

geospatialem mentioned this pull request Jul 31, 2025

[Refactor] Update value and valueAsDate across design system typing #12620

Open

29 tasks

Clean up

82369d6

ashetland approved these changes Jul 31, 2025

View reviewed changes

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 31, 2025

Story fix

2e822b9

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 31, 2025

macandcheese requested review from driskull and geospatialem August 4, 2025 16:42

driskull approved these changes Aug 4, 2025

View reviewed changes

Comment thread packages/calcite-components/src/components/swatch-group/swatch-group.tsx Outdated

Comment thread packages/calcite-components/src/components/swatch/swatch.tsx Outdated

Comment thread packages/calcite-components/src/components/swatch/swatch.tsx Outdated

macandcheese added 5 commits August 4, 2025 14:50

Merge branch 'dev' into macandcheese/swatch-group

6d37cd0

Pr feedback

e434374

Pr feedback

f64d698

Merge branch 'dev' into macandcheese/swatch-group

28bf513

Merge branch 'dev' into macandcheese/swatch-group

2d98a8b

macandcheese merged commit 0abc287 into dev Aug 5, 2025
9 checks passed

macandcheese deleted the macandcheese/swatch-group branch August 5, 2025 00:33

github-actions Bot added this to the 2025-08-26 - Aug Milestone milestone Aug 5, 2025

This was referenced Aug 20, 2025

[Color Picker] Update to use Swatch Group + Swatch components #12733

Closed

[Color Picker Swatch] Deprecate private component #12734

Closed

calcite-admin mentioned this pull request Sep 16, 2025

chore: release main #12887

Merged

benelan mentioned this pull request Sep 18, 2025

chore: release main (#12887) #12912

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(swatch, swatch-group): Add new components#12584

feat(swatch, swatch-group): Add new components#12584
macandcheese merged 35 commits intodevfrom
macandcheese/swatch-group

macandcheese commented Jul 25, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ashetland commented Jul 28, 2025

Uh oh!

ashetland left a comment

Uh oh!

macandcheese commented Aug 4, 2025

Uh oh!

driskull commented Aug 4, 2025

Uh oh!

driskull left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

macandcheese commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Usage

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ashetland commented Jul 28, 2025

Uh oh!

ashetland left a comment

Choose a reason for hiding this comment

Uh oh!

macandcheese commented Aug 4, 2025

Uh oh!

driskull commented Aug 4, 2025

Uh oh!

driskull left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

macandcheese commented Jul 25, 2025 •

edited

Loading