Skip to content

Commit 64a2b4c

Browse files
laske185laske185
committed
refactor: remove variant css class on button-wc host
- Refactored button styles across themes to utilize mixins for consistency - Updated link-button, split-button, and toolbar styles to use the kol-button mixin for uniformity. - Simplified button styles in ECL and ITZBund themes by removing redundant CSS rules and leveraging mixins. - Adjusted border-radius and padding properties to ensure consistent button appearance. - Enhanced focus and hover states for buttons to improve accessibility and user experience. Refs: #7514
1 parent ce31f81 commit 64a2b4c

File tree

32 files changed

+340
-750
lines changed

32 files changed

+340
-750
lines changed

‎packages/components/src/components/button/shadow.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,6 @@ export class KolButton implements ButtonProps, FocusableElement {
6262
ref={this.catchRef}
6363
class={{
6464
button: true,
65-
[this._variant as string]: this._variant !== 'custom',
66-
[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
6765
}}
6866
_accessKey={this._accessKey}
6967
_ariaControls={this._ariaControls}

‎packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`kol-button should render with _label="Label" _ariaDescription="Aria Description" 1`] = `
44
<kol-button class="kol-button">
55
<template shadowrootmode="open">
6-
<kol-button-wc class="button kol-button-wc normal">
6+
<kol-button-wc class="button kol-button-wc">
77
<!---->
88
<button aria-describedby="nonce" class="button normal" type="button">
99
<kol-span-wc _label="Label" class="button-inner">
@@ -22,7 +22,7 @@ exports[`kol-button should render with _label="Label" _ariaDescription="Aria Des
2222
exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
2323
<kol-button class="kol-button">
2424
<template shadowrootmode="open">
25-
<kol-button-wc class="button kol-button-wc normal">
25+
<kol-button-wc class="button kol-button-wc">
2626
<!---->
2727
<button class="button normal" type="button">
2828
<kol-span-wc _label="Label" class="button-inner">
@@ -38,7 +38,7 @@ exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
3838
exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
3939
<kol-button class="kol-button">
4040
<template shadowrootmode="open">
41-
<kol-button-wc class="button kol-button-wc normal">
41+
<kol-button-wc class="button kol-button-wc">
4242
<!---->
4343
<button class="button disabled normal" disabled="" type="button">
4444
<kol-span-wc _label="Label" class="button-inner">
@@ -54,7 +54,7 @@ exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
5454
exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
5555
<kol-button class="kol-button">
5656
<template shadowrootmode="open">
57-
<kol-button-wc class="button kol-button-wc normal">
57+
<kol-button-wc class="button kol-button-wc">
5858
<!---->
5959
<button class="button normal" type="button">
6060
<kol-span-wc _label="Label" class="button-inner">
@@ -70,7 +70,7 @@ exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
7070
exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
7171
<kol-button class="kol-button">
7272
<template shadowrootmode="open">
73-
<kol-button-wc class="button danger kol-button-wc">
73+
<kol-button-wc class="button kol-button-wc">
7474
<!---->
7575
<button class="button danger" type="button">
7676
<kol-span-wc _label="Label" class="button-inner">
@@ -86,7 +86,7 @@ exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
8686
exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
8787
<kol-button class="kol-button">
8888
<template shadowrootmode="open">
89-
<kol-button-wc class="button ghost kol-button-wc">
89+
<kol-button-wc class="button kol-button-wc">
9090
<!---->
9191
<button class="button ghost" type="button">
9292
<kol-span-wc _label="Label" class="button-inner">
@@ -102,7 +102,7 @@ exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
102102
exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
103103
<kol-button class="kol-button">
104104
<template shadowrootmode="open">
105-
<kol-button-wc class="button kol-button-wc normal">
105+
<kol-button-wc class="button kol-button-wc">
106106
<!---->
107107
<button class="button normal" type="button">
108108
<kol-span-wc _label="Label" class="button-inner">
@@ -118,7 +118,7 @@ exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
118118
exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
119119
<kol-button class="kol-button">
120120
<template shadowrootmode="open">
121-
<kol-button-wc class="button kol-button-wc primary">
121+
<kol-button-wc class="button kol-button-wc">
122122
<!---->
123123
<button class="button primary" type="button">
124124
<kol-span-wc _label="Label" class="button-inner">
@@ -134,7 +134,7 @@ exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
134134
exports[`kol-button should render with _label="Label" _variant="secondary" 1`] = `
135135
<kol-button class="kol-button">
136136
<template shadowrootmode="open">
137-
<kol-button-wc class="button kol-button-wc secondary">
137+
<kol-button-wc class="button kol-button-wc">
138138
<!---->
139139
<button class="button secondary" type="button">
140140
<kol-span-wc _label="Label" class="button-inner">
@@ -150,7 +150,7 @@ exports[`kol-button should render with _label="Label" _variant="secondary" 1`] =
150150
exports[`kol-button should render with _label="Label" 1`] = `
151151
<kol-button class="kol-button">
152152
<template shadowrootmode="open">
153-
<kol-button-wc class="button kol-button-wc normal">
153+
<kol-button-wc class="button kol-button-wc">
154154
<!---->
155155
<button class="button normal" type="button">
156156
<kol-span-wc _label="Label" class="button-inner">

‎packages/components/src/components/link-button/shadow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,11 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
5656
ref={this.catchRef}
5757
class={{
5858
button: true,
59-
[this._variant as string]: this._variant !== 'custom',
60-
[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
6159
}}
6260
_accessKey={this._accessKey}
6361
_ariaCurrentValue={this._ariaCurrentValue}
6462
_ariaDescription={this._ariaDescription}
63+
_customClass={this._customClass}
6564
_disabled={this._disabled}
6665
_download={this._download}
6766
_hideLabel={this._hideLabel}
@@ -74,6 +73,7 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
7473
_tabIndex={this._tabIndex}
7574
_target={this._target}
7675
_tooltipAlign={this._tooltipAlign}
76+
_variant={this._variant}
7777
>
7878
<slot name="expert" slot="expert"></slot>
7979
</KolLinkWcTag>

‎packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="bottom" 1`] = `
44
<kol-link-button class="kol-link-button">
55
<template shadowrootmode="open">
6-
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="bottom" class="button normal">
6+
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="bottom" _variant="normal" class="button">
77
<slot name="expert" slot="expert"></slot>
88
</kol-link-wc>
99
</template>
@@ -13,7 +13,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
1313
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="left" 1`] = `
1414
<kol-link-button class="kol-link-button">
1515
<template shadowrootmode="open">
16-
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="left" class="button normal">
16+
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="left" _variant="normal" class="button">
1717
<slot name="expert" slot="expert"></slot>
1818
</kol-link-wc>
1919
</template>
@@ -23,7 +23,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
2323
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="right" 1`] = `
2424
<kol-link-button class="kol-link-button">
2525
<template shadowrootmode="open">
26-
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" class="button normal">
26+
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" _variant="normal" class="button">
2727
<slot name="expert" slot="expert"></slot>
2828
</kol-link-wc>
2929
</template>
@@ -33,7 +33,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
3333
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" _hideLabel=true 1`] = `
3434
<kol-link-button class="kol-link-button">
3535
<template shadowrootmode="open">
36-
<kol-link-wc _hidelabel="" _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" class="button normal">
36+
<kol-link-wc _hidelabel="" _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" _variant="normal" class="button">
3737
<slot name="expert" slot="expert"></slot>
3838
</kol-link-wc>
3939
</template>
@@ -43,7 +43,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
4343
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" 1`] = `
4444
<kol-link-button class="kol-link-button">
4545
<template shadowrootmode="open">
46-
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" class="button normal">
46+
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" _variant="normal" class="button">
4747
<slot name="expert" slot="expert"></slot>
4848
</kol-link-wc>
4949
</template>
@@ -53,7 +53,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
5353
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" 1`] = `
5454
<kol-link-button class="kol-link-button">
5555
<template shadowrootmode="open">
56-
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" class="button normal">
56+
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" _variant="normal" class="button">
5757
<slot name="expert" slot="expert"></slot>
5858
</kol-link-wc>
5959
</template>
@@ -63,7 +63,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
6363
exports[`kol-link-button should render with _label="Label" _href="" _download="download-file.zip" _target="blank" 1`] = `
6464
<kol-link-button class="kol-link-button">
6565
<template shadowrootmode="open">
66-
<kol-link-wc _download="download-file.zip" _href="" _label="Label" _role="button" _target="blank" _tooltipalign="right" class="button normal">
66+
<kol-link-wc _download="download-file.zip" _href="" _label="Label" _role="button" _target="blank" _tooltipalign="right" _variant="normal" class="button">
6767
<slot name="expert" slot="expert"></slot>
6868
</kol-link-wc>
6969
</template>

‎packages/components/src/components/link/component.tsx‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ import type {
55
AriaDescriptionPropType,
66
AriaExpandedPropType,
77
AriaOwnsPropType,
8+
ButtonVariantPropType,
9+
CustomClassPropType,
810
DisabledPropType,
911
DownloadPropType,
1012
FocusableElement,
1113
HrefPropType,
1214
KoliBriIconsProp,
1315
LabelWithExpertSlotPropType,
14-
LinkAPI,
1516
LinkOnCallbacksPropType,
16-
LinkStates,
1717
LinkTargetPropType,
18+
LinkWcAPI,
19+
LinkWcStates,
1820
ShortKeyPropType,
1921
Stringified,
2022
TooltipAlignPropType,
@@ -29,6 +31,8 @@ import {
2931
validateAriaDescription,
3032
validateAriaExpanded,
3133
validateAriaOwns,
34+
validateButtonVariant,
35+
validateCustomClass,
3236
validateDisabled,
3337
validateDownload,
3438
validateHideLabel,
@@ -59,7 +63,7 @@ import { validateAccessAndShortKey } from '../../schema/validators/access-and-sh
5963
tag: 'kol-link-wc',
6064
shadow: false,
6165
})
62-
export class KolLinkWc implements LinkAPI, FocusableElement {
66+
export class KolLinkWc implements LinkWcAPI, FocusableElement {
6367
private anchorRef?: HTMLAnchorElement;
6468
private unsubscribeOnLocationChange?: UnsubscribeFunction;
6569

@@ -146,6 +150,9 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
146150
disabled: this.state._disabled === true,
147151
'external-link': isExternal,
148152
'hide-label': this.state._hideLabel === true,
153+
[this.state._variant as string]: this.state._variant !== 'custom',
154+
[this.state._customClass as string]:
155+
this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
149156
}}
150157
{...this.state._on}
151158
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md
@@ -217,6 +224,11 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
217224
*/
218225
@Prop() public _ariaOwns?: AriaOwnsPropType;
219226

227+
/**
228+
* Defines the custom class attribute if _variant="custom" is set.
229+
*/
230+
@Prop() public _customClass?: CustomClassPropType;
231+
220232
/**
221233
* Makes the element not focusable and ignore all events.
222234
*/
@@ -279,7 +291,12 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
279291
*/
280292
@Prop() public _tooltipAlign?: TooltipAlignPropType = 'right';
281293

282-
@State() public state: LinkStates = {
294+
/**
295+
* Defines which variant should be used for presentation.
296+
*/
297+
@Prop() public _variant?: ButtonVariantPropType = 'normal';
298+
299+
@State() public state: LinkWcStates = {
283300
_ariaCurrentValue: 'page',
284301
_href: '', // ⚠ required
285302
_icons: {},
@@ -311,6 +328,11 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
311328
validateAriaOwns(this, value);
312329
}
313330

331+
@Watch('_customClass')
332+
public validateCustomClass(value?: CustomClassPropType): void {
333+
validateCustomClass(this, value);
334+
}
335+
314336
@Watch('_disabled')
315337
public validateDisabled(value?: DisabledPropType): void {
316338
validateDisabled(this, value);
@@ -374,12 +396,18 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
374396
validateTooltipAlign(this, value);
375397
}
376398

399+
@Watch('_variant')
400+
public validateVariant(value?: ButtonVariantPropType): void {
401+
validateButtonVariant(this, value);
402+
}
403+
377404
public componentWillLoad(): void {
378405
this.validateAccessKey(this._accessKey);
379406
this.validateAriaCurrentValue(this._ariaCurrentValue);
380407
this.validateAriaDescription(this._ariaDescription);
381408
this.validateAriaExpanded(this._ariaExpanded);
382409
this.validateAriaOwns(this._ariaOwns);
410+
this.validateCustomClass(this._customClass);
383411
this.validateDisabled(this._disabled);
384412
this.validateDownload(this._download);
385413
this.validateHideLabel(this._hideLabel);
@@ -392,6 +420,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
392420
this.validateTabIndex(this._tabIndex);
393421
this.validateTarget(this._target);
394422
this.validateTooltipAlign(this._tooltipAlign);
423+
this.validateVariant(this._variant);
395424
this.unsubscribeOnLocationChange = onLocationChange((location) => {
396425
this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
397426
});

‎packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
55
<template shadowrootmode="open">
66
<kol-link-wc class="kol-link-wc">
77
<!---->
8-
<a class="external-link" href="https://example.com" rel="noopener" target="self">
8+
<a class="external-link normal" href="https://example.com" rel="noopener" target="self">
99
<kol-span-wc _label="Label">
1010
<slot name="expert" slot="expert"></slot>
1111
</kol-span-wc>
@@ -22,7 +22,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
2222
<template shadowrootmode="open">
2323
<kol-link-wc class="kol-link-wc">
2424
<!---->
25-
<a class="external-link" href="https://example.com" rel="noopener" target="self">
25+
<a class="external-link normal" href="https://example.com" rel="noopener" target="self">
2626
<kol-span-wc _label="Label">
2727
<slot name="expert" slot="expert"></slot>
2828
</kol-span-wc>
@@ -39,7 +39,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
3939
<template shadowrootmode="open">
4040
<kol-link-wc class="kol-link-wc">
4141
<!---->
42-
<a class="external-link" href="https://example.com" rel="noopener" target="self">
42+
<a class="external-link normal" href="https://example.com" rel="noopener" target="self">
4343
<kol-span-wc _label="Label">
4444
<slot name="expert" slot="expert"></slot>
4545
</kol-span-wc>
@@ -56,7 +56,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
5656
<template shadowrootmode="open">
5757
<kol-link-wc class="kol-link-wc">
5858
<!---->
59-
<a aria-label="Label (kol-open-link-in-tab)" class="external-link hide-label" href="https://example.com" rel="noopener" target="self">
59+
<a aria-label="Label (kol-open-link-in-tab)" class="external-link hide-label normal" href="https://example.com" rel="noopener" target="self">
6060
<kol-span-wc _hidelabel="" _label="Label">
6161
<slot name="expert" slot="expert"></slot>
6262
</kol-span-wc>
@@ -73,7 +73,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
7373
<template shadowrootmode="open">
7474
<kol-link-wc class="kol-link-wc">
7575
<!---->
76-
<a class="external-link" href="https://example.com" rel="noopener" target="self">
76+
<a class="external-link normal" href="https://example.com" rel="noopener" target="self">
7777
<kol-span-wc _label="Label">
7878
<slot name="expert" slot="expert"></slot>
7979
</kol-span-wc>
@@ -90,7 +90,7 @@ exports[`kol-link should render with _href="https://example.com" _icons="codicon
9090
<template shadowrootmode="open">
9191
<kol-link-wc class="kol-link-wc">
9292
<!---->
93-
<a class="external-link" href="https://example.com" rel="noopener" target="self">
93+
<a class="external-link normal" href="https://example.com" rel="noopener" target="self">
9494
<kol-span-wc _label="Label">
9595
<slot name="expert" slot="expert"></slot>
9696
</kol-span-wc>
@@ -107,7 +107,7 @@ exports[`kol-link should render with _label="Label" _href="" _download="download
107107
<template shadowrootmode="open">
108108
<kol-link-wc class="kol-link-wc">
109109
<!---->
110-
<a class="external-link" download="download-file.zip" href="javascript:void(0);" rel="noopener" target="blank">
110+
<a class="external-link normal" download="download-file.zip" href="javascript:void(0);" rel="noopener" target="blank">
111111
<kol-span-wc _label="Label">
112112
<slot name="expert" slot="expert"></slot>
113113
</kol-span-wc>

‎packages/components/src/components/popover-button/shadow.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,10 +120,7 @@ export class KolPopoverButton implements PopoverButtonProps {
120120
_value={this._value}
121121
_variant={this._variant}
122122
data-testid="popover-button"
123-
class={clsx('kol-popover-button__button', {
124-
/* In V2, the `_variant` classnames for button are specified on the shadow. This has been fixed in V3. */
125-
[this._variant as string]: this._variant !== 'custom',
126-
})}
123+
class={clsx('kol-popover-button__button')}
127124
ref={(element) => (this.refButton = element)}
128125
>
129126
<slot name="expert" slot="expert"></slot>

‎packages/components/src/components/popover-button/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`kol-popover-button should render with _label="Click to toggle" 1`] = `
44
<kol-popover-button>
55
<template shadowrootmode="open">
66
<div class="kol-popover-button">
7-
<kol-button-wc _label="Click to toggle" _tooltipalign="top" _type="button" _variant="normal" class="kol-popover-button__button normal" data-testid="popover-button">
7+
<kol-button-wc _label="Click to toggle" _tooltipalign="top" _type="button" _variant="normal" class="kol-popover-button__button" data-testid="popover-button">
88
<slot name="expert" slot="expert"></slot>
99
</kol-button-wc>
1010
<div class="kol-popover-button__popover" data-testid="popover-content" id="popover" popover="auto">

0 commit comments

Comments
 (0)
⚡