[date-time] small bug fixes (microsoft#10308)

* small bug fixes. Fix overflow issue in firefox, fix mouse hover issue in all, fix perf issue in month view rendering of Calendar * Change files
ecraig12345 · Aug 29, 2019 · 2ac9c90 · 2ac9c90
1 parent 5e005be
commit 2ac9c90
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/change/@uifabric-date-time-2019-08-28-17-00-50-lorejoh12-smallBugs.json b/change/@uifabric-date-time-2019-08-28-17-00-50-lorejoh12-smallBugs.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "small bug fixes. Fix overflow issue in firefox, fix mouse hover issue in all, fix perf issue in month view rendering of Calendar",
+  "packageName": "@uifabric/date-time",
+  "email": "jolore@microsoft.com",
+  "commit": "a80d436207a5133c6cd130a48e1fe506de845dd5",
+  "date": "2019-08-29T00:00:50.635Z"
+}
diff --git a/packages/date-time/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx b/packages/date-time/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx
@@ -96,7 +96,8 @@ export class CalendarMonthBase extends BaseComponent<ICalendarMonthProps, ICalen
       highlightCurrentMonth,
       highlightSelectedMonth,
       onHeaderSelect,
-      animationDirection
+      animationDirection,
+      yearPickerHidden
     } = this.props;
 
     // using "!" to mark as non-null since we have a default value if it is undefined, but typescript doesn't recognize it as non-null
@@ -111,7 +112,7 @@ export class CalendarMonthBase extends BaseComponent<ICalendarMonthProps, ICalen
     const classNames = getClassNames(styles, {
       theme: theme!,
       className: className,
-      hasHeaderClickCallback: !!onHeaderSelect,
+      hasHeaderClickCallback: !!onHeaderSelect || !yearPickerHidden,
       highlightCurrent: highlightCurrentMonth,
       highlightSelected: highlightSelectedMonth,
       animateBackwards: this.state.animateBackwards,

diff --git a/packages/date-time/src/components/Calendar/CalendarPicker/CalendarPicker.styles.ts b/packages/date-time/src/components/Calendar/CalendarPicker/CalendarPicker.styles.ts
@@ -23,7 +23,8 @@ export const getStyles = (props: ICalendarPickerStyleProps): ICalendarPickerStyl
       {
         width: 196,
         padding: 12,
-        boxSizing: 'content-box'
+        boxSizing: 'content-box',
+        overflow: 'hidden'
       },
       className
     ],

diff --git a/packages/date-time/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx b/packages/date-time/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx
@@ -116,6 +116,9 @@ export class CalendarDayGridBase extends BaseComponent<ICalendarDayGridProps, IC
       animateBackwards: animateBackwards
     });
 
+    // When the month is highlighted get the corner dates so that styles can be added to them
+    const weekCorners: IWeekCorners = this._getWeekCornerStyles(classNames, weeks!);
+
     return (
       <FocusZone className={classNames.wrapper}>
         <table
@@ -128,11 +131,19 @@ export class CalendarDayGridBase extends BaseComponent<ICalendarDayGridProps, IC
         >
           <tbody>
             {this.renderMonthHeaderRow(classNames)}
-            {this.renderRow(classNames, weeks![0], -1, classNames.firstTransitionWeek, 'presentation', true /*aria-hidden*/)}
+            {this.renderRow(classNames, weeks![0], -1, weekCorners, classNames.firstTransitionWeek, 'presentation', true /*aria-hidden*/)}
             {weeks!
               .slice(1, weeks!.length - 1)
-              .map((week: IDayInfo[], weekIndex: number) => this.renderRow(classNames, week, weekIndex, classNames.weekRow))}
-            {this.renderRow(classNames, weeks![weeks!.length - 1], -2, classNames.lastTransitionWeek, 'presentation', true /*aria-hidden*/)}
+              .map((week: IDayInfo[], weekIndex: number) => this.renderRow(classNames, week, weekIndex, weekCorners, classNames.weekRow))}
+            {this.renderRow(
+              classNames,
+              weeks![weeks!.length - 1],
+              -2,
+              weekCorners,
+              classNames.lastTransitionWeek,
+              'presentation',
+              true /*aria-hidden*/
+            )}
           </tbody>
         </table>
       </FocusZone>
@@ -183,6 +194,7 @@ export class CalendarDayGridBase extends BaseComponent<ICalendarDayGridProps, IC
     classNames: IProcessedStyleSet<ICalendarDayGridStyles>,
     week: IDayInfo[],
     weekIndex: number,
+    weekCorners: IWeekCorners,
     rowClassName?: string,
     ariaRole?: string,
     ariaHidden?: boolean
@@ -200,7 +212,7 @@ export class CalendarDayGridBase extends BaseComponent<ICalendarDayGridProps, IC
             <span>{weekNumbers[weekIndex]}</span>
           </th>
         )}
-        {week.map((day: IDayInfo, dayIndex: number) => this.renderDayCells(classNames, day, dayIndex, weekIndex, ariaHidden))}
+        {week.map((day: IDayInfo, dayIndex: number) => this.renderDayCells(classNames, day, dayIndex, weekIndex, weekCorners, ariaHidden))}
       </tr>
     );
   };
@@ -210,15 +222,13 @@ export class CalendarDayGridBase extends BaseComponent<ICalendarDayGridProps, IC
     day: IDayInfo,
     dayIndex: number,
     weekIndex: number,
+    weekCorners: IWeekCorners,
     ariaHidden?: boolean
   ): JSX.Element => {
     const { navigatedDate, dateTimeFormatter, allFocusable, strings } = this.props;
-    const { activeDescendantId, weeks } = this.state;
+    const { activeDescendantId } = this.state;
     const isNavigatedDate = compareDates(navigatedDate, day.originalDate);
 
-    // When the month is highlighted get the corner dates so that styles can be added to them
-    const weekCorners: IWeekCorners = this._getWeekCornerStyles(classNames, weeks!);
-
     return (
       <td
         key={day.key}

diff --git a/packages/date-time/src/components/WeeklyDayPicker/WeeklyDayPicker.styles.ts b/packages/date-time/src/components/WeeklyDayPicker/WeeklyDayPicker.styles.ts
@@ -44,6 +44,8 @@ export const styles = (props: IWeeklyDayPickerStyleProps): IWeeklyDayPickerStyle
         padding: 0,
         margin: 0,
         border: 'none',
+        display: 'flex',
+        alignItems: 'center',
         backgroundColor: palette.neutralLighter,
         fontSize: FontSizes.small,
         selectors: {