Merge branch 'develop' into 7036-bem-refactor-drawer

public-ui · Dec 16, 2024 · 4ee4c17 · 4ee4c17
2 parents dc2417e + d37732f
commit 4ee4c17
Show file tree

Hide file tree

Showing 83 changed files with 387 additions and 383 deletions.
diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
@@ -53,7 +53,7 @@ export class KolForm implements FormAPI {
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc type="error" variant="card" label={translate('kol-error-list-message')}>
+			<KolAlertFc class="kol-form__alert" type="error" variant="card" label={translate('kol-error-list-message')}>
 				<nav aria-label={translate('kol-error-list')}>
 					<ul>
 						{errorList?.map((error, index) => (
@@ -77,14 +77,14 @@ export class KolForm implements FormAPI {
 
 	private renderFormElement(): JSX.Element {
 		return (
-			<form method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
+			<form class="kol-form" method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
 				{this.state._requiredText === true ? (
 					<p>
-						<div class="mandatory-fields-hint">{translate('kol-form-description')}</div>
+						<div class="kol-form__mandatory-fields-hint">{translate('kol-form-description')}</div>
 					</p>
 				) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (
 					<p>
-						<div class="mandatory-fields-hint">{this.state._requiredText}</div>
+						<div class="kol-form__mandatory-fields-hint">{this.state._requiredText}</div>
 					</p>
 				) : null}
 				<slot />
@@ -96,7 +96,7 @@ export class KolForm implements FormAPI {
 		const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
 
 		return (
-			<Host class="kol-form">
+			<Host>
 				{hasErrorList && this.renderErrorList(this._errorList)}
 				{this.renderFormElement()}
 			</Host>

diff --git a/packages/components/src/components/form/style.scss b/packages/components/src/components/form/style.scss
@@ -3,11 +3,10 @@
 @import '../input-line';
 @import '../@shared/kol-link-mixin';
 
-@include kol-alert-styles;
-@include kol-link-styles('kol-link');
-
 @layer kol-component {
-	:host {
+	@include kol-link-styles('kol-link');
+	@include kol-alert-styles;
+	.kol-form {
 		font-size: rem(16);
 	}
 }
diff --git a/packages/components/src/components/form/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/form/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-form should render with _requiredText="Pflichtfeld" 1`] = `
-<kol-form class="kol-form">
+<kol-form>
   <template shadowrootmode="open">
-    <form autocomplete="off" method="post" novalidate="">
+    <form autocomplete="off" class="kol-form" method="post" novalidate="">
       <p>
-        <div class="mandatory-fields-hint">
+        <div class="kol-form__mandatory-fields-hint">
           Pflichtfeld
         </div>
       </p>

diff --git a/packages/components/src/components/input-password/style.scss b/packages/components/src/components/input-password/style.scss
@@ -14,7 +14,7 @@
 		transform: translateX(-100%);
 	}
 
-	.kol-tooltip-wc {
+	.kol-tooltip {
 		--kol-tooltip-width: #{rem(160)};
 	}
 }
diff --git a/packages/components/src/components/toolbar/shadow.tsx b/packages/components/src/components/toolbar/shadow.tsx
@@ -1,12 +1,10 @@
 import type { JSX } from '@stencil/core';
-import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';
 
 import type { LabelPropType, ToolbarAPI, ToolbarStates, ToolbarItemsPropType, ToolbarItemPropType } from '../../schema';
 import { validateLabel, validateToolbarItems } from '../../schema';
 import { KolLinkTag, KolButtonTag } from '../../core/component-names';
 
-const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
-
 @Component({
 	tag: 'kol-toolbar',
 	styleUrls: {
@@ -30,7 +28,7 @@ export class KolToolbar implements ToolbarAPI {
 		const tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;
 		const props = {
 			key: index,
-			class: TOOLBAR_ITEM_TAG_NAME,
+			class: 'kol-toolbar__item',
 			_tabIndex: tabIndex,
 		};
 		const catchRef = (element?: HTMLKolLinkElement | HTMLKolButtonElement) => {
@@ -46,11 +44,9 @@ export class KolToolbar implements ToolbarAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-toolbar">
-				<div class="toolbar" role="toolbar" aria-label={this.state._label}>
-					{this.state._items.map(this.renderItem)}
-				</div>
-			</Host>
+			<div class="kol-toolbar" role="toolbar" aria-label={this.state._label}>
+				{this.state._items.map(this.renderItem)}
+			</div>
 		);
 	}
 

diff --git a/packages/components/src/components/toolbar/style.scss b/packages/components/src/components/toolbar/style.scss
@@ -2,11 +2,9 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-toolbar {
 		font-size: rem(16);
-	}
 
-	.toolbar {
 		display: flex;
 		align-items: center;
 		gap: rem(16);

diff --git a/packages/components/src/components/toolbar/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/toolbar/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-toolbar should render with _label="Text" _items=[{"_label":"Button"},{"_href":"#","_label":"Link"}] 1`] = `
-<kol-toolbar class="kol-toolbar">
+<kol-toolbar>
   <template shadowrootmode="open">
-    <div aria-label="Text" class="toolbar" role="toolbar">
-      <kol-button _label="Button" _tabindex="0" class="kol-toolbar-item"></kol-button>
-      <kol-link _href="#" _label="Link" _tabindex="-1" class="kol-toolbar-item"></kol-link>
+    <div aria-label="Text" class="kol-toolbar" role="toolbar">
+      <kol-button _label="Button" _tabindex="0" class="kol-toolbar__item"></kol-button>
+      <kol-link _href="#" _label="Link" _tabindex="-1" class="kol-toolbar__item"></kol-link>
     </div>
   </template>
 </kol-toolbar>

diff --git a/packages/components/src/components/tooltip/component.tsx b/packages/components/src/components/tooltip/component.tsx
@@ -125,11 +125,11 @@ export class KolTooltipWc implements TooltipAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-tooltip-wc">
+			<Host class="kol-tooltip">
 				{this.state._label !== '' && (
-					<div class="tooltip-floating" ref={this.catchTooltipElement}>
-						<div class="tooltip-area tooltip-arrow" ref={this.catchArrowElement} />
-						<KolSpanFc class="tooltip-area tooltip-content" id={this.state._id} badgeText={this._badgeText} label={this.state._label} />
+					<div class="kol-tooltip__floating" ref={this.catchTooltipElement}>
+						<div class="kol-tooltip__arrow" ref={this.catchArrowElement} />
+						<KolSpanFc class="kol-tooltip__content" id={this.state._id} badgeText={this._badgeText} label={this.state._label} />
 					</div>
 				)}
 			</Host>

diff --git a/packages/components/src/components/tooltip/style.scss b/packages/components/src/components/tooltip/style.scss
@@ -5,45 +5,43 @@
 		font-size: rem(16);
 	}
 
-	.kol-tooltip-wc {
+	.kol-tooltip {
 		display: contents;
-	}
-
-	.kol-tooltip-wc .tooltip-floating {
-		animation-duration: 0.5s;
-		animation-iteration-count: 1;
-		animation-name: fadeInOpacity;
-		animation-timing-function: ease-in;
-		box-sizing: border-box;
-		display: none;
-		position: fixed;
-		visibility: hidden;
-		/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
-		top: 0;
-		left: 0;
-		max-width: 90vw;
-		max-height: 90vh;
-		/* Can be used to specify the tooltip-width from the outside. Unset by default.  */
-		width: var(--kol-tooltip-width);
-	}
 
-	/* Shared between content and arrow */
-	.kol-tooltip-wc .tooltip-area {
-		background-color: #fff;
-		color: #000;
-	}
+		&__floating {
+			animation-duration: 0.5s;
+			animation-iteration-count: 1;
+			animation-name: fadeInOpacity;
+			animation-timing-function: ease-in;
+			box-sizing: border-box;
+			display: none;
+			position: fixed;
+			visibility: hidden;
+			/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
+			top: 0;
+			left: 0;
+			max-width: 90vw;
+			max-height: 90vh;
+			/* Can be used to specify the tooltip-width from the outside. Unset by default.  */
+			width: var(--kol-tooltip-width);
+		}
 
-	.kol-tooltip-wc .tooltip-arrow {
-		height: rem(10);
-		position: absolute;
-		transform: rotate(45deg);
-		width: rem(10);
-		z-index: 999;
-	}
+		&__arrow {
+			background-color: #fff;
+			color: #000;
+			height: rem(10);
+			position: absolute;
+			transform: rotate(45deg);
+			width: rem(10);
+			z-index: 999;
+		}
 
-	.kol-tooltip-wc .tooltip-content {
-		position: relative;
-		z-index: 1000;
+		&__content {
+			background-color: #fff;
+			color: #000;
+			position: relative;
+			z-index: 1000;
+		}
 	}
 
 	@keyframes fadeInOpacity {

diff --git a/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/tooltip/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="bottom" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
         <span class="kol-span__label">
           Label
@@ -17,10 +17,10 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="botto
 `;
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="left" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
         <span class="kol-span__label">
           Label
@@ -33,10 +33,10 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="left"
 `;
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="right" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
         <span class="kol-span__label">
           Label
@@ -49,10 +49,10 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="right
 `;
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="top" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
         <span class="kol-span__label">
           Label
@@ -65,10 +65,10 @@ exports[`kol-tooltip-wc should render with _id="id" _label="Label" _align="top"
 `;
 
 exports[`kol-tooltip-wc should render with _id="id" _label="Label" 1`] = `
-<kol-tooltip-wc class="kol-tooltip-wc">
-  <div class="tooltip-floating">
-    <div class="tooltip-area tooltip-arrow"></div>
-    <span class="kol-span tooltip-area tooltip-content" id="id">
+<kol-tooltip-wc class="kol-tooltip">
+  <div class="kol-tooltip__floating">
+    <div class="kol-tooltip__arrow"></div>
+    <span class="kol-span kol-tooltip__content" id="id">
       <span class="kol-span__container">
         <span class="kol-span__label">
           Label

diff --git a/packages/components/src/components/tree-item/component.tsx b/packages/components/src/components/tree-item/component.tsx
@@ -4,6 +4,7 @@ import type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeIte
 import { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';
 import { KolLinkWcTag, KolIconTag, KolTreeTag } from '../../core/component-names';
 import { nonce } from '../../utils/dev.utils';
+import clsx from 'clsx';
 
 @Component({
 	tag: `kol-tree-item-wc`,
@@ -19,19 +20,18 @@ export class KolTreeItemWc implements TreeItemAPI {
 	public render(): JSX.Element {
 		const { _href, _active, _hasChildren, _open, _label } = this.state;
 		return (
-			<Host onSlotchange={this.handleSlotchange.bind(this)} class="kol-tree-item-wc">
+			<Host onSlotchange={this.handleSlotchange.bind(this)}>
 				<li
-					class="tree-item"
+					class="kol-tree-item"
 					style={{
 						'--level': `${this.level}`,
 					}}
 				>
 					<KolLinkWcTag
-						class={{
-							'tree-link': true,
-							'first-level': this.level === 0,
-							active: Boolean(_active),
-						}}
+						class={clsx('kol-tree-item__link', {
+							'kol-tree-item__link--first-level': this.level === 0,
+							'kol-tree-item__link--active': _active,
+						})}
 						_href={_href}
 						_label=""
 						_role="treeitem"
@@ -43,9 +43,12 @@ export class KolTreeItemWc implements TreeItemAPI {
 						<span slot="expert">
 							{_hasChildren && (
 								// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-								<span class="toggle-button" onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}>
+								<span
+									class="kol-tree-item__toggle-button"
+									onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}
+								>
 									<KolIconTag
-										class="toggle-button-icon"
+										class="kol-tree-item__toggle-button-icon"
 										_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}
 										_label={'' /* Label deliberately left empty */}
 									/>
@@ -54,7 +57,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 							{_label}
 						</span>
 					</KolLinkWcTag>
-					<ul hidden={!_hasChildren || !_open} role="group" id={this.groupId}>
+					<ul class="kol-tree-item__children" hidden={!_hasChildren || !_open} role="group" id={this.groupId}>
 						<slot />
 					</ul>
 				</li>

diff --git a/packages/components/src/components/tree-item/shadow.tsx b/packages/components/src/components/tree-item/shadow.tsx
@@ -58,7 +58,6 @@ export class KolTreeItem implements TreeItemProps {
 	public render(): JSX.Element {
 		return (
 			<KolTreeItemWcTag
-				class="kol-tree-item"
 				_active={this._active}
 				_label={this._label}
 				_open={this._open}