Skip to content

Commit cac168b

Browse files
kmcfaulkmcfaul
committed
feat(Button): add text wrapper, update icon usage
1 parent f955f3f commit cac168b

File tree

143 files changed

+4396
-3367
lines changed

Some content is hidden

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

143 files changed

+4396
-3367
lines changed

‎packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,14 @@ export const CodeEditorControl: React.FunctionComponent<CodeEditorControlProps>
3838

3939
return isVisible ? (
4040
<Tooltip {...tooltipProps}>
41-
<Button className={className} onClick={onCustomClick} variant="plain" aria-label={ariaLabel} {...props}>
42-
{icon}
43-
</Button>
41+
<Button
42+
className={className}
43+
onClick={onCustomClick}
44+
variant="plain"
45+
aria-label={ariaLabel}
46+
{...props}
47+
icon={icon}
48+
/>
4449
</Tooltip>
4550
) : null;
4651
};

‎packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ test('Matches snapshot', () => {
99

1010
test('Renders with custom class when className is passed', () => {
1111
render(<CodeEditorControl className="custom" icon={<div>icon</div>} onClick={jest.fn()} />);
12-
expect(screen.getByText('icon').parentElement).toHaveClass('custom');
12+
expect(screen.getByText('icon').parentElement?.parentElement).toHaveClass('custom');
1313
});
1414

1515
test('Renders with accessible name when aria-label is passed', () => {

‎packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap‎

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,23 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
3131
data-ouia-safe="true"
3232
type="button"
3333
>
34-
<svg
35-
aria-hidden="true"
36-
class="pf-v6-svg"
37-
fill="currentColor"
38-
height="1em"
39-
role="img"
40-
viewBox="0 0 448 512"
41-
width="1em"
34+
<span
35+
class="pf-v6-c-button__icon pf-m-start"
4236
>
43-
<path
44-
d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
45-
/>
46-
</svg>
37+
<svg
38+
aria-hidden="true"
39+
class="pf-v6-svg"
40+
fill="currentColor"
41+
height="1em"
42+
role="img"
43+
viewBox="0 0 448 512"
44+
width="1em"
45+
>
46+
<path
47+
d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
48+
/>
49+
</svg>
50+
</span>
4751
</button>
4852
</div>
4953
<div
@@ -58,19 +62,23 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
5862
data-ouia-safe="true"
5963
type="button"
6064
>
61-
<svg
62-
aria-hidden="true"
63-
class="pf-v6-svg"
64-
fill="currentColor"
65-
height="1em"
66-
role="img"
67-
viewBox="0 0 512 512"
68-
width="1em"
65+
<span
66+
class="pf-v6-c-button__icon pf-m-start"
6967
>
70-
<path
71-
d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
72-
/>
73-
</svg>
68+
<svg
69+
aria-hidden="true"
70+
class="pf-v6-svg"
71+
fill="currentColor"
72+
height="1em"
73+
role="img"
74+
viewBox="0 0 512 512"
75+
width="1em"
76+
>
77+
<path
78+
d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
79+
/>
80+
</svg>
81+
</span>
7482
</button>
7583
</div>
7684
<div
@@ -85,19 +93,23 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
8593
data-ouia-safe="true"
8694
type="button"
8795
>
88-
<svg
89-
aria-hidden="true"
90-
class="pf-v6-svg"
91-
fill="currentColor"
92-
height="1em"
93-
role="img"
94-
viewBox="0 0 512 512"
95-
width="1em"
96+
<span
97+
class="pf-v6-c-button__icon pf-m-start"
9698
>
97-
<path
98-
d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
99-
/>
100-
</svg>
99+
<svg
100+
aria-hidden="true"
101+
class="pf-v6-svg"
102+
fill="currentColor"
103+
height="1em"
104+
role="img"
105+
viewBox="0 0 512 512"
106+
width="1em"
107+
>
108+
<path
109+
d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
110+
/>
111+
</svg>
112+
</span>
101113
</button>
102114
</div>
103115
</div>

‎packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,13 @@ exports[`Matches snapshot 1`] = `
1313
data-ouia-safe="true"
1414
type="button"
1515
>
16-
<div>
17-
icon
18-
</div>
16+
<span
17+
class="pf-v6-c-button__icon pf-m-start"
18+
>
19+
<div>
20+
icon
21+
</div>
22+
</span>
1923
</button>
2024
</div>
2125
</DocumentFragment>

‎packages/react-core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"tslib": "^2.6.2"
5656
},
5757
"devDependencies": {
58-
"@patternfly/patternfly": "6.0.0-alpha.160",
58+
"@patternfly/patternfly": "6.0.0-alpha.166",
5959
"case-anything": "^2.1.13",
6060
"css": "^3.0.0",
6161
"fs-extra": "^11.2.0"

‎packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxClos
1717
...props
1818
}: AboutModalBoxCloseButtonProps) => (
1919
<div className={css(styles.aboutModalBoxClose)} {...props}>
20-
<Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
21-
<TimesIcon />
22-
</Button>
20+
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
2321
</div>
2422
);
2523
AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton';

‎packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap‎

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,23 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
1414
data-ouia-safe="true"
1515
type="button"
1616
>
17-
<svg
18-
aria-hidden="true"
19-
class="pf-v6-svg"
20-
fill="currentColor"
21-
height="1em"
22-
role="img"
23-
viewBox="0 0 352 512"
24-
width="1em"
17+
<span
18+
class="pf-v6-c-button__icon pf-m-start"
2519
>
26-
<path
27-
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
28-
/>
29-
</svg>
20+
<svg
21+
aria-hidden="true"
22+
class="pf-v6-svg"
23+
fill="currentColor"
24+
height="1em"
25+
role="img"
26+
viewBox="0 0 352 512"
27+
width="1em"
28+
>
29+
<path
30+
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
31+
/>
32+
</svg>
33+
</span>
3034
</button>
3135
</div>
3236
</DocumentFragment>
@@ -46,19 +50,23 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
4650
data-ouia-safe="true"
4751
type="button"
4852
>
49-
<svg
50-
aria-hidden="true"
51-
class="pf-v6-svg"
52-
fill="currentColor"
53-
height="1em"
54-
role="img"
55-
viewBox="0 0 352 512"
56-
width="1em"
53+
<span
54+
class="pf-v6-c-button__icon pf-m-start"
5755
>
58-
<path
59-
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
60-
/>
61-
</svg>
56+
<svg
57+
aria-hidden="true"
58+
class="pf-v6-svg"
59+
fill="currentColor"
60+
height="1em"
61+
role="img"
62+
viewBox="0 0 352 512"
63+
width="1em"
64+
>
65+
<path
66+
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
67+
/>
68+
</svg>
69+
</span>
6270
</button>
6371
</div>
6472
</DocumentFragment>
@@ -78,19 +86,23 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
7886
data-ouia-safe="true"
7987
type="button"
8088
>
81-
<svg
82-
aria-hidden="true"
83-
class="pf-v6-svg"
84-
fill="currentColor"
85-
height="1em"
86-
role="img"
87-
viewBox="0 0 352 512"
88-
width="1em"
89+
<span
90+
class="pf-v6-c-button__icon pf-m-start"
8991
>
90-
<path
91-
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
92-
/>
93-
</svg>
92+
<svg
93+
aria-hidden="true"
94+
class="pf-v6-svg"
95+
fill="currentColor"
96+
height="1em"
97+
role="img"
98+
viewBox="0 0 352 512"
99+
width="1em"
100+
>
101+
<path
102+
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
103+
/>
104+
</svg>
105+
</span>
94106
</button>
95107
</div>
96108
</DocumentFragment>

‎packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,41 +8,49 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
88
<h4>With list icons wrapper</h4>
99
<ActionList isIconList>
1010
<ActionListItem>
11-
<Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
12-
<TimesIcon />
13-
</Button>
11+
<Button variant="plain" id="with-icons-times-button" aria-label="times icon button" icon={<TimesIcon />} />
1412
</ActionListItem>
1513
<ActionListItem>
16-
<Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
17-
<CheckIcon />
18-
</Button>
14+
<Button variant="plain" id="with-icons-check-button" aria-label="check icon button" icon={<CheckIcon />} />
1915
</ActionListItem>
2016
</ActionList>
2117
<br />
2218
<h4>With group icons wrapper</h4>
2319
<ActionList>
2420
<ActionListGroup isIconGroup>
2521
<ActionListItem>
26-
<Button variant="plain" id="with-icons-list-times-button" aria-label="times icon button">
27-
<TimesIcon />
28-
</Button>
22+
<Button
23+
variant="plain"
24+
id="with-icons-list-times-button"
25+
aria-label="times icon button"
26+
icon={<TimesIcon />}
27+
/>
2928
</ActionListItem>
3029
<ActionListItem>
31-
<Button variant="plain" id="with-icons-list-check-button" aria-label="check icon button">
32-
<CheckIcon />
33-
</Button>
30+
<Button
31+
variant="plain"
32+
id="with-icons-list-check-button"
33+
aria-label="check icon button"
34+
icon={<CheckIcon />}
35+
/>
3436
</ActionListItem>
3537
</ActionListGroup>
3638
<ActionListGroup isIconGroup>
3739
<ActionListItem>
38-
<Button variant="plain" id="with-icons-group-times-button" aria-label="times icon button">
39-
<TimesIcon />
40-
</Button>
40+
<Button
41+
variant="plain"
42+
id="with-icons-group-times-button"
43+
aria-label="times icon button"
44+
icon={<TimesIcon />}
45+
/>
4146
</ActionListItem>
4247
<ActionListItem>
43-
<Button variant="plain" id="with-icons-group-check-button" aria-label="check icon button">
44-
<CheckIcon />
45-
</Button>
48+
<Button
49+
variant="plain"
50+
id="with-icons-group-check-button"
51+
aria-label="check icon button"
52+
icon={<CheckIcon />}
53+
/>
4654
</ActionListItem>
4755
</ActionListGroup>
4856
</ActionList>

‎packages/react-core/src/components/Alert/AlertActionCloseButton.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,9 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
3232
onClick={onClose}
3333
aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
3434
className={className}
35+
icon={<TimesIcon />}
3536
{...props}
36-
>
37-
<TimesIcon />
38-
</Button>
37+
/>
3938
)}
4039
</AlertContext.Consumer>
4140
);

‎packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
3131
aria-expanded={isExpanded}
3232
aria-label={ariaLabel === '' ? `Toggle ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
3333
{...props}
34-
>
35-
<span className={css(styles.alertToggleIcon)}>
36-
<AngleRightIcon aria-hidden="true" />
37-
</span>
38-
</Button>
34+
icon={
35+
<span className={css(styles.alertToggleIcon)}>
36+
<AngleRightIcon aria-hidden="true" />
37+
</span>
38+
}
39+
/>
3940
);
4041
};
4142
AlertToggleExpandButton.displayName = 'AlertToggleExpandButton';

0 commit comments

Comments
 (0)