fix: chromatic instability (#2280)

sbb-design-systems · Dec 14, 2023 · b955328 · b955328
1 parent 91c0112
commit b955328
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 23 deletions.
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
@@ -1,7 +1,6 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import { html, TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';
 
@@ -17,7 +16,7 @@ const addBreadcrumb = (event: Event): void => {
     .querySelector('sbb-breadcrumb-group');
   const breadcrumb = document.createElement('sbb-breadcrumb');
   breadcrumb.setAttribute('href', '/');
-  breadcrumb.textContent = 'Breadcrumb ' + breadcrumbGroup.children.length;
+  breadcrumb.textContent = 'Link ' + breadcrumbGroup.children.length;
   breadcrumbGroup.append(breadcrumb);
 };
 
@@ -109,7 +108,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   numberOfBreadcrumbs: 3,
-  text: 'Breadcrumb',
+  text: 'Link',
   href: 'https://github.com/lyne-design-system/lyne-components',
   target: '_blank',
   rel: undefined,
@@ -133,7 +132,7 @@ const Template = (args): TemplateResult => html`
     <sbb-breadcrumb-group aria-label="You are here:">
       ${createBreadcrumbs(args)}
     </sbb-breadcrumb-group>
-    <div style=${styleMap({ 'margin-block': '2rem', gap: '1rem', display: 'flex' })}>
+    <div style="margin-block: 2rem; gap: 1rem; display: flex;">
       <sbb-button variant="secondary" @click=${(event: Event) => addBreadcrumb(event)}
         >Add</sbb-button
       >
@@ -159,7 +158,7 @@ export const CollapsedState: StoryObj = {
 const meta: Meta = {
   decorators: [
     (story) => html`
-      <div style=${styleMap({ padding: '2rem' })}>
+      <div style="padding: 2rem; max-width: 1000px;">
         ${story()}
         <div>Page content</div>
       </div>

diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
@@ -1,7 +1,6 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import { html, TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';
 
@@ -131,9 +130,7 @@ export const LongContent: StoryObj = {
     'icon-name': 'house-small',
     text: 'This label name is so long that it needs ellipsis to fit.',
   },
-  decorators: [
-    (story) => html` <div style=${styleMap({ 'max-width': '200px' })}>${story()}</div> `,
-  ],
+  decorators: [(story) => html` <div style="max-width: 200px;">${story()}</div> `],
 };
 
 export const NoLink: StoryObj = {
@@ -143,7 +140,7 @@ export const NoLink: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `],
+  decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
     backgrounds: {
       disable: true,

diff --git a/src/components/image/image.scss b/src/components/image/image.scss
@@ -18,7 +18,6 @@
   object-fit: cover;
 }
 
-.image__lqip,
 .image__img {
   position: absolute;
   inset: 0;

diff --git a/src/components/image/image.stories.ts b/src/components/image/image.stories.ts
@@ -2,7 +2,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import isChromatic from 'chromatic';
 import { html, TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../core/dom';
 import images from '../core/images';
@@ -186,9 +185,7 @@ export const NoCaptionNoRadius: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [
-    (story) => html` <div style=${styleMap({ 'max-width': '1000px' })}>${story()}</div> `,
-  ],
+  decorators: [(story) => html` <div style="max-width: 480px;">${story()}</div> `],
   parameters: {
     chromatic: { diffThreshold: 0.11, delay: 8000 },
     docs: {

diff --git a/src/components/image/image.ts b/src/components/image/image.ts
@@ -489,11 +489,13 @@ export class SbbImageElement extends LitElement {
                 html` <source
                   media=${`${mediaQuery}`}
                   sizes=${`${imageWidth}px`}
-                  srcset=${`${imageUrlWithParams}&w=${imageWidth}&h=${imageHeight}&q=${this._config.nonRetinaQuality} ${imageWidth}w, ` +
-                  `${imageUrlWithParams}&w=${imageWidth * 2}&h=${imageHeight * 2}&q=${
-                    this._config.retinaQuality
-                  } ${imageWidth * 2}w`}
-                />`,
+                  srcset=${
+                    `${imageUrlWithParams}&w=${imageWidth}&h=${imageHeight}&q=${this._config.nonRetinaQuality} ${imageWidth}w, ` +
+                    `${imageUrlWithParams}&w=${imageWidth * 2}&h=${imageHeight * 2}&q=${
+                      this._config.retinaQuality
+                    } ${imageWidth * 2}w`
+                  }
+                ></source>`,
               ];
             })}
             <img

diff --git a/src/components/selection-panel/selection-panel.stories.ts b/src/components/selection-panel/selection-panel.stories.ts
@@ -720,7 +720,7 @@ const meta: Meta = {
     withActions as Decorator,
   ],
   parameters: {
-    chromatic: { delay: 3000 },
+    chromatic: { delay: 9000 },
     actions: {
       handles: [
         SbbSelectionPanelElement.events.didOpen,

diff --git a/src/components/selection-panel/selection-panel.ts b/src/components/selection-panel/selection-panel.ts
@@ -134,11 +134,9 @@ export class SbbSelectionPanelElement extends LitElement {
     if (this._checked) {
       this._state = 'opening';
       this._willOpen.emit();
-      this.disableAnimation && this._handleOpening();
     } else {
       this._state = 'closing';
       this._willClose.emit();
-      this.disableAnimation && this._handleClosing();
     }
   }