Merge pull request #648 from lalithkarikelli/surf-1898

refactor(dropdown-select): surf-1898

Author: 100stacks

docs/components/_index.scss

@@ -5,8 +5,8 @@
 /// load styles needed to test component visuals
 @import "checkbox/spec";
 @import "choice-tile/spec";
+@import "dropdown-select/spec";
 @import "menu/spec";
 @import "popover/spec";
 @import "textarea/spec";
 @import "text-input/spec";
-

docs/styles/spec/dropdown-select-spec.less renamed to docs/components/dropdown-select/_spec.scss

@@ -1,32 +1,32 @@
-@import (reference) 'components/dropdown-select/index';
+@import "components/dropdown-select/config";
 
 .dropdown-select-spec {
   hx-select-control {
     /* ----- Pristine --------------- */
     > select.mock-focus {
-      .SelectControl(pristine-focus);
+      @include hxSelectControl($focused: true);
 
       ~ hx-select {
-        .SelectFacade(pristine-focus);
+        @include hxSelectFacade($focused: true);
       }
 
       /* ----- Disabled --------------- */
       &:disabled {
-        .SelectControl(disabled-focus);
+        @include hxSelectControl(disabled, true);
 
         ~ hx-select {
-          .SelectFacade(disabled-focus);
+          @include hxSelectFacade(disabled, true);
         }
       }
     }
 
     /* ----- Invalid ---------------*/
     &.hxInvalid > select.mock-focus:enabled,
     &[hx-dirty] > select.mock-focus:enabled:invalid {
-      .SelectControl(invalid-focus);
+      @include hxSelectControl(invalid, true);
 
       ~ hx-select {
-        .SelectFacade(invalid-focus);
+        @include hxSelectFacade(invalid, true);
       }
     }
   }

docs/docs.less

@@ -44,8 +44,8 @@ iframe[src*="codepen.io"] {
     align-items: center;
     align-content: center;
     flex-grow: 1;
-
-    &:first-child { // brand logo
+    // brand logo
+    &:first-child {
       flex: 0 0 @app-nav-width;
     }
 
@@ -188,7 +188,6 @@ min-version {
   }
 }
 
-
 /* ---------------------------------------- *\
  * HELPERS
 \* ---------------------------------------- */
@@ -202,7 +201,6 @@ min-version {
 @import 'demo/tooltip-docs';
 // Spec Styles
 @import 'spec/button-spec';
-@import 'spec/dropdown-select-spec';
 @import 'spec/file-input-spec';
 @import 'spec/panel-spec';
 @import 'spec/radio-spec';

src/less/components.less

@@ -1,4 +1,4 @@
-@import "vars";
+@import 'vars';
 
 // DEPRECATED! Use SCSS, instead!
 .hxComponent {
@@ -24,5 +24,4 @@
     - NO !important
 \* ========== COMPONENTS ========== */
 @import 'components/button/index';
-@import 'components/dropdown-select/index';
 @import 'components/form/index';

src/less/components/dropdown-select/SelectControl.less

@@ -6,6 +6,7 @@
 @import "checkbox/index";
 @import "choice-tile/index";
 @import "drawer/index";
+@import "dropdown-select/index";
 @import "form/index";
 @import "file/index";
 @import "grid/index";

src/less/components/dropdown-select/SelectFacade.less

@@ -3,37 +3,10 @@
 
 
 /// ========== MIXINS ========== ///
-@import "mixins";
-
-// LESS               SCSS
-// #Reset.select() -> select-reset
-@mixin select-reset {
-  @include appearance(none);
-
-  font: inherit;
-
-  // Firefox
-  // TODO: is this still needed?
-  &:-moz-ui-invalid {
-    box-shadow: none;
-    border: 0;
-    outline: 0;
-  }
-
-  // IE and Edge
-  &::-ms-value {
-    background-color: transparent;
-    color: inherit;
-    padding: 0;
-  }
-
-  &::-ms-expand {
-    background-color: transparent;
-    border: 0;
-    color: inherit;
-    margin: 0;
-  }
-}
+@import "../form/mixins/fieldName";
+@import "./mixins/SelectControl";
+@import "./mixins/SelectFacade";
+@import "./mixins/SelectReset";
 
 
 /// ========== PLACEHOLDERS ========== ///

src/scss/components/_index.scss

@@ -1,9 +1,4 @@
-@import (reference) 'vars';
-
-// ===== MIXINS ==========
-@import (reference) './SelectControl';
-@import (reference) './SelectFacade';
-
+@import "./config";
 
 // ----- BASE ELEMENTS ---------------
 hx-select {
@@ -13,31 +8,31 @@ hx-select {
 
 // ----- RESETS ---------------
 hx-select-control > select {
-  #Reset.select();
+  @include select-reset();
 }
 
 // ----- LAYOUT ---------------
-/*
-    1fr
-  +------------+
-  | label      | auto
-  +------------+
-  | control    | 2rem
-  +------------+
-*/
+///
+///    1fr
+///  +------------+
+///  | label      | auto
+///  +------------+
+///  | control    | 2rem
+///  +------------+
+///
 hx-select-control {
-  @ctrl-columns: 1fr;
-  @ctrl-rows: auto 2rem;
+  $ctrl-columns: 1fr;
+  $ctrl-rows: auto 2rem;
 
-  -ms-grid-columns: @ctrl-columns;
-  -ms-grid-rows: @ctrl-rows;
+  -ms-grid-columns: $ctrl-columns;
+  -ms-grid-rows: $ctrl-rows;
   display: -ms-grid;
   display: grid;
   grid-template-areas:
-    'label'
-    'control';
-  grid-template-columns: @ctrl-columns;
-  grid-template-rows: @ctrl-rows;
+    "label"
+    "control";
+  grid-template-columns: $ctrl-columns;
+  grid-template-rows: $ctrl-rows;
 
   // ----- blacklist -----
   > * {
@@ -46,14 +41,14 @@ hx-select-control {
 
   // ----- whitelist -----
   > label {
-    @justify: start; // don't stretch!
+    $justify: start; // don't stretch!
 
-    -ms-grid-column-align: @justify;
+    -ms-grid-column-align: $justify;
     -ms-grid-column: 1;
     -ms-grid-row: 1;
     display: block;
     grid-area: label;
-    justify-self: @justify;
+    justify-self: $justify;
   }
 
   > select,
@@ -70,74 +65,73 @@ hx-select-control {
     border: none;
     padding-left: 0.75rem;
     width: 100%; // prevent overflow for lengthy option text
-
     // Adjust native trigger for MS browsers (mainly IE)
     // Edge will obscure it with <hx-select>.
-    #MS.set.expand({
+    &::-ms-expand {
       padding: 0 0.75rem;
-    });
+    }
   }
 }
 
 // ----- PRISTINE ---------------
 hx-select-control > select {
-  .SelectControl(pristine);
+  @include hxSelectControl;
 
   ~ label {
-    .FieldName();
+    @include hxFieldName;
   }
 
   ~ hx-select {
-    .SelectFacade(pristine);
+    @include hxSelectFacade;
   }
 
   &:focus {
-    .SelectControl(pristine-focus);
+    @include hxSelectControl($focused: true);
 
     ~ hx-select {
-      .SelectFacade(pristine-focus);
+      @include hxSelectFacade($focused: true);
     }
   }
 }
 
 // ----- DISABLED ---------------
 hx-select-control > select:disabled {
-  .SelectControl(disabled);
+  @include hxSelectControl(disabled);
 
   ~ label {
-    .FieldName(disabled);
+    @include hxFieldName(disabled);
   }
 
   ~ hx-select {
-    .SelectFacade(disabled);
+    @include hxSelectFacade(disabled);
   }
 
   &:focus {
-    .SelectControl(disabled-focus);
+    @include hxSelectControl(disabled, true);
 
     ~ hx-select {
-      .SelectFacade(disabled-focus);
+      @include hxSelectFacade(disabled, true);
     }
   }
 }
 
 // ----- INVALID ---------------
-/*
-  1. Prevent IE from incorrectly matching select:disabled:invalid
-*/
+///
+///  1. Prevent IE from incorrectly matching select:disabled:invalid
+///
 hx-select-control[hx-dirty] > select:enabled:invalid, /* 1 */
 hx-select-control.hxInvalid > select:enabled {
-  .SelectControl(invalid);
+  @include hxSelectControl(invalid);
 
   ~ hx-select {
-    .SelectFacade(invalid);
+    @include hxSelectFacade(invalid);
   }
 
   &:focus {
-    .SelectControl(invalid-focus);
+    @include hxSelectControl(invalid, true);
 
     ~ hx-select {
-      .SelectFacade(invalid-focus);
+      @include hxSelectFacade(invalid, true);
     }
   }
 }