@progress/kendo-themes-html 10.2.0-dev.1 → 10.2.0-dev.3

package/src/menu/tests/menu-icons.tsx

@@ -8,7 +8,6 @@ const style = `
 
     .k-animation-container {
         position: absolute;
-        top: 100%;
     }
 `;
 
@@ -21,45 +20,43 @@ export default () =>(
             <span>Horizontal Menu RTL</span>
 
             <section>
-                <MenuNormal>
+                <MenuNormal popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "110px", top: "auto" }}>
+                                <MenuList>
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal" icon="folder"></MenuItem>
-                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList>
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder"></MenuItem>
                 </MenuNormal>
             </section>
 
             <section>
-                <MenuNormal dir="rtl">
-                  <MenuItem first text="Normal" icon="folder"></MenuItem>
-                  <MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                <MenuNormal dir="rtl"  popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "780px", top: "auto" }} dir="rtl">
+                                <MenuList dir="rtl">
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
+                    <MenuItem first text="Normal" icon="folder"></MenuItem>
+                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder"></MenuItem>
                 </MenuNormal>
             </section>
@@ -68,45 +65,43 @@ export default () =>(
             <span>Horizontal Menu RTL Expand Icon</span>
 
             <section>
-                <MenuNormal>
+                <MenuNormal popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "110px", top: "auto" }}>
+                                <MenuList>
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal" icon="folder"></MenuItem>
-                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder"></MenuItem>
                 </MenuNormal>
             </section>
 
             <section>
-                <MenuNormal dir="rtl">
-                  <MenuItem first text="Normal" icon="folder"></MenuItem>
-                  <MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                <MenuNormal dir="rtl"  popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "780px", top: "auto" }} dir="rtl">
+                                <MenuList dir="rtl">
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
+                    <MenuItem first text="Normal" icon="folder"></MenuItem>
+                    <MenuItem text="Active" icon="folder" active showArrow arrowIconName="chevron-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder"></MenuItem>
                 </MenuNormal>
             </section>
@@ -115,45 +110,43 @@ export default () =>(
             <span>Horizontal Menu RTL Icon After Text</span>
 
             <section>
-                <MenuNormal>
+                <MenuNormal popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "110px", top: "auto" }}>
+                                <MenuList>
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
-                    <MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-right"></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow arrowIconName="chevron-right"></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder" iconPosition="after"></MenuItem>
                 </MenuNormal>
             </section>
 
             <section>
-                <MenuNormal dir="rtl">
-                  <MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
-                  <MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                <MenuNormal dir="rtl" popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "780px", top: "auto" }} dir="rtl">
+                                <MenuList dir="rtl">
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow arrowIconName="chevron-left"></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow arrowIconName="chevron-left"></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
+                    <MenuItem first text="Normal" icon="folder" iconPosition="after"></MenuItem>
+                    <MenuItem text="Active" icon="folder" iconPosition="after" active showArrow arrowIconName="chevron-down"></MenuItem>
                     <MenuItem last selected text="Selected" icon="folder" iconPosition="after" showArrow arrowIconName="chevron-down"></MenuItem>
                 </MenuNormal>
             </section>

package/src/menu/tests/menu-separators.tsx

