Refactor Forms package to use BEM CSS naming

packages/forms/addon/components/form-checkbox-group.hbs

@@ -2,9 +2,8 @@
   @isSmall={{@isSmall}}
   @isLarge={{@isLarge}}
   class="form-checkbox-group-container
-    {{if this.showErrorFeedback "has-error"}}
-    {{if @isInline "is-inline"}} {{@containerClass}}
-    {{if @isSmall "form-checkbox-group-container-sm" (if @isLarge "form-checkbox-group-container-lg")}}"
+    {{if @isInline "form-checkbox-group-container--inline"}} {{@containerClass}}
+    {{if @isSmall "form-checkbox-group-container--sm" (if @isLarge "form-checkbox-group-container--lg")}}"
     role="group"
   ...attributes
   as |f|

packages/forms/addon/components/form-checkbox.hbs

@@ -1,17 +1,14 @@
 <FormField
   @isSmall={{@isSmall}}
   @isLarge={{@isLarge}}
-  class="form-checkbox-container {{@containerClass}} {{if @isSmall "form-checkbox-container-sm" (if @isLarge "form-checkbox-container-lg")}}"
+  class="form-checkbox-container {{@containerClass}} {{if @isSmall "form-checkbox-container--sm" (if @isLarge "form-checkbox-container--lg")}}"
   as |f|
 >
-  <div class="label-container">
-    <div class="input-container">
+  <div class="form-checkbox-container__label-container">
+    <div class="form-checkbox-container__input-container">
       {{!--  Zero-width space character, used to align checkbox properly --}}
       &#8203;
       <f.Checkbox
-        {{on "focus" this.handleFocusIn}}
-        {{on "blur" this.handleFocusOut}}
-
         @onChange={{this.handleChange}}
         @checked={{@checked}}
         @name={{@name}}

