form item default layout

Author: nielslyngsoe

packages/uui-form-item/lib/uui-form-item.element.ts

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
 // TODO: Make sure validation messages can be seen for the whole Form Item. Make them follow the screen if form controls are taller than available screen height.
@@ -15,13 +16,64 @@ export class UUIFormItemElement extends LitElement {
   static styles = [
     css`
       :host {
-        /* Styles goes here */
+        position: relative;
+        display: block;
+        margin-top: var(--uui-size-space-5);
+        margin-bottom: var(--uui-size-space-5);
+      }
+      #label {
+        margin-top: -5px;
+        margin-bottom: 5px;
+      }
+      #description {
+        color: var(--uui-interface-contrast-disabled);
+        font-size: var(--uui-type-small-size);
+      }
+      #label + #description {
+        margin-top: -8px;
+        min-height: 8px;
       }
     `,
   ];
+  /*
+  @property({type: String})
+  label: string | null = null;
+  */
+
+  @property({ type: String })
+  description: string | null = null;
+
+  @state()
+  private _labelSlotHasContent = false;
+
+  private _labelSlotChanged = (e: Event) => {
+    this._labelSlotHasContent =
+      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
+  };
+
+  @state()
+  private _descriptionSlotHasContent = false;
+
+  private _descriptionSlotChanged = (e: Event) => {
+    this._descriptionSlotHasContent =
+      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
+  };
 
   render() {
     return html`
+      <div id="label" style=${this._labelSlotHasContent ? '' : 'display: none'}>
+        <slot name="label" @slotchange=${this._labelSlotChanged}></slot>
+      </div>
+      <div
+        id="description"
+        style=${this._descriptionSlotHasContent || this.description !== null
+          ? ''
+          : 'display: none'}>
+        ${this.description}
+        <slot
+          name="description"
+          @slotchange=${this._descriptionSlotChanged}></slot>
+      </div>
       <uui-form-validation-message>
         <slot></slot>
         <slot name="message" slot="message"></slot>

packages/uui-form-item/lib/uui-form-item.story.ts

@@ -20,11 +20,14 @@ export const Overview: Story = () => html`
   </uui-form-item>
 `;
 
-export const MultipleInputs: Story = () => html` <form
+export const Example: Story = () => html` <form
   is="uui-form"
   style="max-width: 800px;">
   <uui-form-item>
     <uui-label slot="label" for="phoneInput" required>Phone number</uui-label>
+    <span slot="description"
+      >Form item accepts a description, keep it short.</span
+    >
     <div>
       <uui-input
         id="phoneInput"
@@ -44,7 +47,31 @@ export const MultipleInputs: Story = () => html` <form
       </uui-input>
     </div>
   </uui-form-item>
-
+  <uui-form-item>
+    <uui-label slot="label" for="cityinput">City</uui-label>
+    <span slot="description"></span>
+    <div>
+      <uui-input
+        id="cityinput"
+        type="text"
+        name="phone"
+        placeholder=""
+        required
+        required-message="You must enter a city">
+      </uui-input>
+    </div>
+  </uui-form-item>
+  <uui-form-item>
+    <div>
+      <uui-input
+        type="text"
+        name="postal"
+        placeholder=""
+        required
+        required-message="You must enter a postal number">
+      </uui-input>
+    </div>
+  </uui-form-item>
   <uui-button type="submit" label="Submit" look="positive"> Submit </uui-button>
 
   <uui-button type="reset" label="Reset" look="secondary"> Reset </uui-button>