Dzearing component css form

common/changes/component-css-form_2017-02-21-04-37.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Checkbox, Choicegroup, Icon, Image, ColorPicker, MarqueeSelection, Layer, Dropdown, TextField, Slider, Spinner, ProgressIndicator, and Rating all updated to use css modules.",
+      "type": "patch"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}

packages/office-ui-fabric-react/gulpfile.js

@@ -22,6 +22,9 @@ build.typescript.setConfig({ typescript: require('typescript') });
 // Use css modules.
 build.sass.setConfig({ useCSSModules: true });
 
+// Use Karma Tests - Disable during develoment if prefered
+build.karma.isEnabled = () => true;
+
 // Disable unnecessary subtasks.
 build.preCopy.isEnabled = () => false;
 build.postCopy.isEnabled = () => isProduction;
@@ -62,4 +65,4 @@ build.task('tslint', build.tslint);
 build.task('ts', build.typescript);
 
 // initialize tasks.
-build.initialize(gulp);
+build.initialize(gulp);

packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.scss

@@ -32,198 +32,195 @@ $ms-checkbox-highContrast-iconBoxSize: 16px;
   }
 }
 
-:global {
-
-  .ms-Checkbox {
-    box-sizing: border-box;
-    color: $ms-color-neutralPrimary;
-    font-family: $ms-font-family-base;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    min-height: 36px;
-    position: relative;
-
-    .ms-Label {
-      font-size: $ms-font-size-m;
-      @include padding(0, 0, 0, 26px);
-      display: inline-block;
-    }
-  }
+.root {
+  box-sizing: border-box;
+  color: $ms-color-neutralPrimary;
+  font-family: $ms-font-family-base;
+  font-size: $ms-font-size-m;
+  font-weight: $ms-font-weight-regular;
+  min-height: 36px;
+  position: relative;
+}
 
-  // The hidden input
-  .ms-Checkbox-input {
-    position: absolute;
-    opacity: 0;
-    top: 8px
-  }
+.textLabel {
+  font-size: $ms-font-size-m;
+  @include padding(0, 0, 0, 26px);
+  display: inline-block;
+  font-size: $ms-font-size-m;
+}
 
-  // The checkbox square container
-  .ms-Checkbox-label::before {
-    content: '';
-    display: inline-block;
-    border: 1px solid $ms-color-neutralTertiary;
-    width: $ms-checkbox-label-size;
-    height: $ms-checkbox-label-size;
-    font-weight: normal;
-    position: absolute;
-    box-sizing: border-box;
-    transition-property: background, border, border-color;
-    transition-duration: $ms-checkbox-transition-duration;
-    transition-timing-function: $ms-checkbox-transition-timing;
-  }
+// The hidden input
+.input {
+  position: absolute;
+  opacity: 0;
+  top: 8px
+}
 
-  // The check mark icon
-  .ms-Checkbox-label::after {
-    @include ms-Icon--CheckMark;
-    font-family: 'FabricMDL2Icons';
-    display: none;
-    position: absolute;
-    font-weight: 900;
-    background-color: transparent;
-    font-size: $ms-font-size-s-plus;
-    top: 0;
-    color: $ms-color-white;
-    line-height: $ms-checkbox-label-size;
-    width: $ms-checkbox-label-size;
-    text-align: center;
-  }
+// The checkbox square container
+.label::before {
+  content: '';
+  display: inline-block;
+  border: 1px solid $ms-color-neutralTertiary;
+  width: $ms-checkbox-label-size;
+  height: $ms-checkbox-label-size;
+  font-weight: normal;
+  position: absolute;
+  box-sizing: border-box;
+  transition-property: background, border, border-color;
+  transition-duration: $ms-checkbox-transition-duration;
+  transition-timing-function: $ms-checkbox-transition-timing;
+}
 
-  // The checkbox label
-  .ms-Checkbox-label {
-    display: inline-block;
-    cursor: pointer;
-    margin-top: 8px;
-    position: relative;
-    vertical-align: top;
-    user-select: none;
-    min-width: $ms-checkbox-label-size;
-    min-height: $ms-checkbox-label-size;
-    line-height: $ms-checkbox-label-size;
-
-    &:hover {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+// The check mark icon
+.label::after {
+  @include ms-Icon--CheckMark;
+  font-family: 'FabricMDL2Icons';
+  display: none;
+  position: absolute;
+  font-weight: 900;
+  background-color: transparent;
+  font-size: $ms-font-size-s-plus;
+  top: 0;
+  color: $ms-color-white;
+  line-height: $ms-checkbox-label-size;
+  width: $ms-checkbox-label-size;
+  text-align: center;
+}
 
-      .ms-Label {
-        color: $ms-color-black;
-      }
+// The checkbox label
+.label {
+  display: inline-block;
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+  vertical-align: top;
+  user-select: none;
+  min-width: $ms-checkbox-label-size;
+  min-height: $ms-checkbox-label-size;
+  line-height: $ms-checkbox-label-size;
+
+  &:hover {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
     }
 
-    &:focus {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+    .textLabel {
+      color: $ms-color-black;
+    }
+  }
 
-      &.is-disabled::before {
-        border-color: $ms-color-neutralTertiaryAlt;
-      }
+  &:focus {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
 
-      &.is-checked::before {
-        border-color: $ms-color-themeDarkAlt;
-      }
+    &.labelIsDisabled::before {
+      border-color: $ms-color-neutralTertiaryAlt;
     }
 
-    &:active {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+    &.labelIsChecked::before {
+      border-color: $ms-color-themeDarkAlt;
+    }
+  }
 
-      .ms-Label {
-        color: $ms-color-black;
-      }
+  &:active {
+    &::before {
+      border-color: $ms-color-neutralSecondaryAlt;
     }
 
-    //== State: A checkbox is checked
-    //
-    &.is-checked {
-      &::before {
-        border: 10px solid $ms-color-themePrimary;
-        background-color: $ms-color-themePrimary;
+    .textLabel {
+      color: $ms-color-black;
+    }
+  }
 
-        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
-          display: none;
-        }
-      }
+  //== State: A checkbox is checked
+  //
+  &.labelIsChecked {
+    &::before {
+      border: 10px solid $ms-color-themePrimary;
+      background-color: $ms-color-themePrimary;
 
-      &::after {
-        display: block;
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
+        display: none;
+      }
+    }
 
-        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
-          height: $ms-checkbox-highContrast-iconBoxSize;
-          width: $ms-checkbox-highContrast-iconBoxSize;
-          line-height: $ms-checkbox-highContrast-iconBoxSize;
-        }
+    &::after {
+      display: block;
 
-        @include highContrast-border($ms-color-white, $ms-color-black);
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
+        height: $ms-checkbox-highContrast-iconBoxSize;
+        width: $ms-checkbox-highContrast-iconBoxSize;
+        line-height: $ms-checkbox-highContrast-iconBoxSize;
       }
 
-      &:hover,
-      &:focus {
-        &::before {
-          border-color: $ms-color-themeDarkAlt;
-        }
-      }
+      @include highContrast-border($ms-color-white, $ms-color-black);
     }
 
-    //== State: A disabled checkbox
-    //
-    &.is-disabled {
-      cursor: default;
-
-      &:hover,
-      &:focus {
-        &::before {
-          border-color: $ms-color-neutralTertiaryAlt;
-        }
+    &:hover,
+    &:focus {
+      &::before {
+        border-color: $ms-color-themeDarkAlt;
       }
+    }
+  }
 
+  //== State: A disabled checkbox
+  //
+  &.labelIsDisabled {
+    cursor: default;
+
+    &:hover,
+    &:focus {
       &::before {
-        background-color: $ms-color-neutralTertiaryAlt;
         border-color: $ms-color-neutralTertiaryAlt;
-        color: $ms-color-neutralTertiaryAlt;
       }
+    }
 
-      &::after {
-        @include highContrast-border($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
-        @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
-      }
-
-      .ms-Label {
-        color: $ms-color-neutralTertiary;
-
-        @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
-      }
+    &::before {
+      background-color: $ms-color-neutralTertiaryAlt;
+      border-color: $ms-color-neutralTertiaryAlt;
+      color: $ms-color-neutralTertiaryAlt;
     }
 
-      //== State: A checkbox in focus
-    //
-    &.is-inFocus {
-      &::before {
-        border-color: $ms-color-neutralSecondaryAlt;
-      }
+    &::after {
+      @include highContrast-border($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
+      @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
+    }
 
-      &.is-disabled::before {
-        border-color: $ms-color-neutralTertiaryAlt;
-      }
+    .textLabel {
+      color: $ms-color-neutralTertiary;
 
-      &.is-checked::before {
-        border-color: $ms-color-themeDarkAlt;
-      }
+      @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
     }
   }
 
-  .is-focusVisible .ms-Checkbox.is-inFocus {
+    //== State: A checkbox in focus
+  //
+  &.labelIsInFocus {
     &::before {
-      content: '';
-      position: absolute;
-      top: 0px;
-      bottom: 0px;
-      @include right(0px);
-      @include left(-8px);
-      border: 1px solid $focusedBorderColor;
-      @include highContrast-border($ms-color-white, $ms-color-black, 1px);
+      border-color: $ms-color-neutralSecondaryAlt;
+    }
+
+    &.labelIsDisabled::before {
+      border-color: $ms-color-neutralTertiaryAlt;
+    }
+
+    &.labelIsChecked::before {
+      border-color: $ms-color-themeDarkAlt;
     }
   }
+}
 
-}
+:global(.ms-Fabric.is-focusVisible) .rootIsInFocus {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0;
+    right: 0;
+    border: 1px solid $focusedBorderColor;
+    @include highContrast-border($ms-color-white, $ms-color-black, 1px);
+  }
+}