Skip to content
Permalink
Browse files
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>
  • Loading branch information
Hiws and jacobmllr95 committed Sep 1, 2020
1 parent edc2d35 commit aa291fce6df52df4d2396b9499c964ce0ac5962b
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 14 deletions.
@@ -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 -->
@@ -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',
@@ -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')
})
})
@@ -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",
@@ -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
@@ -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,
@@ -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",
@@ -64,11 +64,15 @@ export default deepFreeze({
},
BButtonClose: {
content: '&times;',
// `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,

0 comments on commit aa291fc

Please sign in to comment.