Apply BEM refactoring to Link and LinkButton (#7124)

public-ui · Dec 5, 2024 · c39e796 · c39e796
2 parents 075c38b + e771bf1
commit c39e796
Show file tree

Hide file tree

Showing 60 changed files with 420 additions and 703 deletions.
diff --git a/packages/components/src/components/@shared/_kol-button-mixin.scss b/packages/components/src/components/@shared/_kol-button-mixin.scss
@@ -7,7 +7,7 @@
 			//Needed for custom width
 			display: inline-block;
 		}
-		.#{$block-classname } {
+		.#{$block-classname} {
 			font-style: rem(16);
 			display: inline-flex;
 			place-items: center;

diff --git a/packages/components/src/components/@shared/_kol-link-mixin.scss b/packages/components/src/components/@shared/_kol-link-mixin.scss
@@ -0,0 +1,37 @@
+@import 'mixins';
+@import '../tooltip/style';
+
+@mixin kol-link-styles($block-classname) {
+	@layer kol-component {
+		:host {
+			// Causing linebreak, when removed
+			display: inline-block;
+		}
+
+		.#{$block-classname} {
+			$root: &;
+
+			font-size: rem(16);
+			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;
+					}
+				}
+			}
+
+			&__icon {
+				display: inline-flex;
+				margin-left: rem(8);
+			}
+		}
+	}
+}
diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
@@ -58,7 +58,6 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	public render(): JSX.Element {
 		return (
 			<KolButtonWcTag
-				class="kol-button-link"
 				ref={this.catchRef}
 				_accessKey={this._accessKey}
 				_ariaControls={this._ariaControls}

diff --git a/packages/components/src/components/button-link/style.scss b/packages/components/src/components/button-link/style.scss
@@ -1,3 +1,5 @@
 @import '../@shared/mixins';
 @import '../style';
-@import '../link';
+@import '../@shared/kol-link-mixin';
+
+@include kol-link-styles('kol-button');
diff --git a/packages/components/src/components/button-link/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button-link/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`kol-button-link should render with _label="Beschreibung" 1`] = `
 <kol-button-link>
   <template shadowrootmode="open">
-    <kol-button-wc _label="Beschreibung" _role="link" _tooltipalign="top" _type="button" class="kol-button-link">
+    <kol-button-wc _label="Beschreibung" _role="link" _tooltipalign="top" _type="button">
       <slot name="expert" slot="expert"></slot>
     </kol-button-wc>
   </template>

diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
@@ -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 }}

diff --git a/packages/components/src/components/form/style.scss b/packages/components/src/components/form/style.scss
@@ -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 {

diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx
@@ -17,7 +17,7 @@ import type {
 	TooltipAlignPropType,
 } from '../../schema';
 import type { JSX } from '@stencil/core';
-import { Component, h, Host, Method, Prop } from '@stencil/core';
+import { Component, h, Method, Prop } from '@stencil/core';
 import { KolLinkWcTag } from '../../core/component-names';
 
 @Component({
@@ -51,33 +51,28 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-link-button">
-				<KolLinkWcTag
-					ref={this.catchRef}
-					class={{
-						button: true,
-						[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}
-					_disabled={this._disabled}
-					_download={this._download}
-					_hideLabel={this._hideLabel}
-					_href={this._href}
-					_icons={this._icons}
-					_label={this._label}
-					_on={this._on}
-					_role="button"
-					_shortKey={this._shortKey}
-					_tabIndex={this._tabIndex}
-					_target={this._target}
-					_tooltipAlign={this._tooltipAlign}
-				>
-					<slot name="expert" slot="expert"></slot>
-				</KolLinkWcTag>
-			</Host>
+			<KolLinkWcTag
+				ref={this.catchRef}
+				_accessKey={this._accessKey}
+				_ariaCurrentValue={this._ariaCurrentValue}
+				_ariaDescription={this._ariaDescription}
+				_customClass={this._customClass}
+				_disabled={this._disabled}
+				_download={this._download}
+				_hideLabel={this._hideLabel}
+				_href={this._href}
+				_icons={this._icons}
+				_label={this._label}
+				_on={this._on}
+				_role="button"
+				_shortKey={this._shortKey}
+				_tabIndex={this._tabIndex}
+				_target={this._target}
+				_tooltipAlign={this._tooltipAlign}
+				_variant={this._variant}
+			>
+				<slot name="expert" slot="expert"></slot>
+			</KolLinkWcTag>
 		);
 	}
 

diff --git a/packages/components/src/components/link-button/style.scss b/packages/components/src/components/link-button/style.scss
@@ -2,4 +2,4 @@
 @import '../style';
 @import '../@shared/kol-button-mixin';
 
-@include kol-button-styles('kol-link-button');
+@include kol-button-styles('kol-link');
diff --git a/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,69 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 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">
+<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" _variant="normal">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
 </kol-link-button>
 `;
 
 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">
+<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" _variant="normal">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
 </kol-link-button>
 `;
 
 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">
+<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" _variant="normal">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
 </kol-link-button>
 `;
 
 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">
+<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" _variant="normal">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
 </kol-link-button>
 `;
 
 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">
+<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" _variant="normal">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
 </kol-link-button>
 `;
 
 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">
+<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" _variant="normal">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>
 </kol-link-button>
 `;
 
 exports[`kol-link-button should render with _label="Label" _href="" _download="download-file.zip" _target="blank" 1`] = `
-<kol-link-button class="kol-link-button">
+<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" _variant="normal">
       <slot name="expert" slot="expert"></slot>
     </kol-link-wc>
   </template>

diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss