DatePicker: Fix datePicker overlap with week numbers for RTL (microso…

…ft#3772) * Fix week numbers column overlap with first column of calendar datepicker in RTL mode * Adding change file
chrismohr · Apr 17, 2018 · 734fcda · 734fcda
1 parent d8a86d2
commit 734fcda
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 1 deletion.
diff --git a/common/changes/office-ui-fabric-react/srk-CalendarDayRTLFix_2018-01-23-12-33.json b/common/changes/office-ui-fabric-react/srk-CalendarDayRTLFix_2018-01-23-12-33.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix CalendarDay RTL view",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "srkandu@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
@@ -223,6 +223,32 @@ $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 {
+        color: $ms-color-black;
+      }
+    }
+  }
+  .table {
+    &:not(.weekNumbers) {
+      margin-right: 30px;
+    }
+    .day,
+    .weekday {
+      width: 30px;
+    }
+  }
+}
+
 // Month and year previous/next components.
 .monthComponents,
 .yearComponents,
@@ -440,6 +466,22 @@ $Calendar-dayPicker-margin: 10px;
         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;
+      }
+    }
   } // Show month picker, if enabled
   .monthPickerVisible {
     .wrap {

diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -123,7 +123,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
       <div
         className={ css('ms-DatePicker-dayPicker',
           styles.dayPicker,
-          showWeekNumbers && 'ms-DatePicker-showWeekNumbers' && styles.showWeekNumbers
+          showWeekNumbers && 'ms-DatePicker-showWeekNumbers' && (getRTL() ? styles.showWeekNumbersRTL : styles.showWeekNumbers)
         ) }
         id={ dayPickerId }
       >