Merge pull request #63 from CrowdStrike/design-adjustments

CrowdStrike · Mar 7, 2023 · 52acb32 · 52acb32
2 parents ff0489b + f7c15fe
commit 52acb32
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 21 deletions.
diff --git a/docs/components/field/demo/base-demo.md b/docs/components/field/demo/base-demo.md
@@ -1,17 +1,19 @@
 ```hbs template
 <Form::Field as |field|>
-  <field.Label for={{field.id}}>Label</field.Label>
-  <field.Hint id={{field.hintId}}>Extra information about the field</field.Hint>
-  <field.Control>
-    <input
-      class='border bg-basement text-titles-and-attributes p-1 rounded-sm'
-      id={{field.id}}
-      aria-invalid='true'
-      aria-describedby='{{field.hintId}} {{field.errorId}}'
-      ...attributes
-    />
-  </field.Control>
-  <field.Error id={{field.errorId}}>Error message</field.Error>
+  <div class='space-y-0.5'>
+    <field.Label for={{field.id}}>Label</field.Label>
+    <field.Hint id={{field.hintId}}>Extra information about the field</field.Hint>
+    <field.Control>
+      <input
+        class='border bg-basement text-titles-and-attributes p-1 rounded-sm'
+        id={{field.id}}
+        aria-invalid='true'
+        aria-describedby='{{field.hintId}} {{field.errorId}}'
+        ...attributes
+      />
+    </field.Control>
+    <field.Error id={{field.errorId}}>Error message</field.Error>
+  </div>
 </Form::Field>
 ```
 

diff --git a/docs/components/field/index.md b/docs/components/field/index.md
@@ -12,6 +12,10 @@ Field is a component to aid in creating form components. It provides a label, hi
 - `Control`: A control block where a form element is rendered, for example, an `<input>`, `<textarea>`, etc.
 - `Error`: Renders a `<div>` element. Error information is normally rendered here.
 
+## Design Guidelines
+
+- All components should have 0.125rem or 2px of spacing between the elements. We recommend using `space-y-0.5` or `gap-y-5` with `mt-0.5` being used as a last resort. It is up to consumers to apply these classes themselves. If using our Toucan `*Field` components, we handle this automatically.
+
 ## Accessibility
 
 The Field component does not handle accessibility automatically for the label, hint, and error sections of the component; however, it does provide identifiers to assist here. Each code example on this page also shows how to take advantage of these IDs.

diff --git a/ember-toucan-core/src/-private/components/control.hbs b/ember-toucan-core/src/-private/components/control.hbs
@@ -1,3 +1,3 @@
-<div class="mt-1" ...attributes>
+<div ...attributes>
   {{yield}}
 </div>
diff --git a/ember-toucan-core/src/-private/components/error.hbs b/ember-toucan-core/src/-private/components/error.hbs
@@ -1,4 +1,4 @@
-<div class="type-xs-tight text-critical mt-1 flex items-center" ...attributes>
+<div class="type-xs-tight text-critical flex items-center" ...attributes>
   {{! Icon taken from Tony's open source icon set, this is temporary! }}
   <svg
     xmlns="http://www.w3.org/2000/svg"

diff --git a/ember-toucan-core/src/components/form/checkbox-field.hbs b/ember-toucan-core/src/components/form/checkbox-field.hbs
@@ -28,14 +28,18 @@
           >{{@label}}</span>
 
           {{#if @hint}}
-            <field.Hint data-hint>{{@hint}}</field.Hint>
+            <field.Hint class="mt-0.5" data-hint>{{@hint}}</field.Hint>
           {{/if}}
         </div>
       </label>
     </field.Control>
 
     {{#if @error}}
-      <field.Error id={{field.errorId}} data-error>{{@error}}</field.Error>
+      <field.Error
+        class="mt-0.5"
+        id={{field.errorId}}
+        data-error
+      >{{@error}}</field.Error>
     {{/if}}
   </Form::Field>
 </div>
diff --git a/ember-toucan-core/src/components/form/fieldset.hbs b/ember-toucan-core/src/components/form/fieldset.hbs
@@ -2,6 +2,7 @@
   <fieldset
     aria-describedby="{{if @error field.errorId}} {{if @hint field.hintId}}"
     disabled={{@isDisabled}}
+    class="space-y-0.5"
     ...attributes
   >
     <legend
@@ -13,12 +14,12 @@
       <field.Hint id={{field.hintId}} data-hint>{{@hint}}</field.Hint>
     {{/if}}
 
-    <div
-      class="mt-2 flex flex-col rounded-sm {{if @error 'shadow-error-outline'}}"
+    <field.Control
+      class="flex flex-col rounded-sm {{if @error 'shadow-error-outline'}}"
       data-control
     >
       {{yield}}
-    </div>
+    </field.Control>
 
     {{#if @error}}
       <field.Error id={{field.errorId}} data-error>{{@error}}</field.Error>

diff --git a/ember-toucan-core/src/components/form/input-field.hbs b/ember-toucan-core/src/components/form/input-field.hbs
@@ -1,5 +1,5 @@
 <div
-  class="flex flex-col {{if @isDisabled 'text-disabled'}}"
+  class="flex flex-col space-y-0.5 {{if @isDisabled 'text-disabled'}}"
   data-root-field={{if @rootTestSelector @rootTestSelector null}}
 >
   <Form::Field as |field|>

diff --git a/ember-toucan-core/src/components/form/textarea-field.hbs b/ember-toucan-core/src/components/form/textarea-field.hbs
@@ -1,5 +1,5 @@
 <div
-  class="flex flex-col"
+  class="flex flex-col space-y-0.5"
   data-root-field={{if @rootTestSelector @rootTestSelector}}
 >
   <Form::Field as |field|>