BEM Refactoring change classes

Refs: #7036
public-ui · Nov 16, 2024 · e8eb309 · e8eb309
1 parent ce9899c
commit e8eb309
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 26 deletions.
diff --git a/packages/components/src/components/alert/component.tsx b/packages/components/src/components/alert/component.tsx
@@ -1,6 +1,6 @@
 import type { JSX } from '@stencil/core';
 import { alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '../../schema';
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 import { watchHeadingLevel } from '../heading/validation';
 import type { AlertAPI, AlertStates, AlertType, AlertVariant, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';
 import KolAlertFc, { type KolAlertFcProps } from '../../functional-components/Alert';
@@ -37,11 +37,9 @@ export class KolAlertWc implements AlertAPI {
 		};
 
 		return (
-			<Host>
-				<KolAlertFc {...props}>
-					<slot />
-				</KolAlertFc>
-			</Host>
+			<KolAlertFc {...props}>
+				<slot />
+			</KolAlertFc>
 		);
 	}
 

diff --git a/packages/components/src/components/alert/shadow.tsx b/packages/components/src/components/alert/shadow.tsx
@@ -1,6 +1,6 @@
 import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';
 import type { JSX } from '@stencil/core';
-import { Component, h, Host, Prop, State } from '@stencil/core';
+import { Component, h, Prop, State } from '@stencil/core';
 import { KolAlertWcTag } from '../../core/component-names';
 
 /**
@@ -16,19 +16,17 @@ import { KolAlertWcTag } from '../../core/component-names';
 export class KolAlert implements AlertProps {
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-alert">
-				<KolAlertWcTag
-					_alert={this._alert}
-					_hasCloser={this._hasCloser}
-					_label={this._label}
-					_level={this._level}
-					_on={this._on}
-					_type={this._type}
-					_variant={this._variant}
-				>
-					<slot />
-				</KolAlertWcTag>
-			</Host>
+			<KolAlertWcTag
+				_alert={this._alert}
+				_hasCloser={this._hasCloser}
+				_label={this._label}
+				_level={this._level}
+				_on={this._on}
+				_type={this._type}
+				_variant={this._variant}
+			>
+				<slot />
+			</KolAlertWcTag>
 		);
 	}
 

diff --git a/packages/components/src/functional-components/Alert/Alert.tsx b/packages/components/src/functional-components/Alert/Alert.tsx
@@ -33,18 +33,18 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 	}
 
 	const rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {
-		class: clsx('kol-alert-wc', 'alert', type, variant, { hasCloser: !!hasCloser }, classNames),
+		class: clsx('kol-alert', 'alert', type, variant, { hasCloser: !!hasCloser }, classNames),
 		role: alert ? 'alert' : undefined,
 		...other,
 	};
 
 	return (
 		<div {...rootProps}>
-			<div class="heading">
+			<div class="kol-alert__heading">
 				<AlertIcon label={label} type={type} />
-				<div class="heading-content">
+				<div class="kol-alert__heading-content">
 					{label ? <KolHeadingWcTag _label={label} _level={level} /> : null}
-					{variant === 'msg' && <div class="content">{children}</div>}
+					{variant === 'msg' && <div class="kol-alert__content">{children}</div>}
 				</div>
 				{hasCloser && (
 					<KolButtonWcTag
@@ -62,7 +62,7 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 					></KolButtonWcTag>
 				)}
 			</div>
-			{variant === 'card' && <div class="content">{children}</div>}
+			{variant === 'card' && <div class="kol-alert__content">{children}</div>}
 		</div>
 	);
 };

diff --git a/packages/components/src/functional-components/AlertIcon/AlertIcon.tsx b/packages/components/src/functional-components/AlertIcon/AlertIcon.tsx
@@ -4,7 +4,7 @@ import type { AlertType } from '../../schema';
 import { translate } from '../../i18n';
 
 const Icon: FC<{ ariaLabel: string; icon: string; label?: string }> = ({ ariaLabel, icon }) => {
-	return <KolIconTag class="heading-icon" _label={ariaLabel} _icons={icon} />;
+	return <KolIconTag class="kol-alert__heading-icon" _label={ariaLabel} _icons={icon} />;
 };
 
 const AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => {