Review Changes Abbr, Accordion, Avatar

Refs: #7036
public-ui · Nov 14, 2024 · ce9899c · ce9899c
1 parent 3dba735
commit ce9899c
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 49 deletions.
diff --git a/packages/components/src/components/abbr/shadow.tsx b/packages/components/src/components/abbr/shadow.tsx
@@ -22,9 +22,9 @@ export class KolAbbr implements AbbrAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-abbr">
+			<Host>
 				{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-				<abbr class="kol-abbr__abbr" aria-labelledby={this.nonce} role="definition" tabindex="0" title={this.state._label}>
+				<abbr aria-labelledby={this.nonce} class="kol-abbr" role="definition" tabindex="0" title={this.state._label}>
 					<span title="">
 						<slot />
 					</span>

diff --git a/packages/components/src/components/abbr/style.scss b/packages/components/src/components/abbr/style.scss
@@ -2,12 +2,8 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
 	.kol-abbr {
-		&__abbr {
-			cursor: help;
-		}
+		font-size: rem(16);
+		cursor: help;
 	}
 }
diff --git a/packages/components/src/components/abbr/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/abbr/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-abbr should render with _label="Text" _tooltipAlign="bottom" 1`] = `
-<kol-abbr class="kol-abbr">
+<kol-abbr>
   <template shadowrootmode="open">
-    <abbr aria-labelledby="nonce" class="kol-abbr__abbr" role="definition" tabindex="0" title="Text">
+    <abbr aria-labelledby="nonce" class="kol-abbr" role="definition" tabindex="0" title="Text">
       <span>
         <slot></slot>
       </span>
@@ -14,9 +14,9 @@ exports[`kol-abbr should render with _label="Text" _tooltipAlign="bottom" 1`] =
 `;
 
 exports[`kol-abbr should render with _label="Text" _tooltipAlign="left" 1`] = `
-<kol-abbr class="kol-abbr">
+<kol-abbr>
   <template shadowrootmode="open">
-    <abbr aria-labelledby="nonce" class="kol-abbr__abbr" role="definition" tabindex="0" title="Text">
+    <abbr aria-labelledby="nonce" class="kol-abbr" role="definition" tabindex="0" title="Text">
       <span>
         <slot></slot>
       </span>
@@ -27,9 +27,9 @@ exports[`kol-abbr should render with _label="Text" _tooltipAlign="left" 1`] = `
 `;
 
 exports[`kol-abbr should render with _label="Text" _tooltipAlign="right" 1`] = `
-<kol-abbr class="kol-abbr">
+<kol-abbr>
   <template shadowrootmode="open">
-    <abbr aria-labelledby="nonce" class="kol-abbr__abbr" role="definition" tabindex="0" title="Text">
+    <abbr aria-labelledby="nonce" class="kol-abbr" role="definition" tabindex="0" title="Text">
       <span>
         <slot></slot>
       </span>
@@ -40,9 +40,9 @@ exports[`kol-abbr should render with _label="Text" _tooltipAlign="right" 1`] = `
 `;
 
 exports[`kol-abbr should render with _label="Text" _tooltipAlign="top" 1`] = `
-<kol-abbr class="kol-abbr">
+<kol-abbr>
   <template shadowrootmode="open">
-    <abbr aria-labelledby="nonce" class="kol-abbr__abbr" role="definition" tabindex="0" title="Text">
+    <abbr aria-labelledby="nonce" class="kol-abbr" role="definition" tabindex="0" title="Text">
       <span>
         <slot></slot>
       </span>
