From f0b059925ddcdd67075fb9d8a2c020e73b5870e0 Mon Sep 17 00:00:00 2001
From: Tejas <tjsrskr@gmail.com>
Date: Thu, 31 Oct 2024 17:48:04 +0530
Subject: [PATCH 1/2] hide controls when totalSlides < visibleItems

---
 .../src/components/Carousel/Carousel.web.tsx  | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/packages/blade/src/components/Carousel/Carousel.web.tsx b/packages/blade/src/components/Carousel/Carousel.web.tsx
index ed2f609ed4a..d13305a89ad 100644
--- a/packages/blade/src/components/Carousel/Carousel.web.tsx
+++ b/packages/blade/src/components/Carousel/Carousel.web.tsx
@@ -39,6 +39,7 @@ type ControlsProp = Required<
   onIndicatorButtonClick: (index: number) => void;
   onNextButtonClick: () => void;
   onPreviousButtonClick: () => void;
+  showControls: boolean;
 };
 
 const Controls = ({
@@ -51,43 +52,46 @@ const Controls = ({
   onPreviousButtonClick,
   indicatorVariant,
   navigationButtonVariant,
+  showControls,
 }: ControlsProp): React.ReactElement => {
-  if (navigationButtonPosition === 'bottom') {
-    return (
-      <Box marginTop="spacing.7" display="flex" alignItems="center" gap="spacing.4">
-        <NavigationButton
-          type="previous"
-          variant={navigationButtonVariant}
-          onClick={onPreviousButtonClick}
-        />
-        {showIndicators ? (
+  if (showControls) {
+    if (navigationButtonPosition === 'bottom') {
+      return (
+        <Box marginTop="spacing.7" display="flex" alignItems="center" gap="spacing.4">
+          <NavigationButton
+            type="previous"
+            variant={navigationButtonVariant}
+            onClick={onPreviousButtonClick}
+          />
+          {showIndicators ? (
+            <Indicators
+              onClick={onIndicatorButtonClick}
+              activeIndex={activeIndicator}
+              totalItems={totalSlides}
+              variant={indicatorVariant}
+            />
+          ) : null}
+          <NavigationButton
+            onClick={onNextButtonClick}
+            type="next"
+            variant={navigationButtonVariant}
+          />
+        </Box>
+      );
+    }
+
+    if (showIndicators && navigationButtonPosition === 'side') {
+      return (
+        <Box marginTop="spacing.7">
           <Indicators
             onClick={onIndicatorButtonClick}
             activeIndex={activeIndicator}
             totalItems={totalSlides}
             variant={indicatorVariant}
           />
-        ) : null}
-        <NavigationButton
-          onClick={onNextButtonClick}
-          type="next"
-          variant={navigationButtonVariant}
-        />
-      </Box>
-    );
-  }
-
-  if (showIndicators && navigationButtonPosition === 'side') {
-    return (
-      <Box marginTop="spacing.7">
-        <Indicators
-          onClick={onIndicatorButtonClick}
-          activeIndex={activeIndicator}
-          totalItems={totalSlides}
-          variant={indicatorVariant}
-        />
-      </Box>
-    );
+        </Box>
+      );
+    }
   }
 
   return <></>;
@@ -308,6 +312,7 @@ const Carousel = ({
   const shouldNavButtonsFloat = isResponsive && navigationButtonPosition === 'side';
   const totalNumberOfSlides = React.Children.count(children);
   const numberOfIndicators = Math.ceil(totalNumberOfSlides / _visibleItems);
+  const shouldShowControls = totalNumberOfSlides > _visibleItems;
 
   // hide next/prev button on reaching start/end when carousel is responsive
   // in non-responsive carousel we always show the next/prev buttons to allow looping
@@ -586,6 +591,7 @@ const Carousel = ({
           onPreviousButtonClick={goToPreviousSlide}
           indicatorVariant={indicatorVariant}
           navigationButtonVariant={navigationButtonVariant}
+          showControls={shouldShowControls}
         />
       </BaseBox>
     </CarouselContext.Provider>

From 8543f1f6e3615e3a003ce6904a0f603d22a886c2 Mon Sep 17 00:00:00 2001
From: Tejas <tjsrskr@gmail.com>
Date: Thu, 31 Oct 2024 18:30:35 +0530
Subject: [PATCH 2/2] Fixed side and floating buttons

---
 packages/blade/src/components/Carousel/Carousel.web.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/blade/src/components/Carousel/Carousel.web.tsx b/packages/blade/src/components/Carousel/Carousel.web.tsx
index d13305a89ad..e8d96e81f85 100644
--- a/packages/blade/src/components/Carousel/Carousel.web.tsx
+++ b/packages/blade/src/components/Carousel/Carousel.web.tsx
@@ -534,7 +534,7 @@ const Carousel = ({
           flexDirection="row"
           height="100%"
         >
-          {shouldShowPrevButton && shouldNavButtonsFloat ? (
+          {shouldShowPrevButton && shouldNavButtonsFloat && shouldShowControls ? (
             <BaseBox zIndex={2} position="absolute" left="spacing.11">
               <NavigationButton
                 type="previous"
@@ -543,7 +543,7 @@ const Carousel = ({
               />
             </BaseBox>
           ) : null}
-          {isNavButtonsOnSide ? (
+          {isNavButtonsOnSide && shouldShowControls ? (
             <NavigationButton
               type="previous"
               variant={navigationButtonVariant}
@@ -564,7 +564,7 @@ const Carousel = ({
           >
             {children}
           </CarouselBody>
-          {shouldShowNextButton && shouldNavButtonsFloat ? (
+          {shouldShowNextButton && shouldNavButtonsFloat && shouldShowControls ? (
             <BaseBox zIndex={2} position="absolute" right="spacing.11">
               <NavigationButton
                 onClick={goToNextSlide}
@@ -573,7 +573,7 @@ const Carousel = ({
               />
             </BaseBox>
           ) : null}
-          {isNavButtonsOnSide ? (
+          {isNavButtonsOnSide && shouldShowControls ? (
             <NavigationButton
               onClick={goToNextSlide}
               type="next"