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 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 - { label && ( - - ) }
+
+

{ description }

+

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 ( -

+

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.

+

Validation will happen when Date Picker loses focus.

- + +
); } 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 ( -
+