feat(html): add toolbar adaptive specs

telerik · Dec 9, 2024 · d1964aa · d1964aa
1 parent da199aa
commit d1964aa
Show file tree

Hide file tree

Showing 11 changed files with 231 additions and 8 deletions.
diff --git 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
@@ -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-overflow-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
@@ -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
@@ -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>,
+            <MenuButton key="toolbar-menu-button" fillMode={fillMode} size={size} text="Menu button"></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>,
+            <ToolbarSeparator className="k-toolbar-overflow-separator" />,
+            <Button icon="more-horizontal" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
+        ]}
+        {...other}>
+        </Toolbar>
+        <ToolbarPopup size={size} section {...other} >
+            <SplitButton key="toolbar-split-button" fillMode={fillMode} size={size}>Split button</SplitButton>
+            <Button key="toolbar-button" fillMode={fillMode} size={size}>Button</Button>
+            <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
@@ -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-overflow-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-scrollable.tsx b/packages/html/src/toolbar/tests/toolbar-scrollable.tsx
@@ -0,0 +1,40 @@
+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>
+
+            <span className="k-colspan-all k-col-span-full">Toolbar No 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 No 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">RTL</span>
+            <section className="k-colspan-all k-col-span-full" dir="rtl">
+                <ToolbarScrollable />
+            </section>
+
+        </div>
+    </>
+);
diff --git a/packages/html/src/toolbar/tests/toolbar-section.tsx 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">
+
+            <span className="k-colspan-full k-col-span-full">Toolbar Popup Section</span>
+            <section className="k-colspan-1 k-col-span-1 toolbar-popup-section">
+                <ToolbarSection />
+            </section>
+
+            <span className="k-colspan-full k-col-span-full">Toolbar Popup Section Flat</span>
+            <section className="k-colspan-1 k-col-span-1 toolbar-popup-section">
+                <ToolbarSection fillMode="flat" />
+            </section>
+
+            <span className="k-colspan-full k-col-span-full">Toolbar Popup Section</span>
+            <section className="k-colspan-1 k-col-span-1 toolbar-popup-section">
+                <ToolbarSection fillMode="outline" />
+            </section>
+
+        </div>
+    </>
+);
diff --git 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-overflow-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
@@ -31,6 +31,7 @@ export default () =>(
                         <ColorPicker />
                     </ToolbarItem>
                     <Switch checked />
+                    <ToolbarSeparator className="k-toolbar-overflow-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-overflow-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-overflow-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-overflow-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-overflow-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-overflow-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
@@ -1,28 +1,49 @@
-import { classNames } from '../misc';
+import { classNames, optionClassNames, Size } 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],
+};
 
-const defaultOptions = {};
+export type KendoToolbarPopupProps = {
+    size?: (typeof options.size)[number] | null;
+    section?: boolean;
+};
+
+const defaultOptions = {
+    size: Size.medium,
+};
 
 export const ToolbarPopup = (
-    props: React.HTMLAttributes<HTMLElement>
+    props: KendoToolbarPopupProps &
+    React.HTMLAttributes<HTMLElement>
 ) => {
 
-    const { ...other } = props;
+    const {
+        size=defaultOptions.size,
+        section,
+        ...other
+    } = props;
 
     return (
         <Popup
             {...other}
             className={classNames(
                 props.className,
                 TOOLBARPOPUP_CLASSNAME,
+                optionClassNames(TOOLBARPOPUP_CLASSNAME, {
+                    size
+                })
             )}>
-            {props.children}
+             {section
+                ? <span className='k-toolbar-items'>{props.children}</span>
+                : props.children
+            }
+
         </Popup>
     );
 };

diff --git 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-buttons`]: (scrollButtons && scrollButtons !== 'hidden'),
+                    [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+                    [`${TOOLBAR_CLASSNAME}-section`]: section,
                 }
             )}
         >
-            {toolbarChildren}
+            {!scrollable && toolbarChildren}
+
+            {scrollable && (scrollButtons === 'hidden' || !scrollButtons) &&
+               <span className='k-toolbar-items'>{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 />
+                    <div className="k-toolbar-items">{toolbarChildren}</div>
+                </>
+            }
+
+            {scrollable && scrollButtons === 'end' &&
+                <>
+                    <div className="k-toolbar-items">{toolbarChildren}</div>
+                    <ToolbarSeparator />
+                    <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 />
+                    <div className="k-toolbar-items">{toolbarChildren}</div>
+                    <ToolbarSeparator />
+                    <Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-prev"></Button>
+                </>
+            }
+
         </div>
     );
 };