Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply BEM refactoring to Link and LinkButton #7124

Merged
merged 31 commits into from
Dec 5, 2024
Merged

Apply BEM refactoring to Link and LinkButton #7124

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
5eb6224
link refactor
AlexanderSchmidtCE Nov 26, 2024
e0bac4c
link refactor
AlexanderSchmidtCE Nov 27, 2024
420f053
changed kol lik to mixin
AlexanderSchmidtCE Nov 27, 2024
1afe37e
kol-link as mixin
AlexanderSchmidtCE Dec 2, 2024
2f90c25
snapshot update
AlexanderSchmidtCE Dec 2, 2024
efc5ea0
themes update
AlexanderSchmidtCE Dec 2, 2024
e895fc8
test snapshot update
AlexanderSchmidtCE Dec 2, 2024
1303c23
changed kol-link-wc to kol-link
AlexanderSchmidtCE Dec 3, 2024
bc47a5c
fixed link on breadcrumb
AlexanderSchmidtCE Dec 3, 2024
3b5c1ca
fixed link in form
AlexanderSchmidtCE Dec 3, 2024
76db848
Merge branch 'develop' into 7036-bem-refactor-link
AlexanderSchmidtCE Dec 3, 2024
e4accce
link host fix
AlexanderSchmidtCE Dec 3, 2024
ec32d6b
temp button fix
AlexanderSchmidtCE Dec 3, 2024
bcea76b
temp button snapshot
AlexanderSchmidtCE Dec 3, 2024
6685be2
review changes
AlexanderSchmidtCE Dec 4, 2024
a462217
review changes
AlexanderSchmidtCE Dec 4, 2024
41ea63c
dev merge
AlexanderSchmidtCE Dec 4, 2024
f33478d
merge changes fixed
AlexanderSchmidtCE Dec 4, 2024
3f70b4c
Update all snapshots$
AlexanderSchmidtCE Dec 4, 2024
4a08c02
moved variant and customclass to link
AlexanderSchmidtCE Dec 5, 2024
e9d473b
test update
AlexanderSchmidtCE Dec 5, 2024
c2cd75e
Merge branch 'develop' into 7036-bem-refactor-link
AlexanderSchmidtCE Dec 5, 2024
2d6338d
Merge branch 'develop' into 7036-bem-refactor-link
AlexanderSchmidtCE Dec 5, 2024
416ffde
removed Button props of Link
AlexanderSchmidtCE Dec 5, 2024
7f3983d
added @Prop() in Link
AlexanderSchmidtCE Dec 5, 2024
8e6ad3b
fixed props error
AlexanderSchmidtCE Dec 5, 2024
39e604a
added props to state
AlexanderSchmidtCE Dec 5, 2024
3bf59d5
changed theme button/links to mixin, if style is same
AlexanderSchmidtCE Dec 5, 2024
e7e09df
snapshot test
AlexanderSchmidtCE Dec 5, 2024
0347909
default fixes
AlexanderSchmidtCE Dec 5, 2024
e771bf1
Update all snapshots$
AlexanderSchmidtCE Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions packages/components/src/components/@shared/_kol-link-mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
@import 'mixins';
@import '../tooltip/style';

@mixin kol-link-styles($block-classname) {
@layer kol-component {
:host {
AlexanderSchmidtCE marked this conversation as resolved.
Show resolved Hide resolved
display: inline-block;
font-size: rem(16);
}

.#{$block-classname} {
$root: &;

align-items: baseline;
display: inline-flex;
place-items: center;
text-align: left;
text-decoration-line: none;

&__text {
.span-label {
text-decoration-line: underline;

@at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & {
text-decoration-thickness: 0.2em;
}
}
}

.kol-icon.external-link-icon {
AlexanderSchmidtCE marked this conversation as resolved.
Show resolved Hide resolved
display: inline-flex;
margin-left: rem(8);
}
}
}
}
4 changes: 3 additions & 1 deletion packages/components/src/components/button-link/style.scss
View file
Open in desktop
AlexanderSchmidtCE marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../@shared/mixins';
@import '../style';
@import '../link';
@import '../@shared/kol-link-mixin';

