feat(ld-select): option groups

emdgroup-liquid · Aug 29, 2023 · 161004a · 161004a
1 parent 1a3e2dc
commit 161004a
Show file tree

Hide file tree

Showing 25 changed files with 2,579 additions and 490 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -18893,6 +18893,58 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "a59384a1",
+      "image": "b12bed03b74cd4a3fc989bd1da4d663d.png",
+      "userAgent": "default",
+      "desc": "ld-select css component multiple",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "1407fb72",
+      "image": "cabd1ff3f7feb8fe0964ce3174802820.png",
+      "userAgent": "default",
+      "desc": "ld-select css component multiple focus",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "8c672c8c",
+      "image": "d9a7e7afd21923aa6f5d59922bf6ef1b.png",
+      "userAgent": "default",
+      "desc": "ld-select css component multiple hover",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "276525f4",
+      "image": "877daacf066fca131b6d8046e80e7400.png",
+      "userAgent": "default",
+      "desc": "ld-select css component multiple with option groups",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "789d7a75",
       "image": "a196eb723f60598e0f8f30411b4e869b.png",
@@ -19114,6 +19166,32 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "168f9248",
+      "image": "9c3af8ce7cb3378b397e909c0477ceba.png",
+      "userAgent": "default",
+      "desc": "ld-select multiple option groups default",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "a989ddcd",
+      "image": "7e6872acb848e765226bb806f850eff6.png",
+      "userAgent": "default",
+      "desc": "ld-select multiple option groups multiple",
+      "testPath": "./src/liquid/components/ld-select/test/ld-select.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "e0c87412",
       "image": "d6b9b880e9fd716599e54363f8574a9e.png",

