feat(ld-select): size prop

emdgroup-liquid · Jul 13, 2021 · 0a5e3e3 · 0a5e3e3
1 parent e51f492
commit 0a5e3e3
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 4 deletions.
diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -1,12 +1,22 @@
 :root {
   --ld-select-popper-max-height: calc(100vh - 1.25rem);
   --ld-select-min-width: 12rem;
-  --ld-select-min-height: 2.5rem;
+  --ld-select-min-height-sm: 2rem;
+  --ld-select-min-height-md: 2.5rem;
+  --ld-select-min-height-lg: 3.125rem;
 }
 
 :where(.ld-select) {
   display: inline-flex;
-  min-height: var(--ld-select-min-height);
+  min-height: var(--ld-select-min-height-md);
+}
+
+:where(.ld-select--sm) {
+  min-height: var(--ld-select-min-height-sm);
+}
+
+:where(.ld-select--lg) {
+  min-height: var(--ld-select-min-height-lg);
 }
 
 :where(.ld-select:not(.ld-select--inline):not(.ld-select--ghost)) {
@@ -26,7 +36,7 @@
   font: var(--ld-typo-body-m);
   border: 0;
   outline: none;
-  padding: var(--ld-sp-8) var(--ld-sp-12);
+  padding: var(--ld-sp-4) var(--ld-sp-12);
   border-radius: var(--ld-br-m);
   height: 100%;
   user-select: none;
@@ -130,6 +140,16 @@
   display: flex;
   align-items: center;
 
+  .ld-select--sm & {
+    font: var(--ld-typo-body-s);
+    line-height: 1;
+  }
+
+  .ld-select--lg & {
+    font: var(--ld-typo-body-l);
+    line-height: 1;
+  }
+
   :where(.ld-select__btn-trigger[aria-disabled='true']) & {
     color: var(--ld-col-rblck1);
   }
@@ -543,14 +563,26 @@
     display: block;
     position: absolute;
     width: 100%;
-    height: calc(100% + 2.5rem);
+    height: calc(100% + var(--ld-select-min-height-md));
     box-shadow: var(--ld-shadow-sticky);
     border-radius: var(--ld-br-m);
     pointer-events: none;
     background-color: var(--ld-col-wht);
     z-index: -1;
   }
 
+  &:where(.ld-select__popper--sm) {
+    :where(.ld-select__shadow) {
+      height: calc(100% + var(--ld-select-min-height-sm));
+    }
+  }
+
+  &:where(.ld-select__popper--lg) {
+    :where(.ld-select__shadow) {
+      height: calc(100% + var(--ld-select-min-height-lg));
+    }
+  }
+
   &:where(.ld-tether-pinned) {
     z-index: 2147483647;
   }

diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -70,6 +70,9 @@ export class LdSelect {
     | 'inline' //   = detached + minumum trigger button width
     | 'ghost' //    = inline   + transparent background and borders
 
+  /** Size of the select trigger button. */
+  @Prop() size?: 'sm' | 'lg'
+
   /** Attached as CSS class to the select popper element. */
   @Prop() popperClass: string
 
@@ -603,6 +606,7 @@ export class LdSelect {
     const ghost = !this.multiple && this.mode === 'ghost'
 
     let cl = 'ld-select'
+    if (this.size) cl += ` ld-select--${this.size}`
     if (this.invalid) cl += ' ld-select--invalid'
     if (this.expanded) cl += ' ld-select--expanded'
     if (detached) cl += ' ld-select--detached'
@@ -622,6 +626,7 @@ export class LdSelect {
     if (this.invalid) popperCl += ' ld-select__popper--invalid'
     if (detached) popperCl += ' ld-select__popper--detached'
     if (this.expanded) popperCl += ' ld-select__popper--expanded'
+    if (this.size) cl += ` ld-select__popper--${this.size}`
     if (this.themeCl) popperCl += ` ${this.themeCl}`
     if (this.popperClass) popperCl += ` ${this.popperClass}`
 

diff --git a/src/liquid/components/ld-select/readme.md b/src/liquid/components/ld-select/readme.md
@@ -315,6 +315,118 @@ permalink: components/ld-select/
 </ld-select>
 {% endexample %}
 
+### Size
+
+{% example %}
+<ld-select placeholder="Pick a fruit" size="sm">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+</ld-select>
+
+<ld-select placeholder="Pick a fruit">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+</ld-select>
+
+<ld-select placeholder="Pick a fruit" size="lg">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+</ld-select>
+
+<ld-select placeholder="Pick some fruits" multiple size="sm">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+</ld-select>
+
+<ld-select placeholder="Pick some fruits" multiple>
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+</ld-select>
+
+<ld-select placeholder="Pick some fruits" multiple size="lg">
+  <ld-option value="apple">Apple</ld-option>
+  <ld-option value="banana">Banana</ld-option>
+  <ld-option value="strawberry">Strawberry</ld-option>
+  <ld-option value="watermelon" disabled>Watermelon</ld-option>
+  <ld-option value="honeymelon">Honeymelon</ld-option>
+  <ld-option value="rasberry">Rasberry</ld-option>
+  <ld-option value="cherry">Cherry</ld-option>
+  <ld-option value="blueberry">Blueberry</ld-option>
+  <ld-option value="peach">Peach</ld-option>
+  <ld-option value="grape">Grape</ld-option>
+  <ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
+  <ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
+  <ld-option value="pear">Pear</ld-option>
+  <ld-option value="pineapple">Pineapple</ld-option>
+  <ld-option value="plum">Plum</ld-option>
+</ld-select>
+{% endexample %}
+
 <!-- Auto Generated Below -->
 
 
@@ -330,6 +442,7 @@ permalink: components/ld-select/
 | `placeholder`        | `placeholder`         | Used as trigger button label in multiselect mode and in single select mode if nothing is selected. | `string`                            | `undefined` |
 | `popperClass`        | `popper-class`        | Attached as CSS class to the select popper element.                                                | `string`                            | `undefined` |
 | `preventDeselection` | `prevent-deselection` | Prevents a state with no options selected after initial selection in single select mode.           | `boolean`                           | `false`     |
+| `size`               | `size`                | Size of the select trigger button.                                                                 | `"lg" \| "sm"`                      | `undefined` |
 | `tetherOptions`      | `tether-options`      | Stringified tether options object to be merged with the default options.                           | `string`                            | `'{}'`      |