fix(core/select): updated style and multimode functionality (#516)

Co-authored-by: Daniel Leroux <[email protected]>
siemens · May 23, 2023 · 8db6883 · 8db6883
1 parent 1c2e9a5
commit 8db6883
Show file tree

Hide file tree

Showing 26 changed files with 45 additions and 40 deletions.
diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
@@ -16,7 +16,7 @@
   display: inline-block;
   position: relative;
   height: auto;
-  width: 100%;
+  border-radius: var(--theme-input--border-radius);
 
   .select {
     position: relative;
@@ -28,6 +28,7 @@
       var(--theme-input--border-color);
     border-radius: var(--theme-input--border-radius);
     padding: 0 0 0 $small-space;
+    box-shadow: var(--theme-inset-shadow-1) !important;
 
     @include hover {
       background-color: var(--theme-input--background--hover);
@@ -42,6 +43,10 @@
     }
   }
 
+  .select.readonly {
+    box-shadow: none !important;
+  }
+
   .hidden {
     display: none !important;
   }
@@ -102,20 +107,30 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: $x-large-space;
-    min-width: $x-large-space;
-    height: 100%;
+    width: 2rem;
+    min-width: 2rem;
+    height: 2rem;
+
+    @include hover {
+      color: var(--theme-color-dynamic--hover);
+    }
+
+    @include active {
+      color: var(--theme-color-dynamic--hover);
+    }
   }
 
   .editable {
     .chevron-down-container {
       @include hover {
+        color: var(--theme-color-std-text);
         background-color: var(
           --theme-btn-invisible-secondary--background--hover
         );
       }
 
       @include active {
+        color: var(--theme-color-std-text);
         background-color: var(
           --theme-btn-invisible-secondary--background--active
         );

diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -467,6 +467,7 @@ export class Select {
         <ix-dropdown
           ref={(ref) => (this.dropdownRef = ref)}
           show={this.dropdownShow}
+          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}
           class={{
             'd-none': this.disabled || this.readonly,
           }}

diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -6,29 +6,26 @@
 
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
-    />
-    <title>Stencil Component Starter</title>
 
-    <script type="module" src="/build/siemens-ix.esm.js"></script>
-    <script nomodule src="/build/siemens-ix.js"></script>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+  <title>Stencil Component Starter</title>
 
-    <link rel="stylesheet" href="/build/siemens-ix.css" />
-    <link
-      rel="stylesheet"
-      href="/build/ix-brand-theme/dist/ix-brand-theme/ix-brand-theme.css"
-    />
-    <link rel="stylesheet" href="/build/ix-icons/css/ix-icons.css" />
-    <script type="module">
-      import { defineCustomElements } from '/build/ix-brand-theme/loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-  <body style="margin: 0px; height: 100vh">
-    <my-component />
-  </body>
-</html>
+  <script type="module" src="/build/siemens-ix.esm.js"></script>
+  <script nomodule src="/build/siemens-ix.js"></script>
+
+  <link rel="stylesheet" href="/build/siemens-ix.css" />
+  <link rel="stylesheet" href="/build/ix-brand-theme/dist/ix-brand-theme/ix-brand-theme.css" />
+  <link rel="stylesheet" href="/build/ix-icons/css/ix-icons.css" />
+  <script type="module">
+    import { defineCustomElements } from '/build/ix-brand-theme/loader/index.es2017.js';
+    defineCustomElements();
+  </script>
+</head>
+
+<body style="margin: 0px; height: 100vh">
+  <my-component />
+</body>
+
+</html>
diff --git a/....e2e.ts-snapshots/pagination-advanced-1-chromium---theme-classic-dark-linux.png b/....e2e.ts-snapshots/pagination-advanced-1-chromium---theme-classic-dark-linux.png
diff --git a/...e2e.ts-snapshots/pagination-advanced-1-chromium---theme-classic-light-linux.png b/...e2e.ts-snapshots/pagination-advanced-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/select/select.e2e.ts b/packages/core/src/tests/select/select.e2e.ts
@@ -15,34 +15,26 @@ regressionTest.describe('select', () => {
     await page.goto('select/basic');
     await page.locator('.chevron-down-container').click();
     await page.waitForSelector('.dropdown-menu.show');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.05,
-    });
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
   regressionTest('editable', async ({ page }) => {
     await page.goto('select/editable');
     await page.locator('.chevron-down-container').click();
     await page.waitForSelector('.dropdown-menu.show');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.05,
-    });
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
   regressionTest('mode-multiple', async ({ page }) => {
     await page.goto('select/mode-multiple');
     await page.locator('.chevron-down-container').click();
     await page.waitForSelector('.dropdown-menu.show');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.05,
-    });
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
   regressionTest('mode-multiple-overflow', async ({ page }) => {
     await page.goto('select/mode-multiple-overflow');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
-      maxDiffPixelRatio: 0.05,
-    });
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
   regressionTest('mode-multiple-overflow scroll down', async ({ page }) => {

diff --git a/...t.e2e.ts-snapshots/select-allow-clear-1-chromium---theme-classic-dark-linux.png b/...t.e2e.ts-snapshots/select-allow-clear-1-chromium---theme-classic-dark-linux.png
diff --git a/....e2e.ts-snapshots/select-allow-clear-1-chromium---theme-classic-light-linux.png b/....e2e.ts-snapshots/select-allow-clear-1-chromium---theme-classic-light-linux.png
diff --git a/...e2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-dark-linux.png b/...e2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-dark-linux.png
diff --git a/...2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-light-linux.png b/...2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-light-linux.png
diff --git a/.../select.e2e.ts-snapshots/select-basic-1-chromium---theme-classic-dark-linux.png b/.../select.e2e.ts-snapshots/select-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...select.e2e.ts-snapshots/select-basic-1-chromium---theme-classic-light-linux.png b/...select.e2e.ts-snapshots/select-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...lect.e2e.ts-snapshots/select-editable-1-chromium---theme-classic-dark-linux.png b/...lect.e2e.ts-snapshots/select-editable-1-chromium---theme-classic-dark-linux.png
diff --git a/...ect.e2e.ts-snapshots/select-editable-1-chromium---theme-classic-light-linux.png b/...ect.e2e.ts-snapshots/select-editable-1-chromium---theme-classic-light-linux.png
diff --git a/....ts-snapshots/select-list-header-hide-1-chromium---theme-classic-dark-linux.png b/....ts-snapshots/select-list-header-hide-1-chromium---theme-classic-dark-linux.png
diff --git a/...ts-snapshots/select-list-header-hide-1-chromium---theme-classic-light-linux.png b/...ts-snapshots/select-list-header-hide-1-chromium---theme-classic-light-linux.png
diff --git a/...e2e.ts-snapshots/select-mode-multiple-1-chromium---theme-classic-dark-linux.png b/...e2e.ts-snapshots/select-mode-multiple-1-chromium---theme-classic-dark-linux.png
diff --git a/...2e.ts-snapshots/select-mode-multiple-1-chromium---theme-classic-light-linux.png b/...2e.ts-snapshots/select-mode-multiple-1-chromium---theme-classic-light-linux.png
diff --git a/...apshots/select-mode-multiple-overflow-1-chromium---theme-classic-dark-linux.png b/...apshots/select-mode-multiple-overflow-1-chromium---theme-classic-dark-linux.png
diff --git a/...pshots/select-mode-multiple-overflow-1-chromium---theme-classic-light-linux.png b/...pshots/select-mode-multiple-overflow-1-chromium---theme-classic-light-linux.png
diff --git a/...ct-mode-multiple-overflow-scroll-down-1-chromium---theme-classic-dark-linux.png b/...ct-mode-multiple-overflow-scroll-down-1-chromium---theme-classic-dark-linux.png
diff --git a/...t-mode-multiple-overflow-scroll-down-1-chromium---theme-classic-light-linux.png b/...t-mode-multiple-overflow-scroll-down-1-chromium---theme-classic-light-linux.png
diff --git a/...lect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-dark-linux.png b/...lect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-dark-linux.png
diff --git a/...ect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-light-linux.png b/...ect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-light-linux.png
diff --git a/...lect.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-dark-linux.png b/...lect.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-dark-linux.png
diff --git a/...ect.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-light-linux.png b/...ect.e2e.ts-snapshots/select-readonly-1-chromium---theme-classic-light-linux.png