feat(b-form-datepicker): add calendar-width prop (closes #4817) (#4822)

tmorehouse · web-flow · commit 91b77bc9a6b1 · 2020-02-24T12:07:17.000-04:00
diff --git a/src/components/calendar/_calendar.scss b/src/components/calendar/_calendar.scss
@@ -1,6 +1,11 @@
 // BCalendar custom styles
 
 .b-calendar {
+  .b-calendar-inner {
+    // Prevent calendar from going below this width
+    min-width: 250px;
+  }
+
   output.readonly {
     background-color: $input-disabled-bg;
     opacity: 1;
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
@@ -855,7 +855,7 @@ export const BCalendar = Vue.extend({
           'small',
           {
             key: idx,
-            staticClass: 'col',
+            staticClass: 'col text-truncate',
             class: { 'text-muted': this.disabled },
             attrs: {
               title: d.label === d.text ? null : d.label,
@@ -997,6 +997,7 @@ export const BCalendar = Vue.extend({
     const $widget = h(
       'div',
       {
+        staticClass: 'b-calendar-inner',
         class: this.block ? 'd-block' : 'd-inline-block',
         style: this.block ? {} : { width: this.width },
         attrs: {
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
@@ -102,6 +102,11 @@ const propsMixin = {
       type: String,
       default: null
     },
+    calendarWidth: {
+      // Width of the calendar dropdown
+      type: String,
+      default: '270px'
+    },
     selectedVariant: {
       // Variant color to use for the selected date
       type: String,
@@ -260,6 +265,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
         locale: self.locale,
         startWeekday: self.startWeekday,
         direction: self.direction,
+        width: self.calendarWidth,
         dateDisabledFn: self.dateDisabledFn,
         selectedVariant: self.selectedVariant,
         todayVariant: self.todayVariant,
diff --git a/src/components/form-datepicker/package.json b/src/components/form-datepicker/package.json
@@ -64,6 +64,11 @@
             "prop": "direction",
             "description": "Set to the string 'rtl' or 'ltr' to explicitly force the calendar to render in right-to-left or left-ro-right (respectively) mode. Defaults to the resolved locale's directionality"
           },
+          {
+            "prop": "calendarWidth",
+            "version": "2.6.0",
+            "description": "Sets the width of the calendar dropdown (see the `b-calendar` prop `width` for details)"
+          },
           {
             "prop": "min",
             "description": "The minimum date the calendar will show"
