From 4da07da3e5fde70dc7aae79cca44a2b43b374e25 Mon Sep 17 00:00:00 2001 From: John Lorenz Date: Fri, 6 Apr 2018 17:26:14 -0700 Subject: [PATCH 1/7] fixing focusZone algnment issue --- .../src/components/FocusZone/FocusZone.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index 6823e02c0e7b1..0cdfa021fdeaf 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -221,6 +221,7 @@ export class FocusZone extends BaseComponent implements IFo while (parentElement && parentElement !== this._root.value) { if (isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) { this._activeElement = parentElement; + this._setFocusAlignment(this._activeElement); break; } parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement; @@ -696,24 +697,13 @@ export class FocusZone extends BaseComponent implements IFo } private _setFocusAlignment(element: HTMLElement, isHorizontal?: boolean, isVertical?: boolean) { - if (this.props.direction === FocusZoneDirection.bidirectional && - (!this._focusAlignment || isHorizontal || isVertical)) { + if (this.props.direction === FocusZoneDirection.bidirectional) { const rect = element.getBoundingClientRect(); const left = rect.left + (rect.width / 2); const top = rect.top + (rect.height / 2); - if (!this._focusAlignment) { - this._focusAlignment = { left, top }; - } - - if (isHorizontal) { - this._focusAlignment.left = left; - } - - if (isVertical) { - this._focusAlignment.top = top; - } + this._focusAlignment = { left, top }; } } From 30e242ac43a5254046ae3f76b0f0e744df88f3e2 Mon Sep 17 00:00:00 2001 From: John Lorenz Date: Fri, 6 Apr 2018 17:26:43 -0700 Subject: [PATCH 2/7] calendar styling and functionality updates --- .../src/components/Calendar/Calendar.scss | 38 ------------- .../src/components/Calendar/Calendar.types.ts | 5 ++ .../src/components/Calendar/CalendarDay.tsx | 56 +++++++++---------- .../src/components/DatePicker/DatePicker.tsx | 2 +- .../__snapshots__/DatePicker.test.tsx.snap | 2 +- 5 files changed, 33 insertions(+), 70 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss index 5dea7e3f5b337..9da6a18c6216b 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss @@ -185,26 +185,10 @@ $Calendar-dayPicker-margin: 10px; background: $ms-color-neutralLight; } -.dayBackground { - // border-radius: 2px; -} - -.weekBackground { - &:first-child { - // border-radius: 2px 0px 0px 2px; - } - &:last-child { - // border-radius: 0px 2px 2px 0px; - } -} - .showWeekNumbers { .weekNumbers { - position: absolute; - margin-top: $Calendar-day; border-right: 1px solid $ms-color-neutralLight; box-sizing: border-box; - width: 30px; .day { color: $ms-color-neutralSecondary; &.weekIsHighlighted { @@ -213,9 +197,6 @@ $Calendar-dayPicker-margin: 10px; } } .table { - &:not(.weekNumbers) { - margin-left: 30px; - } .day, .weekday { width: 30px; @@ -226,11 +207,8 @@ $Calendar-dayPicker-margin: 10px; // week numbers style in right-to-left view .showWeekNumbersRTL { .weekNumbers { - position: absolute; - margin-top: $Calendar-day; border-left: 1px solid $ms-color-neutralLight; box-sizing: border-box; - width: 30px; .day { color: $ms-color-neutralSecondary; &.weekIsHighlighted { @@ -452,15 +430,7 @@ $Calendar-dayPicker-margin: 10px; padding: 0 3px; } .showWeekNumbers { - .weekNumbers { - margin-top: $Calendar-day; - width: 26px; - margin-left: -7px - } .table { - &:not(.weekNumbers) { - margin-left: 19px; - } .day, .weekday { width: 26px; @@ -468,15 +438,7 @@ $Calendar-dayPicker-margin: 10px; } } // week numbers style in right-to-left view .showWeekNumbersRTL { - .weekNumbers { - margin-top: $Calendar-day; - width: 26px; - margin-right: -7px; - } .table { - &:not(.weekNumbers) { - margin-right: 19px; - } .day, .weekday { width: 26px; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts index e3f731dcea3fb..a74aeae977e96 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts @@ -196,6 +196,11 @@ export interface ICalendarStrings { */ nextYearAriaLabel?: string; + /** + * Aria-label format string for the week number header. Should have 1 string param e.g. "week number {0}" + */ + weekNumberFormatString?: string; + } export interface ICalendarIconStrings { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx index 7907ad60de58e..2225d6714616b 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx @@ -5,7 +5,8 @@ import { css, getId, getRTL, - getRTLSafeKeyCode + getRTLSafeKeyCode, + format } from '../../Utilities'; import { ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from './Calendar.types'; import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues'; @@ -184,33 +185,6 @@ export class CalendarDay extends BaseComponent - { - showWeekNumbers ? - - - { weekNumbers!.map((weekNumber, index) => - - - - ) } - -
-
- { weekNumber } -
-
- : null - } + { showWeekNumbers && { weeks!.map((week, weekIndex) => - + + { showWeekNumbers && weekNumbers && + + } { week.map((day, dayIndex) => { const isNavigatedDate = compareDates(navigatedDate, day.originalDate); return
} { strings.shortDays.map((val, index) =>
+
+ { weekNumbers[weekIndex] } +
+
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..ae4ad5318b104 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx @@ -237,7 +237,7 @@ export class DatePicker extends BaseComponent { isDatePickerShown && ( diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap index 9f3ccff2170c4..e703c4d28e58f 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap @@ -32,7 +32,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = ` placeholder={undefined} readOnly={true} required={false} - role="menu" + role="button" type="text" value="" /> From e5db0acbc78cdb85e1e1c4dd674b832dc2c88e84 Mon Sep 17 00:00:00 2001 From: John Lorenz Date: Mon, 16 Apr 2018 15:48:29 -0700 Subject: [PATCH 3/7] undoing focusZone change --- .../src/components/FocusZone/FocusZone.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index 2e8d52faaec39..37c220e477b26 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -221,7 +221,6 @@ export class FocusZone extends BaseComponent implements IFo while (parentElement && parentElement !== this._root.value) { if (isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) { this._activeElement = parentElement; - this._setFocusAlignment(this._activeElement); break; } parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement; @@ -697,13 +696,24 @@ export class FocusZone extends BaseComponent implements IFo } private _setFocusAlignment(element: HTMLElement, isHorizontal?: boolean, isVertical?: boolean) { - if (this.props.direction === FocusZoneDirection.bidirectional) { + if (this.props.direction === FocusZoneDirection.bidirectional && + (!this._focusAlignment || isHorizontal || isVertical)) { const rect = element.getBoundingClientRect(); const left = rect.left + (rect.width / 2); const top = rect.top + (rect.height / 2); - this._focusAlignment = { left, top }; + if (!this._focusAlignment) { + this._focusAlignment = { left, top }; + } + + if (isHorizontal) { + this._focusAlignment.left = left; + } + + if (isVertical) { + this._focusAlignment.top = top; + } } } From 763af023d992c4584608a14e747b5177eebf304d Mon Sep 17 00:00:00 2001 From: John Lorenz Date: Tue, 17 Apr 2018 15:43:35 -0700 Subject: [PATCH 4/7] initial commit --- .../src/components/Calendar/Calendar.scss | 2 +- .../src/components/Calendar/Calendar.tsx | 4 ++- .../src/components/Calendar/Calendar.types.ts | 6 +++++ .../src/components/Calendar/CalendarMonth.tsx | 5 ++-- .../src/components/Calendar/CalendarPage.tsx | 25 +++++++++++++------ .../examples/Calendar.Button.Example.tsx | 2 ++ .../examples/Calendar.Inline.Example.tsx | 5 +++- .../src/components/DatePicker/DatePicker.tsx | 2 ++ .../components/DatePicker/DatePicker.types.ts | 6 +++++ .../FocusTrapZone/FocusTrapZone.tsx | 6 ++++- 10 files changed, 50 insertions(+), 13 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss index 9da6a18c6216b..b785b8fe6db27 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss @@ -182,7 +182,7 @@ $Calendar-dayPicker-margin: 10px; .dayBackground, .weekBackground, .monthBackground { - background: $ms-color-neutralLight; + background: $ms-color-themeLight; } .showWeekNumbers { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 6d999bf54e92f..148b65bfcc59c 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -63,6 +63,7 @@ export class Calendar extends BaseComponent impl showGoToToday: true, strings: null, highlightCurrentMonth: false, + highlightNavigatedMonth: false, navigationIcons: iconStrings, showWeekNumbers: false, firstWeekOfYear: FirstWeekOfYear.FirstDay, @@ -123,7 +124,7 @@ export class Calendar extends BaseComponent impl public render() { const rootClass = 'ms-DatePicker'; - const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props; + const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, highlightNavigatedMonth, navigationIcons, minDate, maxDate } = this.props; const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state; const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined; const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible; @@ -176,6 +177,7 @@ export class Calendar extends BaseComponent impl onNavigateDate={ this._onNavigateDate } today={ this.props.today } highlightCurrentMonth={ highlightCurrentMonth! } + highlightNavigatedMonth={ highlightNavigatedMonth! } onHeaderSelect={ onHeaderSelect } navigationIcons={ navigationIcons! } dateTimeFormatter={ this.props.dateTimeFormatter! } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts index a74aeae977e96..71807b21ac82f 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts @@ -100,6 +100,12 @@ export interface ICalendarProps extends React.Props { */ highlightCurrentMonth?: boolean; + /** + * Whether the month picker should highlight the selected month + * @defaultvalue false + */ + highlightNavigatedMonth?: boolean; + /** * Customize navigation icons using ICalendarIconStrings */ diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx index c8058f76f7898..129281bfe7a7f 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx @@ -23,6 +23,7 @@ export interface ICalendarMonthProps extends React.Props { onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void; today?: Date; highlightCurrentMonth: boolean; + highlightNavigatedMonth: boolean; onHeaderSelect?: (focus: boolean) => void; navigationIcons: ICalendarIconStrings; dateTimeFormatter: ICalendarFormatDateCallbacks; @@ -54,7 +55,7 @@ export class CalendarMonth extends BaseComponent { public render() { - const { navigatedDate, strings, today, highlightCurrentMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props; + const { navigatedDate, strings, today, highlightCurrentMonth, highlightNavigatedMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props; const leftNavigationIcon = navigationIcons.leftNavigation; const rightNavigationIcon = navigationIcons.rightNavigation; @@ -129,7 +130,7 @@ export class CalendarMonth extends BaseComponent { css('ms-DatePicker-monthOption', styles.monthOption, { ['ms-DatePicker-day--today ' + styles.monthIsCurrentMonth]: highlightCurrentMonth && isCurrentMonth!, - ['ms-DatePicker-day--highlighted ' + styles.monthIsHighlighted]: highlightCurrentMonth && isNavigatedMonth, + ['ms-DatePicker-day--highlighted ' + styles.monthIsHighlighted]: highlightNavigatedMonth && isNavigatedMonth, ['ms-DatePicker-monthOption--disabled ' + styles.monthOptionIsDisabled]: !isInBounds }) } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx index b360902469275..6a13875d8c629 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx @@ -38,7 +38,8 @@ export class CalendarPage extends React.Component > @@ -62,6 +64,8 @@ export class CalendarPage extends React.Component @@ -73,6 +77,8 @@ export class CalendarPage extends React.Component @@ -100,7 +106,8 @@ export class CalendarPage extends React.Component dateRangeType={ DateRangeType.Month } autoNavigateOnSelection={ false } showGoToToday={ true } - highlightCurrentMonth={ true } + highlightCurrentMonth={ false } + highlightNavigatedMonth={ true } isDayPickerVisible={ false } /> @@ -111,7 +118,8 @@ export class CalendarPage extends React.Component dateRangeType={ DateRangeType.WorkWeek } firstDayOfWeek={ DayOfWeek.Monday } autoNavigateOnSelection={ true } - highlightCurrentMonth={ true } + highlightCurrentMonth={ false } + highlightNavigatedMonth={ true } showGoToToday={ true } workWeekDays={ [DayOfWeek.Tuesday, DayOfWeek.Saturday, DayOfWeek.Wednesday, DayOfWeek.Friday] } /> @@ -143,7 +152,8 @@ export class CalendarPage extends React.Component > @@ -153,7 +163,8 @@ export class CalendarPage extends React.Component > diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx index 0bfa49659fd2d..a019c2d46e9e0 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx @@ -69,6 +69,7 @@ export interface ICalendarButtonExampleProps { isDayPickerVisible?: boolean; isMonthPickerVisible?: boolean; highlightCurrentMonth?: boolean; + highlightNavigatedMonth?: boolean; buttonString?: string; showMonthPickerAsOverlay?: boolean; } @@ -125,6 +126,7 @@ export class CalendarButtonExample extends React.Component diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx index d6819cbc42f4c..7e99bd3dcb6b6 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx @@ -58,7 +58,8 @@ const DayPickerStrings = { 'S' ], - goToToday: 'Go to today' + goToToday: 'Go to today', + weekNumberFormatString: 'Week number {0}', }; export interface ICalendarInlineExampleState { @@ -73,6 +74,7 @@ export interface ICalendarInlineExampleProps { showGoToToday: boolean; showNavigateButtons?: boolean; highlightCurrentMonth?: boolean; + highlightNavigatedMonth?: boolean; isDayPickerVisible?: boolean; showMonthPickerAsOverlay?: boolean; showWeekNumbers?: boolean; @@ -140,6 +142,7 @@ export class CalendarInlineExample extends React.Component { */ highlightCurrentMonth?: boolean; + /** + * Whether the month picker should highlight the selected month + * @defaultvalue false + */ + highlightNavigatedMonth?: boolean; + /** * Whether the calendar should show the week number (weeks 1 to 53) before each week row * @defaultvalue false diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx index 3319557f02d33..b47bf2341f4c8 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx @@ -75,7 +75,11 @@ export class FocusTrapZone extends BaseComponent implem } } - if (!ignoreExternalFocusing && this._previouslyFocusedElement && typeof this._previouslyFocusedElement.focus === 'function') { + let focusedElement = document.activeElement as HTMLElement; + if (!ignoreExternalFocusing && + this._previouslyFocusedElement && + typeof this._previouslyFocusedElement.focus === 'function' && + elementContains(this._root.value, focusedElement)) { focusAsync(this._previouslyFocusedElement); } } From 517bdbe407d950052d4a32971db79a1aeeb9839a Mon Sep 17 00:00:00 2001 From: John Lorenz Date: Thu, 19 Apr 2018 16:56:39 -0700 Subject: [PATCH 5/7] making all the styling updates Hiroshi requested --- .../src/components/Calendar/Calendar.scss | 96 ++++++--- .../src/components/Calendar/Calendar.tsx | 7 +- .../src/components/Calendar/Calendar.types.ts | 2 +- .../src/components/Calendar/CalendarDay.tsx | 196 +++++++++++++----- .../src/components/Calendar/CalendarMonth.tsx | 66 +++--- .../src/components/Calendar/CalendarPage.tsx | 18 +- .../examples/Calendar.Button.Example.tsx | 4 +- .../examples/Calendar.Inline.Example.tsx | 4 +- .../src/components/DatePicker/DatePicker.tsx | 4 +- .../components/DatePicker/DatePicker.types.ts | 2 +- 10 files changed, 267 insertions(+), 132 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss index b785b8fe6db27..cf5b50601cdbb 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss @@ -60,27 +60,21 @@ $Calendar-dayPicker-margin: 10px; display: inline-flex; height: $Calendar-day; line-height: 44px; + width: 100%; } // The month and year labels. .monthAndYear, .year { - display: inline-block; - @include ms-font-xl; + display: inline-flex; + flex-grow: 1; + @include ms-font-m; color: $ms-color-neutralPrimary; margin-top: -1px; - font-weight: $ms-font-weight-semilight; + font-weight: $ms-font-weight-semibold; padding: 0 5px; } -.monthAndYear { - @include margin-left(5px); -} - -.year { - @include margin-left(5px); -} - // The calendar table of dates. .table { text-align: center; @@ -135,7 +129,22 @@ $Calendar-dayPicker-margin: 10px; .dayIsFocused:hover, .dayIsUnfocused:hover { cursor: pointer; - background: $ms-color-neutralTertiaryAlt; + background: $ms-color-neutralLight; +} + +.weekHover:hover, .monthHover, .monthHover:hover { + cursor: pointer; + background: $ms-color-neutralLight; +} + +.weekHover:active, .weekHover:active .day, .monthPress, .monthPress:hover { + cursor: pointer; + font-weight: $ms-font-weight-semibold; + background: $ms-color-themeLight; + + .dayIsToday { + background: $ms-color-themePrimary; + } } .day.dayIsHighlighted.dayIsFocused { @@ -155,10 +164,16 @@ $Calendar-dayPicker-margin: 10px; } .dayIsUnfocused:active, +.dayIsFocused:active, +.dayIsHighlighted { + background: $ms-color-themeLight; +} + .dayIsFocused:active, .dayIsHighlighted { &.day { color: $ms-color-black; + font-weight: $ms-font-weight-semibold; background: $ms-color-themeLight; } } @@ -169,20 +184,23 @@ $Calendar-dayPicker-margin: 10px; background: $ms-color-neutralTertiary; } -// Today. -.dayIsToday, -.pickerIsFocused .dayIsToday { - position: relative; - color: $ms-color-white; - background-color: $ms-color-themePrimary; - font-weight: 600; -} - // Highlighted date squares .dayBackground, .weekBackground, .monthBackground { - background: $ms-color-themeLight; + .day { + font-weight: $ms-font-weight-semibold; + background: $ms-color-themeLight; + } +} + +// Today. +.dayIsToday, .dayIsToday, +.pickerIsFocused .dayIsToday, .dayIsToday.day:active { + position: relative; + color: $ms-color-white; + font-weight: $ms-font-weight-semibold; + background: $ms-color-themePrimary; } .showWeekNumbers { @@ -232,11 +250,11 @@ $Calendar-dayPicker-margin: 10px; .yearComponents, .decadeComponents { display: inline-flex; - margin-left: 3px; + align-self: flex-end; } .yearComponents { - margin-left: 3px; + @include margin-right(20px); } .prevMonth, @@ -284,14 +302,15 @@ $Calendar-dayPicker-margin: 10px; // Text showing the currently-selected year. .currentYear, .currentDecade { - display: block; + display: inline-flex; + flex-grow: 1; padding: 0 5px; - @include ms-font-xl; + @include ms-font-m; color: $ms-color-neutralPrimary; height: $Calendar-day; line-height: $Calendar-day; @include margin-left(5px); - font-weight: $ms-font-weight-semilight; + font-weight: $ms-font-weight-semibold; } // A grid of month or year options, which pushes them over @@ -320,7 +339,7 @@ $Calendar-dayPicker-margin: 10px; background-color: transparent; &:hover { color: $ms-color-black; - background-color: $ms-color-neutralTertiaryAlt; + background-color: $ms-color-neutralLight; outline: 1px solid transparent; } &.isHighlighted { @@ -395,6 +414,7 @@ $Calendar-dayPicker-margin: 10px; .header { height: $Calendar-day; line-height: $Calendar-day; + width: 100%; } // Calendar day cells are smaller. .day, .weekday { @@ -530,18 +550,23 @@ $Calendar-dayPicker-margin: 10px; height: auto; } .table { - margin-right: 12px + @include margin-right(12px); } .dayPicker { width: auto; } .monthPicker { - margin-left: 13px; + @include margin-left(13px); } .goToday { @include ms-right(13px); padding: 0 10px; } + .monthComponents, + .yearComponents, + .decadeComponents { + @include margin-right(12px); + } } //when month picker is only visible .monthPickerOnly { .wrap { @@ -599,16 +624,21 @@ $Calendar-dayPicker-margin: 10px; .prevYear { display: inline-block; &:hover { - background-color: $ms-color-neutralTertiaryAlt; + background-color: $ms-color-neutralLight; + } + &:active { + background-color: $ms-color-themeLight; } } .nextMonth, .nextYear { margin-left: 3px; + margin-right: 2px; } .monthIsHighlighted { + font-weight: $ms-font-weight-semibold; background-color: $ms-color-themeLight; &.monthOption:hover { background-color: $ms-color-themeLight; @@ -616,11 +646,11 @@ $Calendar-dayPicker-margin: 10px; } .monthIsCurrentMonth { - font-weight: 600; + font-weight: $ms-font-weight-semibold; color: $ms-color-white; background-color: $ms-color-themePrimary; &.monthOption:hover { - font-weight: 600; + font-weight: $ms-font-weight-semibold; color: $ms-color-white; background-color: $ms-color-themePrimary; } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 148b65bfcc59c..06f840b558cbb 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -63,7 +63,7 @@ export class Calendar extends BaseComponent impl showGoToToday: true, strings: null, highlightCurrentMonth: false, - highlightNavigatedMonth: false, + highlightSelectedMonth: false, navigationIcons: iconStrings, showWeekNumbers: false, firstWeekOfYear: FirstWeekOfYear.FirstDay, @@ -124,7 +124,7 @@ export class Calendar extends BaseComponent impl public render() { const rootClass = 'ms-DatePicker'; - const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, highlightNavigatedMonth, navigationIcons, minDate, maxDate } = this.props; + const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, highlightSelectedMonth, navigationIcons, minDate, maxDate } = this.props; const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state; const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined; const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible; @@ -173,11 +173,12 @@ export class Calendar extends BaseComponent impl { isMonthPickerVisible && { * Whether the month picker should highlight the selected month * @defaultvalue false */ - highlightNavigatedMonth?: boolean; + highlightSelectedMonth?: boolean; /** * Customize navigation icons using ICalendarIconStrings diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx index 2225d6714616b..4b603d201a384 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx @@ -79,10 +79,8 @@ interface IWeekCorners { } export class CalendarDay extends BaseComponent { - public refs: { - [key: string]: React.ReactInstance; - navigatedDay: HTMLElement; - }; + navigatedDay: HTMLElement | null; + days: { [key: string]: HTMLElement | null } = {}; public constructor(props: ICalendarDayProps) { super(props); @@ -131,44 +129,11 @@ export class CalendarDay extends BaseComponent -
-
- - -
-
-
+
{ this.props.onHeaderSelect ?
}
+
+
+ + +
+
) } - + { weeks!.map((week, weekIndex) => - + { showWeekNumbers && weekNumbers && + onMouseUp={ dateRangeType === DateRangeType.Month ? this._onTableMouseUp : undefined } + > { weeks!.map((week, weekIndex) => + className={ (dateRangeType === DateRangeType.Week || dateRangeType === DateRangeType.WorkWeek) ? styles.weekHover : undefined } + > { showWeekNumbers && weekNumbers && - +
@@ -253,7 +255,7 @@ export class CalendarDay extends BaseComponent this.setDayRef(element, day, isNavigatedDate) } + onMouseOver={ dateRangeType === DateRangeType.Month ? this._onDayMouseOver(day.originalDate, weekIndex, dayIndex) : undefined } + onMouseLeave={ dateRangeType === DateRangeType.Month ? this._onDayMouseLeave(day.originalDate, weekIndex, dayIndex) : undefined } + onMouseDown={ dateRangeType === DateRangeType.Month ? this._onDayMouseDown(day.originalDate, weekIndex, dayIndex) : undefined } + onMouseUp={ dateRangeType === DateRangeType.Month ? this._onDayMouseUp(day.originalDate, weekIndex, dayIndex) : undefined } > @@ -278,12 +284,20 @@ export class CalendarDay extends BaseComponent) => void => { + return (ev: React.MouseEvent): void => { + // set the press styling + this._applyFunctionToDayRefs((ref, day) => { + if (ref && day.originalDate.getMonth() == originalDate.getMonth()) { + ref.classList.add(styles.monthPress); + } + }); + }; + } + + private _onDayMouseUp = (originalDate: Date, weekIndex: number, dayIndex: number) + : (ev: React.MouseEvent) => void => { + return (ev: React.MouseEvent): void => { + // remove press styling + this._applyFunctionToDayRefs((ref, day) => { + if (ref && day.originalDate.getMonth() == originalDate.getMonth()) { + ref.classList.remove(styles.monthPress); + } + }); + }; + } + + private _onDayMouseOver = (originalDate: Date, weekIndex: number, dayIndex: number) + : (ev: React.MouseEvent) => void => { + return (ev: React.MouseEvent): void => { + // set the hover styling on every day in the same month + this._applyFunctionToDayRefs((ref, day) => { + if (ref && day.originalDate.getMonth() == originalDate.getMonth()) { + ref.classList.add(styles.monthHover); + } + }); + }; + } + + private _onDayMouseLeave = (originalDate: Date, weekIndex: number, dayIndex: number) + : (ev: React.MouseEvent) => void => { + return (ev: React.MouseEvent): void => { + // remove the hover and pressed styling + this._applyFunctionToDayRefs((ref, day) => { + if (ref && day.originalDate.getMonth() == originalDate.getMonth()) { + ref.classList.remove(styles.monthHover); + } + }); + }; + } + + private _onTableMouseLeave = (ev: React.MouseEvent): void => { + if ((ev.target as HTMLElement).contains && (ev.target as HTMLElement).contains(ev.relatedTarget as HTMLElement)) { + return; + } + + this._applyFunctionToDayRefs((ref, day) => { + if (ref) { + ref.classList.remove(styles.monthHover); + ref.classList.remove(styles.monthPress); + } + }); + } + + private _onTableMouseUp = (ev: React.MouseEvent): void => { + if ((ev.target as HTMLElement).contains && (ev.target as HTMLElement).contains(ev.relatedTarget as HTMLElement)) { + return; + } + + this._applyFunctionToDayRefs((ref, day) => { + if (ref) { + ref.classList.remove(styles.monthPress); + } + }); + } + + private _applyFunctionToDayRefs(func: (ref: HTMLElement | null, day: IDayInfo) => void) { + if (this.state.weeks && this.props.dateRangeType == DateRangeType.Month) { + this.state.weeks.map(week => { + week.map(day => { + const ref = this.days[day.key]; + func(ref, day); + }); + }); + } + } + private _onSelectDate = (selectedDate: Date): void => { const { onSelectDate, @@ -497,7 +595,9 @@ export class CalendarDay extends BaseComponent { componentRef?: (c: ICalendarMonth) => void; navigatedDate: Date; + selectedDate: Date; strings: ICalendarStrings; onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void; today?: Date; highlightCurrentMonth: boolean; - highlightNavigatedMonth: boolean; + highlightSelectedMonth: boolean; onHeaderSelect?: (focus: boolean) => void; navigationIcons: ICalendarIconStrings; dateTimeFormatter: ICalendarFormatDateCallbacks; @@ -55,7 +56,7 @@ export class CalendarMonth extends BaseComponent { public render() { - const { navigatedDate, strings, today, highlightCurrentMonth, highlightNavigatedMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props; + const { navigatedDate, selectedDate, strings, today, highlightCurrentMonth, highlightSelectedMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props; const leftNavigationIcon = navigationIcons.leftNavigation; const rightNavigationIcon = navigationIcons.rightNavigation; @@ -65,34 +66,6 @@ export class CalendarMonth extends BaseComponent { return (
-
-
- - -
-
{ this.props.onHeaderSelect ?
{ { dateTimeFormatter.formatYear(navigatedDate) }
} +
+
+ + +
+
{ const indexedMonth = setMonth(navigatedDate, index); const isCurrentMonth = this._isCurrentMonth(index, navigatedDate.getFullYear(), today!); const isNavigatedMonth = navigatedDate.getMonth() === index; + const isSelectedMonth = selectedDate.getMonth() === index; + const isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear(); const isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) && (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true); @@ -130,7 +133,8 @@ export class CalendarMonth extends BaseComponent { css('ms-DatePicker-monthOption', styles.monthOption, { ['ms-DatePicker-day--today ' + styles.monthIsCurrentMonth]: highlightCurrentMonth && isCurrentMonth!, - ['ms-DatePicker-day--highlighted ' + styles.monthIsHighlighted]: highlightNavigatedMonth && isNavigatedMonth, + ['ms-DatePicker-day--highlighted ' + styles.monthIsHighlighted]: (highlightCurrentMonth && isNavigatedMonth) || + (highlightSelectedMonth && isSelectedMonth && isSelectedYear), ['ms-DatePicker-monthOption--disabled ' + styles.monthOptionIsDisabled]: !isInBounds }) } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx index 6a13875d8c629..f952332d16d50 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx @@ -39,7 +39,7 @@ export class CalendarPage extends React.Component dateRangeType={ DateRangeType.Day } autoNavigateOnSelection={ false } highlightCurrentMonth={ false } - highlightNavigatedMonth={ true } + highlightSelectedMonth={ true } showGoToToday={ true } /> @@ -65,7 +65,7 @@ export class CalendarPage extends React.Component dateRangeType={ DateRangeType.Week } autoNavigateOnSelection={ true } highlightCurrentMonth={ false } - highlightNavigatedMonth={ true } + highlightSelectedMonth={ true } showGoToToday={ true } showNavigateButtons={ true } /> @@ -78,7 +78,7 @@ export class CalendarPage extends React.Component dateRangeType={ DateRangeType.Month } autoNavigateOnSelection={ true } highlightCurrentMonth={ false } - highlightNavigatedMonth={ true } + highlightSelectedMonth={ true } showGoToToday={ true } showNavigateButtons={ true } /> @@ -107,7 +107,7 @@ export class CalendarPage extends React.Component autoNavigateOnSelection={ false } showGoToToday={ true } highlightCurrentMonth={ false } - highlightNavigatedMonth={ true } + highlightSelectedMonth={ true } isDayPickerVisible={ false } /> @@ -119,7 +119,7 @@ export class CalendarPage extends React.Component dateRangeType={ DateRangeType.Day } autoNavigateOnSelection={ true } highlightCurrentMonth={ false } - highlightNavigatedMonth={ true } + highlightSelectedMonth={ true } showGoToToday={ false } minDate={ addMonths(today, -1) } maxDate={ addYears(today, 1) } @@ -134,7 +134,7 @@ export class CalendarPage extends React.Component firstDayOfWeek={ DayOfWeek.Monday } autoNavigateOnSelection={ true } highlightCurrentMonth={ false } - highlightNavigatedMonth={ true } + highlightSelectedMonth={ true } showGoToToday={ true } workWeekDays={ [DayOfWeek.Tuesday, DayOfWeek.Saturday, DayOfWeek.Wednesday, DayOfWeek.Friday] } /> @@ -153,7 +153,7 @@ export class CalendarPage extends React.Component @@ -164,7 +164,7 @@ export class CalendarPage extends React.Component diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx index a019c2d46e9e0..da9f7c46970ce 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx @@ -69,7 +69,7 @@ export interface ICalendarButtonExampleProps { isDayPickerVisible?: boolean; isMonthPickerVisible?: boolean; highlightCurrentMonth?: boolean; - highlightNavigatedMonth?: boolean; + highlightSelectedMonth?: boolean; buttonString?: string; showMonthPickerAsOverlay?: boolean; } @@ -126,7 +126,7 @@ export class CalendarButtonExample extends React.Component diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx index 7e99bd3dcb6b6..72c9532358648 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx @@ -74,7 +74,7 @@ export interface ICalendarInlineExampleProps { showGoToToday: boolean; showNavigateButtons?: boolean; highlightCurrentMonth?: boolean; - highlightNavigatedMonth?: boolean; + highlightSelectedMonth?: boolean; isDayPickerVisible?: boolean; showMonthPickerAsOverlay?: boolean; showWeekNumbers?: boolean; @@ -142,7 +142,7 @@ export class CalendarInlineExample extends React.Component { * Whether the month picker should highlight the selected month * @defaultvalue false */ - highlightNavigatedMonth?: boolean; + highlightSelectedMonth?: boolean; /** * Whether the calendar should show the week number (weeks 1 to 53) before each week row From f6e4f4e170211faecf9aee19619f488fa004e32c Mon Sep 17 00:00:00 2001 From: John Lorenz Date: Thu, 19 Apr 2018 16:57:44 -0700 Subject: [PATCH 6/7] adding change file --- .../jolore-CalendarUpdates_2018-04-19-23-57.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/jolore-CalendarUpdates_2018-04-19-23-57.json diff --git a/common/changes/office-ui-fabric-react/jolore-CalendarUpdates_2018-04-19-23-57.json b/common/changes/office-ui-fabric-react/jolore-CalendarUpdates_2018-04-19-23-57.json new file mode 100644 index 0000000000000..7f476d75b2e1b --- /dev/null +++ b/common/changes/office-ui-fabric-react/jolore-CalendarUpdates_2018-04-19-23-57.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "fixing selection bugs in Calendar component, updating styling for new designs", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jolore@microsoft.com" +} \ No newline at end of file From d3d2c280f576aee0e541a892ebc2c33a04c3d337 Mon Sep 17 00:00:00 2001 From: John Lorenz Date: Fri, 20 Apr 2018 14:30:24 -0700 Subject: [PATCH 7/7] undoing focustrapzone change, updating snapshots --- .../src/components/Calendar/CalendarDay.tsx | 27 +- .../__snapshots__/Calendar.test.tsx.snap | 339 +++++++++++++----- .../FocusTrapZone/FocusTrapZone.tsx | 6 +- 3 files changed, 260 insertions(+), 112 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx index 4b603d201a384..b539eaa0d314b 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx @@ -79,8 +79,8 @@ interface IWeekCorners { } export class CalendarDay extends BaseComponent { - navigatedDay: HTMLElement | null; - days: { [key: string]: HTMLElement | null } = {}; + private navigatedDay: HTMLElement | null; + private days: { [key: string]: HTMLElement | null } = {}; public constructor(props: ICalendarDayProps) { super(props); @@ -208,12 +208,14 @@ export class CalendarDay extends BaseComponent
@@ -264,7 +267,7 @@ export class CalendarDay extends BaseComponent this.setDayRef(element, day, isNavigatedDate) } + ref={ element => this._setDayRef(element, day, isNavigatedDate) } onMouseOver={ dateRangeType === DateRangeType.Month ? this._onDayMouseOver(day.originalDate, weekIndex, dayIndex) : undefined } onMouseLeave={ dateRangeType === DateRangeType.Month ? this._onDayMouseLeave(day.originalDate, weekIndex, dayIndex) : undefined } onMouseDown={ dateRangeType === DateRangeType.Month ? this._onDayMouseDown(day.originalDate, weekIndex, dayIndex) : undefined } @@ -290,7 +293,7 @@ export class CalendarDay extends BaseComponent): void => { // set the press styling this._applyFunctionToDayRefs((ref, day) => { - if (ref && day.originalDate.getMonth() == originalDate.getMonth()) { + if (ref && day.originalDate.getMonth() === originalDate.getMonth()) { ref.classList.add(styles.monthPress); } }); @@ -442,7 +445,7 @@ export class CalendarDay extends BaseComponent): void => { // remove press styling this._applyFunctionToDayRefs((ref, day) => { - if (ref && day.originalDate.getMonth() == originalDate.getMonth()) { + if (ref && day.originalDate.getMonth() === originalDate.getMonth()) { ref.classList.remove(styles.monthPress); } }); @@ -454,7 +457,7 @@ export class CalendarDay extends BaseComponent): void => { // set the hover styling on every day in the same month this._applyFunctionToDayRefs((ref, day) => { - if (ref && day.originalDate.getMonth() == originalDate.getMonth()) { + if (ref && day.originalDate.getMonth() === originalDate.getMonth()) { ref.classList.add(styles.monthHover); } }); @@ -466,7 +469,7 @@ export class CalendarDay extends BaseComponent): void => { // remove the hover and pressed styling this._applyFunctionToDayRefs((ref, day) => { - if (ref && day.originalDate.getMonth() == originalDate.getMonth()) { + if (ref && day.originalDate.getMonth() === originalDate.getMonth()) { ref.classList.remove(styles.monthHover); } }); @@ -499,7 +502,7 @@ export class CalendarDay extends BaseComponent void) { - if (this.state.weeks && this.props.dateRangeType == DateRangeType.Month) { + if (this.state.weeks && this.props.dateRangeType === DateRangeType.Month) { this.state.weeks.map(week => { week.map(day => { const ref = this.days[day.key]; @@ -596,7 +599,7 @@ export class CalendarDay extends BaseComponent -
-
- - -
-
@@ -77,6 +29,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre aria-atomic="true" aria-live="polite" aria-relevant="text" + className={undefined} id="DatePickerDay-monthAndYear11" >
+
+
+ + +
+
-
-
- - -
-
@@ -952,6 +1055,52 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre > 2000
+
+
+ + +
+
implem } } - let focusedElement = document.activeElement as HTMLElement; - if (!ignoreExternalFocusing && - this._previouslyFocusedElement && - typeof this._previouslyFocusedElement.focus === 'function' && - elementContains(this._root.value, focusedElement)) { + if (!ignoreExternalFocusing && this._previouslyFocusedElement && typeof this._previouslyFocusedElement.focus === 'function') { focusAsync(this._previouslyFocusedElement); } }