DatePicker: Required field asterisk bug fix

common/changes/office-ui-fabric-react/picker-required_2018-04-04-18-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DatePicker: Remove extra asterisks, includes using TextField's label.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "lynam.emily@gmail.com"
+}

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

@@ -12,7 +12,6 @@ import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { TextField, ITextField } from '../../TextField';
-import { Label } from '../../Label';
 import {
   BaseComponent,
   KeyCodes,
@@ -153,10 +152,10 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
       return;
     }
 
-    let errorMessage = (isRequired && !value) ? (strings!.isRequiredErrorMessage || '*') : undefined;
+    let errorMessage = (isRequired && !value) ? (strings!.isRequiredErrorMessage || ' ') : undefined;
 
     if (!errorMessage && value) {
-      errorMessage = this._isDateOutOfBounds(value!, minDate, maxDate) ? strings!.isOutOfBoundsErrorMessage || '*' : undefined;
+      errorMessage = this._isDateOutOfBounds(value!, minDate, maxDate) ? strings!.isOutOfBoundsErrorMessage || ' ' : undefined;
     }
 
     // Set error message
@@ -206,11 +205,9 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
 
     return (
       <div className={ css('ms-DatePicker', styles.root, isDatePickerShown && 'is-open', className) }>
-        { label && (
-          <Label required={ isRequired }>{ label }</Label>
-        ) }
         <div ref={ this._datePickerDiv }>
           <TextField
+            label={ label }
             className={ styles.textField }
             ariaLabel={ ariaLabel }
             aria-haspopup='true'
@@ -338,7 +335,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
       const { isRequired, value, strings } = this.props;
 
       this.setState({
-        errorMessage: (isRequired && !value) ? (strings!.isRequiredErrorMessage || '*') : undefined,
+        errorMessage: (isRequired && !value) ? (strings!.isRequiredErrorMessage || ' ') : undefined,
         formattedDate: newValue
       });
     }
@@ -434,9 +431,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     // Check when DatePicker is a required field but has NO input value
     if (isRequired && !inputValue) {
       this.setState({
-        // Since fabic react doesn't have loc support yet
-        // use the symbol '*' to represent error message
-        errorMessage: strings!.isRequiredErrorMessage || '*'
+        errorMessage: strings!.isRequiredErrorMessage || ' '
       });
       return;
     }
@@ -464,14 +459,14 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
             }
 
             this.setState({
-              errorMessage: strings!.invalidInputErrorMessage || '*'
+              errorMessage: strings!.invalidInputErrorMessage || ' '
             });
 
           } else {
             // Check against optional date boundaries
             if (this._isDateOutOfBounds(date, minDate, maxDate)) {
               this.setState({
-                errorMessage: strings!.isOutOfBoundsErrorMessage || '*'
+                errorMessage: strings!.isOutOfBoundsErrorMessage || ' '
               });
             } else {
               this.setState({

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
+import './DatePicker.Examples.scss';
 
 const DayPickerStrings: IDatePickerStrings = {
   months: [
@@ -77,7 +78,7 @@ export class DatePickerBasicExample extends React.Component<{}, IDatePickerBasic
     const { firstDayOfWeek } = this.state;
 
     return (
-      <div>
+      <div className='docs-DatePickerExample'>
         <DatePicker
           firstDayOfWeek={ firstDayOfWeek }
           strings={ DayPickerStrings }

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

@@ -5,6 +5,7 @@ import {
   IDatePickerStrings
 } from 'office-ui-fabric-react/lib/DatePicker';
 import { addMonths, addYears } from '../../../utilities/dateMath/DateMath';
+import './DatePicker.Examples.scss';
 
 const today: Date = new Date(Date.now());
 const minDate: Date = addMonths(today, -1);
@@ -93,7 +94,7 @@ export class DatePickerBoundedExample extends React.Component<{}, IDatePickerReq
     const { firstDayOfWeek } = this.state;
 
     return (
-      <div>
+      <div className='docs-DatePickerExample'>
         <p>{ description }</p>
         <DatePicker
           isRequired={ false }

packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Examples.scss

@@ -0,0 +1,10 @@
+@import '../../../common/_variables';
+
+:global {
+  .docs-DatePickerExample {
+    .ms-DatePicker, .ms-Dropdown {
+      margin: 0 0 15px 0;
+      max-width: $maxFieldWidth;
+    }
+  }
+}

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

@@ -5,6 +5,7 @@ import {
   DayOfWeek,
   IDatePickerStrings
 } from 'office-ui-fabric-react/lib/DatePicker';
+import './DatePicker.Examples.scss';
 
 const DayPickerStrings: IDatePickerStrings = {
   months: [
@@ -83,7 +84,7 @@ export class DatePickerFormatExample extends React.Component<
     const desc =
       'This field is required. One of the support input formats is year dash month dash day.';
     return (
-      <div>
+      <div className='docs-DatePickerExample'>
         <p>
           Applications can customize how dates are formatted and parsed.
           Formatted dates can be ambiguous, so the control will avoid parsing

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
+import './DatePicker.Examples.scss';
 
 const DayPickerStrings: IDatePickerStrings = {
   months: [
@@ -84,7 +85,7 @@ export class DatePickerInputExample extends React.Component<{}, IDatePickerInput
     const { firstDayOfWeek, value } = this.state;
     const desc = 'This field is required. One of the support input formats is year dash month dash day.';
     return (
-      <div>
+      <div className='docs-DatePickerExample'>
         <p>Text input allowed by default when use keyboard navigation. Mouse click the TextField will popup DatePicker, click the TextField again will dismiss the DatePicker and allow text input.</p>
         <DatePicker
           label='Start date'

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

@@ -4,6 +4,7 @@ import {
   DayOfWeek,
   IDatePickerStrings
 } from 'office-ui-fabric-react/lib/DatePicker';
+import './DatePicker.Examples.scss';
 
 const DayPickerStrings: IDatePickerStrings = {
   months: [
@@ -84,9 +85,10 @@ export class DatePickerRequiredExample extends React.Component<{}, IDatePickerRe
     const { firstDayOfWeek } = this.state;
 
     return (
-      <div>
+      <div className='docs-DatePickerExample'>
         <p>Validation will happen when Date Picker loses focus.</p>
-        <DatePicker label='Date required' isRequired={ true } firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />
+        <DatePicker label='Date required (with label)' isRequired={ true } firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />
+        <DatePicker isRequired={ true } firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Date required with no label...' />
       </div>
     );
   }

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
+import './DatePicker.Examples.scss';
 
 const DayPickerStrings: IDatePickerStrings = {
   months: [
@@ -77,7 +78,7 @@ export class DatePickerWeekNumbersExample extends React.Component<{}, IDatePicke
     const { firstDayOfWeek } = this.state;
 
     return (
-      <div>
+      <div className='docs-DatePickerExample'>
         <DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } showWeekNumbers={ true } firstWeekOfYear={ 1 } showMonthPickerAsOverlay={ true } placeholder='Select a date...' />
         <Dropdown
           label='Select the first day of the week'