fix(SfScrollable): floating disabled state, refactor (#2936)

.changeset/short-lions-develop.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': patch
+'@storefront-ui/vue': patch
+---
+
+Unify code between vue and react, when buttons are disabled in floating button position mode they should be hidden

apps/docs/components/components/scrollable.md

@@ -15,14 +15,10 @@ This component is shipped in our NPM package, but its API might change based on
 ::: read-more
 
 <!-- react -->
-
 Learn more about `useScrollable` hook in the [Hooks > useScrollable docs](/react/hooks/useScrollable.html).
-
 <!-- end react -->
 <!-- vue -->
-
 Learn more about `useScrollable` composable in the [Composables > useScrollable docs](/vue/hooks/useScrollable.html).
-
 <!-- end vue -->
 
 :::
@@ -36,14 +32,10 @@ Can be setup that will be without scrollbar
 <Showcase showcase-name="Scrollable/HideScrollbar" style="min-height:240px">
 
 <!-- vue -->
-
 <<<../../preview/nuxt/pages/showcases/Scrollable/HideScrollbar.vue
-
 <!-- end vue -->
 <!-- react -->
-
 <<<../../preview/next/pages/showcases/Scrollable/HideScrollbar.tsx#source
-
 <!-- end react -->
 
 </Showcase>
@@ -55,14 +47,10 @@ Can be setup that will be without scrollbar
 <Showcase showcase-name="Scrollable/SnapCenter" style="min-height:260px">
 
 <!-- vue -->
-
 <<<../../preview/nuxt/pages/showcases/Scrollable/SnapCenter.vue
-
 <!-- end vue -->
 <!-- react -->
-
 <<<../../preview/next/pages/showcases/Scrollable/SnapCenter.tsx#source
-
 <!-- end react -->
 
 </Showcase>
@@ -74,14 +62,10 @@ By default `SfScrollable` scroll by one page of items, but can be modified that
 <Showcase showcase-name="Scrollable/ScrollByOneItem" style="min-height:260px">
 
 <!-- vue -->
-
 <<<../../preview/nuxt/pages/showcases/Scrollable/ScrollByOneItem.vue
-
 <!-- end vue -->
 <!-- react -->
-
 <<<../../preview/next/pages/showcases/Scrollable/ScrollByOneItem.tsx#source
-
 <!-- end react -->
 
 </Showcase>
@@ -157,14 +141,11 @@ The previous and next buttons have `aria-label` attributes (`buttonPrevAriaLabel
 <SourceCode>
 
 <!-- vue -->
-
 <<<../../../packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
-
 <!-- end vue -->
 <!-- react -->
-
 <<< ../../../packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx
-
 <!-- end react -->
+
 </SourceCode>
 ::::::

packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx

@@ -92,8 +92,8 @@ const SfScrollable = polymorphicForwardRef<typeof defaultScrollableTag, SfScroll
             slotPrefix: <SfIconChevronLeft />,
             ariaLabel: buttonPrevAriaLabel,
             className: classNames(
-              'hidden md:block !ring-neutral-500 !text-neutral-500 disabled:!ring-disabled-300 disabled:!text-disabled-500',
               classNameButton,
+              isFloating ? 'disabled:hidden' : 'disabled:!ring-disabled-300 disabled:!text-disabled-500',
             ),
           })}
         />
@@ -114,8 +114,8 @@ const SfScrollable = polymorphicForwardRef<typeof defaultScrollableTag, SfScroll
             slotPrefix: <SfIconChevronRight />,
             ariaLabel: buttonNextAriaLabel,
             className: classNames(
-              'hidden md:block !ring-neutral-500 !text-neutral-500 disabled:!ring-disabled-300 disabled:!text-disabled-500',
               classNameButton,
+              isFloating ? 'disabled:hidden' : 'disabled:!ring-disabled-300 disabled:!text-disabled-500',
             ),
           })}
         />
@@ -131,7 +131,7 @@ const SfScrollable = polymorphicForwardRef<typeof defaultScrollableTag, SfScroll
       >
         {buttonsPlacement !== SfScrollableButtonsPlacement.none && (
           <PreviousButton
-            classNameButton={classNames('!rounded-full bg-white', {
+            classNameButton={classNames('!rounded-full bg-white hidden md:block !ring-neutral-500 !text-neutral-500', {
               'mr-4': isBlock && isHorizontal,
               'mb-4 rotate-90': isBlock && !isHorizontal,
               'absolute left-4 z-10': isFloating && isHorizontal,
@@ -152,7 +152,7 @@ const SfScrollable = polymorphicForwardRef<typeof defaultScrollableTag, SfScroll
         </Tag>
         {buttonsPlacement !== SfScrollableButtonsPlacement.none && (
           <NextButton
-            classNameButton={classNames('!rounded-full bg-white', {
+            classNameButton={classNames('!rounded-full bg-white hidden md:block !ring-neutral-500 !text-neutral-500', {
               'ml-4': isBlock && isHorizontal,
               'mt-4 rotate-90': isBlock && !isHorizontal,
               'absolute right-4 z-10': isFloating && isHorizontal,

packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue

@@ -94,9 +94,9 @@ const { containerRef, state, getNextButtonProps, getPrevButtonProps } = useScrol
   })),
 );
 
-const changeDisabledClass = (isDisabled: boolean) =>
-  isDisabled ? '!ring-disabled-300 !text-disabled-500' : '!ring-neutral-500 !text-neutral-500';
 const isHorizontal = computed(() => props.direction === SfScrollableDirection.horizontal);
+const isFloating = computed(() => props.buttonsPlacement === SfScrollableButtonsPlacement.floating);
+const isBlock = computed(() => props.buttonsPlacement === SfScrollableButtonsPlacement.block);
 </script>
 
 <template>
@@ -112,14 +112,17 @@ const isHorizontal = computed(() => props.direction === SfScrollableDirection.ho
       size="lg"
       square
       :class="[
-        '!rounded-full bg-white hidden md:block',
-        buttonsPlacement === SfScrollableButtonsPlacement.block && (isHorizontal ? 'mr-4' : 'mb-4 rotate-90'),
-        buttonsPlacement === SfScrollableButtonsPlacement.floating && (isHorizontal ? 'left-4' : 'top-4 rotate-90'),
-        { 'absolute z-10': buttonsPlacement === SfScrollableButtonsPlacement.floating },
-        changeDisabledClass(typeof prevDisabled === 'boolean' ? prevDisabled : getPrevButtonProps.disabled),
+        '!rounded-full bg-white hidden md:block !ring-neutral-500 !text-neutral-500',
+        {
+          'mr-4': isBlock && isHorizontal,
+          'mb-4 rotate-90': isBlock && !isHorizontal,
+          'absolute left-4 z-10': isFloating && isHorizontal,
+          'absolute top-4 rotate-90 z-10': isFloating && !isHorizontal,
+        },
+        isFloating ? 'disabled:hidden' : 'disabled:!ring-disabled-300 disabled:!text-disabled-500',
       ]"
       v-bind="getPrevButtonProps"
-      :disabled="prevDisabled"
+      :disabled="prevDisabled || getPrevButtonProps.disabled"
       :aria-label="buttonPrevAriaLabel"
     >
       <SfIconChevronLeft />
@@ -151,14 +154,17 @@ const isHorizontal = computed(() => props.direction === SfScrollableDirection.ho
       size="lg"
       square
       :class="[
-        '!rounded-full bg-white hidden md:block',
-        buttonsPlacement === SfScrollableButtonsPlacement.block && (isHorizontal ? 'ml-4' : 'mt-4 rotate-90'),
-        buttonsPlacement === SfScrollableButtonsPlacement.floating && (isHorizontal ? 'right-4' : 'bottom-4 rotate-90'),
-        { 'absolute z-10': buttonsPlacement === SfScrollableButtonsPlacement.floating },
-        changeDisabledClass(typeof nextDisabled === 'boolean' ? nextDisabled : getNextButtonProps.disabled),
+        '!rounded-full bg-white hidden md:block !ring-neutral-500 !text-neutral-500',
+        {
+          'ml-4': isBlock && isHorizontal,
+          'mt-4 rotate-90': isBlock && !isHorizontal,
+          'absolute right-4 z-10': isFloating && isHorizontal,
+          'absolute bottom-4 rotate-90 z-10': isFloating && !isHorizontal,
+        },
+        isFloating ? 'disabled:hidden' : 'disabled:!ring-disabled-300 disabled:!text-disabled-500',
       ]"
       v-bind="getNextButtonProps"
-      :disabled="nextDisabled"
+      :disabled="nextDisabled || getNextButtonProps.disabled"
       :aria-label="buttonNextAriaLabel"
     >
       <SfIconChevronRight />