feat(split-button): make downloadable and linkable by josercarcamo · Pull Request #11520 · Esri/calcite-design-system

josercarcamo · 2025-02-11T21:35:38Z

Related Issue: #9126

Summary

Implemented ability to make the primary part of a split button into a downloadable link or an href link.

jcfranco

🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗
🔗⏯️🔗🔗🔗⏯️🔗🔗⏯️⏯️🔗🔗⏯️⏯️⏯️🔗🔗⏯️⏯️⏯️🔗⏯️⏯️⏯️⏯️🔗⏯️🔗
🔗⏯️⏯️🔗🔗⏯️🔗⏯️🔗🔗⏯️🔗🔗⏯️🔗🔗⏯️🔗🔗🔗🔗⏯️🔗🔗🔗🔗⏯️🔗
🔗⏯️🔗⏯️🔗⏯️🔗⏯️🔗🔗⏯️🔗🔗⏯️🔗🔗⏯️🔗🔗🔗🔗⏯️⏯️⏯️🔗🔗⏯️🔗
🔗⏯️🔗🔗⏯️⏯️🔗⏯️🔗🔗⏯️🔗🔗⏯️🔗🔗⏯️🔗🔗🔗🔗⏯️🔗🔗🔗🔗🔗🔗
🔗⏯️🔗🔗🔗⏯️🔗🔗⏯️⏯️🔗🔗⏯️⏯️⏯️🔗🔗⏯️⏯️⏯️🔗⏯️⏯️⏯️⏯️🔗⏯️🔗
🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗🔗

Once comments are addressed, this should be good to merge!

jcfranco · 2025-02-11T22:46:43Z

        propertyName: "placement",
        defaultValue: "bottom-end",
      },
