Skip to content

Commit

Permalink
Merge branch 'develop' into dataviz-label-font-size
Browse files Browse the repository at this point in the history
  • Loading branch information
epetrow authored Jan 24, 2025
2 parents 2ad3314 + b0e4fef commit e5d9aaa
Show file tree
Hide file tree
Showing 18 changed files with 264 additions and 142 deletions.
64 changes: 56 additions & 8 deletions packages/html/src/tabstrip/tabstrip.spec.tsx
Original file line number Diff line number Diff line change
@@ -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`;

Expand All @@ -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";
};

Expand Down Expand Up @@ -80,29 +80,77 @@ 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})
)}>
{position === "bottom" && children}
<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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default () => (


<section>
<TabStripScrollableButtonsHidden scrollingPosition={null}
<TabStripScrollableButtonsHidden scrollingPosition="both"
tabStripItems={
<>
<TabStripItem first value="First" />
Expand Down Expand Up @@ -117,7 +117,7 @@ export default () => (


<section>
<TabStripScrollableButtonsHidden position="left" scrollingPosition={null}
<TabStripScrollableButtonsHidden position="left" scrollingPosition="both"
tabStripItems={
<>
<TabStripItem first value="First" />
Expand Down Expand Up @@ -182,7 +182,7 @@ export default () => (


<section>
<TabStripScrollableButtonsHidden scrollingPosition={null} dir="rtl"
<TabStripScrollableButtonsHidden scrollingPosition="both" dir="rtl"
tabStripItems={
<>
<TabStripItem first value="First" />
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/toolbar/tests/toolbar-fill-modes.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Button } from '../../button';
import { ColorPicker } from '../../colorpicker';
import { ButtonGroup } from '../../button-group';
import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollable } from '../../toolbar';
import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollableButtonsHidden } from '../../toolbar';

import { Combobox, MenuButton } from '../..';

Expand Down Expand Up @@ -52,7 +52,7 @@ export default () =>(
</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}>
<ToolbarScrollableButtonsHidden scrollingPosition="both" fillMode={fillMode}>
<Button icon="arrow-rotate-ccw" fillMode={fillMode}></Button>
<Button icon="arrow-rotate-cw" fillMode={fillMode}></Button>
<ToolbarSeparator></ToolbarSeparator>
Expand Down Expand Up @@ -88,7 +88,7 @@ export default () =>(
<MenuButton fillMode={fillMode} icon="align-middle" showArrow></MenuButton>
<ToolbarSeparator></ToolbarSeparator>
<Button fillMode={fillMode} icon="text-wrap"></Button>
</ToolbarScrollable>
</ToolbarScrollableButtonsHidden>
</section>
</>
))}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ export default () =>(

<span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle</span>
<section className="k-colspan-all k-col-span-full">
<ToolbarScrollableButtonsHidden scrollingPosition={null} />
<ToolbarScrollableButtonsHidden scrollingPosition="both" />
</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">
<ToolbarScrollableButtonsHidden scrollingPosition={null} />
<ToolbarScrollableButtonsHidden scrollingPosition="both" />
</section>

</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default () =>(

<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" />
<ToolbarScrollable />
</section>

<span className="k-colspan-all k-col-span-full">Toolbar Buttons Start</span>
Expand Down
100 changes: 87 additions & 13 deletions packages/html/src/toolbar/toolbar.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import { Combobox } from '../combobox';
import { DropdownList } from '../dropdownlist';
import { MenuButton } from '../menu-button';
import SplitButton from '../split-button/split-button.spec';
import { classNames, optionClassNames, stateClassNames, States, Size, FillMode } from '../misc';
import { classNames, optionClassNames, stateClassNames, States, Size, FillMode, ThemeColor, Roundness } from '../misc';
import { ToolbarSeparator } from './toolbar-separator';
import { Icon } from '../icon';

export const TOOLBAR_CLASSNAME = `k-toolbar`;

Expand All @@ -28,7 +29,7 @@ export type KendoToolbarProps = KendoToolbarOptions & {
resizable?: boolean;
scrollable?: boolean;
scrollButtons?: 'hidden' | 'start' | 'end' | 'around';
scrollingPosition?: 'start' | 'end';
scrollingPosition?: 'start' | 'end' | 'both';
section?: boolean;
};

Expand All @@ -37,6 +38,7 @@ export type KendoToolbarState = { [K in (typeof states)[number]]?: boolean };
const defaultOptions = {
size: Size.medium,
fillMode: FillMode.solid,
scrollButtons: 'around'
};

export const Toolbar = (
Expand Down Expand Up @@ -189,23 +191,47 @@ 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}-scrollable-overlay`]: (scrollable && scrollButtons === 'hidden'),
[`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition && scrollingPosition !== 'both',
[`${TOOLBAR_CLASSNAME}-section`]: section,
}
)}
>
{!scrollable && toolbarChildren}

{scrollable && (scrollButtons === 'hidden' || !scrollButtons) &&
{scrollable && scrollButtons === 'hidden' &&
<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>
<span className={classNames(
'k-toolbar-prev',
'k-button',
optionClassNames('k-button', {
size,
fillMode,
themeColor: ThemeColor.base,
rounded: Roundness.medium
}),
'k-icon-button',
)}>
<Icon className='k-button-icon' icon= "caret-alt-left" />
</span>
<span className={classNames(
'k-toolbar-next',
'k-button',
optionClassNames('k-button', {
size,
fillMode,
themeColor: ThemeColor.base,
rounded: Roundness.medium
}),
'k-icon-button',
)}>
<Icon className='k-button-icon' icon= "caret-alt-right" />
</span>
</ButtonGroup>
<ToolbarSeparator className="k-toolbar-button-separator" />
<div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
Expand All @@ -217,19 +243,67 @@ export const Toolbar = (
<div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
<ToolbarSeparator className="k-toolbar-button-separator" />
<ButtonGroup>
<Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
<Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-next"></Button>
<span className={classNames(
'k-toolbar-prev',
'k-button',
optionClassNames('k-button', {
size,
fillMode,
themeColor: ThemeColor.base,
rounded: Roundness.medium
}),
'k-icon-button',
)}>
<Icon className='k-button-icon' icon= "caret-alt-left" />
</span>
<span className={classNames(
'k-toolbar-next',
'k-button',
optionClassNames('k-button', {
size,
fillMode,
themeColor: ThemeColor.base,
rounded: Roundness.medium
}),
'k-icon-button',
)}>
<Icon className='k-button-icon' icon= "caret-alt-right" />
</span>
</ButtonGroup>
</>
}

{scrollable && scrollButtons === 'around' &&
{scrollable && (scrollButtons === 'around' || !scrollButtons) &&
<>
<Button fillMode={fillMode} size={size} icon="caret-alt-left" className="k-toolbar-prev"></Button>
<span className={classNames(
'k-toolbar-prev',
'k-button',
optionClassNames('k-button', {
size,
fillMode,
themeColor: ThemeColor.base,
rounded: Roundness.medium
}),
'k-icon-button',
)}>
<Icon className='k-button-icon' icon= "caret-alt-left" />
</span>
<ToolbarSeparator className="k-toolbar-button-separator" />
<div className="k-toolbar-items k-toolbar-items-scroll">{toolbarChildren}</div>
<ToolbarSeparator className="k-toolbar-button-separator" />
<Button fillMode={fillMode} size={size} icon="caret-alt-right" className="k-toolbar-next"></Button>
<span className={classNames(
'k-toolbar-next',
'k-button',
optionClassNames('k-button', {
size,
fillMode,
themeColor: ThemeColor.base,
rounded: Roundness.medium
}),
'k-icon-button',
)}>
<Icon className='k-button-icon' icon= "caret-alt-right" />
</span>
</>
}

Expand Down
8 changes: 4 additions & 4 deletions tests/spreadsheet/spreadsheet-cell-contextmenu.html
Original file line number Diff line number Diff line change
Expand Up @@ -814,20 +814,20 @@
</span>
</li>
</ul>
<button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
<span class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="m160 256 192-128v256z"></path>
</svg>
</span>
</button>
<button class="k-tabstrip-next k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
</span>
<span class="k-tabstrip-next k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M352 256 160 384V128z"></path>
</svg>
</span>
</button>
</span>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions tests/spreadsheet/spreadsheet-filtering.html
Original file line number Diff line number Diff line change
Expand Up @@ -821,20 +821,20 @@
</span>
</li>
</ul>
<button class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
<span class="k-tabstrip-prev k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="m160 256 192-128v256z"></path>
</svg>
</span>
</button>
<button class="k-tabstrip-next k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
</span>
<span class="k-tabstrip-next k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M352 256 160 384V128z"></path>
</svg>
</span>
</button>
</span>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit e5d9aaa

Please sign in to comment.