Skip to content

Commit a6cba8a

Browse files
mattnoltingmattnolting
committed
update
1 parent 5cb69ed commit a6cba8a

5 files changed

Lines changed: 190 additions & 147 deletions

File tree

‎src/patternfly/components/ActionList/action-list.scss‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,39 @@
1-
// @debug $action-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2-
3-
:where(:root),
4-
:where(.#{$action-list}) {
1+
:where(:root) {
52
--#{$action-list}--RowGap: var(--pf-t--global--spacer--sm);
6-
--#{$action-list}--ColumnGap: var(--pf-t--global--spacer--sm);
7-
--#{$action-list}--Padding: var(--pf-t--global--spacer--sm);
8-
--#{$action-list}--inset: var(--#{$action-list}--Padding);
9-
--#{$action-list}--LineHeight: var(--pf-t--global--font--line-height--body);
10-
--#{$action-list}--FontSize: var(--pf-t--global--font--size--body--md);
11-
--#{$action-list}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3+
--#{$action-list}--ColumnGap: var(--pf-t--global--spacer--2xl);
4+
5+
// * Action list group
6+
--#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--md);
127

138
// * Action list icons
14-
--#{$action-list}--m-icons--ColumnGap: 0;
9+
--#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
1510
}
1611

1712
// - Action list - Action list group
1813
.#{$action-list},
1914
.#{$action-list}__group {
2015
display: flex;
21-
align-items: center;
16+
align-items: start;
2217
}
2318

