fix(SfScrollable): floating disabled state, refactor

vuestorefront · Jul 25, 2023 · fc789ac · fc789ac
1 parent 7801e66
commit fc789ac
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx b/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,

diff --git a/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue b/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 />