Skip to content

Commit 678dfe0

Browse files
mwczmwcz
authored
Merge branch 'master' into fix-avatar-ie11
2 parents 8971caf + daf5ca0 commit 678dfe0

File tree

20 files changed

+8522
-7180
lines changed

20 files changed

+8522
-7180
lines changed

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

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,7 @@ class PfeBand extends PFElement {
143143
if (this.imageSrc) {
144144
this._imgSrcChanged("pfe-img-src", "", this.imageSrc);
145145
}
146-
// Initialize the context setting for the children elements
147-
if (this.backgroundColor) {
148-
this._updateContext(this.backgroundColor);
149-
}
146+
150147
}
151148

152149
attributeChangedCallback(attr, oldValue, newValue) {
@@ -169,8 +166,7 @@ class PfeBand extends PFElement {
169166
// Update the color attribute and contexts
170167
_colorChanged(attr, oldValue, newValue) {
171168
this[attr].value = newValue;
172-
// If the new value has a dark background, update children elements
173-
this._updateContext(newValue);
169+
174170
}
175171

176172
// Update the background image
@@ -179,20 +175,7 @@ class PfeBand extends PFElement {
179175
this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;
180176
}
181177

182-
// Set the children's context if parent background is dark
183-
_updateContext(context) {
184-
if (["darkest", "darker", "complement", "accent"].includes(context)) {
185-
["pfe-cta"].forEach(elementName => {
186-
const els = [...this.querySelectorAll(`${elementName}`)];
187-
els.forEach(el => {
188-
const myContainer = el.closest("[pfe-type=container]");
189-
if (myContainer === this || myContainer === null) {
190-
el.setAttribute("on", "dark");
191-
}
192-
});
193-
});
194-
}
195-
}
178+
196179
}
197180

198181
PFElement.create(PfeBand);

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>PFElements: pfe-card Demo</title>
7-
87
<!-- uncomment the es5-adapter if you're using the umd version -->
98
<script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
109
<script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
@@ -78,7 +77,7 @@ <h2 slot="pfe-card--header">Light card</h2>
7877
<a href="#">Learn more</a>
7978
</pfe-cta>
8079
</pfe-card>
81-
80+
8281
<pfe-card>
8382
<h2 slot="pfe-card--header">Default card</h2>
8483
Unwrapped item. This is the default pfe-card and <a href="#">a link</a>.

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,6 @@ class PfeCard extends PFElement {
127127
if (this.imageSrc) {
128128
this._imgSrcChanged("pfe-img-src", "", this.imageSrc);
129129
}
130-
// Initialize the context setting for the children elements
131-
if (this.backgroundColor) {
132-
this._updateContext(this.backgroundColor);
133-
}
134130

135131
this._observer.observe(this, { childList: true });
136132
}
@@ -159,8 +155,7 @@ class PfeCard extends PFElement {
159155
// Update the color attribute and contexts
160156
_colorChanged(attr, oldValue, newValue) {
161157
this[attr].value = newValue;
162-
// If the new value has a dark background, update children elements
163-
this._updateContext(newValue);
158+
164159
}
165160

166161
// Update the background image
@@ -169,22 +164,6 @@ class PfeCard extends PFElement {
169164
this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;
170165
}
171166

172-
// Set the children's context if parent background is dark
173-
_updateContext(context) {
174-
if (
175-
["darkest", "darker", "dark", "complement", "accent"].includes(context)
176-
) {
177-
["pfe-cta"].forEach(elementName => {
178-
const els = [...this.querySelectorAll(`${elementName}`)];
179-
els.forEach(el => {
180-
const myContainer = el.closest("[pfe-type=container]");
181-
if (myContainer === this || myContainer === null) {
182-
el.setAttribute("on", "dark");
183-
}
184-
});
185-
});
186-
}
187-
}
188167
}
189168

190169
PFElement.create(PfeCard);

‎elements/pfe-cta/README.md‎

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# WIP 🐣: PFElements CTA Element
1+
# PFElements Call-to-action Element
22

33
`pfe-cta` is a call-to-action (CTA) element, that stands out from regular hypertext links, and is used for linking users to webpages.
44

@@ -10,11 +10,19 @@ _Note: `pfe-cta` is not a button, though it may look like one visually._
1010
<a href="https://github.com/">GitHub</a>
1111
</pfe-cta>
1212

13-
<pfe-cta priority="primary">
13+
<pfe-cta pfe-priority="primary">
1414
<a href="https://pfelements.github.io/">Learn more about PFElements</a>
1515
</pfe-cta>
1616

17-
<pfe-cta priority="secondary">
17+
<pfe-cta pfe-priority="secondary">
18+
<a href="https://redhat.com/">Red Hat</a>
19+
</pfe-cta>
20+
21+
<pfe-cta pfe-priority="primary" pfe-color="lightest">
22+
<a href="https://pfelements.github.io/">Learn more about PFElements</a>
23+
</pfe-cta>
24+
25+
<pfe-cta pfe-priority="secondary" pfe-color="complement">
1826
<a href="https://redhat.com/">Red Hat</a>
1927
</pfe-cta>
2028
```
@@ -25,23 +33,33 @@ _Note: `pfe-cta` is not a button, though it may look like one visually._
2533

2634
We expect an anchor tag, `<a>` with an `href`, to be the first child inside `pfe-cta` element.
2735

28-
## Styling
29-
30-
| Theme Var Hook | Description | Default |
31-
| -------------- | ----------- | ------- |
32-
| `--pfe-theme--color--ui-link` | Link color for default CTA | $pfe-color--ui-link |
33-
| `--pfe-theme--color--ui-link--hover` | Hover color for default CTA | $pfe-color--ui-link--hover |
34-
| `--pfe-theme--color--ui-link--focus` | Focus color for default CTA | $pfe-color--ui-link--focus |
35-
| `--pfe-theme--color--ui-accent` | Color for Primary CTA | $pfe-color--ui-accent |
36-
| `--pfe-theme--color--ui-accent--hover` | Hover color for Primary CTA | $pfe-color--ui-accent--hover |
37-
| `--pfe-theme--color--ui-accent--text` | Text color for Primary CTA | $pfe-color--ui-accent--text |
38-
| `--pfe-theme--color--ui-accent--text--hover` | Hover text color for Primary CTA | $pfe-color--ui-accent--text--hover |
39-
| `--pfe-theme--color--ui-base` | Border & text color for Secondary CTA | $pfe-color--ui-base |
40-
| `--pfe-theme--color--ui-base--hover` | Hover color for Secondary CTA | $pfe-color--ui-base--hover |
41-
| `--pfe-theme--color--ui-base--text` | Background color for Secondary CTA | $pfe-color--ui-base--text |
42-
| `--pfe-theme--color--ui-base--text--hover` | Hover text color for Secondary CTA | $pfe-color--ui-base--text--hover |
43-
| `--pfe-theme--color--text--on-dark` | Link color for default CTA with `on="dark"` | $pfe-color--text--on-dark |
44-
| `--pfe-theme--color--ui-link--on-dark--hover` | Hover color for default CTA with `on="dark"` | $pfe-color--ui-link--on-dark--hover |
36+
## Styling approach
37+
38+
```
39+
// 1. set up local vars equal to theme vars & fallbacks
40+
:host {
41+
--pfe-cta--Color: var(--pfe-theme--ui-link, #06c);
42+
}
43+
44+
// 2. Use color property once, map to local var value
45+
:host(:not([priority]) {
46+
::slotted(a) {
47+
//color: blue; CSS compiler will print this for IE11
48+
color: var(--pfe-cta--Color, blue) !important;
49+
}
50+
}
51+
52+
// 3. Use broadcasted variables as needed, with theme fallback after other declarations
53+
:host {
54+
--pfe-cta--Color: var(--pfe-broadcasted--ui-link, var(--pfe-theme--ui-link, #06c));
55+
}
56+
57+
// 4. Override broadcasted last
58+
[color="accent"] {
59+
--pfe-cta--Color: var(--pfe-theme--ui-accent);
60+
}
61+
```
62+
4563

4664
### Testing Theme Var Hooks
4765

@@ -50,10 +68,9 @@ If you'd like to checkout how theming is possible using our CSS Var hooks, try a
5068
```html
5169
<style>
5270
:root {
53-
--pfe-theme--color--ui-accent: green;
54-
--pfe-theme--color--ui-accent--hover: darkgreen;
55-
--pfe-theme--color--ui-accent--text: white;
56-
--pfe-theme--color--ui-accent--text--hover: white;
71+
--pfe-theme--color--ui-accent: green;
72+
--pfe-theme--color--ui-accent--hover: darkgreen;
73+
--pfe-theme--color--ui-accent--text: white;
5774
}
5875
</style>
5976
```

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
2+
body {
3+
margin: 0;
4+
}
5+
6+
h1,
7+
h2,
8+
h3,
9+
p {
10+
font-family: var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);
11+
}
12+
13+
h1,
14+
h2 {
15+
margin: 15px 0 10px;
16+
}
17+
18+
pfe-band {
19+
--pfe-band--Padding--horizontal: 60px;
20+
--pfe-band--Width: 100%;
21+
}
22+
23+
pfe-card {
24+
display: grid;
25+
grid-gap: 15px;
26+
--pfe-card--Padding: 10px;
27+
}
28+
29+
pfe-cta {
30+
margin-top: 10px;
31+
margin-left: 20px;
32+
}
33+
34+
.force-wrap {
35+
max-width: 100px;
36+
}
37+
38+
.card-layout {
39+
display: grid;
40+
grid-gap: 10px;
41+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
42+
}
43+
44+
a {
45+
color: #2290ff;
46+
}
47+
48+
.custom-dark-band {
49+
padding: 60px 15px;
50+
background: #222;
51+
--pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, yellow);
52+
--pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, red);
53+
--pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, orange);
54+
--pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, pink);
55+
--pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, orange);
56+
}
57+
58+
.custom-light-band {
59+
padding: 60px 15px;
60+
background: #cce7e8;
61+
}
62+
63+
.custom-on-dark-band {
64+
padding: 30px 15px;
65+
background: #0d053e;
66+
}

0 commit comments

Comments
 (0)