feat(carousel): Add pagination-position property - #14276
Merged
macandcheese merged 13 commits intoMay 20, 2026
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new public pagination-position API to calcite-carousel so pagination/navigation controls can be placed at the top (in addition to the existing bottom placement), addressing the narrow-UI usability issue described in #14162.
Changes:
- Introduces
PaginationPosition = "bottom" | "top"and a reflectedpaginationPositionproperty on the carousel component. - Updates carousel styling to support top-positioned pagination.
- Extends Storybook stories/controls to demonstrate and exercise the new option.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
packages/components/src/components/carousel/interfaces.ts |
Adds the PaginationPosition union type. |
packages/components/src/components/carousel/carousel.tsx |
Adds the reflected paginationPosition public property. |
packages/components/src/components/carousel/carousel.stories.ts |
Adds Storybook args/controls and new stories for top pagination. |
packages/components/src/components/carousel/carousel.scss |
Implements top pagination layout via host attribute styling. |
Contributor
|
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. |
DintaMel
approved these changes
May 18, 2026
DintaMel
left a comment
Contributor
There was a problem hiding this comment.
This looks good to me now. Thanks for changing up the tab order. I have one small request to make the description more concise.
2026-05-18_15-42-04.mp4
Merged
isaacbraun
pushed a commit
that referenced
this pull request
May 28, 2026
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 4.1.0</summary> ## [4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@4.0.0...@esri/calcite-design-tokens@4.1.0) (2026-05-28) ### Features * **semantic-tokens:** Update shadow token styles ([#14152](#14152)) ([34ec5b8](34ec5b8)) </details> <details><summary>@esri/calcite-tailwind-preset: 1.1.1</summary> ## [1.1.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.1.0...@esri/calcite-tailwind-preset@1.1.1) (2026-05-28) ### Deprecations * **tailwind:** Deprecate spacing utils in favor of design tokens ([#13770](#13770)) ([bba3a21](bba3a21)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-design-tokens bumped from 4.1.0-next.11 to 4.1.0 * peerDependencies * @esri/calcite-design-tokens bumped from ^4.0.0 to ^4.1.0 </details> <details><summary>@esri/calcite-ui-icons: 4.5.0</summary> ## [4.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.4.0...@esri/calcite-ui-icons@4.5.0) (2026-05-28) ### Features * Add arcgis quickcapture and arcgis survey 123 ([#14163](#14163)) ([fa450d8](fa450d8)) * Add bim, dwg, and rvt icons ([#13977](#13977)) ([b1b800f](b1b800f)) * Add buttons and entity types ([#14408](#14408)) ([a6840dd](a6840dd)) * Add gps receiver and total station ([#14301](#14301)) ([66bcbbc](66bcbbc)) * Add layer stream setting and velocity server ([#14139](#14139)) ([bcbb600](bcbb600)) * Add publish ([#14065](#14065)) ([a94b77f](a94b77f)) * Add travel mode icons ([#13990](#13990)) ([b57323c](b57323c)) * Review map and return to default ([#14473](#14473)) ([a9cedd8](a9cedd8)) * Updated nodes-unmerge keywords ([#14225](#14225)) ([38ac638](38ac638)) </details> <details><summary>@esri/calcite-components: 5.1.0</summary> ## [5.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@5.0.2...@esri/calcite-components@5.1.0) (2026-05-28) ### Features * **action-bar:** Add `expandPosition` and `actionsStartGroupLabel` properties and `actions-start` slot ([#13995](#13995)) ([56722f2](56722f2)) * **action-group:** Add `calciteActionGroupChange` for selection tracking ([#13969](#13969)) ([cc39f0d](cc39f0d)) * **action-group:** Add overflow-actions-disabled ([#14430](#14430)) ([5dcd697](5dcd697)) * **action:** Add overflow-disabled property ([#14438](#14438)) ([4feb078](4feb078)) * **autocomplete-item:** Add selected property ([#14137](#14137)) ([1f0b079](1f0b079)) * **card, card-group:** Add scale prop ([#14299](#14299)) ([c8d507b](c8d507b)) * **carousel:** Add `pagination-position` property ([#14276](#14276)) ([dbe559b](dbe559b)) * **combobox:** Add `selectionAppearance` property ([#14043](#14043)) ([0199108](0199108)) * **dropdown, split-button, sort-handle:** Add additional placement options ([#14132](#14132)) ([7cb3def](7cb3def)) * **dropdown:** Add `referenceElement` property ([#14172](#14172)) ([c1bfd78](c1bfd78)) * **floating-ui:** Apply semantic shadow tokens to components ([#14337](#14337)) ([fb75394](fb75394)) * **label:** Skip label focus behavior if click event is canceled ([#14412](#14412)) ([cdd67b4](cdd67b4)) * **list, list-item-group:** Stick list item group header to the top of the list ([#14030](#14030)) ([2cce8ce](2cce8ce)) * **navigation-logo, navigation-user:** Remove heading's padding top when there is no description ([#14374](#14374)) ([a3d99f5](a3d99f5)) * **navigation-logo:** Update standalone heading font size ([#14480](#14480)) ([5238f34](5238f34)) * **navigation, navigation-logo, navigation-user:** Add scale prop ([#14265](#14265)) ([6506874](6506874)) * **navigation:** Set scale on nested calcite navigation ([#14428](#14428)) ([977deab](977deab)) * **panel, dialog, flow:** Add space tokens for `"content-top"` and `"content-bottom"` slots ([#13999](#13999)) ([0b73c1d](0b73c1d)) * **panel, flow-item, dialog:** Add rich `heading` and `description` slots ([#14179](#14179)) ([daa8b51](daa8b51)) * **sort-handle:** Hide reorder group title when no sibling groups; disable boundary items instead of hiding ([#14105](#14105)) ([2ffec6b](2ffec6b)) * Support one `referenceElement` having multiple popovers or tooltips ([#13960](#13960)) ([af02a90](af02a90)) * **tooltip:** Add `pointerDisabled` and `scale` properties ([#14078](#14078)) ([064ba80](064ba80)) ### Bug Fixes * **action-bar, action-pad:** Ensure actions remain tabbable when tabbed through ([#14429](#14429)) ([1dfdf94](1dfdf94)) * **action-bar:** Remove attributeFilter from MutationObserver ([#14476](#14476)) ([24fe334](24fe334)) * **avatar, meter, table, text area, time picker:** Apply line-height ([#14161](#14161)) ([654dc86](654dc86)) * **block:** Independently style icons based on CSS tokens ([#14423](#14423)) ([b1f0c25](b1f0c25)) * **combobox, input-time-zone:** Only cancel `Escape` key event when open or clearing text ([#14382](#14382)) ([6c35a23](6c35a23)) * **combobox, menu, textarea:** Apply line-height ([#14236](#14236)) ([a5eaecf](a5eaecf)) * **combobox:** Honor max-items property ([#13959](#13959)) ([9cda075](9cda075)) * **date-picker:** Show adjacent-month days in single-calendar range ([#14111](#14111)) ([36922b5](36922b5)) * **date-picker:** Update selected day text color fallback ([#14470](#14470)) ([75bf589](75bf589)) * **dropdown:** Focus the first item when opening instead of the first selected item ([#14131](#14131)) ([197aefc](197aefc)) * **dropdown:** Keep focus on trigger with single-component keyboard navigation ([#14079](#14079)) ([d308547](d308547)) * **filter:** Do not cancel `Escape` when value is empty ([#13975](#13975)) ([6f36776](6f36776)) * **flow-item:** Support overriding collapse message ([#14305](#14305)) ([8836712](8836712)) * Handle `Escape` in expected order with focus-trapping and non-focus-trapping hierarchies ([#14313](#14313)) ([b832222](b832222)) * **input-date-picker:** Bump `focus-trap` to pick up shadow DOM focus-handling fix ([#14381](#14381)) ([4a068c2](4a068c2)) * **input-date-picker:** Honor minAsDate & maxAsDate properties when set ([#14375](#14375)) ([8bd57bd](8bd57bd)) * **input-time-zone:** Ensure item labels update on locale/reference date change ([#14365](#14365)) ([dc0b91e](dc0b91e)) * **input, input-number:** Fix handling of input for locales with same group and decimal separators ([#14112](#14112)) ([2dae3be](2dae3be)) * **link:** Display underline properly when text breaks to multiple lines ([#13784](#13784)) ([ab5840a](ab5840a)) * **list:** Ensure filter input displays over sticky headers ([#14469](#14469)) ([65d7f38](65d7f38)) * **list:** Fix nested list-item property inheritance in calcite-list ([#14344](#14344)) ([ea798c8](ea798c8)) * **list:** Refresh filter item data when list item and group properties change ([#14442](#14442)) ([d9b4e0d](d9b4e0d)) * **list:** Remove interactive states for `interaction-mode=static` ([#14433](#14433)) ([fc9b45f](fc9b45f)) * **meter:** Update border color ([#14167](#14167)) ([573aaf9](573aaf9)) * **sheet, shell-panel:** Fix mouse resizing when direction is changed dynamically ([#14279](#14279)) ([bf713a5](bf713a5)) * **sheet:** Restore shadow ([#14439](#14439)) ([718d293](718d293)) * **stepper, stepper-item:** Fix box sizing to prevent scrollbar from being displayed ([#14018](#14018)) ([86d7ed0](86d7ed0)) * **stepper:** Fix updating items when component is used within a shadow dom and items are slotted ([#14021](#14021)) ([bc7a74a](bc7a74a)) * **stepper:** Only stepper content should expand to available height ([#14001](#14001)) ([4e27c10](4e27c10)) * **switch:** Remove double focus ring in certain browsers ([#14156](#14156)) ([7176ed0](7176ed0)) * **tabs:** Ensure tabs and titles are loaded before syncing ARIA state ([#14493](#14493)) ([462d153](462d153)) * **tree-item:** Smooth out expanding items transition ([#13712](#13712)) ([f00f58c](f00f58c)) * **tree:** Restore lines containment ([#14251](#14251)) ([6c983f3](6c983f3)) * **tree:** Restore tabbing through items ([#14441](#14441)) ([637ce35](637ce35)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.5.0-next.15 to 4.5.0 * devDependencies * @esri/calcite-design-tokens bumped from 4.1.0-next.11 to 4.1.0 * @esri/calcite-tailwind-preset bumped from 1.1.1-next.15 to 1.1.1 * @esri/stylelint-plugin-calcite-components bumped from 0.1.0-next.0 to 0.1.0 </details> <details><summary>@esri/calcite-components-react: 5.1.0</summary> ## [5.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@5.0.2...@esri/calcite-components-react@5.1.0) (2026-05-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 5.1.0-next.62 to 5.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>
isaacbraun
added a commit
that referenced
this pull request
May 28, 2026
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 4.1.0</summary> ## [4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@4.0.0...@esri/calcite-design-tokens@4.1.0) (2026-05-28) ### Features * **semantic-tokens:** Update shadow token styles ([#14152](#14152)) ([34ec5b8](34ec5b8)) </details> <details><summary>@esri/calcite-tailwind-preset: 1.1.1</summary> ## [1.1.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.1.0...@esri/calcite-tailwind-preset@1.1.1) (2026-05-28) ### Deprecations * **tailwind:** Deprecate spacing utils in favor of design tokens ([#13770](#13770)) ([bba3a21](bba3a21)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-design-tokens bumped from 4.1.0-next.11 to 4.1.0 * peerDependencies * @esri/calcite-design-tokens bumped from ^4.0.0 to ^4.1.0 </details> <details><summary>@esri/calcite-ui-icons: 4.5.0</summary> ## [4.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.4.0...@esri/calcite-ui-icons@4.5.0) (2026-05-28) ### Features * Add arcgis quickcapture and arcgis survey 123 ([#14163](#14163)) ([fa450d8](fa450d8)) * Add bim, dwg, and rvt icons ([#13977](#13977)) ([b1b800f](b1b800f)) * Add buttons and entity types ([#14408](#14408)) ([a6840dd](a6840dd)) * Add gps receiver and total station ([#14301](#14301)) ([66bcbbc](66bcbbc)) * Add layer stream setting and velocity server ([#14139](#14139)) ([bcbb600](bcbb600)) * Add publish ([#14065](#14065)) ([a94b77f](a94b77f)) * Add travel mode icons ([#13990](#13990)) ([b57323c](b57323c)) * Review map and return to default ([#14473](#14473)) ([a9cedd8](a9cedd8)) * Updated nodes-unmerge keywords ([#14225](#14225)) ([38ac638](38ac638)) </details> <details><summary>@esri/calcite-components: 5.1.0</summary> ## [5.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@5.0.2...@esri/calcite-components@5.1.0) (2026-05-28) ### Features * **action-bar:** Add `expandPosition` and `actionsStartGroupLabel` properties and `actions-start` slot ([#13995](#13995)) ([56722f2](56722f2)) * **action-group:** Add `calciteActionGroupChange` for selection tracking ([#13969](#13969)) ([cc39f0d](cc39f0d)) * **action-group:** Add overflow-actions-disabled ([#14430](#14430)) ([5dcd697](5dcd697)) * **action:** Add overflow-disabled property ([#14438](#14438)) ([4feb078](4feb078)) * **autocomplete-item:** Add selected property ([#14137](#14137)) ([1f0b079](1f0b079)) * **card, card-group:** Add scale prop ([#14299](#14299)) ([c8d507b](c8d507b)) * **carousel:** Add `pagination-position` property ([#14276](#14276)) ([dbe559b](dbe559b)) * **combobox:** Add `selectionAppearance` property ([#14043](#14043)) ([0199108](0199108)) * **dropdown, split-button, sort-handle:** Add additional placement options ([#14132](#14132)) ([7cb3def](7cb3def)) * **dropdown:** Add `referenceElement` property ([#14172](#14172)) ([c1bfd78](c1bfd78)) * **floating-ui:** Apply semantic shadow tokens to components ([#14337](#14337)) ([fb75394](fb75394)) * **label:** Skip label focus behavior if click event is canceled ([#14412](#14412)) ([cdd67b4](cdd67b4)) * **list, list-item-group:** Stick list item group header to the top of the list ([#14030](#14030)) ([2cce8ce](2cce8ce)) * **navigation-logo, navigation-user:** Remove heading's padding top when there is no description ([#14374](#14374)) ([a3d99f5](a3d99f5)) * **navigation-logo:** Update standalone heading font size ([#14480](#14480)) ([5238f34](5238f34)) * **navigation, navigation-logo, navigation-user:** Add scale prop ([#14265](#14265)) ([6506874](6506874)) * **navigation:** Set scale on nested calcite navigation ([#14428](#14428)) ([977deab](977deab)) * **panel, dialog, flow:** Add space tokens for `"content-top"` and `"content-bottom"` slots ([#13999](#13999)) ([0b73c1d](0b73c1d)) * **panel, flow-item, dialog:** Add rich `heading` and `description` slots ([#14179](#14179)) ([daa8b51](daa8b51)) * **sort-handle:** Hide reorder group title when no sibling groups; disable boundary items instead of hiding ([#14105](#14105)) ([2ffec6b](2ffec6b)) * Support one `referenceElement` having multiple popovers or tooltips ([#13960](#13960)) ([af02a90](af02a90)) * **tooltip:** Add `pointerDisabled` and `scale` properties ([#14078](#14078)) ([064ba80](064ba80)) ### Bug Fixes * **action-bar, action-pad:** Ensure actions remain tabbable when tabbed through ([#14429](#14429)) ([1dfdf94](1dfdf94)) * **action-bar:** Remove attributeFilter from MutationObserver ([#14476](#14476)) ([24fe334](24fe334)) * **avatar, meter, table, text area, time picker:** Apply line-height ([#14161](#14161)) ([654dc86](654dc86)) * **block:** Independently style icons based on CSS tokens ([#14423](#14423)) ([b1f0c25](b1f0c25)) * **combobox, input-time-zone:** Only cancel `Escape` key event when open or clearing text ([#14382](#14382)) ([6c35a23](6c35a23)) * **combobox, menu, textarea:** Apply line-height ([#14236](#14236)) ([a5eaecf](a5eaecf)) * **combobox:** Honor max-items property ([#13959](#13959)) ([9cda075](9cda075)) * **date-picker:** Show adjacent-month days in single-calendar range ([#14111](#14111)) ([36922b5](36922b5)) * **date-picker:** Update selected day text color fallback ([#14470](#14470)) ([75bf589](75bf589)) * **dropdown:** Focus the first item when opening instead of the first selected item ([#14131](#14131)) ([197aefc](197aefc)) * **dropdown:** Keep focus on trigger with single-component keyboard navigation ([#14079](#14079)) ([d308547](d308547)) * **filter:** Do not cancel `Escape` when value is empty ([#13975](#13975)) ([6f36776](6f36776)) * **flow-item:** Support overriding collapse message ([#14305](#14305)) ([8836712](8836712)) * Handle `Escape` in expected order with focus-trapping and non-focus-trapping hierarchies ([#14313](#14313)) ([b832222](b832222)) * **input-date-picker:** Bump `focus-trap` to pick up shadow DOM focus-handling fix ([#14381](#14381)) ([4a068c2](4a068c2)) * **input-date-picker:** Honor minAsDate & maxAsDate properties when set ([#14375](#14375)) ([8bd57bd](8bd57bd)) * **input-time-zone:** Ensure item labels update on locale/reference date change ([#14365](#14365)) ([dc0b91e](dc0b91e)) * **input, input-number:** Fix handling of input for locales with same group and decimal separators ([#14112](#14112)) ([2dae3be](2dae3be)) * **link:** Display underline properly when text breaks to multiple lines ([#13784](#13784)) ([ab5840a](ab5840a)) * **list:** Ensure filter input displays over sticky headers ([#14469](#14469)) ([65d7f38](65d7f38)) * **list:** Fix nested list-item property inheritance in calcite-list ([#14344](#14344)) ([ea798c8](ea798c8)) * **list:** Refresh filter item data when list item and group properties change ([#14442](#14442)) ([d9b4e0d](d9b4e0d)) * **list:** Remove interactive states for `interaction-mode=static` ([#14433](#14433)) ([fc9b45f](fc9b45f)) * **meter:** Update border color ([#14167](#14167)) ([573aaf9](573aaf9)) * **sheet, shell-panel:** Fix mouse resizing when direction is changed dynamically ([#14279](#14279)) ([bf713a5](bf713a5)) * **sheet:** Restore shadow ([#14439](#14439)) ([718d293](718d293)) * **stepper, stepper-item:** Fix box sizing to prevent scrollbar from being displayed ([#14018](#14018)) ([86d7ed0](86d7ed0)) * **stepper:** Fix updating items when component is used within a shadow dom and items are slotted ([#14021](#14021)) ([bc7a74a](bc7a74a)) * **stepper:** Only stepper content should expand to available height ([#14001](#14001)) ([4e27c10](4e27c10)) * **switch:** Remove double focus ring in certain browsers ([#14156](#14156)) ([7176ed0](7176ed0)) * **tabs:** Ensure tabs and titles are loaded before syncing ARIA state ([#14493](#14493)) ([462d153](462d153)) * **tree-item:** Smooth out expanding items transition ([#13712](#13712)) ([f00f58c](f00f58c)) * **tree:** Restore lines containment ([#14251](#14251)) ([6c983f3](6c983f3)) * **tree:** Restore tabbing through items ([#14441](#14441)) ([637ce35](637ce35)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.5.0-next.15 to 4.5.0 * devDependencies * @esri/calcite-design-tokens bumped from 4.1.0-next.11 to 4.1.0 * @esri/calcite-tailwind-preset bumped from 1.1.1-next.15 to 1.1.1 * @esri/stylelint-plugin-calcite-components bumped from 0.1.0-next.0 to 0.1.0 </details> <details><summary>@esri/calcite-components-react: 5.1.0</summary> ## [5.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@5.0.2...@esri/calcite-components-react@5.1.0) (2026-05-28) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 5.1.0-next.62 to 5.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: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Isaac Braun <isaacbraun2000@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue: #14162
Summary
Adds a
pagination-positionproperty. Defaults to the current"bottom"value and accepts"top"value.