feat(ld-input): size prop

emdgroup-liquid · Jul 12, 2021 · 530f2aa · 530f2aa
1 parent dede5d9
commit 530f2aa
Show file tree

Hide file tree

Showing 9 changed files with 734 additions and 123 deletions.
diff --git a/src/docs/components/docs-search/assets/magnifier.svg b/src/docs/components/docs-search/assets/magnifier.svg
diff --git a/src/docs/components/docs-search/docs-search.css b/src/docs/components/docs-search/docs-search.css
@@ -45,6 +45,24 @@
 .docs-search__input {
   width: 100%;
   pointer-events: all;
+
+  &::before {
+    box-shadow: none !important;
+  }
+
+  &[aria-expanded='true'] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .docs-search__input-icon {
+    margin-left: var(--ld-sp-16);
+  }
+}
+
+.docs-search__input-icon {
+  width: var(--ld-sp-16);
+  height: var(--ld-sp-16);
 }
 
 .docs-search__results {
@@ -57,6 +75,17 @@
   border-bottom-right-radius: var(--ld-br-m);
 }
 
+.docs-search__results--expanded {
+  &::before {
+    content: '';
+    display: block;
+    height: var(--ld-sp-1);
+    background-color: var(--ld-col-rblck1);
+    margin: 0 auto;
+    width: calc(100% - var(--ld-sp-32));
+  }
+}
+
 .docs-search__result {
   font: var(--ld-typo-body-m);
 

diff --git a/src/docs/components/docs-search/docs-search.tsx b/src/docs/components/docs-search/docs-search.tsx
@@ -1,6 +1,6 @@
 import '../../../components' // type definitions for type checking and intelliSense
 import 'wicg-inert'
-import { Component, h, Listen, State, Host } from '@stencil/core'
+import { Component, h, Listen, State, Host, getAssetPath } from '@stencil/core'
 import Fuse from 'fuse.js'
 import eventBus from '../../utils/eventBus'
 import { SearchEventType } from '../../utils/eventTypes'
@@ -18,6 +18,7 @@ interface SearchResult {
   tag: 'docs-search',
   styleUrl: 'docs-search.css',
   shadow: false,
+  assetsDirs: ['assets'],
 })
 export class DocsSearch {
   private searchInput!: HTMLLdInputElement
@@ -103,6 +104,7 @@ export class DocsSearch {
         <div class="docs-search__content">
           <form role="search" autocomplete="off">
             <ld-input
+              size="lg"
               aria-expanded={this.results.length ? 'true' : 'false'}
               aria-controls="docs-search-results-list"
               onInput={this.handleChange.bind(this)}
@@ -112,11 +114,21 @@ export class DocsSearch {
               ref={(el) => (this.searchInput = el as HTMLLdInputElement)}
               type="search"
               spellcheck={false}
-            ></ld-input>
+            >
+              <img
+                class="docs-search__input-icon"
+                slot="start"
+                src={getAssetPath('./assets/magnifier.svg')}
+                alt=""
+                role="presentation"
+              />
+            </ld-input>
           </form>
           <ol
             id="docs-search-results-list"
-            class="docs-search__results"
+            class={`docs-search__results${
+              this.results.length ? ' docs-search__results--expanded' : ''
+            }`}
             aria-label="Search results"
           >
             {this.results.length

diff --git a/src/liquid/components/ld-button/ld-button.css b/src/liquid/components/ld-button/ld-button.css
@@ -7,24 +7,24 @@ ld-button {
 }
 
 .ld-button {
-  --ld-icon-size-sm: 1rem;
-  --ld-icon-size-md: 1.25rem;
-  --ld-icon-size-lg: 1.5rem;
-  --ld-padding-sm-x: 0.625rem;
-  --ld-padding-sm-y: 0.5rem;
-  --ld-padding-md-x: 0.875rem;
-  --ld-padding-md-y: 0.625rem;
-  --ld-padding-lg-x: 1.3125rem;
-  --ld-padding-lg-y: 0.75rem;
-  --ld-gap-sm: 0.625rem;
-  --ld-gap-md: 0.875rem;
-  --ld-gap-lg: 1.1875rem;
-  --ld-icon-margin-x-sm: -0.125rem;
-  --ld-icon-margin-x-md: -0.25rem;
-  --ld-icon-margin-x-lg: -0.5rem;
+  --ld-button-icon-size-sm: 1rem;
+  --ld-button-icon-size-md: 1.25rem;
+  --ld-button-icon-size-lg: 1.5rem;
+  --ld-button-icon-margin-x-sm: -0.125rem;
+  --ld-button-icon-margin-x-md: -0.25rem;
+  --ld-button-icon-margin-x-lg: -0.5rem;
+  --ld-button-padding-sm-x: 0.625rem;
+  --ld-button-padding-sm-y: 0.5rem;
+  --ld-button-padding-md-x: 0.875rem;
+  --ld-button-padding-md-y: 0.625rem;
+  --ld-button-padding-lg-x: 1.3125rem;
+  --ld-button-padding-lg-y: 0.75rem;
+  --ld-button-gap-sm: 0.625rem;
+  --ld-button-gap-md: 0.875rem;
+  --ld-button-gap-lg: 1.1875rem;
   font: var(--ld-typo-body-m);
   border: 0;
-  padding: var(--ld-padding-md-y) var(--ld-padding-md-x);
+  padding: var(--ld-button-padding-md-y) var(--ld-button-padding-md-x);
   border-radius: var(--ld-br-m);
   min-height: 2.5rem;
   min-width: 2.5rem;
@@ -34,7 +34,7 @@ ld-button {
   color: var(--ld-col-wht);
   display: grid;
   grid-auto-flow: column;
-  gap: var(--ld-gap-md);
+  gap: var(--ld-button-gap-md);
   align-items: center;
   text-align: center;
   justify-content: center;
@@ -55,53 +55,59 @@ ld-button {
     line-height: 0;
   }
 
+  ld-icon,
   :where(.ld-icon),
   :where(.ld-icon svg) {
-    width: var(--ld-icon-size-md);
-    height: var(--ld-icon-size-md);
+    width: var(--ld-button-icon-size-md);
+    height: var(--ld-button-icon-size-md);
   }
 
-  :where(.ld-icon) {
-    margin: auto var(--ld-icon-margin-x-md);
+  > ld-icon,
+  > .ld-icon {
+    margin: auto var(--ld-button-icon-margin-x-md);
   }
 
   &:where(.ld-button--sm) {
     min-height: 2rem;
     min-width: 2rem;
-    padding: var(--ld-padding-sm-y) var(--ld-padding-sm-x);
+    padding: var(--ld-button-padding-sm-y) var(--ld-button-padding-sm-x);
     font: var(--ld-typo-body-s);
     font-weight: 700;
     line-height: 1;
-    gap: var(--ld-gap-sm);
+    gap: var(--ld-button-gap-sm);
 
-    :where(.ld-icon) {
-      margin: auto var(--ld-icon-margin-x-sm);
+    > ld-icon,
+    > .ld-icon {
+      margin: auto var(--ld-button-icon-margin-x-sm);
     }
 
+    ld-icon,
     .ld-icon,
     .ld-icon :where(svg) {
-      width: var(--ld-icon-size-sm);
-      height: var(--ld-icon-size-sm);
+      width: var(--ld-button-icon-size-sm);
+      height: var(--ld-button-icon-size-sm);
     }
   }
 
   &:where(.ld-button--lg) {
     min-height: 3.125rem;
     min-width: 3.125rem;
-    padding: var(--ld-padding-lg-y) var(--ld-padding-lg-x);
+    padding: var(--ld-button-padding-lg-y) var(--ld-button-padding-lg-x);
     font: var(--ld-typo-body-l);
     font-weight: 700;
     line-height: 1;
-    gap: var(--ld-gap-lg);
+    gap: var(--ld-button-gap-lg);
 
-    :where(.ld-icon) {
-      margin: auto var(--ld-icon-margin-x-lg);
+    > ld-icon,
+    > .ld-icon {
+      margin: auto var(--ld-button-icon-margin-x-lg);
     }
 
+    ld-icon,
     .ld-icon,
     .ld-icon :where(svg) {
-      width: var(--ld-icon-size-lg);
-      height: var(--ld-icon-size-lg);
+      width: var(--ld-button-icon-size-lg);
+      height: var(--ld-button-icon-size-lg);
     }
   }
 

diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md
@@ -150,7 +150,7 @@ Although `aria-disabled="true"` is not necessary on a `button` element (or any o
 <button class="ld-button ld-button--danger" disabled>Text</button>
 {% endexample %}
 
-### Sizes
+### Size
 
 {% example %}
 <ld-button size="sm">Text</ld-button>

diff --git a/src/liquid/components/ld-icon/ld-icon.css b/src/liquid/components/ld-icon/ld-icon.css
@@ -4,29 +4,29 @@
 }
 
 :where(.ld-icon) {
-  --ld-size-sm: 1rem;
-  --ld-size-md: 1.25rem;
-  --ld-size-lg: 1.5rem;
+  --ld-icon-size-sm: 1rem;
+  --ld-icon-size-md: 1.25rem;
+  --ld-icon-size-lg: 1.5rem;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: var(--ld-size-md);
-  height: var(--ld-size-md);
+  width: var(--ld-icon-size-md);
+  height: var(--ld-icon-size-md);
 
   :where(svg) {
-    width: var(--ld-size-md);
-    height: var(--ld-size-md);
+    width: var(--ld-icon-size-md);
+    height: var(--ld-icon-size-md);
     flex-shrink: 0;
   }
 }
 
 :where(.ld-icon--sm),
 :where(.ld-icon--sm svg) {
-  width: var(--ld-size-sm);
-  height: var(--ld-size-sm);
+  width: var(--ld-icon-size-sm);
+  height: var(--ld-icon-size-sm);
 }
 :where(.ld-icon--lg),
 :where(.ld-icon--lg svg) {
-  width: var(--ld-size-lg);
-  height: var(--ld-size-lg);
+  width: var(--ld-icon-size-lg);
+  height: var(--ld-icon-size-lg);
 }