Apply BEM refactor for image (#7198)

public-ui · Dec 16, 2024 · 4d54da3 · 4d54da3
2 parents fe81b0a + a1b097f
commit 4d54da3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/packages/components/src/components/image/shadow.tsx b/packages/components/src/components/image/shadow.tsx
@@ -1,6 +1,6 @@
 import type { ImageAPI, ImageSourcePropType, ImageStates, Loading } from '../../schema';
 import { validateImageSource, validateLoading, watchString } from '../../schema';
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, h, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
 @Component({
@@ -81,9 +81,14 @@ export class KolImage implements ImageAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-image">
-				<img alt={this.state._alt} loading={this.state._loading} sizes={this.state._sizes} src={this.state._src} srcset={this.state._srcset}></img>
-			</Host>
+			<img
+				class="kol-image"
+				alt={this.state._alt}
+				loading={this.state._loading}
+				sizes={this.state._sizes}
+				src={this.state._src}
+				srcset={this.state._srcset}
+			></img>
 		);
 	}
 }
diff --git a/packages/components/src/components/image/style.scss b/packages/components/src/components/image/style.scss
@@ -2,12 +2,9 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-image {
 		display: inline-block;
 		font-size: rem(16);
-	}
-
-	img {
 		max-height: 100%;
 		max-width: 100%;
 	}

diff --git a/packages/components/src/components/image/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/image/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-image should render with _alt="somedescription" _loading="eager" _src="https://some-url.tld/images/awesome.jpg" _sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px" _srcset="https://some-url.tld/images/awesome.avif" 1`] = `
-<kol-image class="kol-image">
+<kol-image>
   <template shadowrootmode="open">
-    <img alt="somedescription" loading="eager" sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px" src="https://some-url.tld/images/awesome.jpg" srcset="https://some-url.tld/images/awesome.avif">
+    <img alt="somedescription" class="kol-image" loading="eager" sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px" src="https://some-url.tld/images/awesome.jpg" srcset="https://some-url.tld/images/awesome.avif">
   </template>
 </kol-image>
 `;
 
 exports[`kol-image should render with _alt="somedescription" _loading="eager" _src="https://some-url.tld/images/awesome.jpg" 1`] = `
-<kol-image class="kol-image">
+<kol-image>
   <template shadowrootmode="open">
-    <img alt="somedescription" loading="eager" src="https://some-url.tld/images/awesome.jpg">
+    <img alt="somedescription" class="kol-image" loading="eager" src="https://some-url.tld/images/awesome.jpg">
   </template>
 </kol-image>
 `;
 
 exports[`kol-image should render with _alt="somedescription" _loading="lazy" _src="https://some-url.tld/images/awesome.jpg" 1`] = `
-<kol-image class="kol-image">
+<kol-image>
   <template shadowrootmode="open">
-    <img alt="somedescription" loading="lazy" src="https://some-url.tld/images/awesome.jpg">
+    <img alt="somedescription" class="kol-image" loading="lazy" src="https://some-url.tld/images/awesome.jpg">
   </template>
 </kol-image>
 `;
 
 exports[`kol-image should render with _alt="somedescription" _src="something" 1`] = `
-<kol-image class="kol-image">
+<kol-image>
   <template shadowrootmode="open">
-    <img alt="somedescription" loading="lazy" src="something">
+    <img alt="somedescription" class="kol-image" loading="lazy" src="something">
   </template>
 </kol-image>
 `;