feat(action): make actions fill full width of parent by josercarcamo · Pull Request #12047 · Esri/calcite-design-system

josercarcamo · 2025-04-25T22:35:55Z

Related Issue: #7438

Summary

Make action fill full width of parent.

driskull · 2025-04-28T16:18:23Z

  private handleDefaultSlotChange(): void {
    this.updateGroups();
+    if (this.layout === "horizontal-fill") {
+      const actions = Array.from(this.el.querySelectorAll("calcite-action"));


can you use the queryActions() util here to get the actions? So it doesn't set the fullWidth on actions within action-menu?

There may need to be more work done here so that the alignment and fullWidth are removed when the action's slot is changed to be in the action-menu.

….com:Esri/calcite-design-system into josercarcamo/7438-horizontal-fill-action-bar

josercarcamo · 2025-04-29T15:30:18Z

@driskull please review again.

driskull

@josercarcamo I'm still not sold on whether we should be modifying the alignment property and whether or not we should be handling whether actions stretch or not. If we do handle when they stretch, we need to make sure that it doesn't affect actions inside a action-menu or that we remove the stretching when they are inside an action-menu. Same goes with alignment.

driskull · 2025-04-29T16:05:45Z


  private handleDefaultSlotChange(): void {
    this.updateGroups();
+    if (this.layout === "horizontal-fill") {


@josercarcamo I think this needs a little bit more work to handle when the layout changes. If the layout changes on the component, we should update the fullWidth property. Maybe something like:

a.fullWidth = this.layout === "horizontal-fill";

There should also be a way to update these when there are "changes" to layout. If a user switches from horizontal-fill to something else the actions should be updated.

driskull · 2025-04-29T16:06:44Z

+    if (this.layout === "horizontal-fill") {
+      const actions = queryActions(this.el);
+      actions.forEach((a) => {
+        a.alignment = "center";


@josercarcamo I think we should discuss with the team whether or not we should be setting the alignment here. alignment is a public property that a user may have already set on the action which we would be overriding here. I'm not sure we should be doing that.

driskull · 2025-04-29T16:09:16Z

+
+export const fullWidth = (): string => html`
+  <div style="display: flex; flex-flow: column;width: 800px; margin-block: 2rem;">
+    <calcite-action-bar layout="horizontal-fill" expanded>


@josercarcamo can you add a story where there are action-groups used as well?

<calcite-action-bar layout="horizontal-fill" expanded> <calcite-action-group> <calcite-action text="Add" icon="plus"> </calcite-action> <calcite-action text="Add" icon="plus"> </calcite-action> </calcite-action-group> <calcite-action-group> <calcite-action text="Add" icon="plus"> </calcite-action> <calcite-action text="Add" icon="plus"> </calcite-action> </calcite-action-group> </calcite-action-bar>

driskull · 2025-04-29T16:10:16Z

Can you add an e2e test to test that horizontal-fill action bar are setting actions to fullWidth of true?

driskull · 2025-04-29T16:13:43Z

+   *
+   * @private
+   */
+  @property({ reflect: true }) fullWidth = false;


I wonder if we should just make this a public property and have the user be in control of setting it? Thoughts? What if we just made it a public property like stretch or grow? @macandcheese thoughts?

driskull · 2025-05-05T17:00:22Z

+      const actions = queryActions(this.el);
+      actions.forEach((a) => {
+        a.alignment = "center";
+        a.fullWidth = true;


@josercarcamo maybe we just add a new public property width: "auto" | "full" on calcite-action and then the user is responsible for adding them? cc @jcfranco

I like this suggestion since it aligns with other button components. @macandcheese @ashetland WYDT?

I agree. We have width property on button which we could use auto or full and be alignment with that.

I think we would need some sort of follow up issue to add an event when actions are overflowed in or out so users could make adjustments to the actions when necessary.

Agree with all this.

cc @SkyeSeitz for visibility into related updates in the figma version of Action.

How should the vertical option look? Should the icons be centered, except the collapse button (including the collapse button)?

@josercarcamo Yeah I'm not sure on that one. Maybe we can hold off on vertically stretching since thats not part of the requirement. That would give time for design to think about it and time for someone to request it.

IF we did want to do it, I would assume it would just flex-grow the actions and look like this:

IF we did want to do it, I would assume it would just flex-grow the actions and look like this:

Not something we want to build in at this time.

How should the vertical option look? Should the icons be centered, except the collapse button (including the collapse button)?

This looks like the correct default behavior to me.

github-actions · 2025-05-16T02:09:05Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

josercarcamo · 2025-05-21T00:42:06Z

@driskull please review.

driskull

Looks good! Just a few comments 👍

driskull · 2025-05-21T16:18:01Z

      },
+      {
+        propertyName: "width",
+        defaultValue: "auto",


can you add a reflects test as well?

driskull · 2025-05-21T16:19:22Z

+   *
+   * @private
+   */
+  @property({ reflect: true }) width: "auto" | "full" = "auto";


Can you import and use the Width type from interfaces and extract only "auto" and "full"?

src/components/interfaces.ts

driskull · 2025-05-21T16:20:28Z

+  </style>
+  <div class="container">
+    <calcite-action-bar layout="horizontal">
+      <calcite-action text="Add" icon="plus" width="full"> </calcite-action>


Can you add at least one more full width action here just to improve the demo?

…lect test

driskull

👍 LGTM! 🎉

**Related Issue:** #7438 ## Summary Make action fill full width of parent.

🤖 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>

josercarcamo and others added 2 commits April 25, 2025 15:35

feat(action-bar, action): make actions fill full width of parent

f9ddf1a

Merge branch 'dev' into josercarcamo/7438-horizontal-fill-action-bar

0099cd6

github-actions Bot assigned josercarcamo Apr 25, 2025

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

josercarcamo added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 25, 2025

josercarcamo requested a review from driskull April 26, 2025 02:04

driskull requested changes Apr 28, 2025

View reviewed changes

josercarcamo and others added 3 commits April 29, 2025 07:36

Used queryActions util

aed0d95

Merge branch 'josercarcamo/7438-horizontal-fill-action-bar' of github…

d31240a

….com:Esri/calcite-design-system into josercarcamo/7438-horizontal-fill-action-bar

Merge branch 'dev' into josercarcamo/7438-horizontal-fill-action-bar

25bc5a5

josercarcamo 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 Apr 29, 2025

driskull requested changes Apr 29, 2025

View reviewed changes

driskull reviewed May 5, 2025

View reviewed changes

github-actions Bot added the Stale Issues or pull requests that have not had recent activity. label May 16, 2025

josercarcamo added 2 commits May 16, 2025 11:50

Undid changes to action-bar and action-group

98e9849

Further undoing of code

19052a7

github-actions Bot removed the Stale Issues or pull requests that have not had recent activity. label May 20, 2025

josercarcamo added 3 commits May 20, 2025 16:29

Added stretching ability to action only

3c82c25

Added full width actions story

d345d93

Merged dev

395c987

josercarcamo 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 May 21, 2025

josercarcamo changed the title ~~feat(action-bar, action): make actions fill full width of parent~~ feat(action): make actions fill full width of parent May 21, 2025

driskull requested changes May 21, 2025

View reviewed changes

Used Width from interfaces; added an action to the story; added a ref…

7bc3b9b

…lect test

josercarcamo removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 21, 2025

josercarcamo added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 21, 2025

Merge branch 'dev' into josercarcamo/7438-horizontal-fill-action-bar

4c71be9

driskull approved these changes May 21, 2025

View reviewed changes

josercarcamo 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 May 21, 2025

josercarcamo merged commit 680256f into dev May 21, 2025
14 checks passed

josercarcamo deleted the josercarcamo/7438-horizontal-fill-action-bar branch May 21, 2025 19:27

github-actions Bot added this to the 2025-06-24 - Jun Milestone milestone May 21, 2025

benelan pushed a commit that referenced this pull request Sep 16, 2025

feat(action): make actions fill full width of parent (#12047)

7b9dfd7

**Related Issue:** #7438 ## Summary Make action fill full width of parent.

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

geospatialem mentioned this pull request Feb 14, 2026

[Tree/Tree Item] Tree item with actions-end blocks tabbing order #13938

Open

5 tasks

Conversation

josercarcamo commented Apr 25, 2025

Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

josercarcamo commented Apr 29, 2025

Uh oh!

driskull left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 16, 2025

Uh oh!

josercarcamo commented May 21, 2025

Uh oh!

driskull left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

driskull left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants