feat(components): Add block padding to SwirlCarousel

getflip · Jan 23, 2025 · bc04488 · bc04488
1 parent a1fc187
commit bc04488
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 7 deletions.
diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts
@@ -413,6 +413,9 @@ export namespace Components {
         "label": string;
         "loopAround"?: boolean;
         "nextSlideButtonLabel"?: string;
+        "padding"?: SwirlCarouselPadding;
+        "paddingBlockEnd"?: SwirlCarouselPadding;
+        "paddingBlockStart"?: SwirlCarouselPadding;
         "paddingInlineEnd"?: SwirlCarouselPadding;
         "paddingInlineStart"?: SwirlCarouselPadding;
         "previousSlideButtonLabel"?: string;
@@ -6092,6 +6095,9 @@ declare namespace LocalJSX {
         "loopAround"?: boolean;
         "nextSlideButtonLabel"?: string;
         "onActiveSlidesChange"?: (event: SwirlCarouselCustomEvent<HTMLSwirlCarouselSlideElement[]>) => void;
+        "padding"?: SwirlCarouselPadding;
+        "paddingBlockEnd"?: SwirlCarouselPadding;
+        "paddingBlockStart"?: SwirlCarouselPadding;
         "paddingInlineEnd"?: SwirlCarouselPadding;
         "paddingInlineStart"?: SwirlCarouselPadding;
         "previousSlideButtonLabel"?: string;

diff --git a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css
@@ -2,14 +2,11 @@
 
 :host {
   --swirl-carousel-spacing: var(--s-space-16);
-  --swirl-carousel-padding-block: var(--s-space-24);
 
   position: relative;
   display: block;
   overflow: hidden;
   width: 100%;
-  margin-top: calc(-1 * var(--swirl-carousel-padding-block));
-  margin-bottom: calc(-1 * var(--swirl-carousel-padding-block));
 
   &(:hover) {
     & .carousel__previous-slide-button,
@@ -33,9 +30,9 @@
   &:after {
     content: '';
     width: var(--s-space-32);
-    height: calc(100% - var(--swirl-carousel-padding-block) * 2);
+    height: 100%;
     position: absolute;
-    top: var(--swirl-carousel-padding-block);
+    top: 0;
     z-index: 1;
     pointer-events: none;
     transition: opacity 0.2s;
@@ -71,8 +68,6 @@
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
-  padding: var(--swirl-carousel-padding-block) var(--s-space-16);
-  scroll-padding: var(--s-space-16);
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;

diff --git a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx
@@ -55,6 +55,9 @@ export class SwirlCarousel {
   @Prop() previousSlideButtonLabel?: string = "Previous slide";
   @Prop() fade?: boolean = false;
   @Prop() loopAround?: boolean = false;
+  @Prop() padding?: SwirlCarouselPadding = "16";
+  @Prop() paddingBlockEnd?: SwirlCarouselPadding;
+  @Prop() paddingBlockStart?: SwirlCarouselPadding;
   @Prop() paddingInlineEnd?: SwirlCarouselPadding;
   @Prop() paddingInlineStart?: SwirlCarouselPadding;
   @Prop() spacing?: SwirlCarouselSpacing = "16";
@@ -199,6 +202,15 @@ export class SwirlCarousel {
     this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`);
 
     const slidesStyles = {
+      padding: Boolean(this.padding)
+        ? `var(--s-space-${this.padding})`
+        : undefined,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd)
+        ? `var(--s-space-${this.paddingBlockEnd})`
+        : undefined,
+      paddingBlockStart: Boolean(this.paddingBlockStart)
+        ? `var(--s-space-${this.paddingBlockStart})`
+        : undefined,
       paddingInlineEnd: Boolean(this.paddingInlineEnd)
         ? `var(--s-space-${this.paddingInlineEnd})`
         : undefined,
@@ -207,6 +219,8 @@ export class SwirlCarousel {
         : undefined,
       scrollPadding: Boolean(this.paddingInlineStart)
         ? `var(--s-space-${this.paddingInlineStart})`
+        : Boolean(this.padding)
+        ? `var(--s-space-${this.padding})`
         : undefined,
     };
 

diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json
@@ -1642,6 +1642,123 @@
           "name": "next-slide-button-label",
           "description": ""
         },
+        {
+          "name": "padding",
+          "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-block-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-block-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": "padding-inline-end",
           "description": "",