Skip to content

Commit fa23f0d

Browse files
mrholekmrholek
committed
refactor: update bootstrap to v5.3.1
1 parent 32d0379 commit fa23f0d

File tree

12 files changed

+148
-24
lines changed

12 files changed

+148
-24
lines changed

‎js/src/tab.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const ARROW_LEFT_KEY = 'ArrowLeft'
3333
const ARROW_RIGHT_KEY = 'ArrowRight'
3434
const ARROW_UP_KEY = 'ArrowUp'
3535
const ARROW_DOWN_KEY = 'ArrowDown'
36+
const HOME_KEY = 'Home'
37+
const END_KEY = 'End'
3638

3739
const CLASS_NAME_ACTIVE = 'active'
3840
const CLASS_NAME_FADE = 'fade'
@@ -154,14 +156,22 @@ class Tab extends BaseComponent {
154156
}
155157

156158
_keydown(event) {
157-
if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key))) {
159+
if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key))) {
158160
return
159161
}
160162

161163
event.stopPropagation()// stopPropagation/preventDefault both added to support up/down keys without scrolling the page
162164
event.preventDefault()
163-
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
164-
const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true)
165+
166+
const children = this._getChildren().filter(element => !isDisabled(element))
167+
let nextActiveElement
168+
169+
if ([HOME_KEY, END_KEY].includes(event.key)) {
170+
nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1]
171+
} else {
172+
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
173+
nextActiveElement = getNextActiveElement(children, event.target, isNext, true)
174+
}
165175