packages/forms/addon/components/form-checkbox.ts

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 
 interface FormCheckboxArgs {
   label?: string;
@@ -19,8 +18,6 @@ interface FormCheckboxArgs {
 }
 
 export default class FormCheckbox extends Component<FormCheckboxArgs> {
-  @tracked isFocused = false;
-
   @action handleChange(value: boolean, event: Event): void {
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
@@ -30,14 +27,4 @@ export default class FormCheckbox extends Component<FormCheckboxArgs> {
       this.args._parentOnChange(value, event);
     }
   }
-
-  @action handleFocusIn(event: FocusEvent): void {
-    if (event.relatedTarget !== null) {
-      this.isFocused = true;
-    }
-  }
-
-  @action handleFocusOut(_: FocusEvent): void {
-    this.isFocused = false;
-  }
 }

packages/forms/addon/components/form-field/checkbox.hbs

@@ -4,6 +4,7 @@
   name={{@name}}
   checked={{this.isChecked}}
   type="checkbox"
-  class="form-checkbox {{if @isSmall "form-checkbox-sm" (if @isLarge "form-checkbox-lg")}}"
+  class="form__checkbox {{if @isSmall "form__checkbox--sm" (if @isLarge "form__checkbox--lg")}}"
+  data-test-id="form-field-checkbox"
   ...attributes
 >

packages/forms/addon/components/form-field/feedback.hbs

@@ -1,6 +1,6 @@
 <div
   id={{@id}}
-  class="form-field-feedback {{if this.isError "is-error"}} {{if @isSmall "form-field-feedback-sm" (if @isLarge "form-field-feedback-lg")}}"
+  class="form__feedback {{if this.isError "form__feedback--state-error"}} {{if @isSmall "form__feedback--sm" (if @isLarge "form__feedback--lg")}}"
   data-test-id="form-field-feedback"
   aria-live={{if this.isError "assertive" "polite"}}
   ...attributes

packages/forms/addon/components/form-field/hint.hbs

@@ -1,6 +1,6 @@
 <div
   id={{@id}}
-  class="form-field-hint {{if @isSmall "form-field-hint-sm" (if @isLarge "form-field-hint-lg")}}"
+  class="form__hint {{if @isSmall "form__hint--sm" (if @isLarge "form__hint--lg")}}"
   data-test-id="form-field-hint"
   ...attributes
 >

packages/forms/addon/components/form-field/input.hbs

@@ -4,6 +4,7 @@
   id={{@id}}
   value={{@value}}
   type={{this.type}}
-  class="form-input {{if @isSmall "form-input-sm" (if @isLarge "form-input-lg")}}"
+  class="form__input {{if @isSmall "form__input--sm" (if @isLarge "form__input--lg")}}"
+  data-test-id="form-field-input"
   ...attributes
 >

packages/forms/addon/components/form-field/label.hbs

@@ -1,6 +1,6 @@
 <label
   for={{@for}}
-  class="form-field-label {{if @isSmall "form-field-label-sm" (if @isLarge "form-field-label-lg")}}"
+  class="form__label {{if @isSmall "form__label--sm" (if @isLarge "form__label--lg")}}"
   data-test-id="form-field-label"
   ...attributes
 >

packages/forms/addon/components/form-field/radio.hbs

@@ -5,6 +5,7 @@
   value={{@value}}
   checked={{this.isChecked}}
   type="radio"
-  class="form-radio {{if @isSmall "form-radio-sm" (if @isLarge "form-radio-lg")}}"
+  class="form__radio {{if @isSmall "form__radio--sm" (if @isLarge "form__radio--lg")}}"
+  data-test-id="form-field-radio"
   ...attributes
 >

packages/forms/addon/components/form-field/textarea.hbs

@@ -3,7 +3,8 @@
   {{on "change" this.handleOnChange}}
   id={{@id}}
   value={{@value}}
-  class="form-textarea {{if @isSmall "form-textarea-sm" (if @isLarge "form-textarea-lg")}}"
+  class="form__textarea {{if @isSmall "form__textarea--sm" (if @isLarge "form__textarea--lg")}}"
+  data-test-id="form-field-textarea"
   ...attributes
 >
 </textarea>

packages/forms/addon/components/form-input.hbs

@@ -1,7 +1,7 @@
 <FormField
   @isSmall={{@isSmall}}
   @isLarge={{@isLarge}}
-  class="form-input-container {{@containerClass}} {{if @isSmall "form-input-container-sm" (if @isLarge "form-input-container-lg")}}"
+  class="form-input-container {{@containerClass}} {{if @isSmall "form-input-container--sm" (if @isLarge "form-input-container--lg")}}"
   as |f|
 >
   {{#if @label}}

packages/forms/addon/components/form-radio-group.hbs

@@ -2,9 +2,8 @@
   @isSmall={{@isSmall}}
   @isLarge={{@isLarge}}
   class="form-radio-group-container
-    {{if this.showErrorFeedback "has-error"}}
-    {{if @isInline "is-inline"}} {{@containerClass}}
-    {{if @isSmall "form-radio-group-container-sm" (if @isLarge "form-radio-group-container-lg")}}"
+    {{if @isInline "form-radio-group-container--inline"}} {{@containerClass}}
+    {{if @isSmall "form-radio-group-container--sm" (if @isLarge "form-radio-group-container--lg")}}"
     role="radiogroup"
   ...attributes
   as |f|

packages/forms/addon/components/form-radio.hbs

@@ -1,17 +1,14 @@
 <FormField
   @isSmall={{@isSmall}}
   @isLarge={{@isLarge}}
-  class="form-radio-container {{@containerClass}} {{if @isSmall "form-radio-container-sm" (if @isLarge "form-radio-container-lg")}}"
+  class="form-radio-container {{@containerClass}} {{if @isSmall "form-radio-container--sm" (if @isLarge "form-radio-container--lg")}}"
   as |f|
 >
-  <div class="label-container">
-    <div class="input-container">
+  <div class="form-radio-container__label-container">
+    <div class="form-radio-container__input-container">
       {{!--  Zero-width space character, used to align checkbox properly --}}
       &#8203;
       <f.Radio
-        {{on "focus" this.handleFocusIn}}
-        {{on "blur" this.handleFocusOut}}
-
         @onChange={{this.handleChange}}
         @value={{@value}}
         @checked={{@checked}}
@@ -22,9 +19,7 @@
       />
     </div>
 
-    <f.Label
-      class={{if this.isFocused "is-focused"}}
-    >
+    <f.Label>
       {{#if hasBlock}}
         {{yield}}
       {{else}}

packages/forms/addon/components/form-radio.ts

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 
 interface FormRadioArgs {
   label?: string;
@@ -20,8 +19,6 @@ interface FormRadioArgs {
 }
 
 export default class FormRadio extends Component<FormRadioArgs> {
-  @tracked isFocused = false;
-
   @action handleChange(value: unknown, event: Event): void {
     event.preventDefault();
 
@@ -33,14 +30,4 @@ export default class FormRadio extends Component<FormRadioArgs> {
       this.args._parentOnChange(value, event);
     }
   }
-
-  @action handleFocusIn(event: FocusEvent): void {
-    if (event.relatedTarget !== null) {
-      this.isFocused = true;
-    }
-  }
-
-  @action handleFocusOut(_: FocusEvent): void {
-    this.isFocused = false;
-  }
 }

packages/forms/addon/components/form-select.hbs

@@ -1,7 +1,7 @@
 <FormField
   @isSmall={{@isSmall}}
   @isLarge={{@isLarge}}
-  class="form-select-container {{@containerClass}} {{if @isSmall "form-select-container-sm" (if @isLarge "form-select-container-lg")}}"
+  class="form-select-container {{@containerClass}} {{if @isSmall "form-select-container--sm" (if @isLarge "form-select-container--lg")}}"
   as |f|
 >
 

packages/forms/addon/components/form-textarea.hbs

@@ -1,7 +1,7 @@
 <FormField
   @isSmall={{@isSmall}}
   @isLarge={{@isLarge}}
-  class="form-textarea-container {{@containerClass}} {{if @isSmall "form-textarea-container-sm" (if @isLarge "form-textarea-container-lg")}}"
+  class="form-textarea-container {{@containerClass}} {{if @isSmall "form-textarea-container--sm" (if @isLarge "form-textarea-container--lg")}}"
   as |f|
 >
   {{#if @label}}