Implement has-no-label class for all form components

src/components/_common/_fonts.scss

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "form-components-icons";
-  src: url("../../fonts/form-components-icons/form-components-icons.woff?1cc9ee81d7ab836ad40c9b005f8096dc") format("woff");
+  src: url("../../fonts/form-components-icons/form-components-icons.woff?98f31ed1d43b9d5e8b206bc44db44113") format("woff");
   font-weight: normal;
   font-style: normal;
 }

src/components/_common/_form-components-icons.scss

@@ -47,24 +47,19 @@
     content: "\f104";
   }
 }
-@else if ($icon == "checkmark-thick") {
-  &:before {
-    content: "\f105";
-  }
-}
 @else if ($icon == "error") {
   &:before {
-    content: "\f106";
+    content: "\f105";
   }
 }
 @else if ($icon == "status") {
   &:before {
-    content: "\f107";
+    content: "\f106";
   }
 }
 @else if ($icon == "warning") {
   &:before {
-    content: "\f108";
+    content: "\f107";
   }
 }
 
@@ -110,24 +105,19 @@
     content: "\f104";
   }
 }
-@else if ($icon == "checkmark-thick") {
-  &:after {
-    content: "\f105";
-  }
-}
 @else if ($icon == "error") {
   &:after {
-    content: "\f106";
+    content: "\f105";
   }
 }
 @else if ($icon == "status") {
   &:after {
-    content: "\f107";
+    content: "\f106";
   }
 }
 @else if ($icon == "warning") {
   &:after {
-    content: "\f108";
+    content: "\f107";
   }
 }
 

src/components/checkbox/checkbox-lite-checkmark/checkbox-lite-checkmark.scss

@@ -7,6 +7,7 @@
  * - is-tabbed: When the input is focused by tabbing (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // font settings
 $checkboxIconFontSize: 1.125rem;

src/components/checkbox/checkbox-material-like/checkbox-material-like.scss

@@ -7,6 +7,7 @@
  * - is-tabbed: When the input is focused by tabbing (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // font settings
 $checkboxFontSize: 1.125rem;

src/components/form-component.js

@@ -2,12 +2,16 @@ export default class FormComponent {
   constructor(context, field) {
     this.context = context;
     this.field = field;
+    this.label = this.context.querySelector('label');
   }
 
   init() {
     if (this.field.hasAttribute('disabled')) {
       this.context.classList.add('is-disabled');
     }
+    if (!this.label) {
+      this.context.classList.add('has-no-label');
+    }
     this.setIsFilledIn();
     this.initFocus();
     this.context.classList.add('is-initialized');

src/components/radio/radio-material-like/radio-material-like.scss

@@ -6,6 +6,7 @@
  * - is-tabbed: When the input is focused by tabbing (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // font settings
 $radioFontSize: 1.125rem;

src/components/select/select-lite-arrow-indent/select-lite-arrow-indent.scss

@@ -9,6 +9,7 @@
  * - is-tabbed: When the select is focused (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // sizes
 $selectPaddingX: 10px;

src/components/select/select-lite-arrow/select-lite-arrow.scss

@@ -9,6 +9,7 @@
  * - is-tabbed: When the select is focused (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 
 // sizes

src/components/select/select-material-like-indent/select-material-like-indent.scss

@@ -9,6 +9,7 @@
  * - is-tabbed: When the select is focused (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // sizes
 $selectPaddingX: 10px;

src/components/select/select-material-like/select-material-like.js

@@ -10,15 +10,11 @@ export class Select extends FormComponent {
     super.init();
 
     this.wrapper = context.querySelector('.select__wrapper');
-    this.label = this.wrapper.querySelector('.select__label');
     this.error = context.querySelector('.select__error');
     this.dropdown = null;
     this.dropdownOptions = [];
 
     this.createDropdown();
-    if (!this.label) {
-      this.context.classList.add('has-no-label');
-    }
     if (!this.field.hasAttribute('disabled')) {
       this.initEvents();
     }

src/components/select/select-material-like/select-material-like.scss

@@ -5,10 +5,10 @@
  * - is-disabled: When input is disabled
  * - is-filled-in: When a value is available or the user clicked on the select
  * - is-open: If the dropdown is open
- * - has-no-label: If the select has no label
  * - is-tabbed: When the select is focused (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // sizes
 $selectHeight: 2.375rem; // 38px + 12px == 50px height

src/components/text-area/text-area-material-like/text-area-material-like.scss

@@ -7,6 +7,7 @@
  * - is-tabbed: When the input is focused by tabbing (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // font settings
 $textAreaLabelFontSize: 1.125rem;
@@ -112,9 +113,6 @@ $variants: "dark", "light";
           outline: none;
         }
       }
-      &.is-focused #{$block}__input {
-        //margin-left: -1px;
-      }
       &.is-disabled #{$block}__input {
         cursor: not-allowed;
       }
@@ -131,10 +129,7 @@ $variants: "dark", "light";
         width: 100%;
         box-sizing: border-box;
         cursor: text;
-        // a border and padding is necessary to have the same line height like
-        // input
-        border-bottom: 1px solid transparent;
-        padding: 0 $textAreaPaddingX 1px $textAreaPaddingX;
+        padding: 0 $textAreaPaddingX;
         font-size: $textAreaLabelFontSize;
         font-family: $textAreaLabelFontFamily;
         color: $textAreaLabelColor;

src/components/text-field/text-field-material-like-indent/text-field-material-like-indent.scss

@@ -7,6 +7,7 @@
  * - is-tabbed: When the input is focused by tabbing (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // size settings
 $textFieldPaddingX: 10px;

src/components/text-field/text-field-material-like/text-field-material-like.scss

@@ -7,6 +7,7 @@
  * - is-tabbed: When the input is focused by tabbing (a11y)
  * - is-focused: When the input is focused
  * - is-initialized: When the JS for the component is initialized
+ * - has-no-label: If there is no label available
  ******************************************************************************/
 // size settings
 $textFieldHeight: 2.375rem; // 38px + 12px == 50px height