From 9d4f9b85413ca094959c10aa56e28fa0f8f069c8 Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Tue, 15 Oct 2024 14:42:54 +0530 Subject: [PATCH] feat: add height & styled props to carousel (#2375) * feat: add height & styled props to carousel * chore: update snaps * Create sharp-flowers-rush.md --- .changeset/sharp-flowers-rush.md | 5 +++++ .../blade/src/components/Carousel/Carousel.web.tsx | 7 +++++++ .../__snapshots__/Carousel.ssr.test.tsx.snap | 4 +++- .../__snapshots__/Carousel.web.test.tsx.snap | 12 ++++++++++++ packages/blade/src/components/Carousel/types.ts | 4 +++- 5 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 .changeset/sharp-flowers-rush.md diff --git a/.changeset/sharp-flowers-rush.md b/.changeset/sharp-flowers-rush.md new file mode 100644 index 00000000000..915840ccb6e --- /dev/null +++ b/.changeset/sharp-flowers-rush.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +feat(blade): add height & styled props to carousel diff --git a/packages/blade/src/components/Carousel/Carousel.web.tsx b/packages/blade/src/components/Carousel/Carousel.web.tsx index a1065cc20f4..ed2f609ed4a 100644 --- a/packages/blade/src/components/Carousel/Carousel.web.tsx +++ b/packages/blade/src/components/Carousel/Carousel.web.tsx @@ -26,6 +26,7 @@ import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren'; import { useTheme } from '~components/BladeProvider'; import { useFirstRender } from '~utils/useFirstRender'; +import { getStyledProps } from '~components/Box/styledProps'; type ControlsProp = Required< Pick< @@ -114,6 +115,7 @@ const CarouselContainer = styled(BaseBox)<{ return { width: '100%', + height: '100%', overflowX: 'scroll', display: 'flex', flexWrap: 'nowrap', @@ -261,6 +263,8 @@ const Carousel = ({ indicatorVariant = 'gray', navigationButtonVariant = 'filled', carouselItemAlignment = 'start', + height, + ...props }: CarouselProps): React.ReactElement => { const { platform } = useTheme(); const [activeSlide, setActiveSlide] = React.useState(0); @@ -513,6 +517,8 @@ const Carousel = ({ display="flex" alignItems="center" flexDirection="column" + height={height} + {...getStyledProps(props)} > {shouldShowPrevButton && shouldNavButtonsFloat ? ( diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap index 6da37d24910..8f6d84638f4 100644 --- a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap +++ b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render a Carousel ssr 1`] = `"

Carousel Item 1

Carousel Item 2

Carousel Item 3

Carousel Item 4

Carousel Item 5

"`; +exports[` should render a Carousel ssr 1`] = `"

Carousel Item 1

Carousel Item 2

Carousel Item 3

Carousel Item 4

Carousel Item 5

"`; exports[` should render a Carousel ssr 2`] = ` .c9.c9.c9.c9.c9 { @@ -96,6 +96,7 @@ exports[` should render a Carousel ssr 2`] = ` -ms-flex-align: center; align-items: center; position: relative; + height: 100%; width: 100%; gap: 12px; } @@ -192,6 +193,7 @@ exports[` should render a Carousel ssr 2`] = ` .c3.c3.c3.c3.c3 { width: 100%; + height: 100%; overflow-x: scroll; display: -webkit-box; display: -webkit-flex; diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap index 1329dfa7307..1cad1ca367d 100644 --- a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap +++ b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap @@ -94,6 +94,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = ` -ms-flex-align: center; align-items: center; position: relative; + height: 100%; width: 100%; gap: 12px; } @@ -194,6 +195,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = ` .c3.c3.c3.c3.c3 { width: 100%; + height: 100%; overflow-x: scroll; display: -webkit-box; display: -webkit-flex; @@ -514,6 +516,7 @@ exports[`Carousel Snapshots should render 1`] = ` -ms-flex-align: center; align-items: center; position: relative; + height: 100%; width: 100%; gap: 12px; } @@ -610,6 +613,7 @@ exports[`Carousel Snapshots should render 1`] = ` .c3.c3.c3.c3.c3 { width: 100%; + height: 100%; overflow-x: scroll; display: -webkit-box; display: -webkit-flex; @@ -890,6 +894,7 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`] -ms-flex-align: center; align-items: center; position: relative; + height: 100%; width: 100%; gap: 12px; } @@ -977,6 +982,7 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`] .c4.c4.c4.c4.c4 { width: 100%; + height: 100%; overflow-x: scroll; display: -webkit-box; display: -webkit-flex; @@ -1257,6 +1263,7 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = ` -ms-flex-align: center; align-items: center; position: relative; + height: 100%; width: 100%; gap: 12px; } @@ -1361,6 +1368,7 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = ` .c3.c3.c3.c3.c3 { width: 100%; + height: 100%; overflow-x: scroll; display: -webkit-box; display: -webkit-flex; @@ -1676,6 +1684,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = ` -ms-flex-align: center; align-items: center; position: relative; + height: 100%; width: 100%; gap: 12px; } @@ -1776,6 +1785,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = ` .c3.c3.c3.c3.c3 { width: 100%; + height: 100%; overflow-x: scroll; display: -webkit-box; display: -webkit-flex; @@ -2121,6 +2131,7 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = ` -ms-flex-align: center; align-items: center; position: relative; + height: 100%; width: 100%; gap: 12px; } @@ -2217,6 +2228,7 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = ` .c3.c3.c3.c3.c3 { width: 100%; + height: 100%; overflow-x: scroll; display: -webkit-box; display: -webkit-flex; diff --git a/packages/blade/src/components/Carousel/types.ts b/packages/blade/src/components/Carousel/types.ts index 4e9af284a54..e57bda3adba 100644 --- a/packages/blade/src/components/Carousel/types.ts +++ b/packages/blade/src/components/Carousel/types.ts @@ -1,5 +1,6 @@ import type { Theme } from '~components/BladeProvider'; import type { BoxProps } from '~components/Box'; +import type { StyledPropsBlade } from '~components/Box/styledProps'; import type { Platform } from '~utils'; import type { DotNotationToken } from '~utils/lodashButBetter/get'; @@ -96,6 +97,7 @@ type CarouselProps = { * @default undefined */ accessibilityLabel?: string; -}; + height?: BoxProps['height']; +} & StyledPropsBlade; export type { CarouselProps };