refactor avatar

Refs: #7036
public-ui · Nov 13, 2024 · 4002bfa · 4002bfa
1 parent cfe2c82
commit 4002bfa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 28 deletions.
diff --git a/packages/components/src/components/avatar/component.tsx b/packages/components/src/components/avatar/component.tsx
@@ -17,12 +17,12 @@ import type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from
 export class KolAvatarWc implements AvatarAPI {
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-avatar-wc">
-				<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class="container" role="img">
+			<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="image" src={this.state._src} />
+						<img alt="" aria-hidden="true" class="kol-avatar__image" src={this.state._src} />
 					) : (
-						<span aria-hidden="true" class="initials">
+						<span aria-hidden="true" class="kol-avatar__initials">
 							{formatLabelAsInitials(this.state._label.trim())}
 						</span>
 					)}

diff --git a/packages/components/src/components/avatar/shadow.tsx b/packages/components/src/components/avatar/shadow.tsx
@@ -14,7 +14,7 @@ import { KolAvatarWcTag } from '../../core/component-names';
 export class KolAvatar implements AvatarProps {
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-avatar">
+			<Host>
 				<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>
 			</Host>
 		);

diff --git a/packages/components/src/components/avatar/style.scss b/packages/components/src/components/avatar/style.scss
@@ -6,30 +6,31 @@
 	: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);
+		}
 
-	.container {
-		border-radius: 50%;
-		overflow: hidden;
-		/* Visible with forced colors  */
-		outline: transparent solid rem(1);
-		/*theme?*/
-		width: rem(100);
-		height: rem(100);
-	}
-
-	.image {
-		width: 100%;
-		height: 100%;
-	}
+		&__image {
+			width: 100%;
+			height: 100%;
+		}
 
-	.initials {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		/*theme?*/
-		background-color: #d3d3d3;
-		font-size: rem(40);
+		&__initials {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			/*theme?*/
+			background-color: #d3d3d3;
+			font-size: rem(40);
+		}
 	}
 }