Skip to content

Commit 235e9a8

Browse files
castastrophecastastrophe
authored
fix: pfe-tab move content from light to shadow DOM (#769)
* : Add clearing to the tabs using the clear-spacing mixin * : Add some sugar to the demo page * : Add scroll-to-top functionality * : Remove clear spacing mixin * : Adding clarity to injected content in the tabset * : Add typography styles to ShadowDOM * : Move padding out of selector * : Revert component file, update typo in sass and newline in template * : Update mutation observer to watch text updates * : Update logic to retain semantic value of headings * : Remove hanging item from index listing * : Add variable hook for font size * : Make the inherit styles more generic * : Fix AT * Remove submit button that is not needed * : Add comments to pfe-tabs
1 parent 2adef08 commit 235e9a8

File tree

10 files changed

+1164
-1063
lines changed

10 files changed

+1164
-1063
lines changed

‎CHANGELOG-prerelease.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
## Prerelease 50 ( TBD )
22

3-
- [775b821](https://github.com/patternfly/patternfly-elements/commit/775b821702c903f926b8bf9fdf9c948ac949335f) Add automatic labeling to PRs
4-
- [](https://github.com/patternfly/patternfly-elements/commit/) Move PR cards automatically in the Project when labels are changed
3+
- [775b821](https://github.com/patternfly/patternfly-elements/commit/775b821702c903f926b8bf9fdf9c948ac949335f) feat: Add automatic labeling to PRs
4+
- [82bf8e6](https://github.com/patternfly/patternfly-elements/commit/82bf8e6a0d407a651571dac1e37d06a2b14fa3d4) feat: Move PR cards automatically in the Project when labels are changed
5+
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Move tab headings to the ShadowDOM
56

67
## Prerelease 49 ( 2020-05-29 )
78

‎elements/pfe-tabs/demo/demo.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
html {
2+
scroll-behavior: smooth;
3+
}
4+
5+
@media screen and (max-width: 899px) {
6+
.toc {
7+
--pfe-card--PaddingTop: 5px;
8+
--pfe-card--PaddingBottom: 5px;
9+
--pfe-card--PaddingLeft: 32px;
10+
}
11+
12+
.toc>a {
13+
display: none;
14+
}
15+
}
16+
17+
@media screen and (min-width: 900px) {
18+
.toc {
19+
position: fixed;
20+
top: 0;
21+
right: 0;
22+
z-index: 5;
23+
}
24+
25+
.scroll-up {
26+
display: none;
27+
}
28+
}
29+
30+
.scroll-up {
31+
border-radius: 3px;
32+
padding: 3px;
33+
background-color: rgba(0, 0, 0, 0.6);
34+
position: fixed;
35+
bottom: 10px;
36+
right: 10px;
37+
}
38+
39+
.scroll-up pfe-icon {
40+
--pfe-icon--Color: #fff;
41+
}
42+
43+
[class^="example"],
44+
section.pfe-l-grid {
45+
margin: 32px;
46+
padding: 32px 20px;
47+
}
48+
49+
@media screen and (min-width: 900px) {
50+
[class^="example"],
51+
section.pfe-l-grid {
52+
margin-right: 385px !important;
53+
}
54+
}
55+
56+
57+
.example>h2 {
58+
text-align: right;
59+
}
60+
61+
.subheading {
62+
margin: 0;
63+
font-size: 18px;
64+
font-weight: bold;
65+
font-family: "Arial";
66+
}
67+
68+
.dark-background {
69+
background-color: #151515;
70+
--theme: dark;
71+
}
72+
73+
.floating-card {
74+
float: left;
75+
width: 48%;
76+
margin-right: 2%;
77+
border: #eee solid 1px;
78+
padding: 20px;
79+
}
80+
81+
.form-ui+.form-ui {
82+
margin-top: 5px;
83+
}
84+
85+
pfe-tabs+button {
86+
background-color: #eee;
87+
border: 1px solid #ddd;
88+
padding: 5px 10px;
89+
margin-top: 10px;
90+
}
91+
92+
pfe-tabs+button:hover {
93+
background-color: #ddd;
94+
}
95+
96+
button {
97+
font-size: 16px;
98+
border: 1px solid #ddd;
99+
padding: 5px 10px;
100+
}
101+
102+
.form {
103+
width: fit-content;
104+
margin-top: 10px;
105+
}
106+
107+
button.form-ui {
108+
background-color: #fff;
109+
float: right;
110+
margin-top: 15px;
111+
margin-right: 22px;
112+
}
113+
114+
.form-ui label {
115+
font-weight: bold;
116+
min-width: 60px;
117+
display: block;
118+
float: left;
119+
line-height: 2em;
120+
}
121+
122+
.form-ui input {
123+
height: 2em;
124+
font-size: 1em;
125+
padding: 2px 5px;
126+
}

‎elements/pfe-tabs/demo/index.html‎

Lines changed: 371 additions & 619 deletions
Large diffs are not rendered by default.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<slot></slot>
1+
<span class="pfe-tab"></span>

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ $variables: (
99
focus: pfe-color(link--focus),
1010
highlight: pfe-color(ui-accent),
1111
tab: (
12+
FontSize: pfe-var(font-size),
1213
PaddingTop: calc(#{pfe-var(container-padding)} * .666),
1314
PaddingRight: calc(#{pfe-var(container-padding)} * 1.5),
1415
PaddingBottom: calc(#{pfe-var(container-padding)} * .666),
@@ -40,17 +41,23 @@ $variables: (
4041
background-color: #{pfe-local(BackgroundColor)};
4142
color: #{pfe-local(Color)};
4243

43-
// Exposing this for customization
44-
text-transform: #{pfe-local($cssvar: TextTransform, $region: tab, $fallback: none)};
45-
font-weight: #{pfe-var(font-weight--normal)};
46-
4744
cursor: pointer;
4845
text-align: #{pfe-local($cssvar: TextAlign, $region: tab, $fallback: center)};
4946

50-
::slotted(*) {
51-
color: #{pfe-local(Color)} !important;
47+
// Exposing this for customization
48+
text-transform: #{pfe-local($cssvar: TextTransform, $region: tab, $fallback: none)};
49+
font-family: #{pfe-var(font-family)};
50+
font-weight: #{pfe-var(font-weight--normal)};
51+
font-size: #{pfe-local(FontSize, $region: tab)};
52+
53+
@for $i from 1 through 6 {
54+
.pfe-tab > * {
55+
font-size: inherit;
56+
font-weight: inherit;
57+
margin: 0;
58+
}
5259
}
53-
60+
5461
@at-root #{&}(:hover) {
5562
--pfe-tabs--Color: #{pfe-color(text)};
5663
@include browser-query(ie11) {

‎elements/pfe-tabs/src/pfe-tabs.js‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@ const TABS_MUTATION_CONFIG = {
2121
subtree: true
2222
};
2323

24+
const TAB_CONTENT_MUTATION_CONFIG = {
25+
characterData: true,
26+
childList: true,
27+
subtree: true
28+
};
29+
2430
function generateId() {
2531
return Math.random()
2632
.toString(36)
@@ -522,18 +528,22 @@ class PfeTab extends PFElement {
522528
constructor() {
523529
super(PfeTab);
524530

531+
this._tabItem;
525532
this._init = this._init.bind(this);
533+
this._setTabContent = this._setTabContent.bind(this);
526534
this._observer = new MutationObserver(this._init);
527535
}
528536

529537
connectedCallback() {
530538
super.connectedCallback();
531539

540+
this._tabItem = this.shadowRoot.querySelector(`.${this.tag}`);
541+
532542
if (this.children.length || this.textContent.trim().length) {
533543
this._init();
534544
}
535545

536-
this._observer.observe(this, { childList: true });
546+
this._observer.observe(this, TAB_CONTENT_MUTATION_CONFIG);
537547
}
538548

539549
attributeChangedCallback() {
@@ -550,6 +560,9 @@ class PfeTab extends PFElement {
550560
this._observer.disconnect();
551561
}
552562

563+
// Copy the tab content into the template
564+
this._setTabContent();
565+
553566
if (!this.pfeId) {
554567
this.pfeId = `${PfeTab.tag}-${generateId()}`;
555568
}
@@ -571,8 +584,47 @@ class PfeTab extends PFElement {
571584
}
572585

573586
if (window.ShadyCSS) {
574-
this._observer.observe(this, { childList: true });
587+
this._observer.observe(this, TAB_CONTENT_MUTATION_CONFIG);
588+
}
589+
}
590+
591+
_setTabContent() {
592+
// Copy the tab content into the template
593+
const label = this.textContent.trim().replace(/\s+/g, " ");
594+
595+
if (!label) {
596+
console.warn(
597+
`${this.tag}: There does not appear to be any content in the tab region.`
598+
);
599+
return;
600+
}
601+
602+
let semantics = "";
603+
// Get the semantics of the content
604+
if (this.children.length > 0) {
605+
// We only care about the first child that is a tag
606+
if (
607+
this.firstElementChild &&
608+
this.firstElementChild.tagName.match(/^H[1-6]/)
609+
) {
610+
semantics = this.firstElementChild.tagName.toLowerCase();
611+
}
612+
}
613+
614+
// Create an h-level tag for the shadow tab, default h3
615+
let heading = document.createElement("h3");
616+
617+
// Use the provided semantics if provided
618+
if (semantics.length > 0) {
619+
heading = document.createElement(semantics);
575620
}
621+
622+
// Assign the label content to the new heading
623+
heading.textContent = label;
624+
625+
// Attach the heading to the tabItem
626+
this._tabItem.innerHTML = "";
627+
this._tabItem.appendChild(heading);
576628
}
577629
}
578630

@@ -612,7 +664,7 @@ class PfeTabPanel extends PFElement {
612664
super.connectedCallback();
613665

614666
this._init();
615-
this._observer.observe(this, { childList: true });
667+
this._observer.observe(this, TABS_MUTATION_CONFIG);
616668
}
617669

618670
disconnectedCallback() {
@@ -641,7 +693,7 @@ class PfeTabPanel extends PFElement {
641693
}
642694

643695
if (window.ShadyCSS) {
644-
this._observer.observe(this, { childList: true });
696+
this._observer.observe(this, TABS_MUTATION_CONFIG);
645697
}
646698
}
647699
}

‎elements/pfe-tabs/src/pfe-tabs.json‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,6 @@
5555
"default": "wind",
5656
"prefixed": true
5757
},
58-
"on": {
59-
"title": "Context",
60-
"type": "string",
61-
"enum": ["light", "dark"],
62-
"default": "light",
63-
"prefixed": false
64-
},
6558
"tab-history": {
6659
"title": "Tab history",
6760
"type": "boolean",

0 commit comments

Comments
 (0)