feat: add height & styled props to carousel (#2375)

* feat: add height & styled props to carousel * chore: update snaps * Create sharp-flowers-rush.md
razorpay · Oct 15, 2024 · 9d4f9b8 · 9d4f9b8
1 parent 18bf5e1
commit 9d4f9b8
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 2 deletions.
diff --git a/.changeset/sharp-flowers-rush.md 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
@@ -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)}
       >
         <BaseBox
           width="100%"
@@ -521,6 +527,7 @@ const Carousel = ({
           alignItems="center"
           gap="spacing.4"
           flexDirection="row"
+          height="100%"
         >
           {shouldShowPrevButton && shouldNavButtonsFloat ? (
             <BaseBox zIndex={2} position="absolute" left="spacing.11">

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
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Carousel /> should render a Carousel ssr 1`] = `"<div id="root"><div data-blade-component="carousel" class="BaseBox-bmPWx cDXDci"><div data-blade-component="base-box" class="BaseBox-bmPWx bHGIpZ"><div tabindex="0" role="group" aria-roledescription="carousel" data-blade-component="base-box" class="BaseBox-bmPWx Carouselweb__CarouselContainer-v6xykj-0 biROtj binoEC"><div role="tabpanel" aria-roledescription="slide" aria-label="1 of 5" id="carousel-undefined-carousel-item-0" data-slide-index="0" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 1</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="2 of 5" id="carousel-undefined-carousel-item-1" data-slide-index="1" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 2</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="3 of 5" id="carousel-undefined-carousel-item-2" data-slide-index="2" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 3</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="4 of 5" id="carousel-undefined-carousel-item-3" data-slide-index="3" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 4</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="5 of 5" id="carousel-undefined-carousel-item-4" data-slide-index="4" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 5</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx cuFcuZ"><button data-blade-component="NavigationButton" aria-label="Previous Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 uokoK"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button><div role="tablist" aria-label="Slides" data-blade-component="base-box" class="BaseBox-bmPWx jDluQZ"><button role="tab" aria-label="Slide 1" aria-selected="true" aria-controls="carousel-undefined-carousel-item-0" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 gzDKit"></button><button role="tab" aria-label="Slide 3" aria-selected="false" aria-controls="carousel-undefined-carousel-item-2" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 dApwcC"></button><button role="tab" aria-label="Slide 5" aria-selected="false" aria-controls="carousel-undefined-carousel-item-4" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 dApwcC"></button></div><button data-blade-component="NavigationButton" aria-label="Next Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 uokoK"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
+exports[`<Carousel /> should render a Carousel ssr 1`] = `"<div id="root"><div data-blade-component="carousel" class="BaseBox-bmPWx cDXDci"><div data-blade-component="base-box" class="BaseBox-bmPWx ezlWyv"><div tabindex="0" role="group" aria-roledescription="carousel" data-blade-component="base-box" class="BaseBox-bmPWx Carouselweb__CarouselContainer-v6xykj-0 biROtj bJbYvA"><div role="tabpanel" aria-roledescription="slide" aria-label="1 of 5" id="carousel-undefined-carousel-item-0" data-slide-index="0" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 1</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="2 of 5" id="carousel-undefined-carousel-item-1" data-slide-index="1" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 2</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="3 of 5" id="carousel-undefined-carousel-item-2" data-slide-index="2" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 3</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="4 of 5" id="carousel-undefined-carousel-item-3" data-slide-index="3" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 4</p></div><div role="tabpanel" aria-roledescription="slide" aria-label="5 of 5" id="carousel-undefined-carousel-item-4" data-slide-index="4" data-blade-component="base-box" class="BaseBox-bmPWx CarouselItemweb__StyledCarouselItem-sc-56ppo3-0  kKlDzW"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Carousel Item 5</p></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx cuFcuZ"><button data-blade-component="NavigationButton" aria-label="Previous Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 uokoK"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button><div role="tablist" aria-label="Slides" data-blade-component="base-box" class="BaseBox-bmPWx jDluQZ"><button role="tab" aria-label="Slide 1" aria-selected="true" aria-controls="carousel-undefined-carousel-item-0" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 gzDKit"></button><button role="tab" aria-label="Slide 3" aria-selected="false" aria-controls="carousel-undefined-carousel-item-2" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 dApwcC"></button><button role="tab" aria-label="Slide 5" aria-selected="false" aria-controls="carousel-undefined-carousel-item-4" data-blade-component="carousel-indicator-button" class="StyledIndicatorButtonweb__StyledIndicatorButton-egnakv-0 dApwcC"></button></div><button data-blade-component="NavigationButton" aria-label="Next Slide" class="StyledNavigationButtonweb__StyledNavigationButton-p5u8i5-0 uokoK"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
 
 exports[`<Carousel /> should render a Carousel ssr 2`] = `
 .c9.c9.c9.c9.c9 {
@@ -96,6 +96,7 @@ exports[`<Carousel /> 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[`<Carousel /> 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
@@ -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
@@ -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 };