+      {


Awesome! Can you also add reflects tests for these new props?

jcfranco · 2025-02-11T22:50:40Z


 export const loadingAndDisabled_TestOnly = (): string => html`<calcite-button loading disabled>Test</calcite-button>`;
+
+export const primaryAsALink_TestOnly = (): string =>


Can you remove the _TestOnly suffixes? These were required at some point, but aren't anymore. We'll be updating story names with #9085, but omitting them now avoids the screenshot test diff the rename will produce.

jcfranco · 2025-02-11T22:52:14Z

+    const page = await newE2EPage();
+    await page.setContent(`<calcite-split-button href="/">Continue</calcite-split-button>`);
+
+    const elementAsLink = await page.find("calcite-split-button >>> a");


Suggestion: Since this relies on calcite-button’s internal implementation, the test could be simplified to assert that the internal button receives the expected props. This also avoids coupling to its implementation details.

jcfranco · 2025-02-11T23:12:25Z

Looking at the title and implementation, I think this could use the feat commit type (PR title).

Also, minor suggestion for consistency: make downloadable and linkable or add support for downloads and links?

jcfranco · 2025-02-11T23:13:50Z

@ashetland @SkyeSeitz Can you take a look at the new screenshots? This is pretty similar to button, so there shouldn't be any surprises.

ashetland · 2025-02-12T00:14:07Z

Looks good to me! Super nitpick: should the new stories be at medium scale like the rest of them? Truly hesitated to even ask this one 🤣.

**Related Issue:** #9126 ## Summary Implemented ability to make the primary part of a split button into a downloadable link or an href link.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.0.1</summary> ## [3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.0.0...@esri/calcite-design-tokens@3.0.1) (2025-03-26) ### Bug Fixes * Allow global focus color token to inherit fallback value ([#11711](#11711)) ([a732c8d](a732c8d)) </details> <details><summary>@esri/calcite-ui-icons: 4.1.0</summary> ## [4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.0.0...@esri/calcite-ui-icons@4.1.0) (2025-03-26) ### Features * Add browser join and browser plus ([#11779](#11779)) ([8f69b2d](8f69b2d)) * Update check ([#11799](#11799)) ([5058939](5058939)) * Add language-2 ([#11739](#11739)) ([989df67](989df67)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.1</summary> ## [2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.0...@esri/eslint-plugin-calcite-components@2.0.1) (2025-03-26) **Note:** Version bump only for package @esri/eslint-plugin-calcite-components </details> <details><summary>@esri/calcite-components: 3.1.0</summary> ## [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.0.3...@esri/calcite-components@3.1.0) (2025-03-26) ### Features * **accordion:** Add new component tokens and deprecate old tokens ([#11390](#11390)) ([fdf3e61](fdf3e61)) * **action:** Enhance component's interactivity states ([#11478](#11478)) ([aad98df](aad98df)) * **block, block-section:** Add `expanded` property and deprecate `open` property ([#11582](#11582)) ([999f532](999f532)) * **button:** Enhance component's interactivity states ([#11590](#11590)) ([23a62ca](23a62ca)) * **chip:** Deprecate `pressed` in favor of `press` ([#11389](#11389)) ([c905f9f](c905f9f)) * **chip:** Enhance component's interactivity states ([#11538](#11538)) ([8db5697](8db5697)) * **combobox-item:** Add component tokens ([#11645](#11645)) ([9cbd155](9cbd155)) * **combobox-item:** Update idle icons ([#11801](#11801)) ([034f430](034f430)) * **combobox-item:** Update interactive state ([#11647](#11647)) ([19d7c43](19d7c43)) * **combobox-item:** Update selection icons ([#11726](#11726)) ([723fd22](723fd22)) * **combobox, combobox-item-group:** Add component tokens ([#11623](#11623)) ([8215314](8215314)) * **dropdown, dropdown-item, dropdown-group:** Add component tokens ([#11465](#11465)) ([85f9378](85f9378)) * **dropdown:** Add `offsetDistance` and `offsetSkidding` properties ([#11614](#11614)) ([3381040](3381040)) * **fab:** Add component tokens ([#11723](#11723)) ([d436514](d436514)) * **flow-item:** Expose `FlowItemLike` type ([#11791](#11791)) ([28c7522](28c7522)) * **list-item, list:** Add `expanded` property and deprecate `open` property ([#11003](#11003)) ([c80c44c](c80c44c)) * **rating:** Enhance component's interactivity states ([#11469](#11469)) ([11d83f6](11d83f6)) * **segmented-control-item:** Enhance component's interactivity states ([#11477](#11477)) ([f025330](f025330)) * **split-button:** Make downloadable and linkable ([#11520](#11520)) ([fb3e1dc](fb3e1dc)) * **tab-title:** Enhance component's interactivity states ([#11493](#11493)) ([88a5260](88a5260)) ### Bug Fixes * **card-group:** Restore default gap spacing ([#11638](#11638)) ([a554598](a554598)) * **dropdown-group:** Fix error caused by early removal ([#11612](#11612)) ([2dcef25](2dcef25)) * **panel:** Apply custom styles correctly to header actions ([#11495](#11495)) ([5e84892](5e84892)) * Set floating-ui elements max size set to the view ([#11577](#11577)) ([b3ffd7f](b3ffd7f)) * **tabs:** Redisplay close button when more than one tab is closable ([#11492](#11492)) ([ae8064e](ae8064e)) * **text-area:** Fix error caused by internal measuring on disconnect ([#11751](#11751)) ([810f79e](810f79e)) * **tooltip:** Close tooltip when hovering out of an iframe ([#11600](#11600)) ([93a5692](93a5692)) * **tooltip:** Do not open after the pointer has moved off of the reference element ([#11599](#11599)) ([33cadc8](33cadc8)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to 2.0.1 </details> <details><summary>@esri/calcite-components-react: 3.1.0</summary> ## [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.0.3...@esri/calcite-components-react@3.1.0) (2025-03-26) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.1.0-next.31 to 3.1.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.0.1</summary> [3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.0.0...@esri/calcite-design-tokens@3.0.1) (2025-03-26) * Allow global focus color token to inherit fallback value ([#11711](#11711)) ([a732c8d](a732c8d)) </details> <details><summary>@esri/calcite-ui-icons: 4.1.0</summary> [4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.0.0...@esri/calcite-ui-icons@4.1.0) (2025-03-26) * Add browser join and browser plus ([#11779](#11779)) ([8f69b2d](8f69b2d)) * Update check ([#11799](#11799)) ([5058939](5058939)) * Add language-2 ([#11739](#11739)) ([989df67](989df67)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.1</summary> [2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.0...@esri/eslint-plugin-calcite-components@2.0.1) (2025-03-26) **Note:** Version bump only for package @esri/eslint-plugin-calcite-components </details> <details><summary>@esri/calcite-components: 3.1.0</summary> [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.0.3...@esri/calcite-components@3.1.0) (2025-03-26) * **accordion:** Add new component tokens and deprecate old tokens ([#11390](#11390)) ([fdf3e61](fdf3e61)) * **action:** Enhance component's interactivity states ([#11478](#11478)) ([aad98df](aad98df)) * **block, block-section:** Add `expanded` property and deprecate `open` property ([#11582](#11582)) ([999f532](999f532)) * **button:** Enhance component's interactivity states ([#11590](#11590)) ([23a62ca](23a62ca)) * **chip:** Deprecate `pressed` in favor of `press` ([#11389](#11389)) ([c905f9f](c905f9f)) * **chip:** Enhance component's interactivity states ([#11538](#11538)) ([8db5697](8db5697)) * **combobox-item:** Add component tokens ([#11645](#11645)) ([9cbd155](9cbd155)) * **combobox-item:** Update idle icons ([#11801](#11801)) ([034f430](034f430)) * **combobox-item:** Update interactive state ([#11647](#11647)) ([19d7c43](19d7c43)) * **combobox-item:** Update selection icons ([#11726](#11726)) ([723fd22](723fd22)) * **combobox, combobox-item-group:** Add component tokens ([#11623](#11623)) ([8215314](8215314)) * **dropdown, dropdown-item, dropdown-group:** Add component tokens ([#11465](#11465)) ([85f9378](85f9378)) * **dropdown:** Add `offsetDistance` and `offsetSkidding` properties ([#11614](#11614)) ([3381040](3381040)) * **fab:** Add component tokens ([#11723](#11723)) ([d436514](d436514)) * **flow-item:** Expose `FlowItemLike` type ([#11791](#11791)) ([28c7522](28c7522)) * **list-item, list:** Add `expanded` property and deprecate `open` property ([#11003](#11003)) ([c80c44c](c80c44c)) * **rating:** Enhance component's interactivity states ([#11469](#11469)) ([11d83f6](11d83f6)) * **segmented-control-item:** Enhance component's interactivity states ([#11477](#11477)) ([f025330](f025330)) * **split-button:** Make downloadable and linkable ([#11520](#11520)) ([fb3e1dc](fb3e1dc)) * **tab-title:** Enhance component's interactivity states ([#11493](#11493)) ([88a5260](88a5260)) * **card-group:** Restore default gap spacing ([#11638](#11638)) ([a554598](a554598)) * **dropdown-group:** Fix error caused by early removal ([#11612](#11612)) ([2dcef25](2dcef25)) * **panel:** Apply custom styles correctly to header actions ([#11495](#11495)) ([5e84892](5e84892)) * Set floating-ui elements max size set to the view ([#11577](#11577)) ([b3ffd7f](b3ffd7f)) * **tabs:** Redisplay close button when more than one tab is closable ([#11492](#11492)) ([ae8064e](ae8064e)) * **text-area:** Fix error caused by internal measuring on disconnect ([#11751](#11751)) ([810f79e](810f79e)) * **tooltip:** Close tooltip when hovering out of an iframe ([#11600](#11600)) ([93a5692](93a5692)) * **tooltip:** Do not open after the pointer has moved off of the reference element ([#11599](#11599)) ([33cadc8](33cadc8)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to 2.0.1 </details> <details><summary>@esri/calcite-components-react: 3.1.0</summary> [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.0.3...@esri/calcite-components-react@3.1.0) (2025-03-26) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.1.0-next.31 to 3.1.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.0.1</summary> [3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.0.0...@esri/calcite-design-tokens@3.0.1) (2025-03-26) * Allow global focus color token to inherit fallback value ([#11711](#11711)) ([a732c8d](a732c8d)) </details> <details><summary>@esri/calcite-ui-icons: 4.1.0</summary> [4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.0.0...@esri/calcite-ui-icons@4.1.0) (2025-03-26) * Add browser join and browser plus ([#11779](#11779)) ([8f69b2d](8f69b2d)) * Update check ([#11799](#11799)) ([5058939](5058939)) * Add language-2 ([#11739](#11739)) ([989df67](989df67)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.1</summary> [2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.0...@esri/eslint-plugin-calcite-components@2.0.1) (2025-03-26) **Note:** Version bump only for package @esri/eslint-plugin-calcite-components </details> <details><summary>@esri/calcite-components: 3.1.0</summary> [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.0.3...@esri/calcite-components@3.1.0) (2025-03-26) * **accordion:** Add new component tokens and deprecate old tokens ([#11390](#11390)) ([fdf3e61](fdf3e61)) * **action:** Enhance component's interactivity states ([#11478](#11478)) ([aad98df](aad98df)) * **block, block-section:** Add `expanded` property and deprecate `open` property ([#11582](#11582)) ([999f532](999f532)) * **button:** Enhance component's interactivity states ([#11590](#11590)) ([23a62ca](23a62ca)) * **chip:** Deprecate `pressed` in favor of `press` ([#11389](#11389)) ([c905f9f](c905f9f)) * **chip:** Enhance component's interactivity states ([#11538](#11538)) ([8db5697](8db5697)) * **combobox-item:** Add component tokens ([#11645](#11645)) ([9cbd155](9cbd155)) * **combobox-item:** Update idle icons ([#11801](#11801)) ([034f430](034f430)) * **combobox-item:** Update interactive state ([#11647](#11647)) ([19d7c43](19d7c43)) * **combobox-item:** Update selection icons ([#11726](#11726)) ([723fd22](723fd22)) * **combobox, combobox-item-group:** Add component tokens ([#11623](#11623)) ([8215314](8215314)) * **dropdown, dropdown-item, dropdown-group:** Add component tokens ([#11465](#11465)) ([85f9378](85f9378)) * **dropdown:** Add `offsetDistance` and `offsetSkidding` properties ([#11614](#11614)) ([3381040](3381040)) * **fab:** Add component tokens ([#11723](#11723)) ([d436514](d436514)) * **flow-item:** Expose `FlowItemLike` type ([#11791](#11791)) ([28c7522](28c7522)) * **list-item, list:** Add `expanded` property and deprecate `open` property ([#11003](#11003)) ([c80c44c](c80c44c)) * **rating:** Enhance component's interactivity states ([#11469](#11469)) ([11d83f6](11d83f6)) * **segmented-control-item:** Enhance component's interactivity states ([#11477](#11477)) ([f025330](f025330)) * **split-button:** Make downloadable and linkable ([#11520](#11520)) ([fb3e1dc](fb3e1dc)) * **tab-title:** Enhance component's interactivity states ([#11493](#11493)) ([88a5260](88a5260)) * **card-group:** Restore default gap spacing ([#11638](#11638)) ([a554598](a554598)) * **dropdown-group:** Fix error caused by early removal ([#11612](#11612)) ([2dcef25](2dcef25)) * **panel:** Apply custom styles correctly to header actions ([#11495](#11495)) ([5e84892](5e84892)) * Set floating-ui elements max size set to the view ([#11577](#11577)) ([b3ffd7f](b3ffd7f)) * **tabs:** Redisplay close button when more than one tab is closable ([#11492](#11492)) ([ae8064e](ae8064e)) * **text-area:** Fix error caused by internal measuring on disconnect ([#11751](#11751)) ([810f79e](810f79e)) * **tooltip:** Close tooltip when hovering out of an iframe ([#11600](#11600)) ([93a5692](93a5692)) * **tooltip:** Do not open after the pointer has moved off of the reference element ([#11599](#11599)) ([33cadc8](33cadc8)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to 2.0.1 </details> <details><summary>@esri/calcite-components-react: 3.1.0</summary> [3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.0.3...@esri/calcite-components-react@3.1.0) (2025-03-26) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.1.0-next.31 to 3.1.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> Co-authored-by: Calcite Admin <calcite-admin@esri.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(split-button): set downloadable and href for links

2cf4626

github-actions Bot assigned josercarcamo Feb 11, 2025

github-actions Bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Feb 11, 2025

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

josercarcamo changed the title ~~fix(split-button): set downloadable and href for links~~ fix(split-button): make downloadable and link Feb 11, 2025

jcfranco approved these changes Feb 11, 2025

View reviewed changes

jcfranco requested review from SkyeSeitz and ashetland February 11, 2025 23:13

ashetland approved these changes Feb 12, 2025

View reviewed changes

Added reflect tests; removed '_TestOnly'; asserted on button

77c3211

josercarcamo changed the title ~~fix(split-button): make downloadable and link~~ feat(split-button): make downloadable and linkable Feb 12, 2025

Changed stories to m

264f7bf

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

Merge branch 'dev' into josercarcamo/9126-split-button-href

7aca3ea

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 Feb 12, 2025

josercarcamo merged commit f87097f into dev Feb 12, 2025

josercarcamo deleted the josercarcamo/9126-split-button-href branch February 12, 2025 23:27

github-actions Bot added this to the 2025-02-25 - Feb Milestone milestone Feb 12, 2025

benelan pushed a commit that referenced this pull request Mar 26, 2025

feat(split-button): make downloadable and linkable (#11520)

fb3e1dc

**Related Issue:** #9126 ## Summary Implemented ability to make the primary part of a split button into a downloadable link or an href link.

calcite-admin mentioned this pull request Mar 26, 2025

chore: release main #11809

Merged

benelan mentioned this pull request Mar 26, 2025

chore: cherry pick release commit from main #11813

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(split-button): make downloadable and linkable#11520

feat(split-button): make downloadable and linkable#11520
josercarcamo merged 4 commits intodevfrom
josercarcamo/9126-split-button-href

josercarcamo commented Feb 11, 2025

Uh oh!

jcfranco left a comment

Uh oh!

jcfranco Feb 11, 2025

Uh oh!

jcfranco Feb 11, 2025

Uh oh!

jcfranco Feb 11, 2025

Uh oh!

jcfranco commented Feb 11, 2025

Uh oh!

jcfranco commented Feb 11, 2025

Uh oh!

ashetland commented Feb 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		export const loadingAndDisabled_TestOnly = (): string => html`<calcite-button loading disabled>Test</calcite-button>`;

		export const primaryAsALink_TestOnly = (): string =>

Conversation

josercarcamo commented Feb 11, 2025

Summary

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

jcfranco Feb 11, 2025

Choose a reason for hiding this comment

Uh oh!

jcfranco Feb 11, 2025

Choose a reason for hiding this comment

Uh oh!

jcfranco Feb 11, 2025

Choose a reason for hiding this comment

Uh oh!

jcfranco commented Feb 11, 2025

Uh oh!

jcfranco commented Feb 11, 2025

Uh oh!

ashetland commented Feb 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants