TASK: Fix some polyfil issue and code cleanup

src/components/button/styles/button.dark.scss

@@ -7,80 +7,81 @@
   font-weight: 400;
   font-size: $font-size-dark-base;
   line-height: 1.1;
-}
-
-::slotted(neos-icon) {
-  margin-right: $content-margin-small;
-}
-
-button {
-  background-color: neos-color($colors-dark, 'neutral');
-  border: 0;
-  color: neos-color($colors-dark, 'neutral', 'contrast');
 
-  padding: 0 $content-padding;
-  margin: 0;
-
-  &:focus:enabled,
-  &:hover:enabled {
-    background-color: neos-color($colors-dark, 'primary', 'shade');
+  ::slotted(neos-icon) {
+    margin-right: $content-margin-small;
   }
 
-  &.t-clean {
-    background-color: neos-color($colors-dark, 'success');
+  button {
+    background-color: neos-color($colors-dark, 'neutral');
+    border: 0;
+    color: neos-color($colors-dark, 'neutral', 'contrast');
+
+    padding: 0 $content-padding;
+    margin: 0;
 
     &:focus:enabled,
     &:hover:enabled {
-      background-color: neos-color($colors-dark, 'success', 'shade');
+      background-color: neos-color($colors-dark, 'primary', 'shade');
     }
-  }
 
-  &.t-brand {
-    background-color: neos-color($colors-dark, 'primary');
+    &.t-clean {
+      background-color: neos-color($colors-dark, 'success');
 
-    &:focus:enabled,
-    &:hover:enabled {
-      background-color: neos-color($colors-dark, 'primary', 'shade');
+      &:focus:enabled,
+      &:hover:enabled {
+        background-color: neos-color($colors-dark, 'success', 'shade');
+      }
     }
-  }
 
-  &.t-lighter {
-    background-color: neos-color($colors-dark, 'secondary');
+    &.t-brand {
+      background-color: neos-color($colors-dark, 'primary');
 
-    &:focus:enabled,
-    &:hover:enabled {
-      background-color: neos-color($colors-dark, 'secondary', 'shade');
+      &:focus:enabled,
+      &:hover:enabled {
+        background-color: neos-color($colors-dark, 'primary', 'shade');
+      }
     }
-  }
 
-  &.t-transparent {
-    background-color: transparent;
+    &.t-lighter {
+      background-color: neos-color($colors-dark, 'secondary');
 
-    &:focus:enabled,
-    &:hover:enabled {
-      background-color: neos-color($colors-dark, 'primary', 'shade');
+      &:focus:enabled,
+      &:hover:enabled {
+        background-color: neos-color($colors-dark, 'secondary', 'shade');
+      }
     }
-  }
 
-  &.t-warn {
-    background-color: neos-color($colors-dark, 'warning');
+    &.t-transparent {
+      background-color: transparent;
 
-    &:focus:enabled,
-    &:hover:enabled {
-      background-color: neos-color($colors-dark, 'warning', 'shade');
+      &:focus:enabled,
+      &:hover:enabled {
+        background-color: neos-color($colors-dark, 'primary', 'shade');
+      }
     }
-  }
 
-  &.l-squared {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: $grid-unit;
-    width: $grid-unit;
-  }
+    &.t-warn {
+      background-color: neos-color($colors-dark, 'warning');
+
+      &:focus:enabled,
+      &:hover:enabled {
+        background-color: neos-color($colors-dark, 'warning', 'shade');
+      }
+    }
 
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: .65;
+    &.l-squared {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: $grid-unit;
+      width: $grid-unit;
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      opacity: .65;
+    }
   }
+
 }

src/components/dropdown-item/styles/dropdown-item.dark.scss

@@ -7,31 +7,33 @@
   font-weight: 400;
   font-size: $font-size-dark-base;
   line-height: 1.1;
-}
 
-.dropdown-item {
-  display: flex;
-  background-color: $background-dark-color;
-  border: 0;
-  outline: 1px solid neos-color($colors-dark, 'darker');
-  box-sizing: content-box;
-  color: inherit;
-  padding: 0 0 0 $content-padding;
-  text-decoration: none;
-
-  &:hover {
-    background-color: neos-color($colors-dark, 'primary');
+  .dropdown-item {
+    display: flex;
+    background-color: $background-dark-color;
+    border: 0;
+    outline: 1px solid neos-color($colors-dark, 'darker');
+    box-sizing: content-box;
+    color: inherit;
+    padding: 0 0 0 $content-padding;
+    text-decoration: none;
+
+    &:hover {
+      background-color: neos-color($colors-dark, 'primary');
+    }
   }
-}
 
-.icon {
-  margin-right: .65em;
-}
+  .icon {
+    margin-right: .65em;
+  }
 
-.toggle {
-  margin-left: auto;
-}
+  .toggle {
+    margin-left: auto;
+  }
 
-.selected-value {
+  .selected-value {
 
+  }
 }
+
+

src/components/dropdown-item/styles/dropdown-item.scss

@@ -4,14 +4,15 @@
   @include font-smoothing();
 
   display: block;
-}
 
-.dropdown-item {
-  flex: 1;
-  border: 0;
-  box-sizing: border-box;
-  height: $grid-unit;
-  line-height: $grid-unit;
+  .dropdown-item {
+    flex: 1;
+    border: 0;
+    box-sizing: border-box;
+    height: $grid-unit;
+    line-height: $grid-unit;
+
+    transition: all ease-in 50ms;
+  }
 
-  transition: all ease-in 50ms;
 }

src/components/dropdown/dropdown.tsx

@@ -38,24 +38,25 @@ export class Dropdown {
     return (
       <div>
         <neos-form-input-wrapper label={this.label}>
-          <slot name="metadata"/>
-        </neos-form-input-wrapper>
-        <div class={this.wrapperClassName()}>
-          <a href="#" class="dropdown" onClick={(e) => this.toggle(e)}>
-            <div class="icon">
-              <neos-icon name="file"/>
-            </div>
-            <div class="selected-label">{this.activeLabel ? this.activeLabel : this.placeholder}</div>
-            <div class="toggle">
-              <neos-button squared theme="transparent">
-                <neos-icon name="chevron-down" type="solid"></neos-icon>
-              </neos-button>
+          <slot name="metadata" slot="metadata"/>
+          <slot name="before" slot="before"/>
+          <div className={this.wrapperClassName()}>
+            <a href="#" className="dropdown" onClick={(e) => this.toggle(e)}>
+              <div className="icon">
+                <neos-icon name="file"/>
+              </div>
+              <div className="selected-label">{this.activeLabel ? this.activeLabel : this.placeholder}</div>
+              <div className="toggle">
+                <neos-button squared theme="transparent">
+                  <neos-icon name="chevron-down" type="solid"></neos-icon>
+                </neos-button>
+              </div>
+            </a>
+            <div className="dropdown-list">
+              <slot/>
             </div>
-          </a>
-          <div class="dropdown-list">
-            <slot />
           </div>
-        </div>
+        </neos-form-input-wrapper>
       </div>
     );
   }

src/components/dropdown/styles/dropdown.dark.scss

@@ -7,52 +7,53 @@
   font-weight: 400;
   font-size: $font-size-dark-base;
   line-height: 1.1;
-}
 
-.dropdown-wrapper {
-  position: relative;
 
-  &--open {
-    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-    .dropdown-list {
+  .dropdown-wrapper {
+    position: relative;
+
+    &--open {
       box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-      max-height: 350px;
+      .dropdown-list {
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+        max-height: 350px;
+      }
     }
   }
-}
 
-.dropdown {
-  display: flex;
-  background-color: $background-dark-color;
-  border: 0;
-  outline: 1px solid neos-color($colors-dark, 'darker');
-  box-sizing: content-box;
-  color: inherit;
-  padding: 0 0 0 $content-padding;
-  margin: $content-margin-medium 0 $content-margin-small;
-  text-decoration: none;
-}
+  .dropdown {
+    display: flex;
+    background-color: $background-dark-color;
+    border: 0;
+    outline: 1px solid neos-color($colors-dark, 'darker');
+    box-sizing: content-box;
+    color: inherit;
+    padding: 0 0 0 $content-padding;
+    text-decoration: none;
+    height: $grid-unit;
+  }
 
-.dropdown-list {
-  position: absolute;
-  top: 44px;
-  left: 0;
-  right: 0;
-  z-index: 10;
+  .dropdown-list {
+    position: absolute;
+    top: 44px;
+    left: 0;
+    right: 0;
+    z-index: 10;
 
-  transition: max-height 200ms ease-in-out;
-  max-height: 0;
-  overflow: hidden;
-}
+    transition: max-height 200ms ease-in-out;
+    max-height: 0;
+    overflow: hidden;
+  }
 
-.icon {
-  margin-right: .65em;
-}
+  .icon {
+    margin-right: .65em;
+  }
 
-.toggle {
-  margin-left: auto;
-}
+  .toggle {
+    margin-left: auto;
+  }
 
-.selected-value {
+  .selected-value {
 
+  }
 }

src/components/dropdown/styles/dropdown.scss

@@ -4,14 +4,19 @@
   @include font-smoothing();
 
   display: block;
-}
 
-.dropdown {
-  flex: 1;
-  border: 0;
-  box-sizing: border-box;
-  height: $grid-unit;
-  line-height: $grid-unit;
+  .dropdown-wrapper {
+    flex: 1;
+  }
+
+  .dropdown {
+    flex: 1;
+    border: 0;
+    box-sizing: border-box;
+    height: $grid-unit;
+    line-height: $grid-unit;
+
+    transition: all ease-in 80ms;
+  }
 
-  transition: all ease-in 80ms;
 }

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

@@ -22,5 +22,6 @@
     display: flex;
     align-items: center;
     flex: 1 0 100%;
+    margin-top: $content-margin-medium;
   }
 }

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

@@ -2,9 +2,10 @@
 
 :host {
   @include font-smoothing();
-}
 
-.label-wrapper {
-  display: flex;
-  align-items: flex-end;
+  .label-wrapper {
+    display: flex;
+    align-items: flex-end;
+  }
+
 }

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

@@ -251,7 +251,7 @@ export class FormInput {
       <label>
         <neos-form-input-wrapper label={this.label}>
           <slot name="metadata" slot="metadata"/>
-          <slot name="before"/>
+          <slot name="before" slot="before"/>
           <input
             ref={input => this.nativeInput = input as any}
             aria-disabled={this.disabled ? 'true' : false}
@@ -283,7 +283,7 @@ export class FormInput {
             onFocus={this.onFocus.bind(this)}
             onKeyDown={this.inputKeydown.bind(this)}
           />
-          <slot name="after"/>
+          <slot name="after" slot="after"/>
         </neos-form-input-wrapper>
       </label>
     );

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

@@ -8,54 +8,54 @@
   font-size: $font-size-dark-base;
   line-height: 1.1;
   margin-bottom: $content-dark-margin;
-}
-
-.input ::slotted(neos-icon:first-child) {
-  margin-right: 4px;
-}
 
-.input ::slotted(neos-icon:last-child) {
-  margin-left: 4px;
-}
-
-.input ::slotted(neos-button:first-child) {
-  margin-right: 4px;
-}
+  .input ::slotted(neos-icon:first-child) {
+    margin-right: 4px;
+  }
 
-.input ::slotted(neos-button:last-child) {
-  margin-left: 4px;
-}
+  .input ::slotted(neos-icon:last-child) {
+    margin-left: 4px;
+  }
 
-.metadata ::slotted(neos-badge) {
-  margin-right: 0;
-  margin-left: 4px;
-}
+  .input ::slotted(neos-button:first-child) {
+    margin-right: 4px;
+  }
 
-input {
-  background-color: $background-dark-color;
-  border: 0;
-  outline: 1px solid transparent;
-  outline-offset: 0;
-  box-sizing: content-box;
-  color: inherit;
-
-  padding: 0 $content-padding;
-  margin: $content-margin-medium 0;
-
-  &:focus:enabled,
-  &:hover:enabled {
-    outline: 2px solid neos-color($colors-dark, 'primary');
-    outline-offset: -2px;
+  .input ::slotted(neos-button:last-child) {
+    margin-left: 4px;
   }
 
-  &:focus:enabled {
-    background-color: neos-color($colors-dark, 'brightest');
-    color: neos-color($colors-dark, 'brightest', 'contrast');
-    outline: 2px solid neos-color($colors-dark, 'brightest');
+  .metadata ::slotted(neos-badge) {
+    margin-right: 0;
+    margin-left: 4px;
   }
 
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: .85;
+  input {
+    background-color: $background-dark-color;
+    border: 0;
+    outline: 1px solid transparent;
+    outline-offset: 0;
+    box-sizing: content-box;
+    color: inherit;
+
+    padding: 0 $content-padding;
+    margin: $content-margin-medium 0;
+
+    &:focus:enabled,
+    &:hover:enabled {
+      outline: 2px solid neos-color($colors-dark, 'primary');
+      outline-offset: -2px;
+    }
+
+    &:focus:enabled {
+      background-color: neos-color($colors-dark, 'brightest');
+      color: neos-color($colors-dark, 'brightest', 'contrast');
+      outline: 2px solid neos-color($colors-dark, 'brightest');
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+      opacity: .85;
+    }
   }
 }

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

@@ -4,20 +4,21 @@
   @include font-smoothing();
 
   display: block;
-}
 
-input {
-  flex: 1;
-  width: 100%;
-  border: 0;
-  box-sizing: border-box;
-  height: $grid-unit;
-  line-height: $grid-unit;
+  input {
+    flex: 1;
+    width: 100%;
+    border: 0;
+    box-sizing: border-box;
+    height: $grid-unit;
+    line-height: $grid-unit;
+    margin: 0;
 
-  transition: all ease-in 180ms;
-}
+    transition: all ease-in 180ms;
+  }
 
-.input {
-  display: flex;
-  align-items: center;
+  .input {
+    display: flex;
+    align-items: center;
+  }
 }

src/index.html

@@ -43,8 +43,7 @@
 <body style="background-color: #222222; padding: 2rem;">
 
 <p class="disclaimer">This project is experimental and not an official Neos CMS project</p>
-
-<section>
+<section role="presentation">
   <header>
     <h1>neos-form-input</h1>
   </header>
@@ -52,26 +51,44 @@
   <neos-form-input label="Canonical title" placeholder="Help editor to fill me..."></neos-form-input>
   <neos-form-input label="URI Path Segment" value="nice-title-to-master-your-seo-skills" placeholder="Help editor to fill me..."></neos-form-input>
 </section>
-
-<section>
+<section role="presentation">
   <header>
     <h1>neos-form-dropdown</h1>
   </header>
-  <neos-dropdown label="Type" icon="file" selected-label="Page">
-    <neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
-    <neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
-    <neos-dropdown-item label="Contact"></neos-dropdown-item>
-    <neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
-    <neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
-    <neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
-  </neos-dropdown>
+  <section role="presentation">
+    <header>
+      <h2>default</h2>
+    </header>
+    <neos-dropdown label="Type" icon="file" selected-label="Page">
+      <neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
+      <neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
+      <neos-dropdown-item label="Contact"></neos-dropdown-item>
+      <neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
+      <neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
+      <neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
+    </neos-dropdown>
+  </section>
+  <section role="presentation">
+    <header>
+      <h2>prefixed</h2>
+    </header>
+    <neos-dropdown label="Type" icon="file" selected-label="Page">
+      <neos-icon squared name="link" type="solid" theme="success" slot="before"></neos-icon>
+      <neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
+      <neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
+      <neos-dropdown-item label="Contact"></neos-dropdown-item>
+      <neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
+      <neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
+      <neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
+    </neos-dropdown>
+  </section>
 </section>
 
-<section>
+<section role="presentation">
   <header>
     <h1>neos-badge</h1>
   </header>
-  <section>
+  <section role="presentation">
     <header>
       <h2>default</h2>
     </header>
@@ -88,11 +105,11 @@
   </section>
 </section>
 
-<section>
+<section role="presentation">
   <header>
     <h1>neos-button</h1>
   </header>
-  <section>
+  <section role="presentation">
     <header>
       <h2>default</h2>
     </header>
@@ -102,7 +119,7 @@
     <neos-button theme="warn">Delete</neos-button>
     <neos-button theme="warn" disabled>Delete</neos-button>
   </section>
-  <section>
+  <section role="presentation">
     <header>
       <h2>with icon</h2>
     </header>
@@ -127,7 +144,7 @@
       Delete
     </neos-button>
   </section>
-  <section>
+  <section role="presentation">
     <header>
       <h2>squared</h2>
     </header>
@@ -149,7 +166,7 @@
   </section>
 </section>
 
-<section>
+<section role="presentation">
   <header>
     <h1>neos-icon</h1>
   </header>
@@ -162,7 +179,7 @@
     <neos-icon name="edit"></neos-icon>
     <neos-icon name="edit" type="solid"></neos-icon>
   </section>
-  <section>
+  <section role="presentation">
     <header>
       <h2>squared</h2>
     </header>
@@ -173,11 +190,11 @@
   </section>
 </section>
 
-<section>
+<section role="presentation">
   <header>
     <h1>neos-toolbar</h1>
   </header>
-  <section>
+  <section role="presentation">
     <header>
       <h2>default</h2>
     </header>
@@ -206,7 +223,7 @@
       </neos-button>
     </neos-toolbar>
   </section>
-  <section>
+  <section role="presentation">
     <header>
       <h2>with dark theme</h2>
     </header>
@@ -237,11 +254,11 @@
   </section>
 </section>
 
-<section>
+<section role="presentation">
   <header>
     <h1>neos-inspector-group</h1>
   </header>
-  <section>
+  <section role="presentation">
     <header>
       <h2>default</h2>
     </header>