fix(form): match experimental spec (#1968)

* fix(form): match experimental spec * chore: prettier * fix(form): reduce helper text line height * docs(form): render helper text for experimental form items * refactor(form): remove redundant mixin * fix(form): replace dropdown with select
carbon-design-system · Mar 5, 2019 · f31d39b · f31d39b
1 parent 09478c4
commit f31d39b
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 34 deletions.
diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -128,7 +128,7 @@
     font-weight: $input-label-weight;
     display: inline-block;
     vertical-align: baseline;
-    margin-bottom: $spacing-xs;
+    margin-bottom: $spacing-3xs;
     line-height: rem(16px);
   }
 
@@ -185,7 +185,6 @@
     @include type-style('helper-text-01');
     font-style: italic;
     color: $text-02;
-    line-height: 1.5;
     z-index: 0;
     opacity: 1;
     max-width: 75%;

diff --git a/src/components/form/form.hbs b/src/components/form/form.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -7,50 +7,85 @@
 
 <div class="{{@root.prefix}}--form-item">
   {{#if componentsX}}
-    <label for="text-input-3" class="{{@root.prefix}}--label">Text Input label</label>
-    <input id="text-input-3" type="text" class="{{@root.prefix}}--text-input{{#if light}} {{@root.prefix}}--text-input--light{{/if}}" placeholder="Optional placeholder text">
+  <label for="text-input-3" class="{{@root.prefix}}--label">Text Input label</label>
+  <div class="{{prefix}}--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
+  <input id="text-input-3" type="text"
+    class="{{@root.prefix}}--text-input{{#if light}} {{@root.prefix}}--text-input--light{{/if}}"
+    placeholder="Optional placeholder text">
   {{else}}
-    <input id="text-input-3" type="text" class="{{@root.prefix}}--text-input{{#if light}} {{@root.prefix}}--text-input--light{{/if}}" placeholder="Optional placeholder text">
-    <label for="text-input-3" class="{{@root.prefix}}--label">Text Input label</label>
+  <input id="text-input-3" type="text"
+    class="{{@root.prefix}}--text-input{{#if light}} {{@root.prefix}}--text-input--light{{/if}}"
+    placeholder="Optional placeholder text">
+  <label for="text-input-3" class="{{@root.prefix}}--label">Text Input label</label>
   {{/if}}
 </div>
 <div class="{{@root.prefix}}--form-item">
   {{#if componentsX}}
-    <label for="text-area-2" class="{{@root.prefix}}--label">Text Area label</label>
-    <textarea id="text-area-2" class="{{@root.prefix}}--text-area{{#if light}} {{@root.prefix}}--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-2" class="{{@root.prefix}}--label">Text Area label</label>
+  <div class="{{prefix}}--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
+  <textarea id="text-area-2" class="{{@root.prefix}}--text-area{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
+    rows="4" cols="50" placeholder="Placeholder text."></textarea>
   {{else}}
-    <textarea id="text-area-2" class="{{@root.prefix}}--text-area{{#if light}} {{@root.prefix}}--text-area--light{{/if}}" rows="4" cols="50" placeholder="Placeholder text."></textarea>
-    <label for="text-area-2" class="{{@root.prefix}}--label">Text Area label</label>
+  <textarea id="text-area-2" class="{{@root.prefix}}--text-area{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
+    rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-2" class="{{@root.prefix}}--label">Text Area label</label>
   {{/if}}
 </div>
 <div class="{{@root.prefix}}--form-item">
-  <div class="{{@root.prefix}}--select{{#if light}} {{@root.prefix}}--select--light{{/if}}">
-    {{#if componentsX}}
-      <label for="select-id" class="{{@root.prefix}}--label">Select label</label>
+  <div
+    class="{{@root.prefix}}--select{{#if inline}} {{@root.prefix}}--select--inline{{/if}}{{#if light}} {{@root.prefix}}--select--light{{/if}}">
+    <label for="select-id" class="{{@root.prefix}}--label">Select label</label>
+    {{#unless inline}}
+    {{#if helperText}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
     {{/if}}
-    <select id="select-id" class="{{@root.prefix}}--select-input">
-      {{#each selectItems}}
-        {{#if items}}
-          <optgroup class="{{@root.prefix}}--select-optgroup" label="{{label}}">
-            {{#each items}}
-              <option class="{{@root.prefix}}--select-option" value="{{value}}"{{#if disabled}} disabled{{/if}}{{#if selected}} selected{{/if}}{{#if hidden}} hidden{{/if}}>{{label}}</option>
-            {{/each}}
-          </optgroup>
-        {{else}}
-          <option class="{{@root.prefix}}--select-option" value="{{value}}"{{#if disabled}} disabled{{/if}}{{#if selected}} selected{{/if}}{{#if hidden}} hidden{{/if}}>{{label}}</option>
-        {{/if}}
-      {{/each}}
-    </select>
+    {{/unless}}
     {{#if componentsX}}
-      {{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--select__arrow')}}
+    <div class="{{@root.prefix}}--select-input__wrapper">
+      <select {{#if invalid}} data-invalid{{/if}} id="select-id"
+        class="{{@root.prefix}}--select-input {{#if invalid}} {{@root.prefix}}--select--invalid {{/if}}">
+        {{#each selectItems}}
+        {{#if items}}
+        <optgroup class="{{@root.prefix}}--select-optgroup" label="{{label}}">
+          {{#each items}}
+          <option class="{{@root.prefix}}--select-option" value="{{value}}" {{#if disabled}} disabled{{/if}}{{#if
+            selected}} selected{{/if}}{{#if hidden}} hidden{{/if}}>{{label}} </option> {{/each}} </optgroup> {{else}}
+        <option class="{{@root.prefix}}--select-option" value="{{value}}" {{#if disabled}} disabled{{/if}}{{#if
+            selected}} selected{{/if}}{{#if hidden}} hidden{{/if}}>{{label}} </option> {{/if}} {{/each}} </select>
+      {{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--select__arrow') }}
+      {{#if invalid}}
+      {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--select__invalid-icon')}}
+      {{/if}}
+    </div>
     {{else}}
-      <svg class="{{@root.prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
-        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
-      </svg>
+    <select {{#if invalid}} data-invalid{{/if}} id="select-id"
+      class="{{@root.prefix}}--select-input {{#if invalid}} {{@root.prefix}}--select--invalid {{/if}}">
+      {{#each selectItems}}
+      {{#if items}}
+      <optgroup class="{{@root.prefix}}--select-optgroup" label="{{label}}">
+        {{#each items}}
+        <option class="{{@root.prefix}}--select-option" value="{{value}}" {{#if disabled}} disabled{{/if}}{{#if
+          selected}} selected{{/if}}{{#if hidden}} hidden{{/if}}>{{label}} </option> {{/each}} </optgroup> {{else}}
+      <option class="{{@root.prefix}}--select-option" value="{{value}}" {{#if disabled}} disabled{{/if}}{{#if
+          selected}} selected{{/if}}{{#if hidden}} hidden{{/if}}>{{label}} </option> {{/if}} {{/each}} </select>
+    <svg class="{{@root.prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+      <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
+    </svg>
+    {{/if}}
+    {{#if inline}}
+    {{#if helperText}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+    {{/if}}
+    {{/if}}
+    {{#if invalid}}
+    <div class="{{@root.prefix}}--form-requirement">
+      Validation message here
+    </div>
     {{/if}}
-    {{#unless componentsX}}
-      <label for="select-id" class="{{@root.prefix}}--label">Select label</label>
-    {{/unless}}
   </div>
 </div>
 <div class="{{@root.prefix}}--form-item">