feat(b-form-datepicker): add button-content optionally scoped slot for icon (#4795)

andrewvasilchuk · web-flow · commit 7a0091099025 · 2020-02-23T01:59:21.000-04:00
Co-authored-by: Troy Morehouse
Co-authored-by: Jacob Müller
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
@@ -4,6 +4,7 @@ import { getComponentConfig } from '../../utils/config'
 import { createDate, formatYMD, parseYMD } from '../../utils/date'
 import dropdownMixin from '../../mixins/dropdown'
 import idMixin from '../../mixins/id'
+import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { BButton } from '../button/button'
 import { BCalendar } from '../calendar/calendar'
 import { BIconCalendar, BIconCalendarFill } from '../../icons/icons'
@@ -215,7 +216,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
     BHover: VBHover
   },
   // The mixins order determines the order of appearance in the props reference section
-  mixins: [idMixin, propsMixin, dropdownMixin],
+  mixins: [idMixin, normalizeSlotMixin, propsMixin, dropdownMixin],
   model: {
     prop: 'value',
     event: 'input'
@@ -383,8 +384,13 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
     const idMenu = this.safeId('_dialog_')
     const idWrapper = this.safeId('_b-form-date_')
 
+    const btnScope = { isHovered, hasFocus, state, opened: visible }
+    const defaultButtonFn = scope => {
+      const data = { props: { scale: 1.25 }, attrs: { 'aria-hidden': 'true' } }
+      return h(scope.isHovered || scope.hasFocus ? BIconCalendarFill : BIconCalendar, data)
+    }
     let $button = h('div', { attrs: { 'aria-hidden': 'true' } }, [
-      h(isHovered || hasFocus ? BIconCalendarFill : BIconCalendar, { props: { scale: 1.25 } })
+      this.normalizeSlot('button-content', btnScope) || defaultButtonFn(btnScope)
     ])
     $button = h(
       'button',
diff --git a/src/components/form-datepicker/form-datepicker.spec.js b/src/components/form-datepicker/form-datepicker.spec.js
@@ -511,4 +511,31 @@ describe('form-date', () => {
 
     wrapper.destroy()
   })
+
+  it('`button-content` static slot works', async () => {
+    const wrapper = mount(BFormDatepicker, {
+      attachToDocument: true,
+      propsData: {
+        id: 'test-button-slot',
+        value: '2020-01-15'
+      },
+      slots: {
+        'button-content': 'foobar'
+      }
+    })
+
+    expect(wrapper.isVueInstance()).toBe(true)
+    expect(wrapper.is('div')).toBe(true)
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    const $toggle = wrapper.find('button#test-button-slot')
+
+    expect($toggle.exists()).toBe(true)
+    expect($toggle.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/form-datepicker/package.json b/src/components/form-datepicker/package.json
@@ -231,6 +231,35 @@
               }
             ]
           }
+        ],
+        "slots": [
+          {
+            "name": "button-content",
+            "version": "2.6.0",
+            "description": "Content to place in the datepicker's icon button",
+            "scope": [
+              {
+                "prop": "isHovered",
+                "type": "Boolean",
+                "description": "`true` if the component is hovered"
+              },
+              {
+                "prop": "hasFocus",
+                "type": "Boolean",
+                "description": "`true` if the datepicker icon button has focus"
+              },
+              {
+                "prop": "state",
+                "type": "Boolean",
+                "description": "The value of the `state` prop. `true` (valid), `false` (invalid), or `null`"
+              },
+              {
+                "prop": "open",
+                "type": "Boolean",
+                "description": "The visibility state of the popup. `true` if the popup is visible and `false` if not"
+              }
+            ]
+          }
         ]
       }
     ]
