feat(components): Combine label with form input components (#587)

* combine the two apis in all necessary components * feat(components): adjust stories to not render additional divs feature/combine-input-and-label-apis * feat(components): adjust proptypes comment messages Co-authored-by: Connor Bär <[email protected]> * feat(components): adjust proptypes messages for the select component feature/combine-input-and-label-apis * feat(components): add proper ids to the select component feature/combine-input-and-label-apis Co-authored-by: Connor Bär <[email protected]>
sumup-oss · May 11, 2020 · 57893ff · 57893ff
1 parent ad371b1
commit 57893ff
Show file tree

Hide file tree

Showing 19 changed files with 3,303 additions and 2,080 deletions.
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
diff --git a/src/components/AutoCompleteInput/AutoCompleteInput.story.js b/src/components/AutoCompleteInput/AutoCompleteInput.story.js
@@ -22,7 +22,6 @@ import { uniqueId } from '../../util/id';
 
 import docs from './AutoCompleteInput.docs.mdx';
 import AutoCompleteInput from './AutoCompleteInput';
-import Label from '../Label';
 import Text from '../Text';
 
 export default {
@@ -58,14 +57,12 @@ const icons = {
 const AutoCompleteInputWithLabel = props => {
   const id = uniqueId();
   return (
-    <Label htmlFor={id}>
-      {"What's your favourite fruit?"}
-      <AutoCompleteInput
-        clearOnSelect={boolean('clearOnSelect', false)}
-        {...props}
-        id={id}
-      />
-    </Label>
+    <AutoCompleteInput
+      clearOnSelect={boolean('clearOnSelect', false)}
+      {...props}
+      id={id}
+      label="What's your favourite fruit?"
+    />
   );
 };
 

diff --git a/src/components/AutoCompleteInput/__snapshots__/AutoCompleteInput.spec.js.snap b/src/components/AutoCompleteInput/__snapshots__/AutoCompleteInput.spec.js.snap
@@ -1,16 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AutoCompleteInput should render with default styles 1`] = `
-.circuit-5 {
+.circuit-7 {
   position: relative;
   min-width: 150px;
 }
 
-label > .circuit-5,
-label + .circuit-5 {
+label > .circuit-7,
+label + .circuit-7 {
   margin-top: 4px;
 }
 
+.circuit-5 {
+  font-size: 13px;
+  line-height: 20px;
+  display: block;
+}
+
 .circuit-3 {
   color: #212933;
   display: block;
@@ -87,38 +93,43 @@ label + .circuit-3 {
   aria-expanded="false"
   aria-haspopup="listbox"
   aria-labelledby="downshift-0-label"
-  class="circuit-5 circuit-6"
+  class="circuit-7 circuit-8"
   role="combobox"
 >
-  <div
-    class="circuit-3 circuit-4"
+  <label
+    class="circuit-5 circuit-6"
+    for="downshift-0-input"
   >
-    <svg
-      class="circuit-0"
-      fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      class="circuit-3 circuit-4"
     >
-      <path
-        d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+      <svg
+        class="circuit-0"
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+      <input
+        aria-autocomplete="list"
+        aria-invalid="false"
+        aria-labelledby="downshift-0-label"
+        autocomplete="off"
+        class="circuit-1 circuit-2"
+        id="downshift-0-input"
+        type="text"
+        value=""
       />
-    </svg>
-    <input
-      aria-autocomplete="list"
-      aria-invalid="false"
-      aria-labelledby="downshift-0-label"
-      autocomplete="off"
-      class="circuit-1 circuit-2"
-      id="downshift-0-input"
-      type="text"
-      value=""
-    />
-  </div>
+    </div>
+  </label>
 </div>
 `;
diff --git a/src/components/AutoCompleteTags/__snapshots__/AutoCompleteTags.spec.js.snap b/src/components/AutoCompleteTags/__snapshots__/AutoCompleteTags.spec.js.snap
@@ -1,16 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AutoCompleteTags should render with default styles 1`] = `
-.circuit-5 {
+.circuit-7 {
   position: relative;
   min-width: 150px;
 }
 
-label > .circuit-5,
-label + .circuit-5 {
+label > .circuit-7,
+label + .circuit-7 {
   margin-top: 4px;
 }
 
+.circuit-5 {
+  font-size: 13px;
+  line-height: 20px;
+  display: block;
+}
+
 .circuit-3 {
   color: #212933;
   display: block;
@@ -87,38 +93,43 @@ label + .circuit-3 {
   aria-expanded="false"
   aria-haspopup="listbox"
   aria-labelledby="downshift-0-label"
-  class="circuit-5 circuit-6"
+  class="circuit-7 circuit-8"
   role="combobox"
 >
-  <div
-    class="circuit-3 circuit-4"
+  <label
+    class="circuit-5 circuit-6"
+    for="downshift-0-input"
   >
-    <svg
-      class="circuit-0"
-      fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      class="circuit-3 circuit-4"
     >
-      <path
-        d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
+      <svg
+        class="circuit-0"
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11 17a6 6 0 100-12 6 6 0 000 12zm4.5-1.5L19 19"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+      <input
+        aria-autocomplete="list"
+        aria-invalid="false"
+        aria-labelledby="downshift-0-label"
+        autocomplete="off"
+        class="circuit-1 circuit-2"
+        id="downshift-0-input"
+        type="text"
+        value=""
       />
-    </svg>
-    <input
-      aria-autocomplete="list"
-      aria-invalid="false"
-      aria-labelledby="downshift-0-label"
-      autocomplete="off"
-      class="circuit-1 circuit-2"
-      id="downshift-0-input"
-      type="text"
-      value=""
-    />
-  </div>
+    </div>
+  </label>
 </div>
 `;
diff --git a/src/components/CurrencyInput/CurrencyInput.story.js b/src/components/CurrencyInput/CurrencyInput.story.js
@@ -19,7 +19,6 @@ import { uniqueId } from '../../util/id';
 
 import docs from './CurrencyInput.docs.mdx';
 import CurrencyInput from './CurrencyInput';
-import Label from '../Label';
 
 export default {
   title: 'Forms/Input/CurrencyInput',
@@ -34,10 +33,7 @@ export default {
 const CurrencyInputWithLabel = props => {
   const id = uniqueId();
   return (
-    <Label htmlFor={id}>
-      Amount
-      <CurrencyInput placeholder="123.45" {...props} id={id} />
-    </Label>
+    <CurrencyInput placeholder="123.45" {...props} id={id} label="Amount" />
   );
 };