From 4bf7cd44afd0c912379de47d0f7c4d48caeac7eb Mon Sep 17 00:00:00 2001 From: Daniel Rodrigues Date: Tue, 14 Jan 2025 15:32:38 +0000 Subject: [PATCH] Allow to specify SwirlCarousel spacing and padding (#911) --- .changeset/many-lions-drive.md | 7 ++ packages/swirl-components/src/components.d.ts | 8 ++ .../swirl-carousel/swirl-carousel.css | 17 +-- .../swirl-carousel/swirl-carousel.spec.tsx | 2 +- .../swirl-carousel/swirl-carousel.tsx | 44 +++++++ packages/swirl-components/vscode-data.json | 117 ++++++++++++++++++ 6 files changed, 181 insertions(+), 14 deletions(-) create mode 100644 .changeset/many-lions-drive.md diff --git a/.changeset/many-lions-drive.md b/.changeset/many-lions-drive.md new file mode 100644 index 000000000..56807351b --- /dev/null +++ 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 index c03105574..1af42840e 100644 --- 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; + "spacing"?: SwirlCarouselSpacing; } /** * slot - The slide contents @@ -6071,7 +6076,10 @@ declare namespace LocalJSX { "loopAround"?: boolean; "nextSlideButtonLabel"?: string; "onActiveSlidesChange"?: (event: SwirlCarouselCustomEvent) => 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 index fba2dbd6a..307c780c6 100644 --- 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 index ec18581dc..d52e1c85a 100644 --- 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(` - +
diff --git a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx index 3ab25797a..2a7661928 100644 --- 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 ( (this.slidesContainer = el)} > diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json index 7c31d2cf5..2593170e5 100644 --- 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" + } + ] } ] },