DatePicker MergeStyles step 2 - Converts scss to js styles

common/changes/office-ui-fabric-react/datepicker-mergestyles-step-2_2018-06-27-22-54.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DatePicker MergeStyles step 2 - Converts scss to js styles",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-jescla@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx

@@ -1,15 +1,21 @@
 import * as React from 'react';
-import { IDatePicker, IDatePickerProps, IDatePickerStrings } from './DatePicker.types';
+import {
+  IDatePicker,
+  IDatePickerProps,
+  IDatePickerStrings,
+  IDatePickerStyleProps,
+  IDatePickerStyles
+} from './DatePicker.types';
+import { BaseComponent, KeyCodes, createRef, classNamesFunction } from '../../Utilities';
 import { Calendar, ICalendar, DayOfWeek } from '../../Calendar';
 import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { TextField, ITextField } from '../../TextField';
-import { BaseComponent, KeyCodes, css, createRef } from '../../Utilities';
 import { compareDates, compareDatePart } from '../../utilities/dateMath/DateMath';
-import * as stylesImport from './DatePicker.scss';
 import { FocusTrapZone } from '../../FocusTrapZone';
-const styles: any = stylesImport;
+
+const getClassNames = classNamesFunction<IDatePickerStyleProps, IDatePickerStyles>();
 
 export interface IDatePickerState {
   selectedDate?: Date;
@@ -145,6 +151,9 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
       firstDayOfWeek,
       strings,
       label,
+      theme,
+      className,
+      styles,
       initialPickerDate,
       isRequired,
       disabled,
@@ -153,19 +162,25 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
       placeholder,
       allowTextInput,
       borderless,
-      className,
       minDate,
       maxDate,
       calendarProps
     } = this.props;
     const { isDatePickerShown, formattedDate, selectedDate, errorMessage } = this.state;
 
