Allow to specify SwirlCarousel spacing and padding (#911)

getflip · Jan 14, 2025 · 4bf7cd4 · 4bf7cd4
1 parent eccc10d
commit 4bf7cd4
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 14 deletions.
diff --git a/.changeset/many-lions-drive.md b/.changeset/many-lions-drive.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Allow to specify padding and spacing on SwirlCarousel
diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts
@@ -18,6 +18,7 @@ import { SwirlBoxBorderColor, SwirlBoxOverflow, SwirlBoxPadding, SwirlBoxPositio
 import { SwirlButtonIconPosition, SwirlButtonIntent, SwirlButtonSize, SwirlButtonTextAlign, SwirlButtonType, SwirlButtonVariant } from "./components/swirl-button/swirl-button";
 import { SwirlButtonGroupOrientation, SwirlButtonGroupSpacing } from "./components/swirl-button-group/swirl-button-group";
 import { SwirlCardBorderRadius, SwirlCardElevationLevel, SwirlCardIntent, SwirlCardJustifyContent, SwirlCardOverflow, SwirlCardPadding } from "./components/swirl-card/swirl-card";
+import { SwirlCarouselPadding, SwirlCarouselSpacing } from "./components/swirl-carousel/swirl-carousel";
 import { SwirlCheckboxLabelWeight, SwirlCheckboxState, SwirlCheckboxVariant } from "./components/swirl-checkbox/swirl-checkbox";
 import { SwirlChipBorderRadius, SwirlChipIconColor, SwirlChipIntent, SwirlChipSize, SwirlChipVariant } from "./components/swirl-chip/swirl-chip";
 import { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
@@ -85,6 +86,7 @@ export { SwirlBoxBorderColor, SwirlBoxOverflow, SwirlBoxPadding, SwirlBoxPositio
 export { SwirlButtonIconPosition, SwirlButtonIntent, SwirlButtonSize, SwirlButtonTextAlign, SwirlButtonType, SwirlButtonVariant } from "./components/swirl-button/swirl-button";
 export { SwirlButtonGroupOrientation, SwirlButtonGroupSpacing } from "./components/swirl-button-group/swirl-button-group";
 export { SwirlCardBorderRadius, SwirlCardElevationLevel, SwirlCardIntent, SwirlCardJustifyContent, SwirlCardOverflow, SwirlCardPadding } from "./components/swirl-card/swirl-card";
+export { SwirlCarouselPadding, SwirlCarouselSpacing } from "./components/swirl-carousel/swirl-carousel";
 export { SwirlCheckboxLabelWeight, SwirlCheckboxState, SwirlCheckboxVariant } from "./components/swirl-checkbox/swirl-checkbox";
 export { SwirlChipBorderRadius, SwirlChipIconColor, SwirlChipIntent, SwirlChipSize, SwirlChipVariant } from "./components/swirl-chip/swirl-chip";
 export { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
@@ -408,11 +410,14 @@ export namespace Components {
         "label": string;
         "loopAround"?: boolean;
         "nextSlideButtonLabel"?: string;
+        "paddingInlineEnd"?: SwirlCarouselPadding;
+        "paddingInlineStart"?: SwirlCarouselPadding;
         "previousSlideButtonLabel"?: string;
         /**
           * Scroll to slide with id.
          */
         "scrollToSlide": (id: string) => Promise<void>;
+        "spacing"?: SwirlCarouselSpacing;
     }
     /**
      * slot - The slide contents
@@ -6071,7 +6076,10 @@ declare namespace LocalJSX {
         "loopAround"?: boolean;
         "nextSlideButtonLabel"?: string;
         "onActiveSlidesChange"?: (event: SwirlCarouselCustomEvent<HTMLSwirlCarouselSlideElement[]>) => void;
+        "paddingInlineEnd"?: SwirlCarouselPadding;
+        "paddingInlineStart"?: SwirlCarouselPadding;
         "previousSlideButtonLabel"?: string;
+        "spacing"?: SwirlCarouselSpacing;
     }
     /**
      * slot - The slide contents

diff --git a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css
@@ -1,6 +1,8 @@
 @import "../../styles/media-queries.css";
 
 :host {
+  --swirl-carousel-spacing: var(--s-space-16);
+
   position: relative;
   display: block;
   overflow: hidden;
@@ -37,8 +39,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
-  padding: var(--s-space-24) var(--s-space-16) var(--s-space-24)
-    var(--s-space-16);
+  padding: var(--s-space-24) var(--s-space-16);
   scroll-padding: var(--s-space-16);
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
@@ -49,20 +50,10 @@
   }
 
   & ::slotted(*) {
-    margin-left: var(--s-space-16);
+    margin-left: var(--swirl-carousel-spacing);
     flex-grow: 0;
     flex-shrink: 0;
     scroll-snap-align: start;
-
-    @media (--from-tablet) {
-      margin-left: var(--s-space-24);
-    }
-  }
-
-  @media (--from-tablet) {
-    padding-right: var(--s-space-24);
-    padding-left: var(--s-space-24);
-    scroll-padding: var(--s-space-24);
   }
 }
 

diff --git a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.spec.tsx b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.spec.tsx
@@ -10,7 +10,7 @@ describe("swirl-carousel", () => {
     });
 
     expect(page.root).toEqualHtml(`
-      <swirl-carousel aria-roledescription="carousel" role="group">
+      <swirl-carousel aria-roledescription="carousel" role="group" style="--swirl-carousel-spacing: 16px;">
         <mock:shadow-root>
           <div class="carousel">
             <div aria-live="polite" class="carousel__slides">

diff --git a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx
@@ -12,6 +12,32 @@ import {
 } from "@stencil/core";
 import { debounce } from "../../utils";
 
+export type SwirlCarouselSpacing =
+  | "0"
+  | "2"
+  | "4"
+  | "8"
+  | "12"
+  | "16"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64";
+
+export type SwirlCarouselPadding =
+  | "0"
+  | "2"
+  | "4"
+  | "8"
+  | "12"
+  | "16"
+  | "24"
+  | "32"
+  | "40"
+  | "48"
+  | "64";
+
 /**
  * slot - The slides
  */
@@ -27,6 +53,9 @@ export class SwirlCarousel {
   @Prop() nextSlideButtonLabel?: string = "Next slide";
   @Prop() previousSlideButtonLabel?: string = "Previous slide";
   @Prop() loopAround?: boolean = false;
+  @Prop() paddingInlineEnd?: SwirlCarouselPadding;
+  @Prop() paddingInlineStart?: SwirlCarouselPadding;
+  @Prop() spacing?: SwirlCarouselSpacing = "16";
 
   @State() isAtEnd: boolean;
   @State() isAtStart: boolean;
@@ -165,6 +194,20 @@ export class SwirlCarousel {
   };
 
   render() {
+    this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
+
+    const slidesStyles = {
+      paddingInlineEnd: Boolean(this.paddingInlineEnd)
+        ? `var(--s-space-${this.paddingInlineEnd})`
+        : undefined,
+      paddingInlineStart: Boolean(this.paddingInlineStart)
+        ? `var(--s-space-${this.paddingInlineStart})`
+        : undefined,
+      scrollPadding: Boolean(this.paddingInlineStart)
+        ? `var(--s-space-${this.paddingInlineStart})`
+        : undefined,
+    };
+
     return (
       <Host
         aria-label={this.label}
@@ -197,6 +240,7 @@ export class SwirlCarousel {
           <div
             aria-live="polite"
             class="carousel__slides"
+            style={slidesStyles}
             onScroll={this.onScroll}
             ref={(el) => (this.slidesContainer = el)}
           >

diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json
@@ -1638,9 +1638,126 @@
           "name": "next-slide-button-label",
           "description": ""
         },
+        {
+          "name": "padding-inline-end",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "40"
+            },
+            {
+              "name": "48"
+            },
+            {
+              "name": "64"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-inline-start",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "40"
+            },
+            {
+              "name": "48"
+            },
+            {
+              "name": "64"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
         {
           "name": "previous-slide-button-label",
           "description": ""
+        },
+        {
+          "name": "spacing",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "40"
+            },
+            {
+              "name": "48"
+            },
+            {
+              "name": "64"
+            },
+            {
+              "name": "8"
+            }
+          ]
         }
       ]
     },