fix(html): toolbar scroll buttons should be around by default

telerik · Jan 24, 2025 · 6917fb0 · 6917fb0
1 parent 63c3bec
commit 6917fb0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx b/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx
@@ -1,7 +1,7 @@
 import { Button } from '../../button';
 import { ColorPicker } from '../../colorpicker';
 import { ButtonGroup } from '../../button-group';
-import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollable } from '../../toolbar';
+import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollableButtonsHidden } from '../../toolbar';
 
 import { Combobox, MenuButton } from '../..';
 
@@ -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">
-                      <ToolbarScrollable fillMode={fillMode}>
+                      <ToolbarScrollableButtonsHidden fillMode={fillMode}>
                           <Button icon="arrow-rotate-ccw" fillMode={fillMode}></Button>
                           <Button icon="arrow-rotate-cw" fillMode={fillMode}></Button>
                           <ToolbarSeparator></ToolbarSeparator>
@@ -88,7 +88,7 @@ export default () =>(
                           <MenuButton fillMode={fillMode} icon="align-middle" showArrow></MenuButton>
                           <ToolbarSeparator></ToolbarSeparator>
                           <Button fillMode={fillMode} icon="text-wrap"></Button>
-                      </ToolbarScrollable>
+                      </ToolbarScrollableButtonsHidden>
                     </section>
                 </>
             ))}

diff --git a/packages/html/src/toolbar/tests/toolbar-scrollable-buttons.tsx b/packages/html/src/toolbar/tests/toolbar-scrollable-buttons.tsx
@@ -7,7 +7,7 @@ export default () =>(
 
             <span className="k-colspan-all k-col-span-full">Toolbar Buttons Around</span>
             <section className="k-colspan-all k-col-span-full">
-                <ToolbarScrollable scrollButtons="around" />
+                <ToolbarScrollable />
             </section>
 
             <span className="k-colspan-all k-col-span-full">Toolbar Buttons Start</span>

diff --git a/packages/html/src/toolbar/toolbar.spec.tsx b/packages/html/src/toolbar/toolbar.spec.tsx
@@ -37,6 +37,7 @@ export type KendoToolbarState = { [K in (typeof states)[number]]?: boolean };
 const defaultOptions = {
     size: Size.medium,
     fillMode: FillMode.solid,
+    scrollButtons: 'around'
 };
 
 export const Toolbar = (
@@ -189,15 +190,15 @@ export const Toolbar = (
                 {
                     [`${TOOLBAR_CLASSNAME}-resizable`]: resizable,
                     [`${TOOLBAR_CLASSNAME}-scrollable`]: scrollable,
-                    [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: (scrollable && (scrollButtons === 'hidden' || !scrollButtons)),
+                    [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: (scrollable && scrollButtons === 'hidden'),
                     [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
                     [`${TOOLBAR_CLASSNAME}-section`]: section,
                 }
             )}
         >
             {!scrollable && toolbarChildren}
 
-            {scrollable && (scrollButtons === 'hidden' || !scrollButtons) &&
+            {scrollable && scrollButtons === 'hidden' &&
                <span className='k-toolbar-items k-toolbar-items-scroll'>{toolbarChildren}</span>
             }
 
@@ -223,7 +224,7 @@ export const Toolbar = (
                 </>
             }
 
-            {scrollable && scrollButtons === 'around' &&
+            {scrollable && (scrollButtons === 'around' || !scrollButtons) &&
                 <>
                     <Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
                     <ToolbarSeparator className="k-toolbar-button-separator" />