Apply BEM refactoring to tree, tree-item, toolbar and tooltip

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)};
 	}
 }

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>
 		);
 	}
 

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);

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>

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>

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 {

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

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>

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}

packages/components/src/components/tree-item/style.scss

@@ -2,30 +2,31 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-tree-item {
+		$root: &;
 		font-size: rem(16);
-	}
 
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
+		&__link {
+			.kol-link {
+				padding-right: rem(6);
+				padding-left: calc(rem(22.4) * var(--level));
+				padding-top: rem(6.4);
+				padding-bottom: rem(6.4);
+			}
 
-	.tree-link {
-		&.first-level > a {
-			padding-left: rem(6);
+			&--first-level .kol-link {
+				padding-left: rem(6);
+			}
 		}
 
-		& > a {
-			padding-right: rem(6);
-			padding-left: calc(rem(22.4) * var(--level));
-			padding-top: rem(6.4);
-			padding-bottom: rem(6.4);
+		&__children {
+			margin: 0;
+			padding: 0;
+			list-style: none;
 		}
-	}
 
-	a .kol-span {
-		place-items: unset; // unset 'center' style from global layer
+		.kol-span {
+			place-items: unset; // unset 'center' style from global layer
+		}
 	}
 }