fix(checkbox, radio): layout of label against input

Author: clukhei

index.html

@@ -669,9 +669,14 @@ <h2>Button</h2>
             <div>
                 <h2>Checkbox</h2>
                 <form id="radio-submit">
-                <sgds-checkbox id="hehe" isInline invalid hasFeedback invalidFeedback="test">1</sgds-checkbox>
-                <sgds-checkbox hasFeedback isInline>2</sgds-checkbox>
-                <sgds-checkbox isInline>3</sgds-checkbox>
+                <sgds-checkbox id="hehe" invalid hasFeedback invalidFeedback="invalid hello where is my invlaid">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                    soluta eaque fugit fuga distinctio? EumLorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                    soluta eaque fugit fuga distinctio? EumLorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                    soluta eaque fugit fuga distinctio? EumLorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                    soluta eaque fugit fuga distinctio? EumLorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                    soluta eaque fug</sgds-checkbox>
+                <sgds-checkbox hasFeedback >2</sgds-checkbox>
+                <sgds-checkbox >3</sgds-checkbox>
                 <sgds-switch  invalid checked hasFeedback>test</sgds-switch>
                 <sgds-button  type="submit" >Submit</sgds-button>
             </form>
@@ -687,9 +692,13 @@ <h2>Radiogroup</h2>
                 <form id="radio-submit">
                     <sgds-radio-group required hasFeedback invalidFeedback="This is required" >
                         <span slot="label">Select an option</span>
-                        <sgds-radio disabled isInline value="1" >Option 1</sgds-radio>
-                        <sgds-radio isInline value="2"  >Option 2</sgds-radio>
-                        <sgds-radio isInline value="3" >Option 3</sgds-radio>
+                        <sgds-radio disabled  value="1" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                            soluta eaque fugit fuga distinctio? EumLorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                            soluta eaque fugit fuga distinctio? EumLorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                            soluta eaque fugit fuga distinctio? EumLorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+                            soluta eaque fugit fuga distinctio? EumLorem ipsum dolor sit amet consectetur adipisicing elit. Maiores</sgds-radio>
+                        <sgds-radio  value="2"  >Option 2</sgds-radio>
+                        <sgds-radio  value="3" >Option 3</sgds-radio>
                     </sgds-radio-group>
                     <sgds-button  type="submit" >Submit</sgds-button>
                 </form>

src/base/form-check-element.ts

@@ -134,12 +134,14 @@ export class FormCheckElement extends SgdsElement implements SgdsFormControl {
           @keydown=${this._handleKeyDown}
           @invalid=${(e: Event) => this._handleInvalid(e)}
         />
-        <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
-          ><slot></slot
-        ></label>
-        ${this.hasFeedback
-          ? html`<div id="${this._inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
-          : nothing}
+        <div class="form-check-label-container">
+          <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
+            ><slot></slot
+          ></label>
+          ${this.hasFeedback && this.invalid
+            ? html`<div id="${this._inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
+            : nothing}
+        </div>
       </div>
     `;
   }

src/components/Checkbox/checkbox.css

@@ -16,14 +16,19 @@ input {
 }
 
 .form-check {
-  display: block;
+  display: flex;
   margin-bottom: var(--sgds-spacer-2);
   min-height: 2rem;
+  flex-direction: row;
 }
 
 .form-check .form-check-input {
   margin-right: var(--sgds-form-input-margin-right);
 }
+.form-check-label-container{
+  display: flex;
+  flex-direction: column;
+}
 
 .form-check-input {
   appearance: none;
@@ -69,7 +74,7 @@ input {
 .form-check-input.is-invalid:focus {
   box-shadow: var(--sgds-form-focus-invalid-box-shadow);
 }
-.form-check-input.is-invalid ~ .form-check-label {
+.form-check-input.is-invalid ~ .form-check-label-container > .form-check-label {
   color: var(--sgds-form-invalid-color);
 }
 .form-check-inline {

src/components/Radio/radio.css

@@ -15,9 +15,10 @@ input {
 }
 
 .form-check {
-  display: block;
+  display: flex;
   margin-bottom: var(--sgds-spacer-2);
   min-height: 2rem;
+  flex-direction: row;
 }
 
 .form-check .form-check-input {

src/styles/feedback.css

@@ -1,6 +1,5 @@
 .invalid-feedback {
   color: var(--sgds-form-invalid-color);
-  display: none;
   font-size: var(--sgds-form-feedback-font-size);
   width: 100%;
 }