2419
// - Action list
2520
.#{$action-list} {
2621
row-gap: var(--#{$action-list}--RowGap);
2722
column-gap: var(--#{$action-list}--ColumnGap);
2823

24+
// - Action list icons
2925
&.pf-m-icons {
30-
column-gap: var(--#{$action-list}--m-icons--ColumnGap);
26+
column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
3127
}
3228
}
3329

3430
// - Action list group
3531
.#{$action-list}__group {
3632
row-gap: var(--#{$action-list}__group--RowGap, var(--#{$action-list}--RowGap));
37-
column-gap: var(--#{$action-list}__group--ColumnGap, var(--#{$action-list}--ColumnGap));
33+
column-gap: var(--#{$action-list}__group--ColumnGap);
34+
35+
// - Action list group icons
36+
&.pf-m-icons {
37+
column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
38+
}
3839
}

‎src/patternfly/components/ActionList/examples/ActionList.md‎

Lines changed: 69 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,39 @@ cssPrefix: pf-v5-c-action-list
88
### Action list single group
99
```hbs
1010
{{#> action-list}}
11-
{{#> action-list-item}}
12-
{{#> button button--modifier="pf-m-primary"}}
13-
Next
14-
{{/button}}
15-
{{/action-list-item}}
16-
{{#> action-list-item}}
17-
{{#> button button--modifier="pf-m-secondary"}}
18-
Back
19-
{{/button}}
20-
{{/action-list-item}}
11+
{{#> action-list-group}}
12+
{{#> action-list-item}}
13+
{{#> button button--modifier="pf-m-primary"}}
14+
Next
15+
{{/button}}
16+
{{/action-list-item}}
17+
{{#> action-list-item}}
18+
{{#> button button--modifier="pf-m-secondary"}}
19+
Back
20+
{{/button}}
21+
{{/action-list-item}}
22+
{{/action-list-group}}
2123
{{/action-list}}
2224
<br/>
2325
With kebab
2426
{{#> action-list}}
25-
{{#> action-list-item}}
26-
{{#> button button--modifier="pf-m-primary"}}
27-
Next
28-
{{/button}}
29-
{{/action-list-item}}
30-
{{#> action-list-item}}
31-
{{#> button button--modifier="pf-m-secondary"}}
32-
Back
33-
{{/button}}
34-
{{/action-list-item}}
35-
{{#> action-list-item}}
36-
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Kebab"'}}
37-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
38-
{{/button}}
39-
{{/action-list-item}}
27+
{{#> action-list-group}}
28+
{{#> action-list-item}}
29+
{{#> button button--modifier="pf-m-primary"}}
30+
Next
31+
{{/button}}
32+
{{/action-list-item}}
33+
{{#> action-list-item}}
34+
{{#> button button--modifier="pf-m-secondary"}}
35+
Back
36+
{{/button}}
37+
{{/action-list-item}}
38+
{{#> action-list-item}}
39+
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Kebab"'}}
40+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
41+
{{/button}}
42+
{{/action-list-item}}
43+
{{/action-list-group}}
4044
{{/action-list}}
4145
```
4246

@@ -54,6 +58,34 @@ With kebab
5458
{{/button}}
5559
{{/action-list-item}}
5660
{{/action-list}}
61+
<br>
62+
With group icons wrapper
63+
{{#> action-list}}
64+
{{#> action-list-group action-list-group--modifier="pf-m-icons"}}
65+
{{#> action-list-item}}
66+
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close"'}}
67+
<i class="fas fa-times" aria-hidden="true"></i>
68+
{{/button}}
69+
{{/action-list-item}}
70+
{{#> action-list-item}}
71+
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Kebab"'}}
72+
<i class="fas fa-check" aria-hidden="true"></i>
73+
{{/button}}
74+
{{/action-list-item}}
75+
{{/action-list-group}}
76+
{{#> action-list-group action-list-group--modifier="pf-m-icons"}}
77+
{{#> action-list-item}}
78+
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close"'}}
79+
<i class="fas fa-times" aria-hidden="true"></i>
80+
{{/button}}
81+
{{/action-list-item}}
82+
{{#> action-list-item}}
83+
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Kebab"'}}
84+
<i class="fas fa-check" aria-hidden="true"></i>
85+
{{/button}}
86+
{{/action-list-item}}
87+
{{/action-list-group}}
88+
{{/action-list}}
5789
```
5890

5991
### Action list multiple groups
@@ -90,16 +122,18 @@ With kebab
90122
```hbs
91123
In modals, forms, data lists
92124
{{#> action-list}}
93-
{{#> action-list-item}}
94-
{{#> button button--modifier="pf-m-primary"}}
95-
Save
96-
{{/button}}
97-
{{/action-list-item}}
98-
{{#> action-list-item}}
99-
{{#> button button--modifier="pf-m-link"}}
100-
Cancel
101-
{{/button}}
102-
{{/action-list-item}}
125+
{{#> action-list-group}}
126+
{{#> action-list-item}}
127+
{{#> button button--modifier="pf-m-primary"}}
128+
Save
129+
{{/button}}
130+
{{/action-list-item}}
131+
{{#> action-list-item}}
132+
{{#> button button--modifier="pf-m-link"}}
133+
Cancel
134+
{{/button}}
135+
{{/action-list-item}}
136+
{{/action-list-group}}
103137
{{/action-list}}
104138
<br/>
105139
In wizards
@@ -115,8 +149,6 @@ In wizards
115149
Back
116150
{{/button}}
117151
{{/action-list-item}}
118-
{{/action-list-group}}
119-
{{#> action-list-group}}
120152
{{#> action-list-item}}
121153
{{#> button button--modifier="pf-m-link"}}
122154
Cancel

‎src/patternfly/components/Masthead/masthead.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
7070

7171
// - Masthead
7272
.#{$masthead} {
73-
--#{$toolbar}--PaddingBlock: var(--#{$masthead}--#{$toolbar}--PaddingBlock);
74-
--#{$toolbar}--PaddingInline: var(--#{$masthead}--#{$toolbar}--PaddingInline);
7573
--#{$toolbar}--Width: var(--#{$masthead}--#{$toolbar}--Width);
74+
--#{$toolbar}__content--PaddingBlock: var(--#{$masthead}--#{$toolbar}--PaddingBlock);
75+
--#{$toolbar}__content--PaddingInline: var(--#{$masthead}--#{$toolbar}--PaddingInline);
7676

7777
// Set layout to stack by default
7878
@include pf-v5-c-masthead--m-display-stack;

‎src/patternfly/components/OverflowMenu/overflow-menu.scss‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,46 @@
1-
:where(:root),
2-
:where(.#{$overflow-menu}) {
3-
--#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--sm);
1+
:root {
2+
--#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
43

5-
// * Overflow menu icon button group
6-
--#{$overflow-menu}__group--m-icon-button-group--ColumnGap: 0;
7-
}
4+
// * Overflow menu group
5+
--#{$overflow-menu}__group--ColumnGap: var(--pf-t--global--spacer--md);
86

9-
// - Overflow menu - Overflow menu content - Overflow menu group
10-
.#{$overflow-menu},
11-
.#{$overflow-menu}__content,
12-
.#{$overflow-menu}__group {
13-
display: flex;
7+
// * Overflow menu button group
8+
--#{$overflow-menu}__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
9+
10+
// * Overflow menu icon button group
11+
--#{$overflow-menu}__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
1412
}
1513

1614
// - Overflow menu
1715
.#{$overflow-menu} {
16+
display: inline-flex;
1817
column-gap: var(--#{$overflow-menu}--ColumnGap);
19-
width: fit-content;
18+
}
19+
20+
// - Overflow menu content - Overflow menu group
21+
.#{$overflow-menu}__content,
22+
.#{$overflow-menu}__group {
23+
display: flex;
2024
}
2125

2226
// - Overflow menu content
23-
.#{$overflow-menu}__content {
27+
.#{$overflow-menu}__content,
28+
.#{$overflow-menu}__group {
2429
align-items: start;
2530
}
2631

2732
// - Overflow menu group
2833
.#{$overflow-menu}__group {
29-
column-gap: var(--#{$overflow-menu}__group--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
34+
column-gap: var(--#{$overflow-menu}__group--ColumnGap);
3035

3136
// - Overflow menu button group
3237
&.pf-m-button-group {
33-
column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
38+
column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap);
3439
}
3540

3641
// - Overflow menu icon button group
3742
&.pf-m-icon-button-group {
38-
column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
43+
column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap);
3944
}
4045
}
4146

@@ -44,7 +49,7 @@
4449
column-gap: var(--#{$overflow-menu}__item--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
4550
}
4651

47-
// - Overflow menu content - Overflow menu control - Overflow menu group - Overflow menu item
52+
// - Overflow menu content - Overflow menu control
4853
.#{$overflow-menu}__content,
4954
.#{$overflow-menu}__control {
5055
column-gap: var(--#{$overflow-menu}--ColumnGap);

0 commit comments

Comments
 (0)