From 73ffe277293f3aee1b4fb705384a00e574c327dd Mon Sep 17 00:00:00 2001
From: lynamemi <lynam.emily@gmail.com>
Date: Wed, 4 Apr 2018 11:02:54 -0700
Subject: [PATCH 1/3] Getting rid of extra asterisks

---
 .../src/components/DatePicker/DatePicker.tsx  | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
index 1241004c36f47..9087b8af23ee2 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/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({

From fa73509f515d731a980368dd6158b86b011d7e98 Mon Sep 17 00:00:00 2001
From: lynamemi <lynam.emily@gmail.com>
Date: Wed, 4 Apr 2018 11:06:58 -0700
Subject: [PATCH 2/3] New required example and example styling

---
 .../DatePicker/examples/DatePicker.Basic.Example.tsx   |  3 ++-
 .../DatePicker/examples/DatePicker.Bounded.Example.tsx |  3 ++-
 .../DatePicker/examples/DatePicker.Examples.scss       | 10 ++++++++++
 .../DatePicker/examples/DatePicker.Format.Example.tsx  |  3 ++-
 .../DatePicker/examples/DatePicker.Input.Example.tsx   |  3 ++-
 .../examples/DatePicker.Required.Example.tsx           |  6 ++++--
 .../examples/DatePicker.WeekNumbers.Example.tsx        |  3 ++-
 7 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Examples.scss

diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx
index bd227563e07b3..d26c13367926c 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx
+++ b/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 }
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx
index 33d6890745785..32123e505eefc 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx
+++ b/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 }
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Examples.scss b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Examples.scss
new file mode 100644
index 0000000000000..be9bf4b6554bb
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx
index dc5214e4c6e8c..b47e2b3af5962 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx
+++ b/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
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx
index 96c3c405341eb..b9d7a52ada4ee 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx
+++ b/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'
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx
index 211e0976099ba..266741888f34f 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx
+++ b/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>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx
index faf76a96af85f..393ae9ed5224a 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx
+++ b/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'

From 180bdefd87792c2e8e966fbd713062ce393cd602 Mon Sep 17 00:00:00 2001
From: lynamemi <lynam.emily@gmail.com>
Date: Wed, 4 Apr 2018 11:09:26 -0700
Subject: [PATCH 3/3] Added change file

---
 .../picker-required_2018-04-04-18-09.json             | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/picker-required_2018-04-04-18-09.json

diff --git a/common/changes/office-ui-fabric-react/picker-required_2018-04-04-18-09.json b/common/changes/office-ui-fabric-react/picker-required_2018-04-04-18-09.json
new file mode 100644
index 0000000000000..0ad9845b4dff3
--- /dev/null
+++ b/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"
+}
\ No newline at end of file