feat(helperText): add support for helper text

AlaskaAirlines · Nov 24, 2021 · 91648dd · 91648dd
1 parent 061ac17
commit 91648dd
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -434,6 +434,71 @@ _Note: best combined with bordered attribute_
 
 </auro-accordion>
 
+## Example using helperText attribute
+
+<div class="exampleWrapper">
+  <auro-dropdown inset bordered rounded>
+    <span>
+      Lorem ipsum solar
+    </span>
+    <span slot="helperText">
+      Helper text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-dropdown inset bordered rounded helperText="Helper text">
+    <span>
+      Lorem ipsum solar
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  ```
+
+</auro-accordion>
+
+<div class="exampleWrapper">
+  <auro-dropdown inset bordered rounded error>
+    <span>
+      Lorem ipsum solar
+    </span>
+    <span slot="helperText">
+      Helper text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-dropdown inset bordered rounded error>
+    <span>
+      Lorem ipsum solar
+    </span>
+    <span slot="helperText">
+      Helper text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  ```
+
+</auro-accordion>
+
 ## Examples with custom dimensions
 
 The `auro-dropdown` trigger will fill 100% of the available width of it's parent container. The dropdown content will always be at least as wide as the trigger. If the container is narrower than the desired width of the dropdown content (e.g. using just an icon for the trigger) you may apply CSS to your dropdown content to define a custom width.

diff --git a/src/auro-dropdown.js b/src/auro-dropdown.js
@@ -18,6 +18,7 @@ import Popover from "../lib/popover";
  * @attr {boolean} toggle - If true, the trigger will toggle the show/hide state of the dropdown.
  * @slot - Default unnamed slot for the use of popover content.
  * @slot label - Sets the label text for the input.
+ * @slot helperText - Sets the helperText text for the input.
  * @slot trigger - Slot for entering the trigger element into the scope of the shadow DOM.
  */
 class AuroDropdown extends LitElement {
@@ -213,6 +214,9 @@ class AuroDropdown extends LitElement {
           </div>
         ` : undefined}
       </div>
+      <div class="helperText">
+        <slot name="helperText"></slot>
+      </div>
     `;
   }
 }

diff --git a/src/style.scss b/src/style.scss
@@ -38,6 +38,12 @@
   }
 }
 
+:host([error]) {
+  .helperText {
+    color: var(--auro-color-text-error-on-light);
+  }
+}
+
 :host([bordered][error]) {
   #trigger {
     border-color: var(--auro-color-border-error-on-light);
@@ -114,6 +120,13 @@
   }  
 }
 
+.helperText {
+  color: var(--auro-color-text-secondary-on-light);
+  font-size: var(--auro-text-body-size-xs);
+  line-height: var(--auro-text-body-size-default);
+  margin-top: 4px;
+}
+
 .popover{
   display:inline-block;
   border-style: solid;