+    const classNames = getClassNames(styles, {
+      theme: theme!,
+      className,
+      disabled,
+      label: !!label,
+      isDatePickerShown
+    });
+
     return (
-      <div className={css('ms-DatePicker', styles.root, isDatePickerShown && 'is-open', className)}>
+      <div className={classNames.root}>
         <div ref={this._datePickerDiv}>
           <TextField
             label={label}
-            className={styles.textField}
             ariaLabel={ariaLabel}
             aria-haspopup="true"
             aria-expanded={isDatePickerShown}
@@ -182,11 +197,7 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
             iconProps={{
               iconName: 'Calendar',
               onClick: this._onIconClick,
-              className: css(
-                disabled && styles.msDatePickerDisabled,
-                label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label',
-                label ? styles.eventWithLabel : styles.eventWithoutLabel
-              )
+              className: classNames.icon
             }}
             readOnly={!allowTextInput}
             value={formattedDate}
@@ -199,7 +210,7 @@ export class DatePickerBase extends BaseComponent<IDatePickerProps, IDatePickerS
             role="dialog"
             ariaLabel={pickerAriaLabel}
             isBeakVisible={false}
-            className={css('ms-DatePicker-callout')}
+            className={classNames.callout}
             gapSpace={0}
             doNotLayer={false}
             target={this._datePickerDiv.current}

packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts

@@ -1,17 +1,59 @@
 import { IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types';
+import { IStyle, normalize, getGlobalClassNames, FontSizes } from '../../Styling';
 
-export const getStyles = (props: IDatePickerStyleProps): IDatePickerStyles => {
-  const { className } = props;
+const GlobalClassNames = {
+  root: 'ms-DatePicker',
+  callout: 'ms-DatePicker-callout',
+  withLabel: 'ms-DatePicker-event--with-label',
+  withoutLabel: 'ms-DatePicker-event--without-label',
+  disabled: 'msDatePickerDisabled '
+};
+
+export const styles = (props: IDatePickerStyleProps): IDatePickerStyles => {
+  const { className, theme, disabled, label, isDatePickerShown } = props;
+  const { palette } = theme;
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
+  const DatePickerEvent: IStyle = {
+    color: palette.neutralSecondary,
+    fontSize: FontSizes.icon,
+    lineHeight: '18px',
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: '9px'
+  };
 
   return {
-    root: [
-      'ms-DatePicker',
+    root: [classNames.root, isDatePickerShown && 'is-open', normalize, className],
+    textField: [
       {
-        // Insert css properties
-      },
-      className
+        position: 'relative',
+        selectors: {
+          '& input[readonly]': {
+            cursor: 'pointer'
+          },
+          input: {
+            selectors: {
+              '::-ms-clear': {
+                display: 'none'
+              }
+            }
+          }
+        }
+      }
+    ],
+    callout: [classNames.callout],
+    icon: [
+      DatePickerEvent,
+      !label && [classNames.withoutLabel, { top: '7px' }],
+      label && [classNames.withLabel, { bottom: '5px' }],
+      !disabled && [
+        classNames.disabled,
+        {
+          pointerEvents: 'initial',
+          cursor: 'pointer'
+        }
+      ]
     ]
-
-    // Insert className styles
   };
 };

packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 import { Calendar, ICalendarStrings } from '../Calendar';
+import { DatePicker } from './DatePicker';
 import { DatePickerBase } from './DatePicker.base';
 import { IDatePickerStrings } from './DatePicker.types';
 import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
@@ -9,7 +10,7 @@ import { shallow, mount, ReactWrapper } from 'enzyme';
 describe('DatePicker', () => {
   it('renders default DatePicker correctly', () => {
     // This will only render the input. Calendar component has its own snapshot.
-    const component = renderer.create(<DatePickerBase />);
+    const component = renderer.create(<DatePicker />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });

packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx

@@ -1,14 +1,14 @@
 import { styled } from '../../Utilities';
 import { IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types';
 import { DatePickerBase } from './DatePicker.base';
-import { getStyles } from './DatePicker.styles';
+import { styles } from './DatePicker.styles';
 
 /**
  * DatePicker description
  */
 export const DatePicker = styled<IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles>(
   DatePickerBase,
-  getStyles,
+  styles,
   undefined,
   { scope: 'DatePicker' }
 );

packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts

@@ -275,13 +275,17 @@ export interface IDatePickerStyleProps {
   className?: string;
 
   // Insert DatePicker style props below
+  disabled?: boolean;
+  label?: boolean;
+  isDatePickerShown?: boolean;
 }
 
 export interface IDatePickerStyles {
   /**
    * Style for the root element.
    */
   root: IStyle;
-
-  // Insert DatePicker classNames below
+  textField: IStyle;
+  callout: IStyle;
+  icon: IStyle;
 }

packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap

@@ -2,7 +2,20 @@
 
 exports[`DatePicker renders default DatePicker correctly 1`] = `
 <div
-  className="ms-DatePicker"
+  className=
+      ms-DatePicker
+      {
+        box-shadow: none;
+        box-sizing: border-box;
+        margin-bottom: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+        margin-top: 0px;
+        padding-bottom: 0px;
+        padding-left: 0px;
+        padding-right: 0px;
+        padding-top: 0px;
+      }
 >
   <div>
     <div
@@ -40,14 +53,23 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
             aria-hidden={true}
             className=
                 ms-DatePicker-event--without-label
+                msDatePickerDisabled
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  cursor: pointer;
                   display: inline-block;
                   font-family: "FabricMDL2Icons";
+                  font-size: 16px;
                   font-style: normal;
                   font-weight: normal;
+                  line-height: 18px;
+                  pointer-events: initial;
+                  position: absolute;
+                  right: 9px;
                   speak: none;
+                  top: 7px;
                 }
             data-icon-name="Calendar"
             onClick={[Function]}

packages/office-ui-fabric-react/src/components/__snapshots__/DatePicker.Basic.Example.tsx.shot

@@ -5,7 +5,20 @@ exports[`Component Examples renders DatePicker.Basic.Example.tsx correctly 1`] =
   className="docs-DatePickerExample"
 >
   <div
-    className="ms-DatePicker"
+    className=
+        ms-DatePicker
+        {
+          box-shadow: none;
+          box-sizing: border-box;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+        }
   >
     <div>
       <div
@@ -43,14 +56,23 @@ exports[`Component Examples renders DatePicker.Basic.Example.tsx correctly 1`] =
               aria-hidden={true}
               className=
                   ms-DatePicker-event--without-label
+                  msDatePickerDisabled
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
+                    color: #666666;
+                    cursor: pointer;
                     display: inline-block;
                     font-family: "FabricMDL2Icons";
+                    font-size: 16px;
                     font-style: normal;
                     font-weight: normal;
+                    line-height: 18px;
+                    pointer-events: initial;
+                    position: absolute;
+                    right: 9px;
                     speak: none;
+                    top: 7px;
                   }
               data-icon-name="Calendar"
               onClick={[Function]}