Jolore/calendar updates

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"
+}

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,42 +184,29 @@ $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-neutralLight;
-}
-
-.dayBackground {
-  // border-radius: 2px;
+  .day {
+    font-weight: $ms-font-weight-semibold;
+    background: $ms-color-themeLight;
+  }
 }
 
-.weekBackground {
-  &:first-child {
-    // border-radius: 2px 0px 0px 2px;
-  }
-  &:last-child {
-    // border-radius: 0px 2px 2px 0px;
-  }
+// 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 {
   .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 +215,6 @@ $Calendar-dayPicker-margin: 10px;
     }
   }
   .table {
-    &:not(.weekNumbers) {
-      margin-left: 30px;
-    }
     .day,
     .weekday {
       width: 30px;
@@ -226,11 +225,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 {
@@ -254,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,
@@ -306,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
@@ -342,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 {
@@ -417,6 +414,7 @@ $Calendar-dayPicker-margin: 10px;
   .header {
     height: $Calendar-day;
     line-height: $Calendar-day;
+    width: 100%;
   } // Calendar day cells are smaller.
   .day,
   .weekday {
@@ -452,31 +450,15 @@ $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;
       }
     }
   } // 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;
@@ -568,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 {
@@ -637,28 +624,33 @@ $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;
   }
 }
 
 .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;
   }

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

@@ -63,6 +63,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     showGoToToday: true,
     strings: null,
     highlightCurrentMonth: false,
+    highlightSelectedMonth: false,
     navigationIcons: iconStrings,
     showWeekNumbers: false,
     firstWeekOfYear: FirstWeekOfYear.FirstDay,
@@ -123,7 +124,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
 
   public render(): JSX.Element {
     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, highlightSelectedMonth, navigationIcons, minDate, maxDate } = this.props;
     const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state;
     const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined;
     const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;
@@ -172,10 +173,12 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
 
                 { isMonthPickerVisible && <CalendarMonth
                   navigatedDate={ navigatedDate! }
+                  selectedDate={ selectedDate! }
                   strings={ strings! }
                   onNavigateDate={ this._onNavigateDate }
                   today={ this.props.today }
                   highlightCurrentMonth={ highlightCurrentMonth! }
+                  highlightSelectedMonth={ highlightSelectedMonth! }
                   onHeaderSelect={ onHeaderSelect }
                   navigationIcons={ navigationIcons! }
                   dateTimeFormatter={ this.props.dateTimeFormatter! }

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

@@ -100,6 +100,12 @@ export interface ICalendarProps extends React.Props<Calendar> {
   */
   highlightCurrentMonth?: boolean;
 
+  /**
+  * Whether the month picker should highlight the selected month
+  * @defaultvalue false
+  */
+  highlightSelectedMonth?: boolean;
+
   /**
   * Customize navigation icons using ICalendarIconStrings
   */
@@ -196,6 +202,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 {