Fix/form check layouts (#224)

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,15 +16,14 @@ input {
 }
 
 .form-check {
-  display: block;
+  display: flex;
   margin-bottom: var(--sgds-spacer-2);
   min-height: 2rem;
 }
 
 .form-check .form-check-input {
   margin-right: var(--sgds-form-input-margin-right);
 }
-
 .form-check-input {
   appearance: none;
   background-color: var(--sgds-form-bg);
@@ -69,11 +68,11 @@ 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 {
-  display: inline-block;
+  display: inline-flex;
   vertical-align: text-top;
   margin-right: var(--sgds-form-inline-margin-right);
   margin-bottom: 0;

src/components/Input/sgds-input.ts

@@ -181,7 +181,7 @@ export class SgdsInput extends SgdsElement implements SgdsFormControl {
       ${this._renderFeedback()} `;
   }
   protected _renderFeedback() {
-    return this.hasFeedback
+    return this.hasFeedback && this.invalid
       ? html`<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
       : "";
   }

src/components/Radio/radio.css

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

src/components/Radio/sgds-radio-group.ts

@@ -227,7 +227,7 @@ export class SgdsRadioGroup extends SgdsElement {
           tabindex="-1"
           @invalid=${(e: Event) => this._handleInvalid(e)}
         />
-        ${this.hasFeedback ? html`<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
+        ${this.hasFeedback && this.invalid ? html`<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
       </fieldset>
     `;
   }

src/components/Textarea/sgds-textarea.ts

@@ -211,7 +211,7 @@ export class SgdsTextarea extends SgdsElement implements SgdsFormControl {
       >
       </textarea>
 
-      ${this.hasFeedback
+      ${this.hasFeedback && this.invalid
         ? html`<div id="${this.textareaId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
         : ""}
     `;

src/styles/feedback.css

@@ -1,10 +1,5 @@
 .invalid-feedback {
   color: var(--sgds-form-invalid-color);
-  display: none;
   font-size: var(--sgds-form-feedback-font-size);
   width: 100%;
 }
-.is-invalid ~ .invalid-feedback,
-.was-validated :invalid ~ .invalid-feedback {
-  display: block;
-}

stories/templates/Checkbox/basic.js

@@ -16,6 +16,10 @@ export const Template = args => {
       ?isInline=${args.isInline}
       >Check me</sgds-checkbox
     >
+    <sgds-checkbox
+      >Lorem ipsum dolor sit amet. Et itaque natus sit laborum voluptatem aut rerum ducimus eum tenetur molestias quo
+      reiciendis ratione aut eaque voluptates est</sgds-checkbox
+    >
   `;
 };
 export const args = {

test/checkbox.test.ts

@@ -20,7 +20,7 @@ describe("<sgds-checkbox>", () => {
   });
 
   it("id attribute should contain in .invalid-feedback id attribute", async () => {
-    const el = await fixture(html`<sgds-checkbox hasFeedback></sgds-checkbox>`);
+    const el = await fixture(html`<sgds-checkbox hasFeedback invalid></sgds-checkbox>`);
     const input = el.shadowRoot?.querySelector("input");
     const feedback = el.shadowRoot?.querySelector(".invalid-feedback");
     expect(feedback?.getAttribute("id")).to.contain(input?.getAttribute("id"));
@@ -59,7 +59,7 @@ describe("<sgds-checkbox>", () => {
   });
 
   it("if class input is .is-invalid, feedback el should contain .invalid-feedback", async () => {
-    const el = await fixture(html`<sgds-checkbox hasFeedback invalidFeedback="test"></sgds-checkbox>`);
+    const el = await fixture(html`<sgds-checkbox hasFeedback invalidFeedback="test" invalid></sgds-checkbox>`);
     const checkbox = el.shadowRoot?.querySelector("div.invalid-feedback");
     expect(checkbox?.textContent).to.equal("test");
   });

test/input.element.test.ts

@@ -33,13 +33,13 @@ describe("sgds-input", () => {
     const input = el.shadowRoot?.querySelector("input");
     const label = el.shadowRoot?.querySelector("label");
     const small = el.shadowRoot?.querySelector("small");
-    const feedback = el.shadowRoot?.querySelector(".invalid-feedback");
+    expect(input?.getAttribute("aria-labelledby")).not.to.contain("-invalid");
     expect(input?.getAttribute("aria-labelledby")).to.contain(label?.getAttribute("id"));
     expect(input?.getAttribute("aria-labelledby")).to.contain(small?.getAttribute("id"));
-    expect(input?.getAttribute("aria-labelledby")).not.to.contain(feedback?.getAttribute("id"));
 
     el.invalid = true;
     await elementUpdated(el);
+    const feedback = el.shadowRoot?.querySelector(".invalid-feedback");
     expect(input?.getAttribute("aria-labelledby")).to.contain(feedback?.getAttribute("id"));
   });
 
@@ -127,7 +127,7 @@ describe("sgds-input", () => {
 describe("Feedback UI optional", () => {
   it("when hasFeedback is true, div.invalid-feedback appears in shadowDOM", async () => {
     const el = await fixture<SgdsInput>(
-      html` <sgds-input hasFeedback invalidFeedback="invalid feedback"></sgds-input> `
+      html` <sgds-input hasFeedback invalidFeedback="invalid feedback" invalid></sgds-input> `
     );
     expect(el.shadowRoot?.querySelector("div.invalid-feedback")).not.to.be.null;
     expect(el.shadowRoot?.querySelector("div.invalid-feedback")?.textContent).to.equal("invalid feedback");

test/radio.test.ts

@@ -136,13 +136,15 @@ describe("<sgds-radio-group>", () => {
         </sgds-radio-group>
       `
     );
+    el.invalid = true;
+    await el.updateComplete;
     const invalidFeedback = el.shadowRoot?.querySelector("div.invalid-feedback");
     expect(invalidFeedback?.textContent).to.equal("");
   });
   it("invalidFeedback sets the feedback message", async () => {
     const el = await fixture<SgdsRadioGroup>(
       html`
-        <sgds-radio-group id="radio-group" hasFeedback invalidFeedback="test">
+        <sgds-radio-group id="radio-group" hasFeedback invalidFeedback="test" invalid>
           <sgds-radio id="radio2" value="2">two</sgds-radio>
         </sgds-radio-group>
       `

test/textarea.test.ts

@@ -32,7 +32,7 @@ describe("sgds-textarea", () => {
     expect(label?.getAttribute("for")).to.equal(textarea?.getAttribute("id"));
   });
   it("when invalid feedback element is in shadowm dom, its div id should contain same id value as textarea", async () => {
-    const el = await fixture<SgdsTextarea>(html` <sgds-textarea hasFeedback></sgds-textarea> `);
+    const el = await fixture<SgdsTextarea>(html` <sgds-textarea hasFeedback invalid></sgds-textarea> `);
     const feedback = el.shadowRoot?.querySelector("div.invalid-feedback");
     const textarea = el.shadowRoot?.querySelector("textarea");
     expect(feedback?.getAttribute("id")).to.contain(textarea?.getAttribute("id"));
@@ -56,12 +56,12 @@ describe("sgds-textarea", () => {
     expect(submitHandler).to.have.been.calledOnce;
   });
   it("when hasFeedback is true, div.invalid-feedback appears", async () => {
-    const el = await fixture<SgdsTextarea>(html` <sgds-textarea label="Name" hasFeedback></sgds-textarea> `);
+    const el = await fixture<SgdsTextarea>(html` <sgds-textarea label="Name" hasFeedback invalid></sgds-textarea> `);
     expect(el.shadowRoot?.querySelector("div.invalid-feedback")).to.exist;
   });
   it("when hasFeedback is true, div.invalid-feedback appears and invalidFeedback value is forwarded to it", async () => {
     const el = await fixture<SgdsTextarea>(html`
-      <sgds-textarea label="Name" hasFeedback invalidFeedback="teast"></sgds-textarea>
+      <sgds-textarea label="Name" hasFeedback invalid invalidFeedback="teast"></sgds-textarea>
     `);
     expect(el.shadowRoot?.querySelector("div.invalid-feedback")).to.exist;
     expect(el.shadowRoot?.querySelector("div.invalid-feedback")?.textContent).to.equal("teast");
@@ -157,7 +157,7 @@ describe("when maxlength is declared", () => {
 describe("Feedback UI optional", () => {
   it("when hasFeedback is true, div.invalid-feedback appears in shadowDOM", async () => {
     const el = await fixture<SgdsTextarea>(
-      html` <sgds-textarea hasFeedback invalidFeedback="invalid feedback"></sgds-textarea> `
+      html` <sgds-textarea hasFeedback invalidFeedback="invalid feedback" invalid></sgds-textarea> `
     );
     expect(el.shadowRoot?.querySelector("div.invalid-feedback")).not.to.be.null;
     expect(el.shadowRoot?.querySelector("div.invalid-feedback")?.textContent).to.equal("invalid feedback");