From a5756b0baacf33391b02d0208b2b009954e5b74d Mon Sep 17 00:00:00 2001
From: Teya Veselinova <tveselin@progress.com>
Date: Wed, 22 Jan 2025 15:53:03 +0200
Subject: [PATCH] fix(html): replace toolbar and tabstrip scroll buttons with
 spans

---
 packages/html/src/tabstrip/tabstrip.spec.tsx | 60 +++++++++++--
 packages/html/src/toolbar/toolbar.spec.tsx   | 89 ++++++++++++++++++--
 2 files changed, 135 insertions(+), 14 deletions(-)

diff --git a/packages/html/src/tabstrip/tabstrip.spec.tsx b/packages/html/src/tabstrip/tabstrip.spec.tsx
index aff7ac109e3..56a390ef9b5 100644
--- a/packages/html/src/tabstrip/tabstrip.spec.tsx
+++ b/packages/html/src/tabstrip/tabstrip.spec.tsx
@@ -1,5 +1,5 @@
-import { Button, TabStripItems, TabStripItemsWrapper } from '..';
-import { classNames, optionClassNames, Size } from '../misc';
+import { Icon, TabStripItems, TabStripItemsWrapper } from '..';
+import { classNames, FillMode, optionClassNames, Size, ThemeColor } from '../misc';
 
 export const TABSTRIP_CLASSNAME = `k-tabstrip`;
 
@@ -88,21 +88,69 @@ export const TabStrip = (
             <TabStripItemsWrapper orientation={orientationMap[position]}>
                 {scrollable &&
                     (scrollButtons === 'around' || scrollButtons === 'start') &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-prev',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["prev"]}`} />
+                    </span>
                 }
                 {scrollable && scrollButtons === 'start' &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-next',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["next"]}`} />
+                    </span>
                 }
                 <TabStripItems className={classNames({[`k-tabstrip-items-scroll`]: scrollable && scrollButtons === 'hidden'})}
                 tabAlignment={tabAlignmentMap[tabAlignment]}>
                     {tabStripItems}
                 </TabStripItems>
                 {scrollable && scrollButtons === 'end' &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-prev',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["prev"]}`} />
+                    </span>
                 }
                 {scrollable &&
                     (scrollButtons === 'around' || scrollButtons === 'end') &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-next',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["next"]}`} />
+                    </span>
                 }
             </TabStripItemsWrapper>
             {position !== "bottom" && children}
diff --git a/packages/html/src/toolbar/toolbar.spec.tsx b/packages/html/src/toolbar/toolbar.spec.tsx
index 952e85c6fcc..8c7a6f2dfb1 100644
--- a/packages/html/src/toolbar/toolbar.spec.tsx
+++ b/packages/html/src/toolbar/toolbar.spec.tsx
@@ -5,8 +5,9 @@ import { Combobox } from '../combobox';
 import { DropdownList } from '../dropdownlist';
 import { MenuButton } from '../menu-button';
 import SplitButton from '../split-button/split-button.spec';
-import { classNames, optionClassNames, stateClassNames, States, Size, FillMode } from '../misc';
+import { classNames, optionClassNames, stateClassNames, States, Size, FillMode, ThemeColor, Roundness } from '../misc';
 import { ToolbarSeparator } from './toolbar-separator';
+import { Icon } from '../icon';
 
 export const TOOLBAR_CLASSNAME = `k-toolbar`;
 
@@ -204,9 +205,33 @@ export const Toolbar = (
 
             {scrollable && scrollButtons === 'start' &&
                 <>
-                    <ButtonGroup>
-                        <Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
-                        <Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-next"></Button>
+                     <ButtonGroup>
+                        <span className={classNames(
+                            'k-toolbar-prev',
+                            'k-button',
+                            optionClassNames('k-button', {
+                                size,
+                                fillMode,
+                                themeColor: ThemeColor.base,
+                                rounded: Roundness.medium
+                            }),
+                            'k-icon-button',
+                        )}>
+                            <Icon className='k-button-icon' icon= "caret-alt-left" />
+                        </span>
+                        <span className={classNames(
+                            'k-toolbar-next',
+                            'k-button',
+                            optionClassNames('k-button', {
+                                size,
+                                fillMode,
+                                themeColor: ThemeColor.base,
+                                rounded: Roundness.medium
+                            }),
+                            'k-icon-button',
+                        )}>
+                            <Icon className='k-button-icon' icon= "caret-alt-right" />
+                        </span>
                     </ButtonGroup>
                     <ToolbarSeparator className="k-toolbar-button-separator" />
                     <div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
@@ -218,19 +243,67 @@ export const Toolbar = (
                     <div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
                     <ToolbarSeparator className="k-toolbar-button-separator" />
                     <ButtonGroup>
-                        <Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
-                        <Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-next"></Button>
+                        <span className={classNames(
+                            'k-toolbar-prev',
+                            'k-button',
+                            optionClassNames('k-button', {
+                                size,
+                                fillMode,
+                                themeColor: ThemeColor.base,
+                                rounded: Roundness.medium
+                            }),
+                            'k-icon-button',
+                        )}>
+                            <Icon className='k-button-icon' icon= "caret-alt-left" />
+                        </span>
+                        <span className={classNames(
+                            'k-toolbar-next',
+                            'k-button',
+                            optionClassNames('k-button', {
+                                size,
+                                fillMode,
+                                themeColor: ThemeColor.base,
+                                rounded: Roundness.medium
+                            }),
+                            'k-icon-button',
+                        )}>
+                            <Icon className='k-button-icon' icon= "caret-alt-right" />
+                        </span>
                     </ButtonGroup>
                 </>
             }
 
             {scrollable && (scrollButtons === 'around' || !scrollButtons) &&
                 <>
-                    <Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
+                    <span className={classNames(
+                        'k-toolbar-prev',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode,
+                            themeColor: ThemeColor.base,
+                            rounded: Roundness.medium
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon= "caret-alt-left" />
+                    </span>
                     <ToolbarSeparator className="k-toolbar-button-separator" />
                     <div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
                     <ToolbarSeparator className="k-toolbar-button-separator" />
-                    <Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-next"></Button>
+                    <span className={classNames(
+                        'k-toolbar-next',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode,
+                            themeColor: ThemeColor.base,
+                            rounded: Roundness.medium
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon= "caret-alt-right" />
+                    </span>
                 </>
             }