fix(select): surface width no longer the same than trigger

ovh · Aug 31, 2023 · 910816f · 910816f
1 parent 268eeb2
commit 910816f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 14 deletions.
diff --git a/packages-new/components/search-bar/src/index.html b/packages-new/components/search-bar/src/index.html
@@ -28,7 +28,7 @@
 <osds-search-bar value="with value" loading></osds-search-bar>
 
 <p>SearchBar with options</p>
-<osds-search-bar disabled id="search-bar-options" value="with value"></osds-search-bar>
+<osds-search-bar id="search-bar-options" value="with value"></osds-search-bar>
 
 <p>SearchBar disabled</p>
 <osds-search-bar disabled></osds-search-bar>
@@ -44,6 +44,9 @@
   },{
     label: "options2",
     value: "2"
+  },{
+    label: "options3 with looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text",
+    value: "3"
   }];
   searchBarOptions.addEventListener('odsSearchSubmit', (event) => console.log('odsSearchSubmit trigger', event));
   searchBarOptions.addEventListener('odsValueChange', () => console.log('odsValueChange trigger'))

diff --git a/packages-new/components/select/src/components/osds-select/osds-select.e2e.screenshot.ts b/packages-new/components/select/src/components/osds-select/osds-select.e2e.screenshot.ts
@@ -1,22 +1,23 @@
 import type { E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
+import { E2EElement, newE2EPage } from '@stencil/core/testing';
+import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
+import { OdsSelectAttribute } from './interfaces/attributes';
+import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
+
 
 describe('e2e:osds-select', () => {
   let page: E2EPage;
+  let el: E2EElement;
+
+  async function setup({ attributes = {}, html = `` }: { attributes?: Partial<OdsSelectAttribute>, html?: string } = {}) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsSelectAttribute>(attributes, DEFAULT_ATTRIBUTE);
 
-  async function setup({ onPage }: { onPage?: ({ page }: { page: E2EPage }) => void } = {}) {
     page = await newE2EPage();
-    onPage && onPage({ page });
 
     await page.setContent(`
-      <osds-select>
-        <span slot="placeholder">Select country</span>
-        <osds-select-group>My group title</osds-select-group>
-        <osds-select-option>Value 1</osds-select-option>
-        <osds-select-option>Value 2</osds-select-option>
-        <osds-select-option>Value 3</osds-select-option>
-      </osds-select>
+      <osds-select ${odsStringAttributes2Str(stringAttributes)}>${html}</osds-select>
     `);
+    el = await page.find('osds-select');
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
   }
 
@@ -27,13 +28,65 @@ describe('e2e:osds-select', () => {
         // noop
       },
     },
+    {
+      actionDescription: 'surface visible',
+      action: () => el.click(),
+    },
+    {
+      actionDescription: 'disabled',
+      action: () => el.setProperty('disabled', true),
+    },
+    {
+      actionDescription: 'hovered',
+      action: () => el.hover(),
+    },
   ];
 
-  describe('screenshots', () => {
+  describe('screenshots with short text', () => {
     // Todo : add active behaviour on top of hover and focus
     screenshotActions.forEach(({ actionDescription, action }) => {
       it(actionDescription, async () => {
-        await setup({});
+
+        await setup({
+          html: `
+          <span slot="placeholder">Select country</span>
+          <osds-select-group>My group title</osds-select-group>
+          <osds-select-option>Value 1</osds-select-option>
+          <osds-select-option>Value 2</osds-select-option>
+          <osds-select-option>Value 3</osds-select-option>
+          `
+        });
+        action();
+        await page.waitForChanges();
+
+        await page.evaluate(() => {
+          const element = document.querySelector('osds-select') as HTMLElement;
+          return { width: element.clientWidth, height: element.clientHeight };
+        });
+        await page.setViewport({ width: 600, height:600 });
+        const results = await page.compareScreenshot('select', { fullPage: false, omitBackground: true });
+        expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 });
+      });
+    });
+  });
+
+  describe('screenshots with long text', () => {
+    // Todo : add active behaviour on top of hover and focus
+    screenshotActions.forEach(({ actionDescription, action }) => {
+      it(actionDescription, async () => {
+
+        await setup({
+          attributes: {
+            inline: true
+          },
+          html: `
+          <span slot="placeholder">Select country</span>
+          <osds-select-group>My group title</osds-select-group>
+          <osds-select-option>Value 1 with looooooooooooooooooooooooooooooooooooooooooong text</osds-select-option>
+          <osds-select-option>Value 2</osds-select-option>
+          <osds-select-option>Value 3</osds-select-option>
+          `
+        });
         action();
         await page.waitForChanges();
 

diff --git a/packages-new/components/select/src/components/osds-select/styles/osds-select.size.scss b/packages-new/components/select/src/components/osds-select/styles/osds-select.size.scss
@@ -1,6 +1,12 @@
 @import '~@ovhcloud/ods-common-theming/size/ods-component-size';
 @import './osds-select.mixins';
 
+:host {
+  ocdk-surface {
+    width: auto;
+  }
+}
+
 @mixin osds-select-theme-size() {
   @include ods-foreach-theme-size(select) using ($sizes) {
     @include osds-select-on-select-element() {
@@ -27,7 +33,7 @@
     @include osds-select-on-overlay-element() {
       border-width: ods-get-size-property($sizes, border-width) ods-get-size-property($sizes, border-width) ods-get-size-property($sizes, border-width) ods-get-size-property($sizes, border-width);
       top: ods-get-size-property($sizes, height);
-      width: calc(100% - var(--ods-size-inline-02));
+      min-width: calc(100% - var(--ods-size-inline-02));
     }
   }
 }