diff --git a/screenshot/images/7e6872acb848e765226bb806f850eff6.png b/screenshot/images/7e6872acb848e765226bb806f850eff6.png
diff --git a/screenshot/images/877daacf066fca131b6d8046e80e7400.png b/screenshot/images/877daacf066fca131b6d8046e80e7400.png
diff --git a/screenshot/images/9c3af8ce7cb3378b397e909c0477ceba.png b/screenshot/images/9c3af8ce7cb3378b397e909c0477ceba.png
diff --git a/screenshot/images/b12bed03b74cd4a3fc989bd1da4d663d.png b/screenshot/images/b12bed03b74cd4a3fc989bd1da4d663d.png
diff --git a/screenshot/images/cabd1ff3f7feb8fe0964ce3174802820.png b/screenshot/images/cabd1ff3f7feb8fe0964ce3174802820.png
diff --git a/screenshot/images/d9a7e7afd21923aa6f5d59922bf6ef1b.png b/screenshot/images/d9a7e7afd21923aa6f5d59922bf6ef1b.png
diff --git a/src/docs/utils/copyToClipboard.ts b/src/docs/utils/copyToClipboard.ts
@@ -1,7 +1,7 @@
 export async function copyToClipboard(textToCopy: string) {
   // navigator clipboard api needs a secure context (https)
   if (navigator.clipboard && window.isSecureContext) {
-    navigator.clipboard.writeText(textToCopy)
+    await navigator.clipboard.writeText(textToCopy)
   } else {
     const activeElement = document.activeElement as HTMLElement
     // text area method
@@ -11,7 +11,7 @@ export async function copyToClipboard(textToCopy: string) {
     document.body.appendChild(textArea)
     textArea.focus({ preventScroll: true })
     textArea.select()
-    await document.execCommand('copy')
+    document.execCommand('copy')
     textArea.remove()
     activeElement.focus({ preventScroll: true })
   }

diff --git a/src/liquid/components/ld-checkbox/readme.md b/src/liquid/components/ld-checkbox/readme.md
@@ -585,12 +585,14 @@ Type: `Promise<void>`
 
 ### Used by
 
+ - ld-optgroup-internal
  - ld-option-internal
  - [ld-table-row](../ld-table/ld-table-row)
 
 ### Graph
 ```mermaid
 graph TD;
+  ld-optgroup-internal --> ld-checkbox
   ld-option-internal --> ld-checkbox
   ld-table-row --> ld-checkbox
   style ld-checkbox fill:#f9f,stroke:#333,stroke-width:4px

diff --git a/src/liquid/components/ld-select/ld-optgroup-internal/ld-optgroup-internal.shadow.css b/src/liquid/components/ld-select/ld-optgroup-internal/ld-optgroup-internal.shadow.css
@@ -0,0 +1,180 @@
+:host {
+  /* layout */
+  --ld-optgroup-padding-inline-start-sm: 0.625rem;
+  --ld-optgroup-padding-inline-start-lg: 0.875rem;
+  --ld-optgroup-option-padding-inline-start: 1rem;
+
+  /* colors */
+  --ld-optgroup-bg-col: var(--ld-col-neutral-010);
+  --ld-optgroup-border-col: var(--ld-col-neutral-100);
+  --ld-optgroup-disabled-text-col: var(--ld-col-neutral-100);
+  --ld-optgroup-text-col: var(--ld-col-neutral-900);
+
+  /* themable colors */
+  --ld-optgroup-thm-col: var(--ld-thm-primary);
+  --ld-optgroup-thm-col-hover: var(--ld-thm-primary-hover);
+  --ld-optgroup-thm-col-focus: var(--ld-thm-primary-focus);
+  --ld-optgroup-thm-col-active: var(--ld-thm-primary-active);
+  --ld-optgroup-thm-bg-col-hover: var(--ld-thm-primary-highlight);
+  --ld-optgroup-thm-bg-col-focus: var(--ld-thm-primary-highlight);
+  --ld-optgroup-thm-bg-col-active: var(--ld-thm-primary-highlight);
+
+  &(:not(:last-child)) {
+    .ld-optgroup-internal__slot-container {
+      border-bottom: solid var(--ld-optgroup-border-col) var(--ld-sp-1);
+    }
+  }
+}
+
+.ld-optgroup-internal {
+  background-color: var(--ld-optgroup-bg-col);
+  border: 0;
+  box-sizing: border-box;
+  color: var(--ld-optgroup-text-col);
+  display: flex;
+  font: var(--ld-typo-label-m);
+  min-height: 2.5rem;
+  outline: none;
+  padding-block: var(--ld-sp-8);
+  padding-inline: var(--ld-sp-12);
+  position: relative;
+  touch-action: manipulation;
+  user-select: none;
+  white-space: nowrap;
+  -webkit-touch-callout: none;
+
+  &::after {
+    content: '';
+    inset-block: calc(-1 * var(--ld-sp-1)) 0;
+    inset-inline: calc(-1 * var(--ld-sp-1));
+    position: absolute;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-neutral-100);
+  }
+
+  &--sm {
+    padding-inline-start: var(--ld-optgroup-padding-inline-start-sm);
+  }
+
+  &--lg {
+    padding-inline-start: var(--ld-optgroup-padding-inline-start-lg);
+  }
+
+  &--filtered {
+    display: none;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  [data-popper-placement*='bottom'] & {
+    &:last-of-type {
+      border-bottom-left-radius: var(--ld-br-m);
+      border-bottom-right-radius: var(--ld-br-m);
+    }
+  }
+  [data-popper-placement*='top'] & {
+    &:first-of-type {
+      border-top-left-radius: var(--ld-br-m);
+      border-top-right-radius: var(--ld-br-m);
+    }
+  }
+
+  &:not([aria-disabled='true']) {
+    cursor: pointer;
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--ld-optgroup-disabled-text-col);
+  }
+
+  &:where(:focus),
+  &:where(:focus:focus-visible) {
+    /* Pseudo element for focus outline */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: var(--ld-br-m);
+      pointer-events: none;
+      box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-optgroup-thm-col);
+    }
+  }
+
+  &:where(:focus:not(:focus-visible)) {
+    &::before {
+      content: none;
+    }
+  }
+
+  &:where(:not(.ld-optgroup-internal--disabled, [aria-disabled='true'])) {
+    :where(.ld-optgroup-internal__check) {
+      color: var(--ld-optgroup-thm-col);
+    }
+
+    &:where(:focus),
+    &:where(:focus:focus-visible) {
+      background-color: var(--ld-optgroup-thm-bg-col-focus);
+
+      :where(.ld-optgroup-internal__check) {
+        color: var(--ld-optgroup-thm-col-focus);
+      }
+    }
+
+    &:where(:focus:not(:focus-visible)) {
+      background-color: var(--ld-optgroup-bg-col);
+
+      :where(.ld-optgroup-internal__check) {
+        color: var(--ld-optgroup-thm-col);
+      }
+    }
+
+    @media (hover: hover) {
+      &:where(:hover) {
+        background-color: var(--ld-optgroup-thm-bg-col-hover);
+
+        :where(.ld-optgroup-internal__check) {
+          color: var(--ld-optgroup-thm-col-hover);
+        }
+      }
+    }
+
+    &:where(:active),
+    &:where(:active:focus-visible) {
+      background-color: var(--ld-optgroup-thm-bg-col-active);
+
+      :where(.ld-optgroup-internal__check) {
+        color: var(--ld-optgroup-thm-col-active);
+      }
+    }
+  }
+}
+
+.ld-optgroup-internal__checkbox-wrapper {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.ld-optgroup-internal__check,
+.ld-optgroup-internal__checkbox {
+  align-self: center;
+  flex-shrink: 0;
+  transform: translateX(calc(-1 * var(--ld-sp-2)));
+}
+
+.ld-optgroup-internal__check {
+  margin-right: var(--ld-sp-4);
+}
+
+.ld-optgroup-internal__checkbox {
+  margin-left: var(--ld-sp-2);
+  margin-right: var(--ld-sp-6);
+}
+
+.ld-optgroup-internal__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}