Skip to content

Commit 62a5d64

Browse files
bennypowersbennypowers
committed
fix(sass)!: remove mixins
pfe-typography, pfe-c-typography, and focus-ring were not compiling properly under dart-sass. This commit removes them and impelments their properties at each call site.
1 parent d2c1124 commit 62a5d64

File tree

14 files changed

+222
-329
lines changed

14 files changed

+222
-329
lines changed

‎.changeset/few-windows-exercise.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
"@patternfly/pfe-sass": major
3+
---
4+
5+
Remove `focus-ring`, `pfe-typography`, and `pfe-c-typogrpahy` mixins
6+
7+
To implement focus-ring, see `pfe-accordion-header` or `pfe-jump-links`.
8+
9+
```scss
10+
outline: none;
11+
position: relative;
12+
13+
&::before {
14+
position: absolute;
15+
content: "";
16+
top: -2px;
17+
left: -2px;
18+
width: calc(100% + #{pfe-var(ui--border-width--active)});
19+
height: calc(100% + #{pfe-var(ui--border-width--active)});
20+
border-radius: pfe-var(ui--border-radius);
21+
border: pfe-var(ui--border-width--md) pfe-var(ui--border-style) transparent;
22+
}
23+
24+
&:focus::before{
25+
border-color: #6b9ff0;
26+
}
27+
28+
&:focus:not(:focus-visible)::before {
29+
border: unset;
30+
}
31+
```
32+
33+
To implement typography, see `core/pfe-sass/extends/_typography_extends.scss`

‎core/pfe-sass/README.md‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -54,21 +54,14 @@ Let's use the pfe-cta as an example. We can start by defining local variables, n
5454

5555
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.
5656

57-
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.
57+
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 the placeholders.
5858

5959
## Text class examples
6060

6161
```scss
6262
.custom-text--foo {
6363
@extend %pfe-text--lg;
6464
}
65-
.custom-text--bar {
66-
@include pfe-typography(lg, $type: "text");
67-
}
68-
.custom-text--baz {
69-
@include pfe-typography(lg, $type: "text", $base: true);
70-
}
71-
7265
```
7366

7467

@@ -130,12 +123,6 @@ Note that you can opt in or out out of properties beyond the font-family and fon
130123
.custom-title--foo {
131124
@extend %pfe-title--lg;
132125
}
133-
.custom-title--bar {
134-
@include pfe-typography(lg, $type: "title");
135-
}
136-
.custom-title--baz {
137-
@include pfe-typography(lg, $type: "title", $base: false);
138-
}
139126
```
140127

141128
```css
@@ -186,15 +173,6 @@ Note that you can opt in or out out of properties beyond the font-family and fon
186173
:host[foo] {
187174
font-size: pfe-local(FontSize);
188175
}
189-
190-
:host[bar] {
191-
@include pfe-c-typography($type: text, $sizing: md);
192-
}
193-
194-
:host[baz] {
195-
@include pfe-c-typography($type: text, $sizing: md, $base: true, $spacing: true, $light-dom-heading:true);
196-
}
197-
198176
```
199177

200178
```css

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

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/// @group typography
33
////
44

5+
@use "../maps/typography" as *;
56
@use "../mixins/copy-mixins" as *;
67
@use "../functions/custom-properties" as *;
78

@@ -42,13 +43,52 @@
4243
// TITLE MODIFERS
4344
@each $size in (6xl, 5xl, 4xl, 3xl, 2xl, xl, lg, md, sm, xs) {
4445
%pfe-title--#{$size} {
45-
@include pfe-typography($size, $base: true, $spacing: true);
46+
// Capture the values of properties to use directly or wrapped in the pfe-local function below
47+
// Initialize variables at the $pf-title-set--tiny size
48+
// $size == "lg" or "md" or "sm" or "xs"
49+
50+
$line-height: pfe-var(line-height);
51+
$font-weight: pfe-var(font-weight--normal);
52+
$margin-bottom: pfe-var(content-spacer--heading--sm);
53+
54+
@if index($pf-title-set--mega, "#{$size}") != null {
55+
$line-height: pfe-var(line-height--heading-mega);
56+
$font-weight: pfe-var(font-weight--light);
57+
$margin-bottom: pfe-var(content-spacer--heading--md);
58+
}
59+
60+
// $size == "4xl" or "3xl" or "2xl"
61+
@else if index($pf-title-set--regular, "#{$size}") != null {
62+
$line-height: pfe-var(line-height--heading);
63+
$font-weight: pfe-var(font-weight--normal);
64+
$margin-bottom: pfe-var(content-spacer--heading--sm);
65+
}
66+
67+
// If this value was not found in the tiny set, it's likely not supported
68+
@else if index($pf-title-set--tiny, "#{$size}") == null {
69+
@warn "#{$size} was not found in $pf-title-set--mega, $pf-title-set--regular, or $pf-title-set--tiny.";
70+
}
71+
72+
// include title var and global var in stack
73+
font-family: pfe-var(font-family--heading);
74+
font-size: pfe-var(title--m-#{$size}--FontSize);
75+
line-height: $line-height;
76+
font-weight: $font-weight;
77+
&:not(:last-child) {
78+
margin-bottom: $margin-bottom;
79+
}
4680
}
4781
}
4882

