feat(ld-select): observe slot and create copy for popper

emdgroup-liquid · Jul 18, 2021 · f194521 · f194521
1 parent b540fe9
commit f194521
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 117 deletions.
diff --git a/src/liquid/components/ld-checkbox/readme.md b/src/liquid/components/ld-checkbox/readme.md
@@ -600,12 +600,12 @@ The `ld-checkbox` Web Component provides a low level API for integrating the com
 
 ### Used by
 
- - [ld-option](../ld-option)
+ - [ld-option-internal](../ld-option)
 
 ### Graph
 ```mermaid
 graph TD;
-  ld-option --> ld-checkbox
+  ld-option-internal --> ld-checkbox
   style ld-checkbox fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css
@@ -581,3 +581,7 @@ ld-input,
     opacity: 0.25;
   }
 }
+
+.ld-select__slot-container {
+  display: none;
+}
diff --git a/...liquid/components/ld-option/ld-option.css → ...mponents/ld-option/ld-option-internal.css b/...liquid/components/ld-option/ld-option.css → ...mponents/ld-option/ld-option-internal.css
@@ -1,4 +1,4 @@
-.ld-option {
+.ld-option-internal {
   display: flex;
   position: relative;
   color: var(--ld-col-rblck-default);
@@ -51,47 +51,47 @@
   }
 }
 
-.ld-option__check,
-.ld-option__checkbox {
+.ld-option-internal__check,
+.ld-option-internal__checkbox {
   align-self: center;
   flex-shrink: 0;
   transform: translateX(calc(-1 * var(--ld-sp-2)));
 }
 
-.ld-option__check {
+.ld-option-internal__check {
   margin-right: var(--ld-sp-4);
 }
 
-.ld-option__checkbox {
+.ld-option-internal__checkbox {
   margin-left: var(--ld-sp-2);
   margin-right: var(--ld-sp-6);
 }
 
 /* .ld-theme-ocean -> default */
-.ld-option,
-.ld-theme-ocean .ld-option,
-[class*='ld-theme'] .ld-theme-ocean .ld-option {
+.ld-option-internal,
+.ld-theme-ocean .ld-option-internal,
+[class*='ld-theme'] .ld-theme-ocean .ld-option-internal {
   &:where(:focus:focus-visible):before {
     box-shadow: inset 0 0 0 0.1rem var(--ld-thm-ocean-bg-primary);
   }
 
   &:where(:not([disabled]):not([aria-disabled='true'])) {
-    :where(.ld-option__check) {
+    :where(.ld-option-internal__check) {
       color: var(--ld-thm-ocean-bg-primary);
     }
 
     &:where(:focus:focus-visible) {
       background-color: var(--ld-col-rb1);
 
-      :where(.ld-option__check) {
+      :where(.ld-option-internal__check) {
         color: var(--ld-col-rb-focus);
       }
     }
     @media (hover: hover) {
       &:where(:hover) {
         background-color: var(--ld-col-rb1);
 
-        :where(.ld-option__check) {
+        :where(.ld-option-internal__check) {
           color: var(--ld-col-rb-hover);
         }
       }
@@ -100,7 +100,7 @@
     &:where(:active:focus-visible) {
       background-color: var(--ld-col-rb1);
 
-      :where(.ld-option__check) {
+      :where(.ld-option-internal__check) {
         color: var(--ld-col-rb-active);
       }
     }
@@ -113,28 +113,28 @@
 [class*='ld-theme'] .ld-theme-shake,
 .ld-theme-solvent,
 [class*='ld-theme'] .ld-theme-solvent {
-  :where(.ld-option) {
+  :where(.ld-option-internal) {
     &:where(:focus:focus-visible):before {
       box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
     }
 
     &:where(:not([disabled]):not([aria-disabled='true'])) {
-      :where(.ld-option__check) {
+      :where(.ld-option-internal__check) {
         color: var(--ld-col-rp-default);
       }
 
       &:where(:focus:focus-visible) {
         background-color: var(--ld-col-rp1);
 
-        :where(.ld-option__check) {
+        :where(.ld-option-internal__check) {
           color: var(--ld-col-rp-focus);
         }
       }
       @media (hover: hover) {
         &:where(:hover) {
           background-color: var(--ld-col-rp1);
 
-          :where(.ld-option__check) {
+          :where(.ld-option-internal__check) {
             color: var(--ld-col-rp-hover);
           }
         }
@@ -143,7 +143,7 @@
       &:where(:active:focus-visible) {
         background-color: var(--ld-col-rp1);
 
-        :where(.ld-option__check) {
+        :where(.ld-option-internal__check) {
           color: var(--ld-col-rp-active);
         }
       }
@@ -153,28 +153,28 @@
 
 .ld-theme-tea,
 [class*='ld-theme'] .ld-theme-tea {
-  :where(.ld-option) {
+  :where(.ld-option-internal) {
     &:where(:focus:focus-visible):before {
       box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
     }
 
     &:where(:not([disabled]):not([aria-disabled='true'])) {
-      :where(.ld-option__check) {
+      :where(.ld-option-internal__check) {
         color: var(--ld-thm-tea-bg-primary);
       }
 
       &:where(:focus:focus-visible) {
         background-color: var(--ld-col-rg1);
 
-        :where(.ld-option__check) {
+        :where(.ld-option-internal__check) {
           color: var(--ld-col-rg-focus);
         }
       }
       @media (hover: hover) {
         &:where(:hover) {
           background-color: var(--ld-col-rg1);
 
-          :where(.ld-option__check) {
+          :where(.ld-option-internal__check) {
             color: var(--ld-col-rg-hover);
           }
         }
@@ -183,15 +183,15 @@
       &:where(:active:focus-visible) {
         background-color: var(--ld-col-rg1);
 
-        :where(.ld-option__check) {
+        :where(.ld-option-internal__check) {
           color: var(--ld-col-rg-active);
         }
       }
     }
   }
 }
 
-.ld-option__label {
+.ld-option-internal__label {
   overflow: hidden;
   text-overflow: ellipsis;
 }
diff --git a/...liquid/components/ld-option/ld-option.tsx → ...mponents/ld-option/ld-option-internal.tsx b/...liquid/components/ld-option/ld-option.tsx → ...mponents/ld-option/ld-option-internal.tsx
@@ -13,11 +13,11 @@ import {
 import { applyPropAliases } from '../../utils/applyPropAliases'
 
 @Component({
-  tag: 'ld-option',
-  styleUrl: 'ld-option.css',
+  tag: 'ld-option-internal',
+  styleUrl: 'ld-option-internal.css',
   shadow: false,
 })
-export class LdOption {
+export class LdOptionInternal {
   @Element() el: HTMLElement
 
   private optionLabelRef!: HTMLElement
@@ -96,7 +96,7 @@ export class LdOption {
   render() {
     return (
       <Host
-        class="ld-option"
+        class="ld-option-internal"
         role="option"
         aria-selected={this.selected ? 'true' : 'false'}
         aria-disabled={this.disabled ? 'true' : 'false'}
@@ -106,14 +106,14 @@ export class LdOption {
         {this.checkbox ? (
           <ld-checkbox
             role="presentation"
-            class="ld-option__checkbox"
+            class="ld-option-internal__checkbox"
             checked={this.selected}
             disabled={this.disabled}
           ></ld-checkbox>
         ) : (
           <svg
             role={'presentation'}
-            class="ld-option__check"
+            class="ld-option-internal__check"
             width="20"
             height="20"
             viewBox="0 0 20 20"
@@ -133,7 +133,7 @@ export class LdOption {
 
         <span
           ref={(el) => (this.optionLabelRef = el as HTMLElement)}
-          class="ld-option__label"
+          class="ld-option-internal__label"
           title={this.title}
         >
           <slot></slot>

diff --git a/src/liquid/components/ld-option/readme.md b/src/liquid/components/ld-option/readme.md
@@ -32,8 +32,8 @@
 ### Graph
 ```mermaid
 graph TD;
