feat(b-calendar): add nav-button-variant prop (closes #5702) (#5705)

* init

* update package.json

* Improve `navButtonVariant` prop handling

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

Author: Hiws

src/components/calendar/README.md

@@ -200,9 +200,16 @@ default. To specify a different theme color to use for today's date, use the `to
 
 To disable highlighting of today's date altogether, set the `no-highlight-today` prop.
 
+The navigation buttons default to the `'secondary'` theme variant. You can change this via the
+`nav-button-variant` prop.
+
 ```html
 <template>
-  <b-calendar selected-variant="success" today-variant="info"></b-calendar>
+  <b-calendar
+    selected-variant="success"
+    today-variant="info"
+    nav-button-variant="primary"
+  ></b-calendar>
 </template>
 
 <!-- b-calendar-variants.vue -->

src/components/calendar/calendar.js

@@ -123,12 +123,17 @@ export const BCalendar = Vue.extend({
     selectedVariant: {
       // Variant color to use for the selected date
       type: String,
-      default: 'primary'
+      default: getComponentConfig(NAME, 'selectedVariant')
     },
     todayVariant: {
-      // Variant color to use for today's date (defaults to `variant`)
-      type: String
-      // default: null
+      // Variant color to use for today's date (defaults to `selectedVariant`)
+      type: String,
+      default: getComponentConfig(NAME, 'todayVariant')
+    },
+    navButtonVariant: {
+      // Variant color to use for the navigation buttons
+      type: String,
+      default: getComponentConfig(NAME, 'navButtonVariant')
     },
     noHighlightToday: {
       // Disable highlighting today's date
@@ -355,6 +360,9 @@ export const BCalendar = Vue.extend({
     computedTodayVariant() {
       return `btn-outline-${this.todayVariant || this.selectedVariant || 'primary'}`
     },
+    computedNavButtonVariant() {
+      return `btn-outline-${this.navButtonVariant || 'primary'}`
+    },
     isRTL() {
       // `true` if the language requested is RTL
       const dir = toString(this.direction).toLowerCase()
@@ -889,8 +897,8 @@ export const BCalendar = Vue.extend({
       return h(
         'button',
         {
-          staticClass: 'btn btn-sm btn-outline-secondary border-0 flex-fill',
-          class: { disabled: btnDisabled },
+          staticClass: 'btn btn-sm border-0 flex-fill',
+          class: [this.computedNavButtonVariant, { disabled: btnDisabled }],
           attrs: {
             title: label || null,
             type: 'button',

src/components/calendar/calendar.spec.js

@@ -339,4 +339,22 @@ describe('calendar', () => {
 
     wrapper.destroy()
   })
+
+  it('`nav-button-variant` changes nav button class', async () => {
+    const wrapper = mount(BCalendar, {
+      attachTo: createContainer(),
+      propsData: {
+        navButtonVariant: 'primary'
+      }
+    })
+
+    const nav = wrapper.find('.b-calendar-nav')
+    const buttons = nav.findAll('button')
+    expect(buttons.length).toBe(5)
+    expect(buttons.at(0).classes()).toContain('btn-outline-primary')
+    expect(buttons.at(1).classes()).toContain('btn-outline-primary')
+    expect(buttons.at(2).classes()).toContain('btn-outline-primary')
+    expect(buttons.at(3).classes()).toContain('btn-outline-primary')
+    expect(buttons.at(4).classes()).toContain('btn-outline-primary')
+  })
 })

src/components/calendar/package.json

@@ -34,11 +34,19 @@
           },
           {
             "prop": "selectedVariant",
+            "settings": true,
             "description": "Theme color variant to use for the selected date button"
           },
           {
             "prop": "todayVariant",
-            "description": "Theme color variant to use for highlighting todays date button. Defaults to the `variant` prop"
+            "settings": true,
+            "description": "Theme color variant to use for highlighting todays date button. Defaults to the `selectedVariant` prop"
+          },
+          {
+            "prop": "navButtonVariant",
+            "version": "2.17.0",
+            "settings": true,
+            "description": "Theme color variant to use for the navigation buttons"
           },
           {
             "prop": "noHighlightToday",

src/components/form-datepicker/README.md

@@ -219,6 +219,9 @@ default. To specify a different theme color to use for today's date, use the `to
 
 To disable highlighting of today's date altogether, set the `no-highlight-today` prop.
 
+The navigation buttons default to the `'secondary'` theme variant. You can change this via the
+`nav-button-variant` prop.
+
 ### Control sizing
 
 Fancy a smaller or larger `<b-form-datepicker>` control? Set the `size` prop to `'sm'` for a smaller

src/components/form-datepicker/form-datepicker.js

@@ -133,12 +133,17 @@ const propsMixin = {
     selectedVariant: {
       // Variant color to use for the selected date
       type: String,
-      default: 'primary'
+      default: () => getConfigFallback('selectedVariant')
     },
     todayVariant: {
-      // Variant color to use for today's date (defaults to `variant`)
-      type: String
-      // default: null
+      // Variant color to use for today's date (defaults to `selectedVariant`)
+      type: String,
+      default: () => getConfigFallback('todayVariant')
+    },
+    navButtonVariant: {
+      // Variant color to use for the navigation buttons
+      type: String,
+      default: () => getConfigFallback('navButtonVariant')
     },
     noHighlightToday: {
       // Disable highlighting today's date
@@ -325,6 +330,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
         dateDisabledFn: self.dateDisabledFn,
         selectedVariant: self.selectedVariant,
         todayVariant: self.todayVariant,
+        navButtonVariant: self.navButtonVariant,
         dateInfoFn: self.dateInfoFn,
         hideHeader: self.hideHeader,
         showDecadeNav: self.showDecadeNav,

src/components/form-datepicker/package.json

@@ -46,11 +46,19 @@
           },
           {
             "prop": "selectedVariant",
+            "settings": true,
             "description": "Theme color variant to use for the selected date button"
           },
           {
             "prop": "todayVariant",
-            "description": "Theme color variant to use for highlighting todays date button. Defaults to the `variant` prop"
+            "settings": true,
+            "description": "Theme color variant to use for highlighting todays date button. Defaults to the `selectedVariant` prop"
+          },
+          {
+            "prop": "navButtonVariant",
+            "version": "2.17.0",
+            "settings": true,
+            "description": "Theme color variant to use for the navigation buttons"
           },
           {
             "prop": "noHighlightToday",

src/utils/config-defaults.js

@@ -64,11 +64,15 @@ export default deepFreeze({
   },
   BButtonClose: {
     content: '×',
-    // `textVariant` is `null` to inherit the current text color
+    // `textVariant` is `undefined` to inherit the current text color
     textVariant: undefined,
     ariaLabel: 'Close'
   },
   BCalendar: {
+    selectedVariant: 'primary',
+    // Defaults to `selectedVariant`
+    todayVariant: undefined,
+    navButtonVariant: 'secondary',
     // BFormDate will choose these first if not provided in BFormDate section
     labelPrevDecade: 'Previous decade',
     labelPrevYear: 'Previous year',
@@ -102,6 +106,9 @@ export default deepFreeze({
   },
   BFormDatepicker: {
     // BFormDatepicker will choose from BCalendar first if not provided here
+    selectedVariant: undefined,
+    todayVariant: undefined,
+    navButtonVariant: undefined,
     labelPrevDecade: undefined,
     labelPrevYear: undefined,
     labelPrevMonth: undefined,