Skip to content

Commit

Permalink
fix(html): replace toolbar and tabstrip scroll buttons with spans
Browse files Browse the repository at this point in the history
  • Loading branch information
@TeyaVes
TeyaVes committed Jan 23, 2025
1 parent e478e80 commit eefa570
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 14 deletions.
60 changes: 54 additions & 6 deletions packages/html/src/tabstrip/tabstrip.spec.tsx
View file
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 Down Expand Up @@ -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}
Expand Down
89 changes: 81 additions & 8 deletions packages/html/src/toolbar/toolbar.spec.tsx
View file
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 Down Expand Up @@ -204,9 +205,33 @@ export const Toolbar = (

{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 @@ -218,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' || !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

0 comments on commit eefa570

Please sign in to comment.