TASK: Refactor form input and improve dropdown

src/components.d.ts

@@ -188,30 +188,30 @@ declare global {
 declare global {
 
   namespace StencilComponents {
-    interface NeosFormInputLabel {
+    interface NeosFormInputWrapper {
       'label': string;
     }
   }
 
-  interface HTMLNeosFormInputLabelElement extends StencilComponents.NeosFormInputLabel, HTMLStencilElement {}
+  interface HTMLNeosFormInputWrapperElement extends StencilComponents.NeosFormInputWrapper, HTMLStencilElement {}
 
-  var HTMLNeosFormInputLabelElement: {
-    prototype: HTMLNeosFormInputLabelElement;
-    new (): HTMLNeosFormInputLabelElement;
+  var HTMLNeosFormInputWrapperElement: {
+    prototype: HTMLNeosFormInputWrapperElement;
+    new (): HTMLNeosFormInputWrapperElement;
   };
   interface HTMLElementTagNameMap {
-    'neos-form-input-label': HTMLNeosFormInputLabelElement;
+    'neos-form-input-wrapper': HTMLNeosFormInputWrapperElement;
   }
   interface ElementTagNameMap {
-    'neos-form-input-label': HTMLNeosFormInputLabelElement;
+    'neos-form-input-wrapper': HTMLNeosFormInputWrapperElement;
   }
   namespace JSX {
     interface IntrinsicElements {
-      'neos-form-input-label': JSXElements.NeosFormInputLabelAttributes;
+      'neos-form-input-wrapper': JSXElements.NeosFormInputWrapperAttributes;
     }
   }
   namespace JSXElements {
-    export interface NeosFormInputLabelAttributes extends HTMLAttributes {
+    export interface NeosFormInputWrapperAttributes extends HTMLAttributes {
       'label'?: string;
     }
   }

src/components/dropdown/dropdown.tsx

@@ -37,9 +37,9 @@ export class Dropdown {
   render() {
     return (
       <div>
-        <neos-form-input-label label={this.label}>
+        <neos-form-input-wrapper label={this.label}>
           <slot name="metadata"/>
-        </neos-form-input-label>
+        </neos-form-input-wrapper>
         <div class={this.wrapperClassName()}>
           <a href="#" class="dropdown" onClick={(e) => this.toggle(e)}>
             <div class="icon">

src/components/form-input-label/form-input-label.tsx

-import {Component, Prop} from '@stencil/core';
-
-@Component({
-  tag: 'neos-form-input-label',
-  styleUrl: 'styles/form-input-label.dark.scss',
-  shadow: true
-})
-export class FormInputLabel {
-
-  @Prop() label: string;
-
-  render() {
-    return (
-      <div class="label">
-        <neos-label label={this.label}></neos-label>
-        <div class="metadata">
-          <slot/>
-        </div>
-      </div>
-    );
-  }
-}

src/components/form-input-label/styles/form-input-label.dark.scss

-@import "./form-input-label";
-@import "./form-input-label.dark.vars";
-
-:host {
-  color: $text-dark-color-value;
-  font-family: $font-family-dark-base;
-  font-weight: 400;
-  font-size: $font-size-dark-base;
-  line-height: 1.1;
-
-  .metadata {
-    margin-left: auto;
-  }
-}

src/components/form-input-label/styles/form-input-label.dark.vars.scss

-@import "../../../themes/neos.globals.dark";
-

src/components/form-input-label/styles/form-input-label.scss

-@import "./form-input-label.vars";
-
-:host {
-  @include font-smoothing();
-}
-
-.label {
-  display: flex;
-  align-items: flex-end;
-}

src/components/form-input-label/styles/form-input-label.vars.scss

-@import "../../../themes/neos.globals";

src/components/form-input/form-input.tsx

@@ -249,9 +249,9 @@ export class FormInput {
   render() {
     return (
       <label>
-        <neos-form-input-label label={this.label}>
+        <neos-form-input-wrapper label={this.label}>
           <slot name="metadata"/>
-        </neos-form-input-label>
+        </neos-form-input-wrapper>
         <div class="input">
           <slot name="before"/>
           <input

src/index.html

@@ -21,11 +21,11 @@
       text-transform: lowercase;
       opacity: .6;
     }
-    section {
+    section[role=presentation] {
       border-top: 4px solid white;
       margin-bottom: 40px;
     }
-    section section {
+    section[role=presentation] section[role=presentation] {
       border-top: 0;
       margin-bottom: 20px;
     }
@@ -153,7 +153,7 @@
   <header>
     <h1>neos-icon</h1>
   </header>
-  <section>
+  <section role="presentation">
     <header>
       <h2>default</h2>
     </header>