Calendar: fix arrows on month picker only (#2802)

* no message * no message * Updating functionality for arrows when month picker - only is selected * Change file * Fixed alignment issue in IE
microsoft · Sep 11, 2017 · bb12bfd · bb12bfd
1 parent ac16133
commit bb12bfd
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 9 deletions.
diff --git a/...s/office-ui-fabric-react/kegorr-Calendar-FixArrowsOnMonthPickerOnly_2017-09-11-18-36.json b/...s/office-ui-fabric-react/kegorr-Calendar-FixArrowsOnMonthPickerOnly_2017-09-11-18-36.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Calendar: Arrows (when month picker only) do not navigate correctly.  Fixed this and fixed position.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "kegorr@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
@@ -521,6 +521,11 @@ $Calendar-dayPicker-margin: 10px;
     .table{
       margin-right: 12px
     }
+
+     .dayPicker {
+      width: auto;
+    }
+
     .monthPicker{
       margin-left: 13px;
     }
@@ -529,6 +534,13 @@ $Calendar-dayPicker-margin: 10px;
       @include ms-right(13px);
     }
   }
+
+  //when month picker is only visible
+  .monthPickerOnly{
+    .wrap{
+      padding: 10px 7px;
+    }
+  }
 }
 
 // On smaller screens the month button toggles to the picking months state.

diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
@@ -119,6 +119,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     let { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons } = this.props;
     let { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state;
     let onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined;
+    let monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;
 
     return (
       <div className={ css(rootClass, styles.root) } ref='root' role='application'>
@@ -130,6 +131,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
             styles.pickerIsFocused,
             isMonthPickerVisible && ('ms-DatePicker-monthPickerVisible ' + styles.monthPickerVisible),
             isMonthPickerVisible && isDayPickerVisible && ('ms-DatePicker-calendarsInline ' + styles.calendarsInline),
+            monthPickerOnly && ('ms-DatePicker-monthPickerOnly ' + styles.monthPickerOnly)
           ) }
         >
           <div className={ css('ms-DatePicker-holder ms-slideDownIn10', styles.holder) } onKeyDown={ this._onDatePickerPopupKeyDown }>
@@ -199,13 +201,8 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
 
   @autobind
   private _onNavigateDate(date: Date, focusOnNavigatedDay: boolean) {
-    if (this.props.isDayPickerVisible) {
-      this._navigateDay(date);
-      this._focusOnUpdate = focusOnNavigatedDay;
-    } else {
-      // if only the month picker is shown, select the chosen month
-      this._onSelectDate(date);
-    }
+    this._navigateDay(date);
+    this._focusOnUpdate = focusOnNavigatedDay;
   }
 
   @autobind

diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarPage.tsx
@@ -72,6 +72,12 @@ export class CalendarPage extends React.Component<IComponentDemoPageProps, any>
             <ExampleCard title='Calendar launched from a button' code={ CalendarButtonExampleCode }>
               <CalendarButtonExample />
             </ExampleCard>
+            <ExampleCard title='Month picker launched from a button' code={ CalendarButtonExampleCode }>
+              <CalendarButtonExample
+                isDayPickerVisible={ false }
+                buttonString={ 'Click for Month Picker' }
+              />
+            </ExampleCard>
           </div>
         }
         propertiesTables={

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
@@ -65,7 +65,17 @@ export interface ICalendarButtonExampleState {
   selectedDate: Date | null;
 }
 
-export class CalendarButtonExample extends React.Component<any, ICalendarButtonExampleState> {
+export interface ICalendarButtonExampleProps {
+  isDayPickerVisible?: boolean;
+  buttonString?: string;
+}
+
+export class CalendarButtonExample extends React.Component<ICalendarButtonExampleProps, ICalendarButtonExampleState> {
+  public static defaultProps: ICalendarButtonExampleProps = {
+    isDayPickerVisible: true,
+    buttonString: 'Click for Calendar'
+  };
+
   private _calendarButtonElement: HTMLElement;
 
   public constructor() {
@@ -87,7 +97,7 @@ export class CalendarButtonExample extends React.Component<any, ICalendarButtonE
         <div ref={ (calendarBtn) => this._calendarButtonElement = calendarBtn! }>
           <DefaultButton
             onClick={ this._onClick }
-            text={ !this.state.selectedDate ? 'Click for Calendar' : this.state.selectedDate.toLocaleDateString() }
+            text={ !this.state.selectedDate ? this.props.buttonString : this.state.selectedDate.toLocaleDateString() }
           />
         </div>
         { this.state.showCalendar && (
@@ -108,6 +118,7 @@ export class CalendarButtonExample extends React.Component<any, ICalendarButtonE
               value={ this.state.selectedDate! }
               firstDayOfWeek={ DayOfWeek.Sunday }
               strings={ DayPickerStrings }
+              isDayPickerVisible={ this.props.isDayPickerVisible }
             >
             </Calendar>
           </Callout>