Skip to content

Commit cada663

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 cada663

File tree

27 files changed

+304
-716
lines changed

27 files changed

+304
-716
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/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/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/popover-button/shadow.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import type {
2121
TooltipAlignPropType,
2222
} from '../../schema';
2323
import { validatePopoverAlign } from '../../schema';
24-
import clsx from 'clsx';
2524

2625
/**
2726
* @slot - The popover content.
@@ -120,10 +119,6 @@ export class KolPopoverButton implements PopoverButtonProps {
120119
_value={this._value}
121120
_variant={this._variant}
122121
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-
})}
127122
ref={(element) => (this.refButton = element)}
128123
>
129124
<slot name="expert" slot="expert"></slot>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,6 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
6262
class={{
6363
'main-button': true,
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
_ariaControls={this._ariaControls}
6967
_ariaExpanded={this._ariaExpanded}

‎packages/components/src/schema/components/link.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import type {
66
PropAriaDescription,
77
PropAriaExpanded,
88
PropAriaOwns,
9+
PropButtonVariant,
10+
PropCustomClass,
911
PropDisabled,
1012
PropDownload,
1113
PropHideLabel,
@@ -46,3 +48,15 @@ type OptionalStates = { ariaCurrent: string } & PropAriaExpanded & PropAriaOwns
4648
export type LinkProps = Generic.Element.Members<RequiredProps, OptionalProps>;
4749
export type LinkStates = Generic.Element.Members<RequiredStates, OptionalStates>;
4850
export type LinkAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
51+
52+
export type OptionalWcProps = OptionalProps
53+
& PropButtonVariant
54+
& PropCustomClass;
55+
56+
export type OptionalWcStates = OptionalStates
57+
& PropButtonVariant
58+
& PropCustomClass;
59+
60+
export type LinkWcProps = Generic.Element.Members<RequiredProps, OptionalWcProps>;
61+
export type LinkWcStates = Generic.Element.Members<RequiredStates, OptionalWcStates>;
62+
export type LinkWcAPI = Generic.Element.ComponentApi<RequiredProps, OptionalWcProps, RequiredStates, OptionalWcStates>;

‎packages/themes/bwst/src/components/button.scss‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,5 @@
66
font-family: var(--font-family);
77
}
88

9-
:is(a, button) > .kol-span-wc {
10-
font-weight: 400;
11-
border-radius: var(--border-radius);
12-
border-style: solid;
13-
border-width: var(--border-width);
14-
min-height: var(--a11y-min-size);
15-
min-width: var(--a11y-min-size);
16-
padding: rem(8) rem(14);
17-
text-align: center;
18-
transition-duration: 0.2s;
19-
transition-property: background-color, color, border-color;
20-
}
21-
229
@include kol-button;
2310
}

‎packages/themes/bwst/src/components/link-button.scss‎

Lines changed: 2 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,10 @@
11
@use '../rem' as *;
2+
@use '../mixins/button' as *;
23

34
@layer kol-theme-component {
45
:host {
56
font-family: var(--font-family);
67
}
78

8-
:is(a, button):focus {
9-
outline: none;
10-
}
11-
12-
:is(a, button):focus .kol-span-wc {
13-
outline-color: var(--color-primary-variant);
14-
outline-offset: 2px;
15-
outline-style: solid;
16-
outline-width: calc(var(--border-width) * 2);
17-
transition: outline-offset 0.2s linear;
18-
}
19-
20-
:is(a, button) > .kol-span-wc {
21-
font-weight: 400;
22-
border-radius: var(--border-radius);
23-
border-style: solid;
24-
border-width: var(--border-width);
25-
outline-width: calc(var(--border-width) * 2);
26-
min-height: var(--a11y-min-size);
27-
min-width: var(--a11y-min-size);
28-
padding: rem(8) rem(14);
29-
text-align: center;
30-
transition-duration: 0.2s;
31-
transition-property: background-color, color, border-color;
32-
}
33-
34-
.primary :is(a, button) > .kol-span-wc,
35-
.primary :is(a, button):disabled:hover > .kol-span-wc {
36-
background-color: var(--color-primary);
37-
border-color: var(--color-primary);
38-
color: var(--color-light);
39-
}
40-
41-
.secondary :is(a, button) > .kol-span-wc,
42-
.secondary :is(a, button):disabled:hover > .kol-span-wc,
43-
.normal :is(a, button) > .kol-span-wc,
44-
.normal :is(a, button):disabled:hover > .kol-span-wc {
45-
background-color: var(--color-light);
46-
border-color: var(--color-primary);
47-
color: var(--color-primary);
48-
}
49-
50-
.danger :is(a, button) > .kol-span-wc,
51-
.danger :is(a, button):disabled:hover > .kol-span-wc {
52-
background-color: var(--color-danger);
53-
border-color: var(--color-danger);
54-
color: var(--color-light);
55-
}
56-
57-
.ghost :is(a, button) > .kol-span-wc,
58-
.ghost :is(a, button):disabled:hover > .kol-span-wc {
59-
border-color: var(--color-light);
60-
background-color: var(--color-light);
61-
box-shadow: none;
62-
color: var(--color-primary);
63-
}
64-
65-
/*-----------*/
66-
.primary :is(a, button):active > .kol-span-wc,
67-
.primary :is(a, button):hover > .kol-span-wc,
68-
.secondary :is(a, button):active > .kol-span-wc,
69-
.secondary :is(a, button):hover > .kol-span-wc,
70-
.normal :is(a, button):active > .kol-span-wc,
71-
.normal :is(a, button):hover > .kol-span-wc,
72-
.danger :is(a, button):active > .kol-span-wc,
73-
.danger :is(a, button):hover > .kol-span-wc,
74-
.ghost :is(a, button):active > .kol-span-wc,
75-
.ghost :is(a, button):hover > .kol-span-wc {
76-
background-color: var(--color-primary-variant);
77-
border-color: var(--color-primary-variant);
78-
box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
79-
color: var(--color-light);
80-
}
81-
82-
.danger :is(a, button):active > .kol-span-wc,
83-
.danger :is(a, button):hover > .kol-span-wc {
84-
background-color: var(--color-danger);
85-
border-color: var(--color-danger);
86-
}
87-
88-
:is(a, button):disabled:hover > .kol-span-wc,
89-
:is(a, button):focus:hover > .kol-span-wc {
90-
box-shadow: none;
91-
}
92-
93-
.primary :is(a, button):active > .kol-span-wc,
94-
.secondary :is(a, button):active > .kol-span-wc,
95-
.normal :is(a, button):active > .kol-span-wc,
96-
.danger :is(a, button):active > .kol-span-wc,
97-
.ghost :is(a, button):active > .kol-span-wc {
98-
border-color: var(--color-light);
99-
box-shadow: none;
100-
outline: none;
101-
}
102-
103-
:is(a, button).hide-label > .kol-span-wc {
104-
padding: rem(calc(0.8 * 16));
105-
width: unset;
106-
}
107-
108-
:is(a, button).hide-label > .kol-span-wc > span > span {
109-
display: none;
110-
}
111-
112-
:is(a, button).loading > .kol-span-wc .kol-icon {
113-
animation: spin 5s infinite linear;
114-
}
115-
116-
/** small ghost button */
117-
.ghost :is(a, button).small > .kol-span-wc {
118-
border: none;
119-
background-color: transparent;
120-
box-shadow: none;
121-
}
122-
123-
.ghost :is(a, button).small > .kol-span-wc > span {
124-
border-radius: 1.5em;
125-
border-style: solid;
126-
border-width: var(--border-width);
127-
border-color: var(--color-light);
128-
background-color: var(--color-light);
129-
}
130-
131-
.ghost :is(a, button).small:active > .kol-span-wc > span,
132-
.ghost :is(a, button).small:hover > .kol-span-wc > span,
133-
.ghost :is(a, button).small.transparent:active > .kol-span-wc > span,
134-
.ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {
135-
background-color: var(--color-primary-variant);
136-
border-color: var(--color-primary-variant);
137-
box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);
138-
color: var(--color-light);
139-
}
140-
141-
/** :is(a,button) with transparent background */
142-
:is(a, button).transparent > .kol-span-wc > span,
143-
.ghost :is(a, button).small.transparent > .kol-span-wc > span,
144-
:is(a, button).transparent > .kol-span-wc {
145-
background-color: transparent;
146-
border-color: transparent;
147-
}
9+
@include kol-button;
14810
}

0 commit comments

Comments
 (0)
⚡