From 8849fa9ff030487e7041fbdd12d61cae6776a657 Mon Sep 17 00:00:00 2001
From: Teya Veselinova <tveselin@progress.com>
Date: Thu, 23 Jan 2025 16:52:37 +0200
Subject: [PATCH] fix(html): fix toolbar and tabstrip scrollingPosition prop

---
 packages/html/src/tabstrip/tabstrip.spec.tsx                | 4 ++--
 .../tabstrip/tests/tabstrip-scrollable-buttons-hidden.tsx   | 6 +++---
 packages/html/src/toolbar/tests/toolbar-fill-modes.tsx      | 2 +-
 .../src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx | 4 ++--
 packages/html/src/toolbar/toolbar.spec.tsx                  | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/html/src/tabstrip/tabstrip.spec.tsx b/packages/html/src/tabstrip/tabstrip.spec.tsx
index 56a390ef9b5..cceac903c9d 100644
--- a/packages/html/src/tabstrip/tabstrip.spec.tsx
+++ b/packages/html/src/tabstrip/tabstrip.spec.tsx
@@ -19,7 +19,7 @@ export type KendoTabStripProps = KendoTabStripOptions & {
     tabStripItems?: React.JSX.Element | React.JSX.Element[];
     scrollable?: boolean;
     scrollButtons?: "around" | "start" | "end" | "hidden";
-    scrollingPosition?: "start" | "end";
+    scrollingPosition?: "start" | "end" | "both";
     dir?: "rtl" | "ltr";
 };
 
@@ -80,7 +80,7 @@ export const TabStrip = (
                     [`${TABSTRIP_CLASSNAME}-${position}`]: position,
                     [`${TABSTRIP_CLASSNAME}-scrollable`]: scrollable,
                     [`${TABSTRIP_CLASSNAME}-scrollable-overlay`]: (scrollable && (scrollButtons === 'hidden' || !scrollButtons) ),
-                    [`${TABSTRIP_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+                    [`${TABSTRIP_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition  && scrollingPosition !== 'both',
                 },
                 optionClassNames(TABSTRIP_CLASSNAME, {size})
             )}>
diff --git a/packages/html/src/tabstrip/tests/tabstrip-scrollable-buttons-hidden.tsx b/packages/html/src/tabstrip/tests/tabstrip-scrollable-buttons-hidden.tsx
index 2c9557148cd..8f13fb13555 100644
--- a/packages/html/src/tabstrip/tests/tabstrip-scrollable-buttons-hidden.tsx
+++ b/packages/html/src/tabstrip/tests/tabstrip-scrollable-buttons-hidden.tsx
@@ -53,7 +53,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden scrollingPosition={null}
+                <TabStripScrollableButtonsHidden scrollingPosition="both"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />
@@ -117,7 +117,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden position="left" scrollingPosition={null}
+                <TabStripScrollableButtonsHidden position="left" scrollingPosition="both"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />
@@ -182,7 +182,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden scrollingPosition={null} dir="rtl"
+                <TabStripScrollableButtonsHidden scrollingPosition="both" dir="rtl"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />
diff --git a/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx b/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx
index b7b92d16ee1..5a25b8ae61a 100644
--- a/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx
+++ b/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx
@@ -52,7 +52,7 @@ export default () =>(
                     </section>
                     <span className="k-colspan-all k-col-span-full">{fillMode} with overlay</span>
                     <section className="k-colspan-all k-col-span-full">
-                      <ToolbarScrollableButtonsHidden fillMode={fillMode}>
+                      <ToolbarScrollableButtonsHidden scrollingPosition="both" fillMode={fillMode}>
                           <Button icon="arrow-rotate-ccw" fillMode={fillMode}></Button>
                           <Button icon="arrow-rotate-cw" fillMode={fillMode}></Button>
                           <ToolbarSeparator></ToolbarSeparator>
diff --git a/packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx b/packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx
index 2d983e8ff24..edf5538eb96 100644
--- a/packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx
+++ b/packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx
@@ -17,12 +17,12 @@ export default () =>(
 
             <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle</span>
             <section className="k-colspan-all k-col-span-full">
-                <ToolbarScrollableButtonsHidden scrollingPosition={null} />
+                <ToolbarScrollableButtonsHidden scrollingPosition="both" />
             </section>
 
             <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle RTL</span>
             <section className="k-colspan-all k-col-span-full" dir="rtl">
-                <ToolbarScrollableButtonsHidden scrollingPosition={null} />
+                <ToolbarScrollableButtonsHidden scrollingPosition="both" />
             </section>
 
         </div>
diff --git a/packages/html/src/toolbar/toolbar.spec.tsx b/packages/html/src/toolbar/toolbar.spec.tsx
index 8c7a6f2dfb1..d99e88510d7 100644
--- a/packages/html/src/toolbar/toolbar.spec.tsx
+++ b/packages/html/src/toolbar/toolbar.spec.tsx
@@ -29,7 +29,7 @@ export type KendoToolbarProps = KendoToolbarOptions & {
     resizable?: boolean;
     scrollable?: boolean;
     scrollButtons?: 'hidden' | 'start' | 'end' | 'around';
-    scrollingPosition?: 'start' | 'end';
+    scrollingPosition?: 'start' | 'end' | 'both';
     section?: boolean;
 };
 
@@ -192,7 +192,7 @@ export const Toolbar = (
                     [`${TOOLBAR_CLASSNAME}-resizable`]: resizable,
                     [`${TOOLBAR_CLASSNAME}-scrollable`]: scrollable,
                     [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: (scrollable && scrollButtons === 'hidden'),
-                    [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+                    [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition && scrollingPosition !== 'both',
                     [`${TOOLBAR_CLASSNAME}-section`]: section,
                 }
             )}