@include kol-link-styles('kol-button');
3 changes: 2 additions & 1 deletion packages/components/src/components/button/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
aria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}
aria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}
class={{
'kol-button': true,
button: true,
disabled: this.state._disabled === true,
[this.state._variant as string]: this.state._variant !== 'custom',
Expand All @@ -138,7 +139,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
type={this.state._type}
>
<KolSpanFc
class="button-inner"
class="button-inner kol-button__text"
badgeText={badgeText}
icons={this.state._icons}
hideLabel={this.state._hideLabel}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/button/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class KolButton implements ButtonProps, FocusableElement {

public render(): JSX.Element {
return (
<Host class="kol-button">
<Host>
<KolButtonWcTag
ref={this.catchRef}
class={{
Expand Down
60 changes: 30 additions & 30 deletions packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`kol-button should render with _label="Label" _ariaDescription="Aria Description" 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button kol-button-wc normal">
<!---->
<button aria-describedby="nonce" class="button normal" type="button">
<span class="button-inner kol-span-wc">
<button aria-describedby="nonce" class="button kol-button normal" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -27,12 +27,12 @@ exports[`kol-button should render with _label="Label" _ariaDescription="Aria Des
`;

exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button kol-button-wc normal">
<!---->
<button class="button normal" type="button">
<span class="button-inner kol-span-wc">
<button class="button kol-button normal" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -50,12 +50,12 @@ exports[`kol-button should render with _label="Label" _disabled=false 1`] = `
`;

exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button kol-button-wc normal">
<!---->
<button class="button disabled normal" disabled="" type="button">
<span class="button-inner kol-span-wc">
<button class="button disabled kol-button normal" disabled="" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -73,12 +73,12 @@ exports[`kol-button should render with _label="Label" _disabled=true 1`] = `
`;

exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button kol-button-wc normal">
<!---->
<button class="button normal" type="button">
<span class="button-inner kol-span-wc">
<button class="button kol-button normal" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -96,12 +96,12 @@ exports[`kol-button should render with _label="Label" _value="Hello" 1`] = `
`;

exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button danger kol-button-wc">
<!---->
<button class="button danger" type="button">
<span class="button-inner kol-span-wc">
<button class="button danger kol-button" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -119,12 +119,12 @@ exports[`kol-button should render with _label="Label" _variant="danger" 1`] = `
`;

exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button ghost kol-button-wc">
<!---->
<button class="button ghost" type="button">
<span class="button-inner kol-span-wc">
<button class="button ghost kol-button" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -142,12 +142,12 @@ exports[`kol-button should render with _label="Label" _variant="ghost" 1`] = `
`;

exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button kol-button-wc normal">
<!---->
<button class="button normal" type="button">
<span class="button-inner kol-span-wc">
<button class="button kol-button normal" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -165,12 +165,12 @@ exports[`kol-button should render with _label="Label" _variant="normal" 1`] = `
`;

exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button kol-button-wc primary">
<!---->
<button class="button primary" type="button">
<span class="button-inner kol-span-wc">
<button class="button kol-button primary" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -188,12 +188,12 @@ exports[`kol-button should render with _label="Label" _variant="primary" 1`] = `
`;

exports[`kol-button should render with _label="Label" _variant="secondary" 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button kol-button-wc secondary">
<!---->
<button class="button secondary" type="button">
<span class="button-inner kol-span-wc">
<button class="button kol-button secondary" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand All @@ -211,12 +211,12 @@ exports[`kol-button should render with _label="Label" _variant="secondary" 1`] =
`;

exports[`kol-button should render with _label="Label" 1`] = `
<kol-button class="kol-button">
<kol-button>
<template shadowrootmode="open">
<kol-button-wc class="button kol-button-wc normal">
<!---->
<button class="button normal" type="button">
<span class="button-inner kol-span-wc">
<button class="button kol-button normal" type="button">
<span class="button-inner kol-button__text kol-span-wc">
<span class="kol-span__container">
<span class="span-label">
Label
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/form/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export class KolForm implements FormAPI {
{errorList?.map((error, index) => (
<li key={index}>
<KolLinkWcTag
class="kol-form__link"
_href={error.selector}
_label={error.message}
_on={{ onClick: this.handleLinkClick }}
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/components/form/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
@import '../@shared/mixins';
@import '../style';
@import '../input-line';
@import '../link';
@import '../@shared/kol-link-mixin';

@include kol-alert-styles;
@include kol-link-styles('kol-link');

@layer kol-component {
:host {
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/link-button/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import type {
import type { JSX } from '@stencil/core';
import { Component, h, Host, Method, Prop } from '@stencil/core';
import { KolLinkWcTag } from '../../core/component-names';
import clsx from 'clsx';

@Component({
tag: 'kol-link-button',
Expand Down Expand Up @@ -54,11 +55,10 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
<Host class="kol-link-button">
<KolLinkWcTag
ref={this.catchRef}
class={{
button: true,
[this._variant as string]: this._variant !== 'custom',
class={clsx('kol-link-button', {
AlexanderSchmidtCE marked this conversation as resolved.
Show resolved Hide resolved
[`kol-link--${this._variant as string}`]: this._variant !== 'custom',
[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
}}
})}
_accessKey={this._accessKey}
_ariaCurrentValue={this._ariaCurrentValue}
_ariaDescription={this._ariaDescription}
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="bottom" 1`] = `
<kol-link-button class="kol-link-button">
<template shadowrootmode="open">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="bottom" class="button normal">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="bottom" class="kol-link--normal kol-link-button">
<slot name="expert" slot="expert"></slot>
</kol-link-wc>
</template>
Expand All @@ -13,7 +13,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="left" 1`] = `
<kol-link-button class="kol-link-button">
<template shadowrootmode="open">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="left" class="button normal">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="left" class="kol-link--normal kol-link-button">
<slot name="expert" slot="expert"></slot>
</kol-link-wc>
</template>
Expand All @@ -23,7 +23,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="right" 1`] = `
<kol-link-button class="kol-link-button">
<template shadowrootmode="open">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" class="button normal">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" class="kol-link--normal kol-link-button">
<slot name="expert" slot="expert"></slot>
</kol-link-wc>
</template>
Expand All @@ -33,7 +33,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" _hideLabel=true 1`] = `
<kol-link-button class="kol-link-button">
<template shadowrootmode="open">
<kol-link-wc _hidelabel="" _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" class="button normal">
<kol-link-wc _hidelabel="" _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" class="kol-link--normal kol-link-button">
<slot name="expert" slot="expert"></slot>
</kol-link-wc>
</template>
Expand All @@ -43,7 +43,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" 1`] = `
<kol-link-button class="kol-link-button">
<template shadowrootmode="open">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" class="button normal">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="top" class="kol-link--normal kol-link-button">
<slot name="expert" slot="expert"></slot>
</kol-link-wc>
</template>
Expand All @@ -53,7 +53,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" 1`] = `
<kol-link-button class="kol-link-button">
<template shadowrootmode="open">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" class="button normal">
<kol-link-wc _href="https://example.com" _icons="codicon codicon-home" _label="Label" _role="button" _target="self" _tooltipalign="right" class="kol-link--normal kol-link-button">
<slot name="expert" slot="expert"></slot>
</kol-link-wc>
</template>
Expand All @@ -63,7 +63,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="
exports[`kol-link-button should render with _label="Label" _href="" _download="download-file.zip" _target="blank" 1`] = `
<kol-link-button class="kol-link-button">
<template shadowrootmode="open">
<kol-link-wc _download="download-file.zip" _href="" _label="Label" _role="button" _target="blank" _tooltipalign="right" class="button normal">
<kol-link-wc _download="download-file.zip" _href="" _label="Label" _role="button" _target="blank" _tooltipalign="right" class="kol-link--normal kol-link-button">
<slot name="expert" slot="expert"></slot>
</kol-link-wc>
</template>
Expand Down
48 changes: 0 additions & 48 deletions packages/components/src/components/link.scss
View file
Open in desktop

This file was deleted.

Loading
Loading