feat(carousel): Add Carousel and Carousel Item components #8995

macandcheese · 2024-03-26T06:36:54Z

Related Issue: #6536

Summary

Once this and any necessary follow up lands, we can plan to deprecate Tip Manager and associated components.

jcfranco

✨🎠✨

jcfranco · 2024-04-29T17:26:02Z

packages/calcite-components/src/components/carousel/carousel.tsx

+
+  @State() swipeTolerance = 100;
+
+  @State() pausedDueToFocus = false;


Let's keep it as is then.

jcfranco · 2024-04-29T19:44:56Z

packages/calcite-components/src/components/carousel/carousel.tsx

+  @Event({ cancelable: false }) calciteCarouselRotatingPause: EventEmitter<void>;
+
+  /** Fires when the carousel rotation state resumes. */
+  @Event({ cancelable: false }) calciteCarouselRotatingResume: EventEmitter<void>;


Gotcha makes sense. Those granular event names LGTM! I think we can omit Rotating since it's implied.

packages/calcite-components/src/components/carousel/interfaces.ts

jcfranco · 2024-04-30T17:58:59Z

packages/calcite-components/src/components/carousel/carousel.e2e.ts

+      expect(stopSpy).not.toHaveReceivedEvent();
+    });
+
+    it("correctly rotates to a new slide after custom duration elapses", async () => {


Question: For documentation, is slide a more common term vs rotate for carousel components? I did spot "slide" used in a few 3rd-party carousel components.

I'll update to "carousel item" here

packages/calcite-components/src/components/carousel/carousel.e2e.ts

packages/calcite-components/src/demos/meter.html

packages/calcite-components/src/components/carousel/carousel.tsx

jcfranco · 2024-04-30T18:20:43Z

packages/calcite-components/src/components/carousel/carousel.tsx

+  };
+
+  private keyDownHandler = (event: KeyboardEvent): void => {
+    if (event.target !== this.container) {


good question for @jcfranco. We should establish a pattern here.

Sorry, I missed this. What was the question? 😅

…lidation-apis * origin/main: build(deps): update dependency @esri/calcite-ui-icons to v3.27.9 (#9216) fix(combobox, input-time-zone): improve readOnly behavior and styling (#9222) feat(carousel): Add Carousel and Carousel Item components (#8995)

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.1.2...@esri/calcite-design-tokens@2.2.0) (2024-04-30) ### Features * Ensure all components inherit font-family ([#8388](#8388)) ([90f8923](90f8923)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.2.0</summary> ## [1.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.1.0...@esri/eslint-plugin-calcite-components@1.2.0) (2024-04-30) ### Features * **enforce-ref-last-prop:** Add fixer ([#8671](#8671)) ([688bc51](688bc51)) ### Bug Fixes * **slider:** Improve snapping + step logic ([#8169](#8169)) ([8b83042](8b83042)) </details> <details><summary>@esri/calcite-components: 2.8.0</summary> ## [2.8.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.7.1...@esri/calcite-components@2.8.0) (2024-04-30) ### Features * Add calciteInvalid event for form validation ([#9211](#9211)) ([a504508](a504508)) * Add validity property to form components ([#9210](#9210)) ([e49902b](e49902b)) * **carousel:** Add Carousel and Carousel Item components ([#8995](#8995)) ([b1ba428](b1ba428)) * **enforce-ref-last-prop:** Add fixer ([#8671](#8671)) ([688bc51](688bc51)) * Ensure all components inherit font-family ([#8388](#8388)) ([90f8923](90f8923)) * **input-time-zone:** Add readonly support ([#9111](#9111)) ([153a122](153a122)) * **input-time-zone:** Allow clearing value ([#9168](#9168)) ([193bb7d](193bb7d)) * **list-item-group:** Update list item group styles ([#9072](#9072)) ([c734849](c734849)) * **navigation-logo:** Add heading level ([#9054](#9054)) ([c2beba8](c2beba8)) * **pagination:** Add navigation methods ([#9154](#9154)) ([5ca6a5f](5ca6a5f)) * **slider:** Add support for custom label formatting ([#9179](#9179)) ([710d1ee](710d1ee)) * **slider:** Allow configuring fill behavior ([#9170](#9170)) ([1b2cdbf](1b2cdbf)) * **tile, tile-group:** Support single, multi, single-persist, none selection modes and icon and border selection appearances ([#9159](#9159)) ([2d77470](2d77470)) ### Bug Fixes * **action:** Maintain equal height when text is not enabled in a small scale ([#9051](#9051)) ([407824a](407824a)) * **chip-group:** Improve programmatic Chip selection behavior ([#9213](#9213)) ([b7a4c77](b7a4c77)) * **combobox:** Update the focus and hover chevron icon color ([#9187](#9187)) ([a1317da](a1317da)) * **combobox, input-time-zone:** Improve readOnly behavior and styling ([#9222](#9222)) ([606d80f](606d80f)) * **combobox:** Fix aria-role for proper voiceover support ([#9039](#9039)) ([eebe8ca](eebe8ca)) * **combobox:** Update the focused chevron icon color ([#9202](#9202)) ([27ac02d](27ac02d)) * **date-picker:** Ensure `proximitySelectionDisabled` resets range on post-range-commit selection ([#9171](#9171)) ([f466b14](f466b14)) * **date-picker:** Restore focus on date when navigating month with arrow/page keys ([#9063](#9063)) ([db109e0](db109e0)) * Fix memory leak affecting components using conditionally-rendered slots ([#9208](#9208)) ([28701b6](28701b6)) * **input-date-picker:** Update the focus and hover chevron icon color ([#9146](#9146)) ([ca895e9](ca895e9)) * **input-time-zone:** Ensure selected item is properly displayed when there are other items with the same offset ([#9134](#9134)) ([1f94903](1f94903)) * **input, input-number, input-text, input-date-picker, input-time-picker, filter, menu-item:** Ignore canceled events and enforce cancellations where needed ([#8952](#8952)) ([d0fa977](d0fa977)) * **list, list-item, list-item-group:** Improve drag experience by indenting items ([#9169](#9169)) ([88aab49](88aab49)) * **list, list-item:** Support keyboard sorting in screen readers ([#9038](#9038)) ([b2e1b9b](b2e1b9b)) * **list:** Closed list-items no longer render extra space ([#9031](#9031)) ([3985004](3985004)) * **panel:** Support cancelling the esc key event to prevent closing a panel ([#9032](#9032)) ([ecfa5f1](ecfa5f1)) * **preset:** Update the focus outline color ([#9098](#9098)) ([725f47c](725f47c)) * **radio-button:** Display validation message in parent group ([#9218](#9218)) ([b1e869f](b1e869f)) * **select:** Update the focus and hover chevron icon color and select focus and hover background color ([#9160](#9160)) ([b187340](b187340)) * **slider:** Fix fill placement and tick styling when ranged ([#9204](#9204)) ([a84d831](a84d831)) * **slider:** Improve snapping + step logic ([#8169](#8169)) ([8b83042](8b83042)) * **slider:** Rename `highlightPlacement` to `fillPlacement` ([#9195](#9195)) ([9e5a713](9e5a713)) * **slider:** Style ticks according to the fill placement ([#9196](#9196)) ([5eb4e10](5eb4e10)) * **stepper-item:** Remove delay in highlighting item ([#8996](#8996)) ([bcf23dd](bcf23dd)) * **tree-item:** Do not select when chevron clicked ([#9115](#9115)) ([99ad8f1](99ad8f1)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/calcite-design-tokens bumped from ^2.2.0-next.0 to ^2.2.0 * @esri/eslint-plugin-calcite-components bumped from ^1.2.0-next.1 to ^1.2.0 </details> <details><summary>@esri/calcite-components-angular: 2.8.0</summary> ## [2.8.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.7.1...@esri/calcite-components-angular@2.8.0) (2024-04-30) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.0-next.20 to ^2.8.0 </details> <details><summary>@esri/calcite-components-react: 2.8.0</summary> ## [2.8.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.7.1...@esri/calcite-components-react@2.8.0) (2024-04-30) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.0-next.20 to ^2.8.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>

macandcheese added 3 commits March 25, 2024 23:31

feat(carousel): Add Carousel and Carousel Item components

2529282

Update Stencil config

14565bf

Clean up

16e1846

github-actions bot assigned macandcheese Mar 26, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Mar 26, 2024

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 Mar 26, 2024

macandcheese added 2 commits March 26, 2024 17:09

Clean up stories

bb61196

Merge branch 'main' into macandcheese/6536-add-new-carousel-component

ecba582

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 Mar 27, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Mar 27, 2024

macandcheese added 2 commits March 26, 2024 17:20

Add tooltipsDisabled property

4202fd7

Clean up

2cf3c34

macandcheese removed their assignment Mar 27, 2024

github-actions bot assigned macandcheese Mar 27, 2024

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 Mar 27, 2024

macandcheese added 3 commits March 27, 2024 10:19

Merge branch 'main' into macandcheese/6536-add-new-carousel-component

ab95eb4

Add arrowType, controlApperance, label properties

0172cbc

Clean up

7f9ea62

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 Mar 27, 2024

macandcheese added 3 commits March 27, 2024 15:36

Clean up

e957363

Remove control-appearance property

6d3f778

Clean up

7666e9a

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 Mar 28, 2024

macandcheese marked this pull request as ready for review March 28, 2024 21:02

macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 27, 2024

macandcheese added 2 commits April 27, 2024 11:19

Pr feedback

83e11c4

Merge branch 'main' into macandcheese/6536-add-new-carousel-component

33f7914

macandcheese added this to the 2024-04-30 - Apr Release milestone Apr 29, 2024

macandcheese added 4 commits April 29, 2024 10:29

Pr feedback

79e9e9f

Merge branch 'main' into macandcheese/6536-add-new-carousel-component

000c6b0

Pr feedback

25c38d9

Pr feedback

ba3842e

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 Apr 30, 2024

Pr feedback

a41cee9

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 Apr 30, 2024

macandcheese added 8 commits April 29, 2024 22:46

Clean up

db346aa

Add method test

683c1d0

Merge branch 'main' into macandcheese/6536-add-new-carousel-component

d3a5df4

Clean Up

37424bb

Clean up

6ceea9d

Merge branch 'main' into macandcheese/6536-add-new-carousel-component

93f8799

Clean up

aeade1d

Clean up

410141d

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 Apr 30, 2024

jcfranco approved these changes Apr 30, 2024

View reviewed changes

Clean up

3b3576f

macandcheese merged commit b1ba428 into main Apr 30, 2024
10 checks passed

macandcheese deleted the macandcheese/6536-add-new-carousel-component branch April 30, 2024 18:54

calcite-admin mentioned this pull request Apr 30, 2024

chore: release main #9050

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(carousel): Add Carousel and Carousel Item components #8995

feat(carousel): Add Carousel and Carousel Item components #8995

macandcheese commented Mar 26, 2024 •

edited

jcfranco left a comment

jcfranco Apr 29, 2024

jcfranco Apr 29, 2024

jcfranco Apr 30, 2024

macandcheese Apr 30, 2024

jcfranco Apr 30, 2024


		@State() swipeTolerance = 100;

		@State() pausedDueToFocus = false;

feat(carousel): Add Carousel and Carousel Item components #8995

feat(carousel): Add Carousel and Carousel Item components #8995

Conversation

macandcheese commented Mar 26, 2024 • edited

Summary

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Apr 29, 2024

Choose a reason for hiding this comment

jcfranco Apr 29, 2024

Choose a reason for hiding this comment

jcfranco Apr 30, 2024

Choose a reason for hiding this comment

macandcheese Apr 30, 2024

Choose a reason for hiding this comment

jcfranco Apr 30, 2024

Choose a reason for hiding this comment

macandcheese commented Mar 26, 2024 •

edited