Skip to content

Commit 4661ad1

Browse files
mrholekmrholek
committed
refactor(Calendar): replace standard button classes with custom calendar navigation buttons
- Replace `btn btn-transparent btn-sm` classes with the custom `calendar-nav-btn` class for navigation buttons - Add comprehensive CSS custom properties for calendar navigation button styling - Improve calendar navigation button consistency and maintainability
1 parent e1bfa72 commit 4661ad1

File tree

3 files changed

+60
-6
lines changed

3 files changed

+60
-6
lines changed

‎js/src/calendar.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -564,26 +564,26 @@ class Calendar extends BaseComponent {
564564
navigationElement.classList.add('calendar-nav')
565565
navigationElement.innerHTML = `
566566
<div class="calendar-nav-prev">
567-
<button class="btn btn-transparent btn-sm btn-double-prev" aria-label="${this._config.ariaNavPrevYearLabel}">
567+
<button class="calendar-nav-btn btn-double-prev" aria-label="${this._config.ariaNavPrevYearLabel}">
568568
<span class="calendar-nav-icon calendar-nav-icon-double-prev"></span>
569569
</button>
570-
${this._view === 'days' ? `<button class="btn btn-transparent btn-sm btn-prev" aria-label="${this._config.ariaNavPrevMonthLabel}">
570+
${this._view === 'days' ? `<button class="calendar-nav-btn btn-prev" aria-label="${this._config.ariaNavPrevMonthLabel}">
571571
<span class="calendar-nav-icon calendar-nav-icon-prev"></span>
572572
</button>` : ''}
573573
</div>
574574
<div class="calendar-nav-date" aria-live="polite">
575-
${this._view === 'days' ? `<button class="btn btn-transparent btn-sm btn-month">
575+
${this._view === 'days' ? `<button class="calendar-nav-btn btn-sm btn-month">
576576
${calendarDate.toLocaleDateString(this._config.locale, { month: 'long' })}
577577
</button>` : ''}
578-
<button class="btn btn-transparent btn-sm btn-year">
578+
<button class="calendar-nav-btn btn-year">
579579
${calendarDate.toLocaleDateString(this._config.locale, { year: 'numeric' })}
580580
</button>
581581
</div>
582582
<div class="calendar-nav-next">
583-
${this._view === 'days' ? `<button class="btn btn-transparent btn-sm btn-next" aria-label="${this._config.ariaNavNextMonthLabel}">
583+
${this._view === 'days' ? `<button class="calendar-nav-btn btn-next" aria-label="${this._config.ariaNavNextMonthLabel}">
584584
<span class="calendar-nav-icon calendar-nav-icon-next"></span>
585585
</button>` : ''}
586-
<button class="btn btn-transparent btn-sm btn-double-next" aria-label="${this._config.ariaNavNextYearLabel}">
586+
<button class="calendar-nav-btn btn-double-next" aria-label="${this._config.ariaNavNextYearLabel}">
587587
<span class="calendar-nav-icon calendar-nav-icon-double-next"></span>
588588
</button>
589589
</div>

‎scss/_calendar.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
@use "functions/escape-svg" as *;
33
@use "mixins/breakpoints" as *;
44
@use "mixins/border-radius" as *;
5+
@use "mixins/box-shadow" as *;
56
@use "mixins/ltr-rtl" as *;
67
@use "mixins/transition" as *;
8+
@use "vendor/rfs" as *;
79
@use "variables" as *;
810

911
.calendar {
@@ -13,6 +15,17 @@
1315
--#{$prefix}calendar-nav-padding: #{$calendar-nav-padding};
1416
--#{$prefix}calendar-nav-border-color: #{$calendar-nav-border-color};
1517
--#{$prefix}calendar-nav-border: #{$calendar-nav-border-width} solid var(--#{$prefix}calendar-nav-border-color);
18+
--#{$prefix}calendar-nav-btn-padding-x: #{$calendar-nav-btn-padding-x};
19+
--#{$prefix}calendar-nav-btn-padding-y: #{$calendar-nav-btn-padding-y};
20+
@include rfs($calendar-nav-btn-font-size, --#{$prefix}calendar-nav-btn-font-size);
21+
--#{$prefix}calendar-nav-btn-bg: #{$calendar-nav-btn-bg};
22+
--#{$prefix}calendar-nav-btn-border-width: #{$calendar-nav-btn-border-width};
23+
--#{$prefix}calendar-nav-btn-border-color: #{$calendar-nav-btn-border-color};
24+
--#{$prefix}calendar-nav-btn-border-radius: #{$calendar-nav-btn-border-radius};
25+
--#{$prefix}calendar-nav-btn-hover-bg: #{$calendar-nav-btn-hover-bg};
26+
--#{$prefix}calendar-nav-btn-hover-border-color: #{$calendar-nav-btn-hover-border-color};
27+
--#{$prefix}calendar-nav-btn-focus-border-color: #{$calendar-nav-btn-focus-border-color};
28+
--#{$prefix}calendar-nav-btn-focus-box-shadow: #{$calendar-nav-btn-focus-box-shadow};
1629
--#{$prefix}calendar-nav-date-color: #{$calendar-nav-date-color};
1730
--#{$prefix}calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};
1831
--#{$prefix}calendar-nav-icon-width: #{$calendar-nav-icon-width};
@@ -82,10 +95,36 @@
8295
border-bottom: var(--#{$prefix}calendar-nav-border);
8396
}
8497

98+
.calendar-nav-btn {
99+
display: inline-block;
100+
padding: var(--#{$prefix}calendar-nav-btn-padding-y) var(--#{$prefix}calendar-nav-btn-padding-x);
101+
@include font-size(var(--#{$prefix}calendar-nav-btn-font-size));
102+
text-align: center;
103+
vertical-align: middle;
104+
user-select: none;
105+
background-color: var(--#{$prefix}calendar-nav-btn-bg);
106+
border: var(--#{$prefix}calendar-nav-btn-border-width) solid var(--#{$prefix}calendar-nav-btn-border-color);
107+
@include border-radius(var(--#{$prefix}calendar-nav-btn-border-radius));
108+
@include transition($btn-transition);
109+
110+
&:hover {
111+
background-color: var(--#{$prefix}calendar-nav-btn-hover-bg);
112+
border-color: var(--#{$prefix}calendar-nav-btn-hover-border-color);
113+
}
114+
115+
&:focus-visible {
116+
border-color: var(--#{$prefix}calendar-nav-btn-focus-border-color);
117+
outline: 0;
118+
box-shadow: var(--#{$prefix}calendar-nav-btn-focus-box-shadow);
119+
}
120+
}
121+
85122
.calendar-nav-date {
86123
flex: 1;
87124
text-align: center;
88125

126+
.calendar-nav-btn,
127+
// TODO: remove .btn class when no longer needed in v6
89128
.btn {
90129
font-weight: 600;
91130
color: var(--#{$prefix}calendar-nav-date-color);

‎scss/_variables.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2307,6 +2307,21 @@ $calendar-nav-padding: .5rem !default;
23072307
$calendar-nav-border-width: 1px !default;
23082308
$calendar-nav-border-color: var(--#{$prefix}border-color) !default;
23092309
$calendar-nav-date-color: var(--#{$prefix}body-color) !default;
2310+
2311+
$calendar-nav-btn-padding-y: .25rem !default;
2312+
$calendar-nav-btn-padding-x: .5rem !default;
2313+
$calendar-nav-btn-font-size: $font-size-sm !default;
2314+
$calendar-nav-btn-bg: transparent !default;
2315+
$calendar-nav-btn-border-width: 1px !default;
2316+
$calendar-nav-btn-border-color: transparent !default;
2317+
$calendar-nav-btn-border-radius: $border-radius !default;
2318+
2319+
$calendar-nav-btn-hover-bg: transparent !default;
2320+
$calendar-nav-btn-hover-border-color: transparent !default;
2321+
2322+
$calendar-nav-btn-focus-border-color: transparent !default;
2323+
$calendar-nav-btn-focus-box-shadow: $focus-ring-box-shadow !default;
2324+
23102325
$calendar-nav-date-hover-color: var(--#{$prefix}primary) !default;
23112326
$calendar-nav-icon-width: 1rem !default;
23122327
$calendar-nav-icon-height: 1rem !default;

0 commit comments

Comments
 (0)