Skip to content

Commit 8c056ba

Browse files
authored
Tabs redo (#180)
1 parent 0c71897 commit 8c056ba

40 files changed

+3396
-4247
lines changed

CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

88
## [Unreleased]
9+
- Refactor of the tabs element
10+
- Logic rewritten so the tabs won't be reappended (no more moving elements)
11+
- Added `breakpoint` attribute for controling the transition from tabs/accordion
12+
- Added tests
913

1014
## 0.1.0
1115
- Rewrote the scss to use CSS custom properties than preprocessed SCSS variables

dist/css/joomla-panels.css

Lines changed: 0 additions & 137 deletions
This file was deleted.

dist/css/joomla-panels.min.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

dist/css/joomla-tab.css

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ joomla-tab {
33
flex-direction: column;
44
}
55

6-
joomla-tab > ul {
6+
joomla-tab[view=tabs] > div[role=tablist] {
77
display: flex;
88
padding: 0;
99
margin: 0;
@@ -21,16 +21,25 @@ joomla-tab > ul {
2121
box-shadow: 0 1px #fff inset, 0 2px 3px -3px rgba(0, 0, 0, 0.15), 0 -4px 0 rgba(0, 0, 0, 0.05) inset, 0 0 3px rgba(0, 0, 0, 0.04);
2222
}
2323

24-
joomla-tab a[role=tab] {
24+
joomla-tab[view=accordion] > div[role=tablist] {
25+
display: none;
26+
}
27+
28+
joomla-tab button[role=tab] {
29+
-webkit-appearance: none;
30+
-moz-appearance: none;
31+
appearance: none;
2532
position: relative;
2633
display: block;
2734
padding: 0.75em 1em;
2835
color: #0d1321;
36+
background-color: transparent;
2937
text-decoration: none;
3038
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05);
39+
border: unset;
3140
}
3241

33-
joomla-tab a[role=tab][active] {
42+
joomla-tab button[role=tab][aria-expanded=true] {
3443
background-color: rgba(0, 0, 0, 0.03);
3544
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%);
3645
border-right: 0 none;
@@ -40,7 +49,7 @@ joomla-tab a[role=tab][active] {
4049
box-shadow: 2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, -2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, 0 1px 0 rgba(0, 0, 0, 0.02) inset;
4150
}
4251

43-
joomla-tab a[role=tab][active]::after {
52+
joomla-tab button[aria-expanded=true]::after {
4453
position: absolute;
4554
right: 0;
4655
bottom: -1px;
@@ -51,7 +60,7 @@ joomla-tab a[role=tab][active]::after {
5160
opacity: 0.8;
5261
}
5362

54-
joomla-tab > section {
63+
joomla-tab > joomla-tab-element {
5564
position: relative;
5665
display: none;
5766
padding: 15px;
@@ -61,7 +70,7 @@ joomla-tab > section {
6170
box-shadow: 0 0 3px rgba(0, 0, 0, 0.04);
6271
}
6372

64-
joomla-tab > section[active] {
73+
joomla-tab > joomla-tab-element[active] {
6574
display: block;
6675
}
6776

@@ -70,7 +79,7 @@ joomla-tab[orientation=vertical] {
7079
align-items: flex-start;
7180
}
7281

73-
joomla-tab[orientation=vertical] > ul {
82+
joomla-tab[orientation=vertical] > div[role=tablist] {
7483
flex-direction: column;
7584
min-width: 30%;
7685
height: auto;
@@ -80,55 +89,76 @@ joomla-tab[orientation=vertical] > ul {
8089
box-shadow: none;
8190
}
8291

83-
joomla-tab[orientation=vertical] li:last-of-type a {
92+
joomla-tab[orientation=vertical] > div[role=tablist] button:last-of-type {
8493
border-bottom: 0;
8594
}
8695

87-
joomla-tab[orientation=vertical] a {
96+
joomla-tab[orientation=vertical] > div[role=tablist] button {
97+
-webkit-appearance: none;
98+
-moz-appearance: none;
99+
appearance: none;
88100
position: relative;
89101
display: block;
90102
padding: 0.75em 1em;
91103
color: #0d1321;
104+
background-color: transparent;
92105
text-decoration: none;
93106
border-bottom: 1px solid #ddd;
94107
box-shadow: none;
95108
}
96109

97-
joomla-tab[orientation=vertical] a[active] {
110+
joomla-tab[orientation=vertical] > div[role=tablist] button[aria-expanded=true] {
98111
background-color: #fff;
99112
background-image: none;
100113
border-right: 0 none;
101114
border-left: 0 none;
102115
box-shadow: none;
103116
}
104117

105-
joomla-tab[orientation=vertical] a[active]::after {
118+
joomla-tab[orientation=vertical] > div[role=tablist] button[aria-expanded=true]::after {
106119
top: 0;
107120
bottom: 0;
108121
left: -1px;
109122
width: 5px;
110123
height: auto;
111124
}
112125

113-
joomla-tab[orientation=vertical] > section {
126+
joomla-tab[orientation=vertical] > joomla-tab-element {
114127
padding: 15px;
115128
border: 0 none;
116129
box-shadow: none;
117130
}
118131

119-
joomla-tab[view=accordion] > ul {
132+
joomla-tab[view=accordion] {
120133
flex-direction: column;
121134
white-space: normal;
122135
border-radius: 0.25rem;
123136
box-shadow: 0 1px #fff inset, 0 0 3px rgba(0, 0, 0, 0.04);
124137
}
138+
joomla-tab[view=accordion] > button {
139+
-webkit-appearance: none;
140+
-moz-appearance: none;
141+
appearance: none;
142+
position: relative;
143+
display: block;
144+
padding: 0.75em 1em;
145+
color: #0d1321;
146+
background-color: #f5f5f5;
147+
text-decoration: none;
148+
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05);
149+
border: unset;
150+
}
151+
joomla-tab[view=accordion] > button[aria-expanded=true], joomla-tab[view=accordion] > button:focus {
152+
background-color: rgba(0, 0, 0, 0.03);
153+
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%);
154+
}
125155

126-
joomla-tab[view=accordion] section {
156+
joomla-tab[view=accordion] joomla-tab-element {
127157
display: none;
128158
padding: 15px;
129159
}
130160

131-
joomla-tab[view=accordion] section[active] {
161+
joomla-tab[view=accordion] joomla-tab-element[active] {
132162
display: block;
133163
border-bottom: 1px solid #ddd;
134164
}
@@ -137,11 +167,14 @@ joomla-tab[view=accordion] [active] {
137167
background-color: #fff;
138168
}
139169

140-
joomla-tab[view=accordion] a[role=tab] {
170+
joomla-tab[view=accordion] button {
171+
-webkit-appearance: none;
172+
-moz-appearance: none;
173+
appearance: none;
141174
border-bottom: 1px solid #ddd;
142175
}
143176

144-
joomla-tab[view=accordion] a[role=tab][active]::after {
177+
joomla-tab[view=accordion] button[aria-expanded=true]::after {
145178
top: 0;
146179
left: 0;
147180
width: 5px;

dist/css/joomla-tab.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/js/joomla-alert-es5.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -200,20 +200,18 @@ var AlertElement = /*#__PURE__*/function (_HTMLElement) {
200200
} else if (!this.button && this.hasAttribute('dismiss')) {
201201
this.createCloseButton();
202202
}
203-
} else {
204-
if (this.button && newValue === 'false') {
205-
this.destroyCloseButton();
206-
} else if (!this.button && newValue !== 'false') {
207-
this.createCloseButton();
208-
}
203+
} else if (this.button && newValue === 'false') {
204+
this.destroyCloseButton();
205+
} else if (!this.button && newValue !== 'false') {
206+
this.createCloseButton();
209207
}
210208

211209
break;
212210

213211
case 'close-text':
214212
if (!newValue || newValue !== oldValue) {
215213
if (this.button) {
216-
this.button.innerText = newValue;
214+
this.button.setAttribute('aria-label', newValue);
217215
}
218216
}
219217

@@ -229,6 +227,7 @@ var AlertElement = /*#__PURE__*/function (_HTMLElement) {
229227
}, {
230228
key: "onMutation",
231229
value: function onMutation(mutationsList) {
230+
// eslint-disable-next-line no-restricted-syntax
232231
var _iterator = _createForOfIteratorHelper(mutationsList),
233232
_step;
234233

dist/js/joomla-alert-es5.min.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ var f = function (t) {
270270
break;
271271

272272
case "close-text":
273-
n && n === e || this.button && (this.button.innerText = n);
273+
n && n === e || this.button && this.button.setAttribute("aria-label", n);
274274
break;
275275

276276
case "auto-dismiss":

0 commit comments

Comments
 (0)