-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(html): add toolbar adaptive specs
- Loading branch information
Showing
16 changed files
with
338 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
packages/html/src/toolbar/templates/toolbar-scrollable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/html/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); |
24 changes: 24 additions & 0 deletions
24
packages/html/src/toolbar/tests/toolbar-scrollable-buttons.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.