Skip to content

Commit 851f60c

Browse files
chrisdo1chrisdo1
committed
US198278 tab design update code review changes
* set the container for vertical tabs to margin: 0 (Edge bug) * cleaned up theme and variant logic in content-set.js * removed tab mixins * removed new variables from maps.scss
1 parent 465fc16 commit 851f60c

File tree

7 files changed

+88
-171
lines changed

7 files changed

+88
-171
lines changed

‎elements/pfe-content-set/demo/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
}
5454
.dark-background {
5555
background-color: #000;
56+
padding: 2rem 0;
5657
}
5758
.cta a {
5859
display: inline-block;

‎elements/pfe-content-set/src/pfe-content-set.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,14 @@ class PfeContentSet extends PFElement {
3434
const variant = this.getAttribute("pfe-variant");
3535
const theme = this.getAttribute("on");
3636

37-
if (variant === "wind") {
38-
settings.variant = variant;
39-
} else if (variant === "earth") {
37+
if (variant) {
4038
settings.variant = variant;
4139
}
4240

43-
if (theme === "dark") {
41+
if (theme) {
4442
settings.theme = theme
4543
}
44+
4645
return settings;
4746
}
4847

‎elements/pfe-sass/mixins/_mixins.scss‎

Lines changed: 1 addition & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -196,137 +196,9 @@
196196
/// ===========================================================================
197197
/// Tab-specific SASS mixins
198198
/// ===========================================================================
199-
@mixin pfe-tabs-vertical {
200-
padding-top: #{pfe-var(container-padding)};
201-
}
202-
203-
@mixin pfe-tabs-tabset {
204-
--pfe-tabs--BorderColor: #{pfe-color(surface--border)};
205-
display: flex;
206-
border: 0;
207-
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
208-
}
209-
210-
@mixin pfe-tabs-tabset-vertical {
211-
flex-direction: column;
212-
width: 22.22%;
213-
border: 0;
214-
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
215-
}
216-
217-
@mixin pfe-tabs-tabset-vertical-earth {
218-
padding-left: 0;
219-
padding-top: #{pfe-var(container-padding)};
220-
}
221-
222-
@mixin pfe-tabs-panel {
223-
padding: 0;
224-
}
225-
226-
@mixin pfe-tabs-panel-vertical {
227-
padding: 0;
228-
width: 77.78%;
229-
padding-right: #{pfe-var(container-padding)};
230-
}
231-
232-
@mixin pfe-tab {
233-
--pfe-tabs--main: transparent;
234-
--pfe-tabs--aux: #{pfe-color(text--deemphasized)}; // mockup has #929292
235-
--pfe-tabs--link: #{pfe-color(surface--lightest--link)};
236-
--pfe-tabs--focus: #{pfe-color(surface--lightest--link--focus)};
237-
--pfe-tabs--highlight: #{pfe-color(ui-tab--highlight-color)};
238-
239-
position: relative;
240-
display: block;
241-
margin: 0 0 -1px;
242-
243-
// Padding
244-
padding: calc(#{pfe-var(container-padding)} * .666) calc(#{pfe-var(container-padding)} * 1.5);
245-
// Border
246-
border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;
247-
border-bottom: 0;
248-
// Inner style
249-
background-color: var(--pfe-tabs--main);
250-
color: var(--pfe-tabs--aux);
251-
text-transform: var(--pfe-tabs__tab--TextTransform, none); // exposing this for RH
252-
font-weight: #{pfe-var(font-weight--normal)};
253-
254-
cursor: pointer;
255-
text-align: center;
256-
}
257-
258-
@mixin pfe-tab-hover {
259-
--pfe-tabs--aux: #{pfe-color(text)};
260-
}
261-
262-
@mixin pfe-tab-selected {
263-
--pfe-tabs--aux: $pfe-color--black;
264-
// Border
265-
border: transparent;
266-
border-bottom: #{pfe-var(ui--tab-highlight-width)} #{pfe-var(ui--tab-highlight-style)} var(--pfe-tabs--highlight);
267-
}
268-
269-
@mixin pfe-tab-vertical {
270-
text-align: left;
271-
margin: 0 -1px 0 0;
272-
padding-left: calc(#{pfe-var(container-padding)} * .75);
273-
border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;
274-
border-right: 0;
275-
position: relative;
276-
}
277-
278-
@mixin pfe-tab-vertical-selected {
279-
border-color-top: transparent;
280-
border-right: #{pfe-var(ui--tab-highlight-width)} #{pfe-var(ui--tab-highlight-style)} var(--pfe-tabs--highlight);
281-
}
282-
283-
@mixin pfe-tab-earth-selected-false {
284-
border-left: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
285-
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
286-
border-top: #{pfe-var(ui--tab-highlight-width)} #{pfe-var(ui--tab-highlight-style)} #{pfe-color(surface--lighter)};
287-
--pfe-tabs--main: #{pfe-color(surface--lighter)};
288-
}
289-
290-
@mixin pfe-tab-earth-vertical {
291-
border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
292-
}
293-
294-
@mixin pfe-tab-earth-vertical-selected {
295-
border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
296-
border-right: 0;
297-
border-left: #{pfe-var(ui--tab-highlight-width)} #{pfe-var(ui--tab-highlight-style)} var(--pfe-tabs--highlight);
298-
}
299-
300-
@mixin pfe-tab-earth-vertical-selected-false {
301-
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
302-
border-bottom: 0;
303-
border-left: #{pfe-var(ui--tab-highlight-width)} #{pfe-var(ui--tab-highlight-style)} #{pfe-color(surface--lighter)};
304-
}
305-
306-
@mixin pfe-tab-earth-selected {
307-
--pfe-tabs--main: #{pfe-color(surface--lightest)};
308-
border-top: #{pfe-var(ui--tab-highlight-width)} #{pfe-var(ui--tab-highlight-style)} var(--pfe-tabs--highlight);
309-
border-bottom: 0;
310-
border-left: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
311-
}
312-
313-
@mixin pfe-tab-earth-selected-last {
314-
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
315-
}
316-
317-
@mixin pfe-tab-earth-vertical-selected-last {
318-
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
319-
}
320-
321-
@mixin pfe-tab-earth-vertical-first {
322-
border-top: 0;
323-
}
324-
325-
@mixin pfe-tab-wind-dark-selected {
326-
--pfe-tabs--aux: #{pfe-color(ui-tab--dark-hover-color)};
327-
}
328199

329200
@mixin pfe-tab-panel-container($orientation: "horizontal", $border: false) {
201+
margin: 0;
330202
padding: #{pfe-var(container-spacer)} 0;
331203
@if $orientation == "vertical" {
332204
padding-left: calc(#{pfe-var(container-spacer)} * 2);

‎elements/pfe-sass/variables/_maps.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ $pfe-colors: (
77
text: $pfe-color--text,
88
text--on-dark: $pfe-color--text--on-dark,
99
text--on-saturated: $pfe-color--text--on-saturated,
10-
text--deemphasized: $pfe-color--gray-500,
1110

1211

1312
// ========================================================================
@@ -54,7 +53,6 @@ $pfe-colors: (
5453
ui-disabled--text: $pfe-color--ui-disabled--text,
5554
ui-disabled--text--hover: $pfe-color--ui-disabled--text--hover,
5655

57-
ui-tab--highlight-color: $pfelements--red,
5856
ui-tab--dark-hover-color: $pfe-color--white,
5957

6058

@@ -197,9 +195,6 @@ $pfe-vars: (
197195
ui--focus-outline-width: 1px,
198196
ui--focus-outline-style: solid,
199197

200-
ui--tab-highlight-width: 4px,
201-
ui--tab-highlight-style: solid,
202-
203198
grid-breakpoint--xs: 0,
204199
grid-breakpoint--sm: 576px,
205200
grid-breakpoint--md: 768px,

‎elements/pfe-tabs/src/pfe-tab-panel.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
@import "../../pfe-sass/pfe-sass";
22

3+
$LOCAL: tabs;
4+
35
:host {
46
display: block;
5-
color: var(--pfe-broadcasted--color--text);
7+
color: #{pfe-radio(color--text)};
68
}
79

810
:host([hidden]) {

‎elements/pfe-tabs/src/pfe-tab.scss‎

Lines changed: 65 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,129 @@
11
@import "../../pfe-sass/pfe-sass";
22

3-
$LOCAL: tab;
4-
5-
// Active tab styles
6-
7-
:host(:focus),
8-
:host(:focus-visible) {
9-
outline: #{pfe-var(ui--focus-outline-width)} #{pfe-var(ui--focus-outline-style)} var(--pfe-tabs--focus);
10-
}
3+
$LOCAL: tabs;
114

125
/// ===========================================================================
136
/// HORIZONTAL TAB ORIENTATION
147
/// ===========================================================================
158

169
:host {
17-
@include pfe-tab;
10+
--pfe-tabs--main: transparent;
11+
--pfe-tabs--aux: #{pfe-color(ui-disabled--text)};
12+
--pfe-tabs--link: #{pfe-color(surface--lightest--link)};
13+
--pfe-tabs--focus: #{pfe-color(surface--lightest--link--focus)};
14+
--pfe-tabs--highlight: #{pfe-color(ui-accent)};
15+
16+
position: relative;
17+
display: block;
18+
margin: 0 0 -1px;
19+
20+
// Padding
21+
padding: calc(#{pfe-var(container-padding)} * .666) calc(#{pfe-var(container-padding)} * 1.5);
22+
// Border
23+
border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;
24+
border-bottom: 0;
25+
// Inner style
26+
background-color: var(--pfe-tabs--main);
27+
color: var(--pfe-tabs--aux);
28+
text-transform: var(--pfe-tabs__tab--TextTransform, none); // exposing this for RH
29+
font-weight: #{pfe-var(font-weight--normal)};
30+
31+
cursor: pointer;
32+
text-align: center;
33+
}
34+
35+
// Active tab styles
36+
37+
:host(:focus),
38+
:host(:focus-visible) {
39+
outline: 1px solid #{$pfe-color--ui-link--focus};
40+
outline: #{pfe-var(ui--focus-outline-width)} #{pfe-var(ui--focus-outline-style)} #{pfe-local(focus)};
1841
}
1942

2043
:host([aria-selected="true"]) {
21-
@include pfe-tab-selected;
44+
--pfe-tabs--aux: #{$pfe-color--black};
45+
// Border
46+
border: transparent;
47+
border-bottom: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};
2248
}
2349

2450
:host(:hover) {
25-
@include pfe-tab-hover;
51+
--pfe-tabs--aux: #{pfe-color(text)};
2652
}
2753

2854
/// ===========================================================================
2955
/// VERTICAL TAB ORIENTATION
3056
/// ===========================================================================
3157

3258
:host([vertical]) {
33-
@include pfe-tab-vertical;
59+
text-align: left;
60+
margin: 0 -1px 0 0;
61+
padding-left: calc(#{pfe-var(container-padding)} * .75);
62+
border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;
63+
border-right: 0;
64+
position: relative;
3465
}
3566

3667
:host([vertical][aria-selected="true"]) {
37-
@include pfe-tab-vertical-selected;
68+
border-color-top: transparent;
69+
border-right: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};
3870
}
3971

4072
/// ===========================================================================
4173
/// WIND TAB VARIANTS
4274
/// ===========================================================================
4375

44-
:host([pfe-variant="wind"][aria-selected="true"][on="dark"]) {
45-
@include pfe-tab-wind-dark-selected;
46-
}
47-
76+
:host([pfe-variant="wind"][aria-selected="true"][on="dark"]),
4877
:host([pfe-variant="wind"][on="dark"]:hover) {
49-
@include pfe-tab-wind-dark-selected;
78+
--pfe-tabs--aux: #{pfe-color(ui-tab--dark-hover-color)};
5079
}
5180

5281
/// ===========================================================================
5382
/// EARTH TAB VARIANTS
5483
/// ===========================================================================
5584

5685
:host([pfe-variant="earth"][aria-selected="false"]) {
57-
@include pfe-tab-earth-selected-false;
86+
border-left: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
87+
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
88+
border-top: #{pfe-var(surface--border-width--heavy)} #{pfe-var(ui--border-style)} #{pfe-color(surface--lighter)};
89+
--pfe-tabs--main: #{pfe-color(surface--lighter)};
5890
}
5991

6092
:host([pfe-variant="earth"][aria-selected="true"]) {
61-
@include pfe-tab-earth-selected;
93+
--pfe-tabs--main: #{pfe-color(surface--lightest)};
94+
border-top: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};
95+
border-bottom: 0;
96+
border-left: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
6297
}
6398

6499
:host([pfe-variant="earth"][aria-selected="true"]:last-of-type) {
65-
@include pfe-tab-earth-selected-last;
100+
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
66101
}
67102

68103
/// ===========================================================================
69104
/// EARTH TAB VERTICAL ORIENTATION
70105
/// ===========================================================================
71106

72107
:host([vertical][pfe-variant="earth"]) {
73-
@include pfe-tab-earth-vertical;
108+
border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
74109
}
75110

76111
:host([vertical][pfe-variant="earth"]:first-of-type) {
77-
@include pfe-tab-earth-vertical-first;
112+
border-top: 0;
78113
}
79114

80115
:host([vertical][pfe-variant="earth"][aria-selected="true"]) {
81-
@include pfe-tab-earth-vertical-selected;
116+
border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
117+
border-right: 0;
118+
border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};
82119
}
83120

84121
:host([vertical][pfe-variant="earth"][aria-selected="false"]) {
85-
@include pfe-tab-earth-vertical-selected-false;
122+
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
123+
border-bottom: 0;
124+
border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(ui--border-style)} #{pfe-color(surface--lighter)};
86125
}
87126

88127
:host([vertical][pfe-variant="earth"][aria-selected="true"]:last-of-type) {
89-
@include pfe-tab-earth-vertical-selected-last;
128+
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
90129
}

0 commit comments

Comments
 (0)