4983
// TEXT MODIFERS
5084
@each $size in (lg, md, sm, xs) {
5185
%pfe-text--#{$size} {
52-
@include pfe-typography($size, $type: "text");
86+
font-size: pfe-var(text--m-#{$size}--FontSize);
87+
font-family: pfe-var(font-family);
88+
line-height: pfe-var(line-height);
89+
font-weight: pfe-var(font-weight--normal);
90+
&:not(:last-child):not(:empty) {
91+
margin-bottom: pfe-var(content-spacer--body--sm); //16px
92+
}
5393
}
5494
}

‎core/pfe-sass/mixins/_components.scss‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "../variables/4-sizes" as *;
22
@use "../functions/custom-properties" as *;
33
@use "../functions/general" as *;
4+
@use "../maps/typography" as *;
45
@use "../mixins/copy-mixins" as *;
56
@use "../mixins/custom-properties" as *;
67
@use "sass:map";
@@ -285,11 +286,46 @@
285286
// of the line height of the number inside of the circle
286287
padding-top: calc((#{pfe-local(size, $region: circle, $fallback: $size)} / 2) - ((#{pfe-local(FontSize, $region: circle, $fallback: $number-font-size)} / 2)));
287288
}
289+
288290
& > ul {
289291
list-style-type: disc;
290292
}
293+
291294
& > li:before {
292-
@include pfe-typography(2xl, $type: "title");
295+
// Capture the values of properties to use directly or wrapped in the pfe-local function below
296+
// Initialize variables at the $pf-title-set--tiny size
297+
// $sizing == "lg" or "md" or "sm" or "xs"
298+
$line-height: pfe-var(line-height);
299+
$font-weight: pfe-var(font-weight--normal);
300+
$margin-bottom: pfe-var(content-spacer--heading--sm);
301+
302+
@if index($pf-title-set--mega, "2xl") != null {
303+
$line-height: pfe-var(line-height--heading-mega);
304+
$font-weight: pfe-var(font-weight--light);
305+
$margin-bottom: pfe-var(content-spacer--heading--md);
306+
}
307+
308+
// $sizing == "4xl" or "3xl" or "2xl"
309+
@else if index($pf-title-set--regular, "2xl") != null {
310+
$line-height: pfe-var(line-height--heading);
311+
$font-weight: pfe-var(font-weight--normal);
312+
$margin-bottom: pfe-var(content-spacer--heading--sm);
313+
}
314+
315+
// If this value was not found in the tiny set, it's likely not supported
316+
@else if index($pf-title-set--tiny, "2xl") == null {
317+
@warn "#{$sizing} was not found in $pf-title-set--mega, $pf-title-set--regular, or $pf-title-set--tiny.";
318+
}
319+
320+
font-family: pfe-var(font-family--heading);
321+
line-height: $line-height;
322+
font-weight: $font-weight;
323+
font-size: pfe-local(FontSize, $region: circle, $fallback: $number-font-size);
324+
325+
&:not(:last-child) {
326+
margin-bottom: $margin-bottom;
327+
}
328+
293329
// we need to make sure that if the size of the number in the circle changes
294330
// that doesn't affect the size or shape of the circle. since we don't have
295331
// any more psuedo elements to work with, we need to use the flexbox technique
@@ -310,7 +346,6 @@
310346
height: pfe-local(size, $region: circle, $fallback: $size);
311347
// set the contents of the circle
312348
content: counter(pfe-list);
313-
font-size: pfe-local(FontSize, $region: circle, $fallback: $number-font-size);
314349
color: rgba(#{pfe-local(color, $region: circle, $fallback: $color)}, 1);
315350
// generate a background color based on the circle text color
316351
// provide an override for BackgroundColor if the user needs to specify

‎core/pfe-sass/mixins/_containers.scss‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -44,37 +44,6 @@
4444
}
4545
}
4646

47-
/// Custom focus ring
48-
@mixin focus-ring(
49-
$offset: 0,
50-
$pseudo: after,
51-
$color: pfe-var(link)
52-
) {
53-
outline: none;
54-
position: relative;
55-
56-
// Focus uses a pseudo-element because it needs to overflow the container, outline also does not support border-radius settings
57-
&::#{$pseudo} {
58-
position: absolute;
59-
content: "";
60-
top: $offset;
61-
left: $offset;
62-
width: calc(100% + #{pfe-var(ui--border-width--active)});
63-
height: calc(100% + #{pfe-var(ui--border-width--active)});
64-
border-radius: pfe-var(ui--border-radius);
65-
border: pfe-var(ui--border-width--md) pfe-var(ui--border-style) transparent;
66-
}
67-
68-
&:focus::#{$pseudo} {
69-
border-color: $color;
70-
}
71-
72-
// Remove the focus indicator on mouse-focus for browsers
73-
// that do support :focus-visible
74-
&:focus:not(:focus-visible)::#{$pseudo} {
75-
border: unset;
76-
}
77-
}
7847
/// Accent bar styles
7948
@mixin accent-bar(
8049
$direction: horizontal,

0 commit comments

Comments
 (0)