Skip to content

Commit fbbc35c

Browse files
castastrophestarryeyez024
castastrophe
and
starryeyez024
authored
feat: Add support for empty local variables (#854)
* feat Add support for empty local variables * feat CHANGELOG udpate * feat Working through local variable updates * feat Working through challenges moving to empty variables in the component mixins * feat Applying empty local variables * feat Fix typo in band story * feat Add some more documentation to the sass * feat Update local function references and update toast for local vars * feat Remove commented out variable print * feat Update modal * feat Update tabs * feat Add theming to page-status * feat Adjusting implementation on the accordion * Simplify functions! * feat Fix improperly escaped parens * feat Update documentation * feat Update documentation with best practices * feat Revert accidental updates to variable names * feat Clean up unnecessary interpolation * feat Remove unnecessary interpolation from autocomplete * feat Remove unneeded interpolation from avatar, badge, and band * feat Cleaning up references and interpolation in band, card * Apply suggestions from code review * feat Fix compile error * feat Revert doc updates, new PR opened for these * feat Update changelog, remove doc update * feat Working through dropdown updates * feat Fix a find-replace error in doc for pfe-surface * feat Rename and remove alias for set local function * feat Abstract repo variable and local value * feat Ensure all pfe prefixes reference repo var * feat Replace repo variable across the project * feat dropdown items using new syntax now * feat Jump links still broken but bringing items together to make styling easier * feat Add empty local variable updates to pfe-jump-links * feat Fix band local theme ref * feat Remove change to jump links template * Remove dupe from changelog * feat Use the pfe-print-local tool in accordion * feat Apply updated format to pfe-cta * feat Update modal * feat Adjust navigation and select components for new empty loca vars * feat Add context to broadcasted output * feat Clean up empty map * feat git checkout origin/master -- elements/**/package-lock.json * feat Pull out package-lock updates * feat Adjust maxWidth on cta * feat Fix self-referencing broadcast variables * Update elements/pfe-sass/functions/_custom-properties.scss Co-authored-by: Kendall Totten <[email protected]> * feat Remove interpolation from pfe-toast and revert variablizing --pfe on custom props * feat Update generator notes and docs; add backwards support in avatar * feat Add comments to self-referential maps * feat Navigation item, remove interpolation and commented out code * feat Update a few merges to deep merge with LOCAL-VARIABLES maps; add comments * feat Move new maps to shared assets file for readability * feat Backwards compatibility for pfe-dropdown * feat Fallback for pfe-dropdown property naming * feat Additional fallback styles for variable naming * feat Align pfe-health-index with design variables * feat Update variable use in pfe-health-index * feat Add TODO notes * feat Setting up accordion for future updates to allow for empty local vars * remove repo find/replace in comments Co-authored-by: Kendall Totten <[email protected]> * feat Fix issue with earth variant hover tabs * Remove prefix interpolation from comment string Co-authored-by: Kendall Totten <[email protected]> * feat Resolve some code review feedback * feat Fix the accordion disclosure issue noted in code review Co-authored-by: Kendall Totten <[email protected]>
1 parent f347423 commit fbbc35c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2222
-2143
lines changed

‎CHANGELOG-prerelease.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1+
## Prerelease 52 ( TBD )
2+
3+
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add support for empty local variables
4+
15
## Prerelease 51 ( 2020-07-16 )
26

37
- [6965df](https://github.com/patternfly/patternfly-elements/commit/6965df7214f1cda636337093e0bf22bfc658403d) fix: Support nested tabs or accordions inside pfe-content-set
8+
- [49c6146](https://github.com/patternfly/patternfly-elements/commit/49c6146fbaed4cf6ca8d198e107471b53fe07796) feat: Add generator label to new PRs where appropriate, add .github folder to tools
49

510
## Prerelease 50 ( 2020-06-26 )
611

@@ -17,9 +22,6 @@
1722
- Update paths to built-in sets: (#723)
1823
- Storybook icon listing: (#728)
1924
- Icon panel storybook: (#719)
20-
- [cf010c1](https://github.com/patternfly/patternfly-elements/commit/cf010c18c404e07d59eab775ee44552f52627bde) feat: Automerging PRs based on labels
21-
- [732f65a](https://github.com/patternfly/patternfly-elements/commit/732f65ada3383f6d04deb6670d82eb80d525d8ff) fix: pfe-modal removing hidden attribute (#924)
22-
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add generator label to new PRs where appropriate, add .github folder to tools
2325

2426
## Prerelease 49 ( 2020-05-29 )
2527

‎elements/pfe-accordion/src/_shared-assets.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
2+
@import "../../pfe-sass/pfe-sass";
3+
4+
$LOCAL: accordion;
5+
$LOCAL-VARIABLES: pfe-accordion-variables();

‎elements/pfe-accordion/src/pfe-accordion-header.scss‎

Lines changed: 45 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,69 @@
1-
// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
2-
@import "../../pfe-sass/pfe-sass";
3-
4-
$LOCAL: accordion;
1+
@import "shared-assets";
52

63
/// ===========================================================================
74
/// DEFAULT ACCORDION HEADING
85
/// ===========================================================================
96
:host {
10-
transition: transform 0.3s #{pfe-var(animation-timing)};
7+
transition: transform 0.3s pfe-var(animation-timing);
118
display: block;
129

1310
// Shadow template styles
1411
> * {
1512
margin: 0;
1613
}
17-
}
18-
19-
button {
20-
@include pfe-trigger;
2114

22-
// @TODO workaround, can we get the variables working?
23-
@include browser-query(edge) {
24-
text-align: left;
25-
}
15+
button {
16+
@include pfe-trigger;
2617

27-
@include browser-query(ie11) {
28-
padding: 16px 24px;
29-
&:hover {
30-
border-left-color: #{pfe-color(ui-base)};
18+
// @TODO workaround, can we get the variables working?
19+
@include browser-query(edge) {
20+
text-align: left;
21+
}
22+
23+
@include browser-query(ie11) {
24+
padding: 16px 24px;
25+
&:hover {
26+
border-left-color: pfe-fetch(ui-base);
27+
}
28+
}
29+
30+
&[aria-expanded="true"] {
31+
$accordion: pfe-accordion-variables($state: expanded);
32+
@include pfe-print-local($accordion);
33+
@include browser-query(ie11) {
34+
border-bottom-width: 0;
35+
border-left-color: pfe-fetch(ui-base);
36+
border-right-color: pfe-fetch(surface--border);
37+
}
3138
}
3239
}
3340
}
3441

3542
:host(:not([pfe-disclosure="true"])) {
36-
button[aria-expanded="true"]::after {
37-
@include pfe-chevron($state: open);
38-
}
39-
button[aria-expanded="false"]::after {
43+
button::after {
4044
@include pfe-chevron($state: closed);
4145
}
46+
button[aria-expanded="true"]::after {
47+
transform: rotate(-135deg);
48+
}
4249
}
4350

4451
// Add border bottom to the last button in an accordion set.
4552
:host(:last-of-type) button:not([aria-expanded="true"]) {
4653
@include pfe-trigger-last;
4754
}
48-
:host(:last-of-type.animating) button {
49-
--pfe-accordion--BorderBottomWidth: 0;
50-
}
5155

52-
/// ===========================================================================
53-
/// EXPANDED STYLES
54-
/// ===========================================================================
55-
56-
// Default styles
57-
button[aria-expanded="true"] {
58-
@include pfe-accordion-variables($state: expanded);
59-
@include browser-query(ie11) {
60-
border-bottom-width: 0;
61-
border-left-color: #{pfe-color(ui-base)};
62-
border-right-color: #{pfe-color(surface--border)};
63-
}
56+
:host(:last-of-type.animating) button {
57+
@include pfe-print-local((BorderBottomWidth: 0));
6458
}
6559

6660
// Styles contextual to theme
6761
@each $context in $THEMES {
68-
:host([on="#{$context}"]) button[aria-expanded="true"] {
69-
@include pfe-accordion-variables($state: expanded, $theme: #{$context});
62+
@if $context != light {
63+
:host([on="#{$context}"]) button[aria-expanded="true"] {
64+
$accordion: pfe-accordion-variables($state: expanded, $theme: #{$context});
65+
@include pfe-print-local($accordion);
66+
}
7067
}
7168
}
7269

@@ -76,58 +73,26 @@ button[aria-expanded="true"] {
7673

7774
:host([pfe-disclosure="true"]) {
7875
button {
79-
--pfe-accordion--Trigger--padding: #{pfe-local(base--Padding)} calc(#{pfe-local(base--Padding)} * 1.5) #{pfe-local(base--Padding)} calc((#{pfe-local(base--Padding)} * 3) + 2px) !important;
76+
padding-left: calc((#{pfe-local(Padding, $region: base)} * 3));
8077
@include browser-query(ie11) {
8178
padding: 16px 24px 16px 47px;
82-
border-right-color: #{pfe-color(surface--border)};
83-
border-left-color: #{pfe-color(surface--border)};
84-
border-left-width: #{pfe-var(surface--border-width)};
79+
border-right-color: pfe-fetch(surface--border);
80+
border-left-color: pfe-fetch(surface--border);
81+
border-left-width: pfe-fetch(surface--border-width);
8582
}
8683

87-
&[aria-expanded="true"] {
88-
padding-left: calc(( #{pfe-var(container-spacer)} * 3 ) - 1px ) !important;
89-
border-left-width: #{pfe-var(surface--border-width--heavy)};
90-
91-
&::before {
92-
@include pfe-chevron($state: open, $position: before);
93-
left: calc( #{pfe-var(container-spacer)} * 1.3125 ); // 21px.
94-
}
95-
}
96-
&[aria-expanded="false"]::before {
97-
@include pfe-chevron($state: closed, $position: before);
98-
}
99-
100-
// Adjust contents position on hover.
10184
&:hover {
102-
padding-left: calc(( #{pfe-var(container-spacer)} * 3 ) - 1px ) !important;
103-
--pfe-accordion--BorderLeftWidth: #{pfe-var(surface--border-width--heavy)};
104-
85+
padding-left: calc(#{pfe-local(Padding, $region: base)} * 3 - #{pfe-var(surface--border-width--heavy)} + #{pfe-var(surface--border-width)});
10586
&::before {
106-
left: calc( #{pfe-var(container-spacer)} * 1.3125 ); // 21px.
87+
margin-left: calc((#{pfe-var(surface--border-width--heavy)} - #{pfe-var(surface--border-width)}) * -1);
10788
}
10889
}
109-
}
110-
}
111-
112-
// Set the header border while animating.
113-
:host([pfe-disclosure="true"].animating) {
114-
--pfe-accordion--BorderLeftWidth: #{pfe-var(surface--border-width--heavy)};
115-
--pfe-accordion--BorderColor--accent: #{pfe-color(ui-base)}; // set border-left color while animating.
116-
117-
button {
118-
padding-left: calc((var(--pfe-theme--container-spacer,16px) * 3) - 1px)!important;
11990

12091
&::before {
121-
left: calc( #{pfe-var(container-spacer)} * 1.3125 ); // 21px.
92+
@include pfe-chevron($state: open, $position: before);
93+
}
94+
&[aria-expanded="true"]::before {
95+
transform: rotate(45deg) translateY(4px);
12296
}
12397
}
12498
}
125-
126-
// Override border-left color for different themes.
127-
@each $context in $THEMES {
128-
:host([pfe-disclosure="true"][on="#{$context}"].animating) {
129-
@include pfe-accordion-variables($state: expanded, $theme: #{$context});
130-
}
131-
}
132-
133-

‎elements/pfe-accordion/src/pfe-accordion-panel.scss‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
2-
@import "../../pfe-sass/pfe-sass";
3-
4-
$LOCAL: accordion;
1+
@import "shared-assets";
52

63
/// ===========================================================================
74
/// DEFAULT ACCORDION PANEL
@@ -21,7 +18,19 @@ $LOCAL: accordion;
2118
.container {
2219
@include pfe-clearfix;
2320
@include pfe-panel-container;
24-
--pfe-accordion--panel-container--Padding: 0 calc(#{pfe-local(base--Padding)} * 3) #{pfe-local(base--Padding)} calc(#{pfe-local(base--Padding)} * 1.5);
21+
@include pfe-print-local((
22+
panel-container: (
23+
Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 3) #{pfe-local(Padding, $region: base)} calc(#{pfe-local(Padding, $region: base)} * 1.5)
24+
)
25+
));
26+
27+
:host([pfe-disclosure="true"]) & {
28+
@include pfe-print-local((
29+
panel-container: (
30+
Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 3) pfe-local(Padding, $region: base) calc((#{pfe-local(Padding, $region: base)} * 1.5) - 4px)
31+
)
32+
));
33+
}
2534
}
2635

2736
:host(:last-of-type[expanded]) {
@@ -34,26 +43,22 @@ $LOCAL: accordion;
3443

3544
:host([expanded]),
3645
:host(.animating) {
37-
@include pfe-accordion-variables($state: expanded);
46+
$accordion: pfe-accordion-variables($state: expanded);
47+
@include pfe-print-local($accordion);
3848
@include pfe-panel-variables;
3949
@include pfe-collapsible($state: open);
4050
@include browser-query(ie11) {
4151
border-top-width: 0;
42-
border-left-color: #{pfe-color(ui-base)};
43-
border-right-color: #{pfe-color(surface--border)};
52+
border-left-color: pfe-var(ui-base);
53+
border-right-color: pfe-var(surface--border);
4454
}
4555
}
4656

4757
@each $context in $THEMES {
4858
:host([on="#{$context}"][expanded]),
4959
:host([on="#{$context}"].animating){
50-
@include pfe-accordion-variables($state: expanded, $theme: #{$context});
60+
$accordion: pfe-accordion-variables($state: expanded, $theme: #{$context});
61+
@include pfe-print-local($accordion);
5162
@include pfe-panel-variables($theme: #{$context});
5263
}
5364
}
54-
55-
:host([pfe-disclosure="true"]) {
56-
.container {
57-
--pfe-accordion--panel-container--padding: 0 calc(#{pfe-local(base--Padding)} * 3) #{pfe-local(base--Padding)} calc((#{pfe-local(base--Padding)} * 1.5) - 4px);
58-
}
59-
}

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
2-
@import "../../pfe-sass/pfe-sass";
1+
@import "shared-assets";
32

4-
$LOCAL: accordion;
5-
6-
@include pfe-theme-contexts; // imports on="light" etc support
3+
// @include pfe-theme-contexts; // imports on="light" etc support
74

85
:host {
9-
@include pfe-accordion-variables;
10-
6+
@include pfe-print-local($LOCAL-VARIABLES);
117
display: block;
128
position: relative;
139
overflow: hidden;
1410
margin: 0;
15-
color: #{pfe-local(Color)};
11+
color: pfe-local(Color);
1612

1713
@include browser-query(ie11) {
18-
background-color: #{pfe-color(surface--lightest)} !important;
19-
color: #{pfe-color(text)} !important;
14+
background-color: pfe-fetch(surface--lightest) !important;
15+
color: pfe-fetch(text) !important;
2016
}
2117
}
2218

2319
@each $context in $THEMES {
24-
:host([on="#{$context}"]) {
25-
@include pfe-accordion-variables($theme: #{$context});
20+
@if $context != light {
21+
:host([on="#{$context}"]) {
22+
$context: pfe-accordion-variables($theme: #{$context});
23+
@include pfe-print-local($context);
24+
}
2625
}
2726
}
2827

2928
:host([pfe-disclosure="true"]) {
30-
@include pfe-accordion-variables($variant: disclosure);
29+
$disclosure: pfe-accordion-variables($variant: disclosure);
30+
@include pfe-print-local($disclosure);
3131
}

0 commit comments

Comments
 (0)