Skip to content

Commit 4c602ff

Browse files
starryeyez024castastrophegithub-actions[bot]
authored
Fix: Typography mixin arguments & update docs (#1385)
* Simplify and fix font sizing which should be default:18px, priority:16px, disabled: 16px. - remove math which left us with uneven font sizes. We have plenty of hooks to override as needed: custom properties for default, priority, and disabled * changelog * Update CHANGELOG-1.x.md Sorry the changelog was confusing because I was planning to roll a release today * Apply suggestions from code review Co-authored-by: [ Cassondra ] <[email protected]> * Update elements/pfe-cta/src/pfe-cta.scss * add deprecation note * Update mixin so that the $base argument works for both types: title & text , and wraps up margin bottom into the "extras" * Catch up with master; changelog * Add $spacing argument to typography mixin. Update styles that show up with the placeholders * Update documentation * Update docs * Move font-family for text into base argument, since its inherited by default * Update docs * Utilize pfe-typography mixin in the pfe-clipboard component; formatting in demo file * Update mixin for typography classes to avoid regressions * Revert default values of arguments * Add alias mixin for components specifically * fix comment * Update baseline for clipboard * documentation updates & name change of alias mixin, and move sass variables that define font-size var stack to inside of if statements, so they are different for components vs typography modifier classes * fix argument name * Add documentation for typography * baseline image updates * Remove unnecessary var from local map; update baseline * update baseline Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 886ad1f commit 4c602ff

File tree

14 files changed

+581
-115
lines changed

14 files changed

+581
-115
lines changed

‎CHANGELOG-1.x.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
# 1.X (TBD)
22

33
- [06257ba](https://github.com/patternfly/patternfly-elements/commit/06257ba7edc3ca70ddfd0dd6c71e600540ac692b) fix: pfe-accordion accessibility issues
4-
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-codeblock - update theme colours for accessibility
4+
- [c90f649](https://github.com/patternfly/patternfly-elements/commit/c90f6498945292fc8910e80433b8996fc2540be6) fix: pfe-codeblock - update theme colours for accessibility
5+
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-sass typography mixin; update arguement support for $type
6+
57
# 1.3.2 (2021-03-04)
68

79
- [d99e9f1](https://github.com/patternfly/patternfly-elements/commit/d99e9f18ae95617332856f00a9d9241bb505479c) fix: Content set hold rendering until upgrade, prefixed attribute support for overflow property in cards

‎docs/content/theme/typography-sizing.md‎

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,47 @@ tags = [ "theme" ]
1111
+++
1212

1313

14-
### Typography sizing
14+
### Typography sizing variables
1515

16-
| **Pixels** | **PF** | **Global variables** | **Title CSS vars** | **Classes** | **PFE semantic HTML** | **Deprecated CSS variables** | **Deprecated classes** |
17-
| ----------- | -------- | -------------------------- | ------------------------------ | --------------- | ----------------------------- | ---------------------------------- | ---------------------- |
18-
| **Titles** | | | | | | | |
19-
| **48px** | | --pf-global--FontSize--6xl | --pf-c--title--m-6xl--FontSize | .pfe-title--6xl | | --pfe-theme--font-size--xxl | .pfe-headline-xxl |
20-
| **40px** | | --pf-global--FontSize--5xl | --pf-c--title--m-5xl--FontSize | .pfe-title--5xl | | --pfe-theme--font-size--xl | .pfe-headline-xl |
21-
| **36px** | PF 4xl | --pf-global--FontSize--4xl | --pf-c--title--m-4xl--FontSize | .pfe-title--4xl | | --pfe-theme--font-size--alpha | .pfe-headline-alpha |
22-
| **28px** | PF 3xl | --pf-global--FontSize--3xl | --pf-c--title--m-3xl--FontSize | .pfe-title--3xl | --pf-c--content--h1--FontSize | --pfe-theme--font-size--beta | .pfe-headline-beta |
23-
| **24px** | PF 2xl | --pf-global--FontSize--2xl | --pf-c--title--m-2xl--FontSize | .pfe-title--2xl | --pf-c--content--h2--FontSize | --pfe-theme--font-size--gamma | .pfe-headline-gamma |
24-
| **20px** | PF xl | --pf-global--FontSize--xl | --pf-c--title--m-xl--FontSize | .pfe-title--xl | --pf-c--content--h3--FontSize | --pfe-theme--font-size--delta | .pfe-headline-delta |
25-
| **18px** | PF lg | --pf-global--FontSize--lg | --pf-c--title--m-lg--FontSize | .pfe-title--lg | --pf-c--content--h4--FontSize | --pfe-theme--font-size--epsilon | .pfe-headline-epsilon |
26-
| **16px** | PF md | --pf-global--FontSize--md | --pf-c--title--m-md--FontSize | .pfe-title--md | --pf-c--content--h5--FontSize | --pfe-theme--font-size--zeta | .pfe-headline-zeta |
27-
| **14px** | PF sm | --pf-global--FontSize--sm | --pf-c--title--m-sm--FontSize | .pfe-title--sm | --pf-c--content--h6--FontSize | | |
28-
| **12px** | | --pf-global--FontSize--xs | --pf-c--title--m-xs--FontSize | .pfe-title--xs | | | |
29-
| **Content** | | | | | | | |
30-
| **20px** | PF xl | --pf-global--FontSize--xl | --pf-c--title--m-xl--FontSize | | | | |
31-
| **18px** | PF lg | --pf-global--FontSize--lg | --pf-c--title--m-lg--FontSize | | | --pfe-theme--font-size--default-lg | .pfe-text-lg |
32-
| **16px** | PF md | --pf-global--FontSize--md | --pf-c--title--m-md--FontSize | | --pf-c--content--FontSize | --pfe-theme--font-size--default | .pfe-text |
33-
| **14px** | PF sm | --pf-global--FontSize--sm | --pf-c--title--m-sm--FontSize | | | --pfe-theme--font-size--default-sm | .pfe-text-sm |
34-
| **12px** | PF xs | --pf-global--FontSize--xs | --pf-c--title--m-xs--FontSize | | | --pfe-theme--font-size--default-xs | .pfe-text-xs |
16+
| **Pixels** | **PF** | **Global** | **Title and Text (body copy)** | **Semantic HTML** |
17+
| ----------- | ------ | -------------------------- | ------------------------------ | ----------------------------- |
18+
| **Titles** | | | | |
19+
| 48px | 6xl | `--pf-global--FontSize--6xl` | `--pf-c--title--m-6xl--FontSize` | |
20+
| 40px | 5xl | `--pf-global--FontSize--5xl` | `--pf-c--title--m-5xl--FontSize` | |
21+
| 36px | 4xl | `--pf-global--FontSize--4xl` | `--pf-c--title--m-4xl--FontSize` | |
22+
| 28px | 3xl | `--pf-global--FontSize--3xl` | `--pf-c--title--m-3xl--FontSize` | `--pf-c--content--h1--FontSize` |
23+
| 24px | 2xl | `--pf-global--FontSize--2xl` | `--pf-c--title--m-2xl--FontSize` | `--pf-c--content--h2--FontSize` |
24+
| 20px | xl | `--pf-global--FontSize--xl ` | `--pf-c--title--m-xl--FontSize ` | `--pf-c--content--h3--FontSize` |
25+
| 18px | lg | `--pf-global--FontSize--lg ` | `--pf-c--title--m-lg--FontSize ` | `--pf-c--content--h4--FontSize` |
26+
| 16px | md | `--pf-global--FontSize--md ` | `--pf-c--title--m-md--FontSize ` | `--pf-c--content--h5--FontSize` |
27+
| 14px | sm | `--pf-global--FontSize--sm ` | `--pf-c--title--m-sm--FontSize ` | `--pf-c--content--h6--FontSize` |
28+
| 12px | | `--pf-global--FontSize--xs ` | `--pf-c--title--m-xs--FontSize ` | |
29+
| **Content** | | | | |
30+
| 20px | xl | `--pf-global--FontSize--xl ` | `--pf-c--text--m-xl--FontSize ` | |
31+
| 18px | lg | `--pf-global--FontSize--lg ` | `--pf-c--text--m-lg--FontSize ` | |
32+
| 16px | md | `--pf-global--FontSize--md ` | `--pf-c--text--m-md--FontSize ` | `--pf-c--content--FontSize` |
33+
| 14px | sm | `--pf-global--FontSize--sm ` | `--pf-c--text--m-sm--FontSize ` | |
34+
| 12px | xs | `--pf-global--FontSize--xs ` | `--pf-c--text--m-xs--FontSize ` | |
35+
36+
37+
### Typography classes & mixin
38+
39+
| **Pixels** | **PF** | **Class** | **Mixin** |
40+
| ----------- | ------ | --------------- | -------------------------------------------------------- |
41+
| **Titles** | | | |
42+
| 48px | 6xl | `.pfe-title--6xl` | `@include pfe-c-typography($sizing: 6xl, $type: title);` |
43+
| 40px | 5xl | `.pfe-title--5xl` | `@include pfe-c-typography($sizing: 5xl, $type: title);` |
44+
| 36px | 4xl | `.pfe-title--4xl` | `@include pfe-c-typography($sizing: 4xl, $type: title);` |
45+
| 28px | 3xl | `.pfe-title--3xl` | `@include pfe-c-typography($sizing: 3xl, $type: title);` |
46+
| 24px | 2xl | `.pfe-title--2xl` | `@include pfe-c-typography($sizing: 2xl, $type: title);` |
47+
| 20px | xl | `.pfe-title--xl ` | `@include pfe-c-typography($sizing: xl, $type: title);` |
48+
| 18px | lg | `.pfe-title--lg ` | `@include pfe-c-typography($sizing: lg, $type: title);` |
49+
| 16px | md | `.pfe-title--md ` | `@include pfe-c-typography($sizing: md, $type: title);` |
50+
| 14px | sm | `.pfe-title--sm ` | `@include pfe-c-typography($sizing: sm, $type: title);` |
51+
| 12px | | `.pfe-title--xs ` | `@include pfe-c-typography($sizing: xs, $type: title);` |
52+
| **Content** | | | |
53+
| 20px | xl | `.pfe-text--xl ` | `@include pfe-c-typography($sizing: xl, $type: text);` |
54+
| 18px | lg | `.pfe-text--lg ` | `@include pfe-c-typography($sizing: lg, $type: text);` |
55+
| 16px | md | `.pfe-text--md ` | `@include pfe-c-typography($sizing: md, $type: text);` |
56+
| 14px | sm | `.pfe-text--sm ` | `@include pfe-c-typography($sizing: sm, $type: text);` |
57+
| 12px | xs | `.pfe-text--xs ` | `@include pfe-c-typography($sizing: xs, $type: text);` |

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,21 +61,21 @@ <h1 slot="pfe-band--header">&#x3C;pfe-clipboard&#x3E;</h1>
6161
<h2>Clipboard</h2>
6262
<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
6363

64-
<h2>Clipboard w/ noIcon</h2>
64+
<h2>Clipboard with no icon</h2>
6565
<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
6666

67-
<h2>Clipboard: w/ custom icon</h2>
67+
<h2>Clipboard: with custom icon</h2>
6868
<pfe-clipboard role="button" tabindex="0">
6969
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
7070
</pfe-clipboard>
7171

72-
<h2>Clipboard: w/ custom text</h2>
72+
<h2>Clipboard: with custom text</h2>
7373
<pfe-clipboard role="button" tabindex="0">
7474
<span slot="text">You can totally click to copy url</span>
7575
<span slot="text--success">Making some copies!</span>
7676
</pfe-clipboard>
7777

78-
<h2>Clipboard: w/ custom success text duration.</h2>
78+
<h2>Clipboard: with custom success text duration.</h2>
7979
<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
8080
</pfe-band>
8181

@@ -85,21 +85,21 @@ <h2>Clipboard: w/ custom success text duration.</h2>
8585
<h2>Clipboard</h2>
8686
<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
8787

88-
<h2>Clipboard w/ noIcon</h2>
88+
<h2>Clipboard with no icon</h2>
8989
<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
9090

91-
<h2>Clipboard: w/ custom icon</h2>
91+
<h2>Clipboard: with custom icon</h2>
9292
<pfe-clipboard role="button" tabindex="0">
9393
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
9494
</pfe-clipboard>
9595

96-
<h2>Clipboard: w/ custom text</h2>
96+
<h2>Clipboard: with custom text</h2>
9797
<pfe-clipboard role="button" tabindex="0">
9898
<span slot="text">You can totally click to copy url</span>
9999
<span slot="text--success">Making some copies!</span>
100100
</pfe-clipboard>
101101

102-
<h2>Clipboard: w/ custom success text duration.</h2>
102+
<h2>Clipboard: with custom success text duration.</h2>
103103
<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
104104
</pfe-band>
105105

‎elements/pfe-clipboard/src/pfe-clipboard.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ $LOCAL: clipboard;
55

66
// This variable is global so that helper functions can reference it
77
$LOCAL-VARIABLES: (
8-
FontSize: 1rem,
98
Padding: 6px 16px,
109
FontWeight: pfe-var(font-weight--light),
1110
Color: pfe-broadcasted(link),
@@ -24,10 +23,10 @@ $LOCAL-VARIABLES: (
2423
align-items: center;
2524
max-width: fit-content;
2625
color: pfe-local(Color) !important;
27-
font-weight: pfe-local(FontWeight);
28-
font-size: pfe-local(FontSize) !important;
2926
cursor: pointer;
3027
padding: pfe-local(Padding);
28+
font-weight: pfe-local(FontWeight);
29+
@include pfe-c-typography($type: text, $sizing: md);
3130
}
3231

3332
:host([hidden]) {

‎elements/pfe-sass/README.md‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,182 @@ Let's use the pfe-cta as an example. We can start by defining local variables, n
4848
--pfe-cta--Color: var(theme--surface-accent--link);
4949
}
5050
```
51+
52+
53+
54+
# Typography Classes
55+
56+
There are a variety of mixins, extends, and variables available in pfe-sass. We recommend checking out the sass doc for extensive information about how to use these tools.
57+
58+
There are already utility / modifier classes available within pfe-typography-classes.css for use within long form content. However if you need custom classes, you can utilize either the placeholders, or the `pfe-typography` mixin.
59+
60+
## Text class examples
61+
62+
```scss
63+
.custom-text--foo {
64+
@extend %pfe-text--lg;
65+
}
66+
.custom-text--bar {
67+
@include pfe-typography(lg, $type: "text");
68+
}
69+
.custom-text--baz {
70+
@include pfe-typography(lg, $type: "text", $base: true);
71+
}
72+
73+
```
74+
75+
76+
```css
77+
.custom-text--foo {
78+
font-size: 1.125rem;
79+
font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
80+
font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
81+
font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
82+
line-height: 1.5;
83+
line-height: var(--pfe-theme--line-height, 1.5);
84+
font-weight: 400;
85+
font-weight: var(--pfe-theme--font-weight--normal, 400);
86+
}
87+
88+
.custom-text--foo:not(:last-child):not(:empty) {
89+
margin-bottom: 0.5rem;
90+
margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
91+
}
92+
93+
.custom-text--bar {
94+
font-size: 1.125rem;
95+
font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
96+
font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
97+
font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
98+
line-height: 1.5;
99+
line-height: var(--pfe-theme--line-height, 1.5);
100+
font-weight: 400;
101+
font-weight: var(--pfe-theme--font-weight--normal, 400);
102+
}
103+
104+
.custom-text--bar:not(:last-child):not(:empty) {
105+
margin-bottom: 0.5rem;
106+
margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
107+
}
108+
109+
.custom-text--baz {
110+
font-size: 1.125rem;
111+
font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
112+
font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
113+
font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
114+
line-height: 1.5;
115+
line-height: var(--pfe-theme--line-height, 1.5);
116+
font-weight: 400;
117+
font-weight: var(--pfe-theme--font-weight--normal, 400);
118+
}
119+
120+
.custom-text--baz:not(:last-child):not(:empty) {
121+
margin-bottom: 0.5rem;
122+
margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
123+
}
124+
```
125+
126+
## Title examples
127+
128+
Note that you can opt in or out out of properties beyond the font-family and font-size if desired, via the argument: `$base: false` and/or `$spacing: false`.
129+
130+
```scss
131+
.custom-title--foo {
132+
@extend %pfe-title--lg;
133+
}
134+
.custom-title--bar {
135+
@include pfe-typography(lg, $type: "title");
136+
}
137+
.custom-title--baz {
138+
@include pfe-typography(lg, $type: "title", $base: false);
139+
}
140+
```
141+
142+
```css
143+
.custom-title--foo {
144+
font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
145+
font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
146+
font-size: 1.125rem;
147+
font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
148+
line-height: 1.5;
149+
line-height: var(--pfe-theme--line-height, 1.5);
150+
font-weight: 400;
151+
font-weight: var(--pfe-theme--font-weight--normal, 400);
152+
}
153+
154+
.custom-title--foo:not(:last-child) {
155+
margin-bottom: 1rem;
156+
margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);
157+
}
158+
159+
.custom-title--bar {
160+
font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
161+
font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
162+
font-size: 1.125rem;
163+
font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
164+
line-height: 1.5;
165+
line-height: var(--pfe-theme--line-height, 1.5);
166+
font-weight: 400;
167+
font-weight: var(--pfe-theme--font-weight--normal, 400);
168+
}
169+
170+
.custom-title--bar:not(:last-child) {
171+
margin-bottom: 1rem;
172+
margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);
173+
}
174+
175+
.custom-title--baz {
176+
font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
177+
font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
178+
font-size: 1.125rem;
179+
font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
180+
}
181+
182+
```
183+
184+
### Component examples
185+
186+
```scss
187+
:host[foo] {
188+
font-size: pfe-local(FontSize);
189+
}
190+
191+
:host[bar] {
192+
@include pfe-c-typography($type: text, $sizing: md);
193+
}
194+
195+
:host[baz] {
196+
@include pfe-c-typography($type: text, $sizing: md, $base: true, $spacing: true, $light-dom-heading:true);
197+
}
198+
199+
```
200+
201+
```css
202+
:host[foo] {
203+
font-size: 1rem;
204+
font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
205+
}
206+
207+
:host[bar] {
208+
font-size: 1rem;
209+
font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
210+
}
211+
212+
:host[baz] {
213+
font-size: 1rem;
214+
font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
215+
font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
216+
font-family: var(--pfe-clipboard--LineHeight, var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif));
217+
line-height: 1.5;
218+
line-height: var(--pfe-clipboard--LineHeight, var(--pfe-theme--line-height, 1.5));
219+
font-weight: 400;
220+
font-weight: var(--pfe-clipboard--FontWeight, var(--pfe-theme--font-weight--normal, 400));
221+
--pf-c--FontSize: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
222+
}
223+
224+
:host[baz]:not(:last-child) {
225+
margin-bottom: 0.5rem;
226+
margin-bottom: var(--pfe-clipboard--MarginBottom, var(--pfe-theme--content-spacer--body--sm, 0.5rem));
227+
}
228+
```
229+

‎elements/pfe-sass/extends/_typography_extends.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
// TITLE MODIFERS
4040
@each $size in (6xl, 5xl, 4xl, 3xl, 2xl, xl, lg, md, sm, xs) {
4141
%pfe-title--#{$size} {
42-
@include pfe-typography($size);
42+
@include pfe-typography($size, $base: true, $spacing: true);
4343
}
4444
}
4545

0 commit comments

Comments
 (0)