166176
if (nextActiveElement) {
167177
nextActiveElement.focus({ preventScroll: true })

‎js/tests/unit/tab.spec.js

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -630,6 +630,58 @@ describe('Tab', () => {
630630
expect(spyPrevent).toHaveBeenCalledTimes(2)
631631
})
632632

633+
it('if keydown event is Home, handle it', () => {
634+
fixtureEl.innerHTML = [
635+
'<div class="nav">',
636+
' <span id="tab1" class="nav-link" data-coreui-toggle="tab"></span>',
637+
' <span id="tab2" class="nav-link" data-coreui-toggle="tab"></span>',
638+
' <span id="tab3" class="nav-link" data-coreui-toggle="tab"></span>',
639+
'</div>'
640+
].join('')
641+
642+
const tabEl1 = fixtureEl.querySelector('#tab1')
643+
const tabEl3 = fixtureEl.querySelector('#tab3')
644+
645+
const tab3 = new Tab(tabEl3)
646+
tab3.show()
647+
648+
const spyShown = jasmine.createSpy()
649+
tabEl1.addEventListener('shown.coreui.tab', spyShown)
650+
651+
const keydown = createEvent('keydown')
652+
keydown.key = 'Home'
653+
654+
tabEl3.dispatchEvent(keydown)
655+
656+
expect(spyShown).toHaveBeenCalled()
657+
})
658+
659+
it('if keydown event is End, handle it', () => {
660+
fixtureEl.innerHTML = [
661+
'<div class="nav">',
662+
' <span id="tab1" class="nav-link" data-coreui-toggle="tab"></span>',
663+
' <span id="tab2" class="nav-link" data-coreui-toggle="tab"></span>',
664+
' <span id="tab3" class="nav-link" data-coreui-toggle="tab"></span>',
665+
'</div>'
666+
].join('')
667+
668+
const tabEl1 = fixtureEl.querySelector('#tab1')
669+
const tabEl3 = fixtureEl.querySelector('#tab3')
670+
671+
const tab1 = new Tab(tabEl1)
672+
tab1.show()
673+
674+
const spyShown = jasmine.createSpy()
675+
tabEl3.addEventListener('shown.coreui.tab', spyShown)
676+
677+
const keydown = createEvent('keydown')
678+
keydown.key = 'End'
679+
680+
tabEl1.dispatchEvent(keydown)
681+
682+
expect(spyShown).toHaveBeenCalled()
683+
})
684+
633685
it('if keydown event is right arrow and next element is disabled', () => {
634686
fixtureEl.innerHTML = [
635687
'<div class="nav">',
@@ -711,6 +763,66 @@ describe('Tab', () => {
711763
expect(spyFocus2).not.toHaveBeenCalled()
712764
expect(spyFocus1).toHaveBeenCalledTimes(1)
713765
})
766+
767+
it('if keydown event is Home and first element is disabled', () => {
768+
fixtureEl.innerHTML = [
769+
'<div class="nav">',
770+
' <span id="tab1" class="nav-link disabled" data-coreui-toggle="tab" disabled></span>',
771+
' <span id="tab2" class="nav-link" data-coreui-toggle="tab"></span>',
772+
' <span id="tab3" class="nav-link" data-coreui-toggle="tab"></span>',
773+
'</div>'
774+
].join('')
775+
776+
const tabEl1 = fixtureEl.querySelector('#tab1')
777+
const tabEl2 = fixtureEl.querySelector('#tab2')
778+
const tabEl3 = fixtureEl.querySelector('#tab3')
779+
const tab3 = new Tab(tabEl3)
780+
781+
tab3.show()
782+
783+
const spyShown1 = jasmine.createSpy()
784+
const spyShown2 = jasmine.createSpy()
785+
tabEl1.addEventListener('shown.coreui.tab', spyShown1)
786+
tabEl2.addEventListener('shown.coreui.tab', spyShown2)
787+
788+
const keydown = createEvent('keydown')
789+
keydown.key = 'Home'
790+
791+
tabEl3.dispatchEvent(keydown)
792+
793+
expect(spyShown1).not.toHaveBeenCalled()
794+
expect(spyShown2).toHaveBeenCalled()
795+
})
796+
797+
it('if keydown event is End and last element is disabled', () => {
798+
fixtureEl.innerHTML = [
799+
'<div class="nav">',
800+
' <span id="tab1" class="nav-link" data-coreui-toggle="tab"></span>',
801+
' <span id="tab2" class="nav-link" data-coreui-toggle="tab"></span>',
802+
' <span id="tab3" class="nav-link" data-coreui-toggle="tab" disabled></span>',
803+
'</div>'
804+
].join('')
805+
806+
const tabEl1 = fixtureEl.querySelector('#tab1')
807+
const tabEl2 = fixtureEl.querySelector('#tab2')
808+
const tabEl3 = fixtureEl.querySelector('#tab3')
809+
const tab1 = new Tab(tabEl1)
810+
811+
tab1.show()
812+
813+
const spyShown2 = jasmine.createSpy()
814+
const spyShown3 = jasmine.createSpy()
815+
tabEl2.addEventListener('shown.coreui.tab', spyShown2)
816+
tabEl3.addEventListener('shown.coreui.tab', spyShown3)
817+
818+
const keydown = createEvent('keydown')
819+
keydown.key = 'End'
820+
821+
tabEl1.dispatchEvent(keydown)
822+
823+
expect(spyShown3).not.toHaveBeenCalled()
824+
expect(spyShown2).toHaveBeenCalled()
825+
})
714826
})
715827

716828
describe('jQueryInterface', () => {

‎js/tests/visual/tab.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,12 +161,12 @@ <h4>Tabs with fade (no initially active pane)</h4>
161161

162162
<h4>Tabs with nav and using links (with fade)</h4>
163163
<nav>
164-
<div class="nav nav-pills" id="nav-tab" role="tablist">
164+
<div class="nav nav-pills" id="nav-tab" role="tablist">
165165
<a class="nav-link nav-item active" role="tab" data-coreui-toggle="tab" href="#home5">Home</a>
166166
<a class="nav-link nav-item" role="tab" data-coreui-toggle="tab" href="#profile5">Profile</a>
167167
<a class="nav-link nav-item" role="tab" data-coreui-toggle="tab" href="#fat5">@fat</a>
168168
<a class="nav-link nav-item" role="tab" data-coreui-toggle="tab" href="#mdo5">@mdo</a>
169-
<a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
169+
<a class="nav-link nav-item disabled" role="tab" href="#" aria-disabled="true">Disabled</a>
170170
</div>
171171
</nav>
172172

‎scss/_reboot.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -523,15 +523,15 @@ legend {
523523
height: auto;
524524
}
525525

526-
// 1. Correct the outline style in Safari.
527-
// 2. This overrides the extra rounded corners on search inputs in iOS so that our
526+
// 1. This overrides the extra rounded corners on search inputs in iOS so that our
528527
// `.form-control` class can properly style them. Note that this cannot simply
529528
// be added to `.form-control` as it's not specific enough. For details, see
530529
// https://github.com/twbs/bootstrap/issues/11586.
530+
// 2. Correct the outline style in Safari.
531531

532532
[type="search"] {
533-
outline-offset: -2px; // 1
534-
-webkit-appearance: textfield; // 2
533+
-webkit-appearance: textfield; // 1
534+
outline-offset: -2px; // 2
535535
}
536536

537537
// 1. A few input types should stay LTR

‎scss/_variables.scss

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -721,6 +721,10 @@ $hr-border-color: null !default; // Allows for inherited colors
721721
$hr-border-width: var(--#{$prefix}border-width) !default;
722722
$hr-opacity: .25 !default;
723723

724+
// scss-docs-start vr-variables
725+
$vr-border-width: var(--#{$prefix}border-width) !default;
726+
// scss-docs-end vr-variables
727+
724728
$legend-margin-bottom: .5rem !default;
725729
$legend-font-size: 1.5rem !default;
726730
$legend-font-weight: null !default;
@@ -1277,8 +1281,9 @@ $navbar-dark-color: rgba($white, .55) !default;
12771281
$navbar-dark-hover-color: rgba($white, .75) !default;
12781282
$navbar-dark-active-color: $white !default;
12791283
$navbar-dark-disabled-color: rgba($white, .25) !default;
1280-
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1281-
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
1284+
$navbar-dark-icon-color: $navbar-dark-color !default;
1285+
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1286+
$navbar-dark-toggler-border-color: rgba($white, .1) !default;$navbar-dark-toggler-border-color: rgba($white, .1) !default;
12821287
$navbar-dark-brand-color: $navbar-dark-active-color !default;
12831288
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
12841289
// scss-docs-end navbar-dark-variables
@@ -1628,9 +1633,6 @@ $alert-margin-bottom: 1rem !default;
16281633
$alert-border-radius: var(--#{$prefix}border-radius) !default;
16291634
$alert-link-font-weight: $font-weight-bold !default;
16301635
$alert-border-width: var(--#{$prefix}border-width) !default;
1631-
$alert-bg-scale: -80% !default;
1632-
$alert-border-scale: -70% !default;
1633-
$alert-color-scale: 40% !default;
16341636
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
16351637
// scss-docs-end alert-variables
16361638

‎scss/forms/_floating-labels.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@
8484
}
8585
}
8686

87-
> :disabled ~ label {
87+
> :disabled ~ label,
88+
> .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
8889
color: $form-floating-label-disabled-color;
8990

9091
&::after {

‎scss/forms/_form-check.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@
3333
height: $form-check-input-width;
3434
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
3535
vertical-align: top;
36+
appearance: none;
3637
background-color: var(--#{$prefix}form-check-bg);
3738
background-image: var(--#{$prefix}form-check-bg-image);
3839
background-repeat: no-repeat;
3940
background-position: center;
4041
background-size: contain;
4142
border: $form-check-input-border;
42-
appearance: none;
4343
print-color-adjust: exact; // Keep themed appearance for print
4444
@include transition($form-check-transition);
4545

‎scss/forms/_form-control.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
font-weight: $input-font-weight;
1212
line-height: $input-line-height;
1313
color: $input-color;
14+
appearance: none; // Fix appearance for date inputs in Safari
1415
background-color: $input-bg;
1516
background-clip: padding-box;
1617
border: $input-border-width solid $input-border-color;
17-
appearance: none; // Fix appearance for date inputs in Safari
1818

1919
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
2020
@include border-radius($input-border-radius, 0);

‎scss/forms/_form-range.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
width: 100%;
99
height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
1010
padding: 0; // Need to reset padding
11-
background-color: transparent;
1211
appearance: none;
12+
background-color: transparent;
1313

1414
&:focus {
1515
outline: 0;
@@ -28,12 +28,12 @@
2828
width: $form-range-thumb-width;
2929
height: $form-range-thumb-height;
3030
margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
31+
appearance: none;
3132
@include gradient-bg($form-range-thumb-bg);
3233
border: $form-range-thumb-border;
3334
@include border-radius($form-range-thumb-border-radius);
3435
@include box-shadow($form-range-thumb-box-shadow);
3536
@include transition($form-range-thumb-transition);
36-
appearance: none;
3737

3838
&:active {
3939
@include gradient-bg($form-range-thumb-active-bg);
@@ -54,12 +54,12 @@
5454
&::-moz-range-thumb {
5555
width: $form-range-thumb-width;
5656
height: $form-range-thumb-height;
57+
appearance: none;
5758
@include gradient-bg($form-range-thumb-bg);
5859
border: $form-range-thumb-border;
5960
@include border-radius($form-range-thumb-border-radius);
6061
@include box-shadow($form-range-thumb-box-shadow);
6162
@include transition($form-range-thumb-transition);
62-
appearance: none;
6363

6464
&:active {
6565
@include gradient-bg($form-range-thumb-active-bg);

‎scss/forms/_form-select.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
font-weight: $form-select-font-weight;
1515
line-height: $form-select-line-height;
1616
color: $form-select-color;
17+
appearance: none;
1718
background-color: $form-select-bg;
1819
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
1920
background-repeat: no-repeat;
@@ -23,7 +24,6 @@
2324
@include border-radius($form-select-border-radius, 0);
2425
@include box-shadow($form-select-box-shadow);
2526
@include transition($form-select-transition);
26-
appearance: none;
2727

2828
&:focus {
2929
border-color: var($form-select-focus-border-color);

0 commit comments

Comments
 (0)