-  ld-option --> ld-checkbox
-  style ld-option fill:#f9f,stroke:#333,stroke-width:4px
+  ld-option-internal --> ld-checkbox
+  style ld-option-internal fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -1,9 +1,12 @@
-:root {
+.ld-select {
   --ld-select-popper-max-height: calc(100vh - 1.25rem);
   --ld-select-min-width: 12.8125rem;
   --ld-select-min-height-sm: 2rem;
   --ld-select-min-height-md: 2.5rem;
   --ld-select-min-height-lg: 3.125rem;
+  --ld-select-padding-y-sm: 0.25rem;
+  --ld-select-padding-y-md: 0.5rem;
+  --ld-select-padding-y-lg: 0.5rem;
 }
 
 :where(.ld-select) {
@@ -20,21 +23,6 @@
   }
 }
 
-:where(.ld-select),
-:where(.ld-select) > select {
-  min-height: var(--ld-select-min-height-md);
-}
-
-:where(.ld-select--sm),
-:where(.ld-select--sm) > select {
-  min-height: var(--ld-select-min-height-sm);
-}
-
-:where(.ld-select--lg),
-:where(.ld-select--lg) > select {
-  min-height: var(--ld-select-min-height-lg);
-}
-
 :where(.ld-select:not(.ld-select--inline):not(.ld-select--ghost)) {
   min-width: var(--ld-select-min-width);
 }
@@ -53,7 +41,7 @@
   font: var(--ld-typo-body-m);
   border: 0;
   outline: none;
-  padding: var(--ld-sp-4) var(--ld-sp-12);
+  padding: var(--ld-select-padding-y-md) var(--ld-sp-12);
   border-radius: var(--ld-br-m);
   height: 100%;
   user-select: none;
@@ -111,6 +99,31 @@
   }
 }
 
+:where(.ld-select),
+:where(.ld-select) > select {
+  min-height: var(--ld-select-min-height-md);
+}
+
+:where(.ld-select--sm),
+:where(.ld-select--sm) > select {
+  min-height: var(--ld-select-min-height-sm);
+}
+
+:where(.ld-select--lg),
+:where(.ld-select--lg) > select {
+  min-height: var(--ld-select-min-height-lg);
+}
+
+.ld-select--sm > select,
+.ld-select--sm .ld-select__btn-trigger {
+  padding: var(--ld-select-padding-y-sm) var(--ld-sp-12);
+}
+
+.ld-select--lg > select,
+.ld-select--lg .ld-select__btn-trigger {
+  padding: var(--ld-select-padding-y-lg) var(--ld-sp-12);
+}
+
 .ld-select--ghost {
   &:not(ld-select),
   select,
@@ -780,3 +793,7 @@
     }
   }
 }
+
+.ld-select__slot-container {
+  display: none;
+}