From aceb4770392840e8186136c1e091ddadf026df8e Mon Sep 17 00:00:00 2001
From: Teya Veselinova <tveselin@progress.com>
Date: Mon, 9 Dec 2024 17:20:12 +0200
Subject: [PATCH] feat(html): add toolbar adaptive specs

---
 .../templates/editor-responsive-toolbar.tsx   |  2 +
 packages/html/src/toolbar/index.ts            |  2 +
 .../toolbar/templates/toolbar-resizable.tsx   |  2 +
 .../toolbar/templates/toolbar-scrollable.tsx  | 28 ++++++++++
 .../src/toolbar/templates/toolbar-section.tsx | 35 +++++++++++++
 .../src/toolbar/tests/toolbar-adaptive.tsx    |  3 +-
 .../src/toolbar/tests/toolbar-fill-modes.tsx  | 48 ++++++++++++++---
 .../toolbar-scrollable-buttons-hidden.tsx     | 30 +++++++++++
 .../tests/toolbar-scrollable-buttons.tsx      | 24 +++++++++
 .../toolbar/tests/toolbar-section-sizes.tsx   | 37 +++++++++++++
 .../src/toolbar/tests/toolbar-section.tsx     | 37 +++++++++++++
 .../html/src/toolbar/tests/toolbar-sizes.tsx  |  1 +
 packages/html/src/toolbar/tests/toolbar.tsx   |  6 +++
 .../html/src/toolbar/toolbar-popup.spec.tsx   | 45 +++++++++++++---
 .../html/src/toolbar/toolbar-separator.tsx    |  4 +-
 packages/html/src/toolbar/toolbar.spec.tsx    | 52 ++++++++++++++++++-
 16 files changed, 338 insertions(+), 18 deletions(-)
 create mode 100644 packages/html/src/toolbar/templates/toolbar-scrollable.tsx
 create mode 100644 packages/html/src/toolbar/templates/toolbar-section.tsx
 create mode 100644 packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx
 create mode 100644 packages/html/src/toolbar/tests/toolbar-scrollable-buttons.tsx
 create mode 100644 packages/html/src/toolbar/tests/toolbar-section-sizes.tsx
 create mode 100644 packages/html/src/toolbar/tests/toolbar-section.tsx