@@ -22,14 +22,9 @@ export default () =>(
             <span>Vertical Menu with Separators</span>
 
             <section>
-                <MenuNormal>
-                    <MenuItem first text="Normal"></MenuItem>
-                    <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
-                    <MenuSeparator></MenuSeparator>
-                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"
-                    popup={
+                <MenuNormal popup={
                         <>
-                            <Popup className="k-menu-popup" positionMode="fixed">
+                            <Popup className="k-menu-popup" offset={{ left: "175px", top: "auto" }}>
                                 <MenuList>
                                     <MenuListItem first text="Disabled" disabled></MenuListItem>
                                     <MenuListItem text="Normal"></MenuListItem>
@@ -41,7 +36,11 @@ export default () =>(
                                 </MenuList>
                             </Popup>
                         </>
-                    }></MenuItem>
+                    }>
+                    <MenuItem first text="Normal"></MenuItem>
+                    <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
+                    <MenuSeparator></MenuSeparator>
+                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Selected" selected showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Focus" focus></MenuItem>
                     <MenuItem last text="Disabled" disabled></MenuItem>
@@ -49,26 +48,25 @@ export default () =>(
             </section>
 
             <section>
-                <MenuVertical>
+                <MenuVertical popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "520px", top: "160px" }}>
+                                <MenuList>
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                    <MenuSeparator></MenuSeparator>
+                                    <MenuListItem text="Active" active showArrow></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal"></MenuItem>
                     <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuSeparator></MenuSeparator>
-                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList>
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                        <MenuSeparator></MenuSeparator>
-                                        <MenuListItem text="Active" active showArrow></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Selected" selected showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Focus" focus></MenuItem>
                     <MenuItem last text="Disabled" disabled></MenuItem>

package/src/menu/tests/menu.tsx

@@ -9,7 +9,6 @@ const style = `
 
     .k-animation-container {
         position: absolute;
-        top: 100%;
     }
 `;
 
@@ -22,24 +21,33 @@ export default () =>(
             <span>Horizontal Scrolling Menu</span>
 
             <section>
-                <MenuNormal>
+                <MenuNormal popup={
+                    <>
+                        <Popup className="k-menu-popup" offset={{ left: "165px", top: "auto" }}>
+                            <MenuList>
+                                <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                <MenuListItem text="Normal"></MenuListItem>
+                                <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                <MenuListItem text="Active" active showArrow></MenuListItem>
+                                <MenuListItem text="Focus" focus></MenuListItem>
+                                <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                            </MenuList>
+                        </Popup>
+                        <Popup className="k-menu-popup" offset={{ left: "300px", top: "175px" }}>
+                            <MenuList>
+                                <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                <MenuListItem text="Normal"></MenuListItem>
+                                <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                <MenuListItem text="Active" active showArrow></MenuListItem>
+                                <MenuListItem text="Focus" focus></MenuListItem>
+                                <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                            </MenuList>
+                        </Popup>
+                    </>
+                    }>
                     <MenuItem first text="Normal"></MenuItem>
                     <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
-                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"
-                    popup={
-                        <>
-                            <Popup className="k-menu-popup" positionMode="fixed">
-                                <MenuList>
-                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                    <MenuListItem text="Normal"></MenuListItem>
-                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                    <MenuListItem text="Active" active showArrow></MenuListItem>
-                                    <MenuListItem text="Focus" focus></MenuListItem>
-                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                </MenuList>
-                            </Popup>
-                        </>
-                    }></MenuItem>
+                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Selected" selected showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Focus" focus></MenuItem>
                     <MenuItem last text="Disabled" disabled></MenuItem>
@@ -54,24 +62,23 @@ export default () =>(
             <span></span>
 
             <section>
-                <MenuNormal dir="rtl">
+                <MenuNormal dir="rtl" popup={
+                        <>
+                            <Popup className="k-menu-popup" offset={{ left: "220px", top: "auto" }} dir="rtl">
+                                <MenuList dir="rtl">
+                                    <MenuListItem first text="Disabled" disabled></MenuListItem>
+                                    <MenuListItem text="Normal"></MenuListItem>
+                                    <MenuListItem text="Hover" hover showArrow></MenuListItem>
+                                    <MenuListItem text="Active" active showArrow></MenuListItem>
+                                    <MenuListItem text="Focus" focus></MenuListItem>
+                                    <MenuListItem last text="Focus & Active" active focus></MenuListItem>
+                                </MenuList>
+                            </Popup>
+                        </>
+                    }>
                     <MenuItem first text="Normal"></MenuItem>
                     <MenuItem text="Hover" hover showArrow arrowIconName="caret-alt-down"></MenuItem>
-                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"
-                        popup={
-                            <>
-                                <Popup className="k-menu-popup" positionMode="fixed">
-                                    <MenuList dir="rtl">
-                                        <MenuListItem first text="Disabled" disabled></MenuListItem>
-                                        <MenuListItem text="Normal"></MenuListItem>
-                                        <MenuListItem text="Hover" hover showArrow></MenuListItem>
-                                        <MenuListItem text="Active" active showArrow></MenuListItem>
-                                        <MenuListItem text="Focus" focus></MenuListItem>
-                                        <MenuListItem last text="Focus & Active" active focus></MenuListItem>
-                                    </MenuList>
-                                </Popup>
-                            </>
-                        }></MenuItem>
+                    <MenuItem text="Active" active showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Selected" selected showArrow arrowIconName="caret-alt-down"></MenuItem>
                     <MenuItem text="Focus" focus></MenuItem>
                     <MenuItem last text="Disabled" disabled></MenuItem>

package/src/otp/otp-input.tsx

@@ -1,5 +1,5 @@
 import { classNames, States, Size, Roundness, FillMode } from '../misc';
-import { Input, InputInnerInput } from '../input';
+import { Textbox } from '../textbox';
 
 export const ONETIMEPASSWORDINPUT_CLASSNAME = `k-otp-input`;
 
@@ -35,9 +35,9 @@ export type KendoOneTimePasswordInputProps = KendoOneTimePasswordInputOptions &
 export type KendoOneTimePasswordInputState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultOptions = {
-    size: Input.defaultOptions.size,
-    rounded: Input.defaultOptions.rounded,
-    fillMode: Input.defaultOptions.fillMode,
+    size: Textbox.defaultOptions.size,
+    rounded: Textbox.defaultOptions.rounded,
+    fillMode: Textbox.defaultOptions.fillMode,
 };
 
 export const OneTimePasswordInput = (
@@ -64,11 +64,14 @@ export const OneTimePasswordInput = (
 
 
     return (
-        <Input
+        <Textbox
             {...other}
             size={size}
             rounded={rounded}
             fillMode={fillMode}
+            type={type}
+            value={value}
+            placeholder={placeholder}
             hover={hover}
             focus={focus}
             valid={valid}
@@ -76,12 +79,13 @@ export const OneTimePasswordInput = (
             required={required}
             disabled={disabled}
             readonly={readonly}
+            showClearButton={false}
+            showValidationIcon={false}
             className={classNames(props.className,
                 ONETIMEPASSWORDINPUT_CLASSNAME
             )}
         >
-            <InputInnerInput placeholder={placeholder} value={value} type={type} />
-        </Input>
+        </Textbox>
     );
 };
 

package/src/prompt/prompt-view.tsx

@@ -31,7 +31,7 @@ export const PromptView = (
             { showSearch && <Textarea resize="y" rows={1} placeholder="Ask or generate content with AI"></Textarea> }
             { suggestions &&
                 <div className="k-prompt-expander">
-                    <IconTextButton fillMode={"flat"} icon="chevron-down">Prompt Suggestions</IconTextButton>
+                    <IconTextButton fillMode={"flat"} icon="chevron-up">Prompt Suggestions</IconTextButton>
                     <div className="k-prompt-expander-content">
                         <>{suggestions}</>
                     </div>
@@ -39,7 +39,7 @@ export const PromptView = (
             }
             { settings &&
                 <div className="k-prompt-expander">
-                    <IconTextButton fillMode={"flat"} icon="chevron-down">Settings</IconTextButton>
+                    <IconTextButton fillMode={"flat"} icon="chevron-up">Settings</IconTextButton>
                     <div className="k-prompt-expander-content">
                         {settings}
                     </div>

package/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`;
 
@@ -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})
             )}>
@@ -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}

package/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" />