@@ -53,9 +53,9 @@ exports[`kol-abbr should render with _label="Text" _tooltipAlign="top" 1`] = `
 `;
 
 exports[`kol-abbr should render with _label="Text" 1`] = `
-<kol-abbr class="kol-abbr">
+<kol-abbr>
   <template shadowrootmode="open">
-    <abbr aria-labelledby="nonce" class="kol-abbr__abbr" role="definition" tabindex="0" title="Text">
+    <abbr aria-labelledby="nonce" class="kol-abbr" role="definition" tabindex="0" title="Text">
       <span>
         <slot></slot>
       </span>

diff --git a/packages/components/src/components/accordion/style.scss b/packages/components/src/components/accordion/style.scss
@@ -4,7 +4,7 @@
 @import '../../functional-components/Collapsible/collapsible';
 
 @layer kol-component {
-	:host {
+	.kol-accordion {
 		font-size: rem(16);
 	}
 }
diff --git a/packages/components/src/components/avatar/component.tsx b/packages/components/src/components/avatar/component.tsx
@@ -1,6 +1,6 @@
 import type { JSX } from '@stencil/core';
 import { validateImageSource, validateLabel } from '../../schema';
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 
 import { translate } from '../../i18n';
 import { formatLabelAsInitials } from './controller';
@@ -17,17 +17,15 @@ import type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from
 export class KolAvatarWc implements AvatarAPI {
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-avatar">
-				<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class="kol-avatar__container" role="img">
-					{this.state._src ? (
-						<img alt="" aria-hidden="true" class="kol-avatar__image" src={this.state._src} />
-					) : (
-						<span aria-hidden="true" class="kol-avatar__initials">
-							{formatLabelAsInitials(this.state._label.trim())}
-						</span>
-					)}
-				</div>
-			</Host>
+			<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class="kol-avatar" role="img">
+				{this.state._src ? (
+					<img alt="" aria-hidden="true" class="kol-avatar__image" src={this.state._src} />
+				) : (
+					<span aria-hidden="true" class="kol-avatar__initials">
+						{formatLabelAsInitials(this.state._label.trim())}
+					</span>
+				)}
+			</div>
 		);
 	}
 

diff --git a/packages/components/src/components/avatar/style.scss b/packages/components/src/components/avatar/style.scss
@@ -3,19 +3,15 @@
 @import '../host-display-block';
 
 @layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
 	.kol-avatar {
-		&__container {
-			border-radius: 50%;
-			overflow: hidden;
-			/* Visible with forced colors  */
-			outline: transparent solid rem(1);
-			/*theme?*/
-			width: rem(100);
-			height: rem(100);
-		}
+		font-size: rem(16);
+		border-radius: 50%;
+		overflow: hidden;
+		/* Visible with forced colors  */
+		outline: transparent solid rem(1);
+		/*theme?*/
+		width: rem(100);
+		height: rem(100);
 
 		&__image {
 			width: 100%;

diff --git a/packages/components/src/components/avatar/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/avatar/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,8 +3,8 @@
 exports[`kol-avatar should render with _label="Erika Maria Mustermann" _src=undefined 1`] = `
 <kol-avatar>
   <template shadowrootmode="open">
-    <kol-avatar-wc class="kol-avatar">
-      <div aria-label="kol-avatar-alt" class="kol-avatar__container" role="img">
+    <kol-avatar-wc>
+      <div aria-label="kol-avatar-alt" class="kol-avatar" role="img">
         <span aria-hidden="true" class="kol-avatar__initials">
           EM
         </span>
@@ -17,8 +17,8 @@ exports[`kol-avatar should render with _label="Erika Maria Mustermann" _src=unde
 exports[`kol-avatar should render with _label="Erika" _src="/image.webp" 1`] = `
 <kol-avatar>
   <template shadowrootmode="open">
-    <kol-avatar-wc class="kol-avatar">
-      <div aria-label="kol-avatar-alt" class="kol-avatar__container" role="img">
+    <kol-avatar-wc>
+      <div aria-label="kol-avatar-alt" class="kol-avatar" role="img">
         <img alt="" aria-hidden="true" class="kol-avatar__image" src="/image.webp">
       </div>
     </kol-avatar-wc>
@@ -29,8 +29,8 @@ exports[`kol-avatar should render with _label="Erika" _src="/image.webp" 1`] = `
 exports[`kol-avatar should render with _label="Erika" _src=undefined 1`] = `
 <kol-avatar>
   <template shadowrootmode="open">
-    <kol-avatar-wc class="kol-avatar">
-      <div aria-label="kol-avatar-alt" class="kol-avatar__container" role="img">
+    <kol-avatar-wc>
+      <div aria-label="kol-avatar-alt" class="kol-avatar" role="img">
         <span aria-hidden="true" class="kol-avatar__initials">
           E
         </span>