diff --git a/packages/html/src/editor/templates/editor-responsive-toolbar.tsx b/packages/html/src/editor/templates/editor-responsive-toolbar.tsx
index e222dcd4f77..1c4c37bebe2 100644
--- a/packages/html/src/editor/templates/editor-responsive-toolbar.tsx
+++ b/packages/html/src/editor/templates/editor-responsive-toolbar.tsx
@@ -1,6 +1,7 @@
 import { Editor } from '..';
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { ToolbarSeparator } from '../../toolbar';
 
 export const EditorResponsiveToolbar = (props) => (
     <Editor toolbarResizable
@@ -30,6 +31,7 @@ export const EditorResponsiveToolbar = (props) => (
                 <Button icon="align-right"></Button>
                 <Button className="k-group-end" icon="align-justify"></Button>
             </ButtonGroup>,
+            <ToolbarSeparator className="k-toolbar-button-separator" />,
             <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
         ]}
         children={
diff --git a/packages/html/src/toolbar/index.ts b/packages/html/src/toolbar/index.ts
index 19e2110cb4c..fe405dc1378 100644
--- a/packages/html/src/toolbar/index.ts
+++ b/packages/html/src/toolbar/index.ts
@@ -4,3 +4,5 @@ export * from './toolbar-item.spec';
 export * from './toolbar-popup.spec';
 export * from './templates/toolbar-normal';
 export * from './templates/toolbar-resizable';
+export * from './templates/toolbar-scrollable';
+export * from './templates/toolbar-section';
diff --git a/packages/html/src/toolbar/templates/toolbar-resizable.tsx b/packages/html/src/toolbar/templates/toolbar-resizable.tsx
index adeb48de47c..d3c0783d6a3 100644
--- a/packages/html/src/toolbar/templates/toolbar-resizable.tsx
+++ b/packages/html/src/toolbar/templates/toolbar-resizable.tsx
@@ -3,6 +3,7 @@ import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { MenuButton } from '../../menu-button';
 import { SplitButton } from '../../split-button';
+import { ToolbarSeparator } from "../toolbar-separator";
 
 export const ToolbarResizable = (props) => (
     <Toolbar resizable children={[
@@ -14,6 +15,7 @@ export const ToolbarResizable = (props) => (
             <Button icon="align-center">Center</Button>
             <Button className="k-group-end" icon="align-right">Right</Button>
         </ButtonGroup>,
+        <ToolbarSeparator className="k-toolbar-button-separator" />,
         <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
     ]}
     {...props}>
diff --git a/packages/html/src/toolbar/templates/toolbar-scrollable.tsx b/packages/html/src/toolbar/templates/toolbar-scrollable.tsx
new file mode 100644
index 00000000000..1034a4765ad
--- /dev/null
+++ b/packages/html/src/toolbar/templates/toolbar-scrollable.tsx
@@ -0,0 +1,28 @@
+import { Toolbar } from "../toolbar.spec";
+import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
+import { MenuButton } from '../../menu-button';
+import { SplitButton } from '../../split-button';
+
+export const ToolbarScrollable = (props) => (
+    <Toolbar scrollable {...props} children={[
+        <Button key="toolbar-button">Button</Button>,
+        <MenuButton key="toolbar-menu-button" text="Menu button"></MenuButton>,
+        <SplitButton key="toolbar-split-button">Split button</SplitButton>,
+        <ButtonGroup key="toolbar-button-group">
+            <Button className="k-group-start" icon="align-left">Left</Button>
+            <Button icon="align-center">Center</Button>
+            <Button className="k-group-end" icon="align-right">Right</Button>
+        </ButtonGroup>,
+        <Button key="toolbar-button">Button</Button>,
+        <MenuButton key="toolbar-menu-button" text="Menu button"></MenuButton>,
+        <SplitButton key="toolbar-split-button">Split button</SplitButton>,
+        <ButtonGroup key="toolbar-button-group">
+            <Button className="k-group-start" icon="align-left">Left</Button>
+            <Button icon="align-center">Center</Button>
+            <Button className="k-group-end" icon="align-right">Right</Button>
+        </ButtonGroup>
+    ]}
+    {...props}>
+    </Toolbar>
+);
diff --git a/packages/html/src/toolbar/templates/toolbar-section.tsx b/packages/html/src/toolbar/templates/toolbar-section.tsx
new file mode 100644
index 00000000000..4b65a17e111
--- /dev/null
+++ b/packages/html/src/toolbar/templates/toolbar-section.tsx
@@ -0,0 +1,35 @@
+import { Toolbar } from "../toolbar.spec";
+import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
+import { MenuButton } from '../../menu-button';
+import { SplitButton } from '../../split-button';
+import { ToolbarSeparator } from "../toolbar-separator";
+import ToolbarPopup from "../toolbar-popup.spec";
+
+export const ToolbarSection = ({ fillMode, size, ...other }: any) => (
+    <>
+        <Toolbar section fillMode={fillMode} size={size} children={[
+            <Button key="toolbar-button" fillMode={fillMode} size={size}>Button</Button>,
+            <ButtonGroup key="toolbar-button-group" fillMode={fillMode}>
+                <Button className="k-group-start" icon="align-left" fillMode={fillMode} size={size}>Left</Button>
+                <Button icon="align-center" fillMode={fillMode} size={size}>Center</Button>
+                <Button className="k-group-end" icon="align-right" fillMode={fillMode} size={size}>Right</Button>
+            </ButtonGroup>,
+            <ToolbarSeparator className="k-toolbar-button-separator" />,
+            <Button icon="more-horizontal" className="k-toolbar-overflow-button" fillMode="flat" size={size} rounded={null}></Button>
+        ]}
+        {...other}>
+        </Toolbar>
+        <ToolbarPopup size={size} fillMode={fillMode} section {...other} >
+            <SplitButton key="toolbar-split-button" fillMode={fillMode} size={size}>Split button</SplitButton>
+            <Button key="toolbar-button" fillMode={fillMode} size={size}>Button</Button>
+            <ToolbarSeparator />
+            <MenuButton key="toolbar-menu-button" text="Menu button" fillMode={fillMode} size={size}></MenuButton>
+            <ButtonGroup key="toolbar-button-group" fillMode={fillMode}>
+                <Button className="k-group-start" icon="align-left" fillMode={fillMode} size={size}>Left</Button>
+                <Button icon="align-center" fillMode={fillMode} size={size}>Center</Button>
+                <Button className="k-group-end" icon="align-right" fillMode={fillMode} size={size}>Right</Button>
+            </ButtonGroup>
+        </ToolbarPopup>
+    </>
+);
diff --git a/packages/html/src/toolbar/tests/toolbar-adaptive.tsx b/packages/html/src/toolbar/tests/toolbar-adaptive.tsx
index 58aba48c14f..832d4008ab7 100644
--- a/packages/html/src/toolbar/tests/toolbar-adaptive.tsx
+++ b/packages/html/src/toolbar/tests/toolbar-adaptive.tsx
@@ -2,7 +2,7 @@ import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { ActionSheet, ActionSheetHeader } from '../../action-sheet';
 import { MenuItem, MenuSeparator, MenuList } from '../../menu';
-import { ToolbarResizable } from '..';
+import { ToolbarResizable, ToolbarSeparator } from '..';
 
 const styles = `
     #test-area {
@@ -32,6 +32,7 @@ export default () =>(
                         <Button size="large" icon="align-center">Center</Button>
                         <Button className="k-group-end" size="large" icon="align-right">Right</Button>
                     </ButtonGroup>
+                    <ToolbarSeparator className="k-toolbar-button-separator" />
                     <Button size="large" icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
                 </ToolbarResizable>
                 <ActionSheet adaptive={true} overlay={false}>
diff --git a/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx b/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx
index 773e2d5b876..6a8a91b9bc7 100644
--- a/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx
+++ b/packages/html/src/toolbar/tests/toolbar-fill-modes.tsx
@@ -1,18 +1,12 @@
 import { Button } from '../../button';
 import { ColorPicker } from '../../colorpicker';
 import { ButtonGroup } from '../../button-group';
-import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar } from '../../toolbar';
+import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollable } from '../../toolbar';
 
 import { Combobox, MenuButton } from '../..';
-const styles = `
-    #test-area {
-        max-width: 1330px;
-    }
-`;
 
 export default () =>(
     <>
-        <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
             { Toolbar.options.fillMode.map((fillMode) => (
                 <>
@@ -56,6 +50,46 @@ export default () =>(
                           <Button fillMode={fillMode} icon="text-wrap"></Button>
                       </ToolbarResizable>
                     </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}>
+                          <Button icon="arrow-rotate-ccw" fillMode={fillMode}></Button>
+                          <Button icon="arrow-rotate-cw" fillMode={fillMode}></Button>
+                          <ToolbarSeparator></ToolbarSeparator>
+                          <Button icon="cut" fillMode={fillMode}></Button>
+                          <Button icon="copy" fillMode={fillMode}></Button>
+                          <Button icon="clipboard" fillMode={fillMode}></Button>
+                          <ToolbarSeparator></ToolbarSeparator>
+                          <Combobox value="Font Name" fillMode={fillMode} />
+                          <Combobox value="Font Size" fillMode={fillMode} />
+                          <ToolbarSeparator></ToolbarSeparator>
+                          <ButtonGroup fillMode={fillMode}>
+                              <Button className="k-group-start" icon="font-grow" fillMode={fillMode}></Button>
+                              <Button className="k-group-end" icon="font-shrink" fillMode={fillMode}></Button>
+                          </ButtonGroup>
+                          <ToolbarSeparator></ToolbarSeparator>
+                          <ButtonGroup fillMode={fillMode}>
+                              <Button className="k-group-start" icon="bold" fillMode={fillMode}></Button>
+                              <Button icon="italic" fillMode={fillMode}></Button>
+                              <Button icon="underline" fillMode={fillMode}></Button>
+                              <Button className="k-group-end" icon="strikethrough" fillMode={fillMode}></Button>
+                          </ButtonGroup>
+                          <ToolbarItem>
+                              <ColorPicker value="red" valueIconName="foreground-color" fillMode={fillMode} />
+                          </ToolbarItem>
+                          <ToolbarSeparator></ToolbarSeparator>
+                          <ToolbarItem>
+                              <ColorPicker value="fuchsia" valueIconName="droplet" fillMode={fillMode} />
+                          </ToolbarItem>
+                          <ToolbarSeparator></ToolbarSeparator>
+                          <MenuButton fillMode={fillMode} icon="borders-all" showArrow></MenuButton>
+                          <ToolbarSeparator></ToolbarSeparator>
+                          <MenuButton fillMode={fillMode} icon="align-left" showArrow></MenuButton>
+                          <MenuButton fillMode={fillMode} icon="align-middle" showArrow></MenuButton>
+                          <ToolbarSeparator></ToolbarSeparator>
+                          <Button fillMode={fillMode} icon="text-wrap"></Button>
+                      </ToolbarScrollable>
+                    </section>
                 </>
             ))}
         </div>
diff --git a/packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx b/packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx
new file mode 100644
index 00000000000..4d79809380c
--- /dev/null
+++ b/packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx
@@ -0,0 +1,30 @@
+import { ToolbarScrollable } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Start</span>
+            <section className="k-colspan-all k-col-span-full">
+                <ToolbarScrollable scrollButtons="hidden" scrollingPosition="start"/>
+            </section>
+
+            <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll End</span>
+            <section className="k-colspan-all k-col-span-full">
+                <ToolbarScrollable scrollButtons="hidden" scrollingPosition="end" />
+            </section>
+
+            <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle</span>
+            <section className="k-colspan-all k-col-span-full">
+                <ToolbarScrollable scrollButtons="hidden" />
+            </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">
+                <ToolbarScrollable scrollButtons="hidden" />
+            </section>
+
+        </div>
+    </>
+);
diff --git a/packages/html/src/toolbar/tests/toolbar-scrollable-buttons.tsx b/packages/html/src/toolbar/tests/toolbar-scrollable-buttons.tsx
new file mode 100644
index 00000000000..d87dde3e86a
--- /dev/null
+++ b/packages/html/src/toolbar/tests/toolbar-scrollable-buttons.tsx
@@ -0,0 +1,24 @@
+import { ToolbarScrollable } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <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" />
+            </section>
+
+            <span className="k-colspan-all k-col-span-full">Toolbar Buttons Start</span>
+            <section className="k-colspan-all k-col-span-full">
+                <ToolbarScrollable scrollButtons="start" />
+            </section>
+
+            <span className="k-colspan-all k-col-span-full">Toolbar Buttons End</span>
+            <section className="k-colspan-all k-col-span-full">
+                <ToolbarScrollable scrollButtons="end" />
+            </section>
+        </div>
+    </>
+);
diff --git a/packages/html/src/toolbar/tests/toolbar-section-sizes.tsx b/packages/html/src/toolbar/tests/toolbar-section-sizes.tsx
new file mode 100644
index 00000000000..a2c512976f4
--- /dev/null
+++ b/packages/html/src/toolbar/tests/toolbar-section-sizes.tsx
@@ -0,0 +1,37 @@
+import { ToolbarSection } from '../templates/toolbar-section';
+
+
+const styles = `
+    .k-animation-container {
+        width: 100%;
+    }
+
+    .toolbar-popup-section {
+        position: relative;
+        height: 200px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <section className="k-colspan-all k-col-span-full toolbar-popup-section">
+                <span>Small Toolbar Popup Section</span>
+                <ToolbarSection size="small" />
+            </section>
+
+            <section className="k-colspan-all k-col-span-full toolbar-popup-section">
+                <span>Medium Toolbar Popup Section</span>
+                <ToolbarSection size="medium" />
+            </section>
+
+            <section className="k-colspan-all k-col-span-full toolbar-popup-section">
+                <span>Large Toolbar Popup Section</span>
+                <ToolbarSection size="large" />
+            </section>
+
+        </div>
+    </>
+);
diff --git a/packages/html/src/toolbar/tests/toolbar-section.tsx b/packages/html/src/toolbar/tests/toolbar-section.tsx
new file mode 100644
index 00000000000..207d1968f1f
--- /dev/null
+++ b/packages/html/src/toolbar/tests/toolbar-section.tsx
@@ -0,0 +1,37 @@
+import { ToolbarSection } from '../templates/toolbar-section';
+
+
+const styles = `
+    .k-animation-container {
+        width: 100%;
+    }
+
+    .toolbar-popup-section {
+        position: relative;
+        height: 200px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <section className="k-colspan-all k-col-span-full toolbar-popup-section">
+                <span>Toolbar Popup Section</span>
+                <ToolbarSection />
+            </section>
+
+            <section className="k-colspan-all k-col-span-full toolbar-popup-section">
+                <span >Toolbar Popup Section Outline</span>
+                <ToolbarSection fillMode="outline" />
+            </section>
+
+            <section className="k-colspan-all k-col-span-full toolbar-popup-section">
+                <span>Toolbar Popup Section Flat</span>
+                <ToolbarSection fillMode="flat" />
+            </section>
+
+        </div>
+    </>
+);
diff --git a/packages/html/src/toolbar/tests/toolbar-sizes.tsx b/packages/html/src/toolbar/tests/toolbar-sizes.tsx
index 9cf1d455460..1afa04608a9 100644
--- a/packages/html/src/toolbar/tests/toolbar-sizes.tsx
+++ b/packages/html/src/toolbar/tests/toolbar-sizes.tsx
@@ -30,6 +30,7 @@ export default () =>(
                                 <ColorPicker size={size} />
                             </ToolbarItem>
                             <Switch size={size} checked />
+                            <ToolbarSeparator className="k-toolbar-button-separator" />
                             <Button size={size} icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
                         </ToolbarResizable>
                     </section>
diff --git a/packages/html/src/toolbar/tests/toolbar.tsx b/packages/html/src/toolbar/tests/toolbar.tsx
index dbc0cafe81b..5f597639918 100644
--- a/packages/html/src/toolbar/tests/toolbar.tsx
+++ b/packages/html/src/toolbar/tests/toolbar.tsx
@@ -31,6 +31,7 @@ export default () =>(
                         <ColorPicker />
                     </ToolbarItem>
                     <Switch checked />
+                    <ToolbarSeparator className="k-toolbar-button-separator" />
                     <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
                 </ToolbarResizable>
             </section>
@@ -55,6 +56,7 @@ export default () =>(
                         <ColorPicker />
                     </ToolbarItem>
                     <Switch checked />
+                    <ToolbarSeparator className="k-toolbar-button-separator" />
                     <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
                 </ToolbarResizable>
             </section>
@@ -76,6 +78,7 @@ export default () =>(
                     <Button icon="bold" active></Button>
                     <Button icon="bold" selected></Button>
                     <Button icon="bold" disabled></Button>
+                    <ToolbarSeparator className="k-toolbar-button-separator" />
                     <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null} hover></Button>
                 </ToolbarResizable>
             </section>
@@ -87,6 +90,7 @@ export default () =>(
                     <Button icon="align-left" active>Active</Button>
                     <Button icon="align-left" selected>Selected</Button>
                     <Button icon="align-left" disabled>Disabled</Button>
+                    <ToolbarSeparator className="k-toolbar-button-separator" />
                     <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null} focus></Button>
                 </ToolbarResizable>
             </section>
@@ -98,6 +102,7 @@ export default () =>(
                     <Button themeColor="primary" icon="align-left" active>Active</Button>
                     <Button themeColor="primary" icon="align-left" selected>Selected</Button>
                     <Button themeColor="primary" icon="align-left" disabled>Disabled</Button>
+                    <ToolbarSeparator className="k-toolbar-button-separator" />
                     <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null} active></Button>
                 </ToolbarResizable>
             </section>
@@ -112,6 +117,7 @@ export default () =>(
                         <Button className="k-group-start" icon="align-left" disabled focus>Button 1</Button>
                         <Button className="k-group-end" icon="align-center" disabled>Button 2</Button>
                     </ButtonGroup>
+                    <ToolbarSeparator className="k-toolbar-button-separator" />
                     <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null} disabled focus></Button>
                 </ToolbarResizable>
             </section>
diff --git a/packages/html/src/toolbar/toolbar-popup.spec.tsx b/packages/html/src/toolbar/toolbar-popup.spec.tsx
index ff6e4c96e8b..836602e06ef 100644
--- a/packages/html/src/toolbar/toolbar-popup.spec.tsx
+++ b/packages/html/src/toolbar/toolbar-popup.spec.tsx
@@ -1,28 +1,59 @@
-import { classNames } from '../misc';
+import { classNames, optionClassNames, Size, FillMode } from '../misc';
 import { Popup } from '../popup';
 
 export const TOOLBARPOPUP_CLASSNAME = `k-toolbar-popup`;
 
 const states = [];
 
-const options = {};
+const options = {
+    size: [Size.small, Size.medium, Size.large],
+    fillMode: [FillMode.solid, FillMode.outline, FillMode.flat ]
+};
+
+export type KendoToolbarPopupOptions = {
+    size?: (typeof options.size)[number] | null;
+    fillMode?: (typeof options.fillMode)[number] | null;
+};
 
-const defaultOptions = {};
+export type KendoToolbarPopupProps = KendoToolbarPopupOptions & {
+    section?: boolean;
+};
+
+const defaultOptions = {
+    size: Size.medium,
+    fillMode: FillMode.solid
+};
 
 export const ToolbarPopup = (
-    props: React.HTMLAttributes<HTMLElement>
+    props: KendoToolbarPopupProps &
+    React.HTMLAttributes<HTMLElement>
 ) => {
 
-    const { ...other } = props;
+    const {
+        size=defaultOptions.size,
+        fillMode=defaultOptions.fillMode,
+        section,
+        ...other
+    } = props;
 
     return (
         <Popup
             {...other}
             className={classNames(
                 props.className,
-                TOOLBARPOPUP_CLASSNAME,
+                TOOLBARPOPUP_CLASSNAME
             )}>
-            {props.children}
+             {section
+                ? <span className={classNames(
+                    'k-toolbar-items-list',
+                    optionClassNames('k-toolbar-items-list', {
+                        size,
+                        fillMode
+                    })
+                )}>{props.children}</span>
+                : props.children
+            }
+
         </Popup>
     );
 };
diff --git a/packages/html/src/toolbar/toolbar-separator.tsx b/packages/html/src/toolbar/toolbar-separator.tsx
index 1d5e1dacc57..229e3c0562c 100644
--- a/packages/html/src/toolbar/toolbar-separator.tsx
+++ b/packages/html/src/toolbar/toolbar-separator.tsx
@@ -1,7 +1,7 @@
 import { classNames } from '../misc';
 
-const className = `k-separator`;
+const className = `k-toolbar-separator`;
 
 export const ToolbarSeparator = (props: React.HTMLAttributes<HTMLSpanElement>) => (
-    <div className={classNames(className, props.className)}></div>
+    <div className={classNames(className, props.className, 'k-separator')}></div>
 );
diff --git a/packages/html/src/toolbar/toolbar.spec.tsx b/packages/html/src/toolbar/toolbar.spec.tsx
index 08e034931f2..6140e34617b 100644
--- a/packages/html/src/toolbar/toolbar.spec.tsx
+++ b/packages/html/src/toolbar/toolbar.spec.tsx
@@ -6,6 +6,7 @@ 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 { ToolbarSeparator } from './toolbar-separator';
 
 export const TOOLBAR_CLASSNAME = `k-toolbar`;
 
@@ -25,6 +26,10 @@ export type KendoToolbarOptions = {
 
 export type KendoToolbarProps = KendoToolbarOptions & {
     resizable?: boolean;
+    scrollable?: boolean;
+    scrollButtons?: 'hidden' | 'start' | 'end' | 'around';
+    scrollingPosition?: 'start' | 'end';
+    section?: boolean;
 };
 
 export type KendoToolbarState = { [K in (typeof states)[number]]?: boolean };
@@ -44,6 +49,10 @@ export const Toolbar = (
         fillMode = defaultOptions.fillMode,
         focus,
         resizable,
+        scrollable,
+        scrollButtons,
+        scrollingPosition,
+        section,
         ...other
     } = props;
 
@@ -179,10 +188,51 @@ export const Toolbar = (
                 }),
                 {
                     [`${TOOLBAR_CLASSNAME}-resizable`]: resizable,
+                    [`${TOOLBAR_CLASSNAME}-scrollable`]: scrollable,
+                    [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: (scrollable && (scrollButtons === 'hidden' || !scrollButtons)),
+                    [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+                    [`${TOOLBAR_CLASSNAME}-section`]: section,
                 }
             )}
         >
-            {toolbarChildren}
+            {!scrollable && toolbarChildren}
+
+            {scrollable && (scrollButtons === 'hidden' || !scrollButtons) &&
+               <span className='k-toolbar-items k-toolbar-items-scroll'>{toolbarChildren}</span>
+            }
+
+            {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>
+                    <ToolbarSeparator className="k-toolbar-button-separator" />
+                    <div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
+                </>
+            }
+
+            {scrollable && scrollButtons === 'end' &&
+                <>
+                    <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>
+                    </ButtonGroup>
+                </>
+            }
+
+            {scrollable && scrollButtons === 'around' &&
+                <>
+                    <Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
+                    <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>
+                </>
+            }
+
         </div>
     );
 };