diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx index d4872e711a5..f07c9eca00a 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx @@ -38,9 +38,14 @@ export const CodeEditorControl: React.FunctionComponent return isVisible ? ( - +
- + +
- + +
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap index aadbd5c312f..8a8a9c84eea 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap @@ -13,9 +13,13 @@ exports[`Matches snapshot 1`] = ` data-ouia-safe="true" type="button" > -
- icon -
+ +
+ icon +
+ diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 0b49b554cab..9e0c7625bf9 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -55,7 +55,7 @@ "tslib": "^2.6.2" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.160", + "@patternfly/patternfly": "6.0.0-alpha.166", "case-anything": "^2.1.13", "css": "^3.0.0", "fs-extra": "^11.2.0" diff --git a/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx b/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx index 6cf29233918..68612db3851 100644 --- a/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx +++ b/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx @@ -17,9 +17,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent (
- +
); AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton'; diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap index a785ffb2913..70db6b9523a 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap @@ -14,19 +14,23 @@ exports[`AboutModalBoxCloseButton Test 1`] = ` data-ouia-safe="true" type="button" > - + + @@ -46,19 +50,23 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = ` data-ouia-safe="true" type="button" > - + + @@ -78,19 +86,23 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = ` data-ouia-safe="true" type="button" > - + + diff --git a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx index 6b7cb33b45d..e2de3ea44b7 100644 --- a/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx +++ b/packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx @@ -8,14 +8,10 @@ export const ActionListWithIcons: React.FunctionComponent = () => (

With list icons wrapper

- + + + + + + + /> )} ); diff --git a/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx b/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx index 861dc1ee2f2..cc54957c516 100644 --- a/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx +++ b/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx @@ -31,11 +31,12 @@ export const AlertToggleExpandButton: React.FunctionComponent - - - + icon={ + + + } + /> ); }; AlertToggleExpandButton.displayName = 'AlertToggleExpandButton'; diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap index 879879afbd5..60e1d73c6db 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap @@ -11,19 +11,23 @@ exports[`AlertActionCloseButton should match snapshot 1`] = ` data-ouia-safe="true" type="button" > - + + `; diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap index 124858de46a..aa22f8a41e8 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap @@ -10,7 +10,11 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = ` data-ouia-safe="true" type="button" > - string + + string + `; diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap index 78b24751fcf..98f1594e1b4 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap @@ -4,21 +4,7 @@ exports[`Matches the snapshot 1`] = ` + />

variant: plain

@@ -35,6 +21,20 @@ exports[`Matches the snapshot 1`] = `

+ > + +
`; diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap index 3049fc06a6a..9e7ec7f0604 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap @@ -5,13 +5,7 @@ exports[`Matches snapshot 1`] = ` + />

variant: plain

@@ -28,6 +22,12 @@ exports[`Matches snapshot 1`] = `

+ > + + Icon mock + +
`; diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index d1897e4b852..608af5bb005 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -198,12 +198,11 @@ const ButtonBase: React.FunctionComponent = ({ /> )} - {variant === ButtonVariant.plain && children === null && icon ? icon : null} - {variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && ( + {icon && (iconPosition === 'start' || iconPosition === 'left') && ( {icon} )} - {children} - {variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && ( + {children && {children}} + {icon && (iconPosition === 'end' || iconPosition === 'right') && ( {icon} )} {countOptions && ( diff --git a/packages/react-core/src/components/Button/__tests__/Button.test.tsx b/packages/react-core/src/components/Button/__tests__/Button.test.tsx index 203c83f72e3..6ded84db18e 100644 --- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx +++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx @@ -35,7 +35,7 @@ test('Renders with class pf-v6-c-button by default', () => { test('Renders with class pf-m-primary by default', () => { render(); - expect(screen.getByText('Button')).toHaveClass('pf-m-primary'); + expect(screen.getByText('Button').parentElement).toHaveClass('pf-m-primary'); }); test('Renders with custom class', () => { @@ -76,7 +76,7 @@ test('Renders with class pf-m-disabled when isDisabled = true and component is n Disabled Anchor Button ); - expect(screen.getByText('Disabled Anchor Button')).toHaveClass('pf-m-disabled'); + expect(screen.getByText('Disabled Anchor Button').parentElement).toHaveClass('pf-m-disabled'); }); test('Renders with class pf-m-aria-disabled when isAriaDisabled = true', () => { @@ -206,14 +206,14 @@ test('Renders custom icon with class pf-m-in-progress when isLoading = true and ); expect(screen.getByText('ICON')).toBeVisible(); - expect(screen.getByText('ICON').parentElement).toHaveClass('pf-m-in-progress'); + expect(screen.getByText('ICON').parentElement?.parentElement).toHaveClass('pf-m-in-progress'); }); test('Renders as custom component when component is passed', () => { const component = 'a'; render(); - expect(screen.getByText('anchor button').tagName).toBe('A'); + expect(screen.getByText('anchor button').parentElement?.tagName).toBe('A'); }); test('aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled', () => { @@ -222,7 +222,7 @@ test('aria-disabled is set to true and tabIndex to -1 if component is not a butt Disabled Anchor Button ); - const anchor = screen.getByText('Disabled Anchor Button'); + const anchor = screen.getByText('Disabled Anchor Button').parentElement; expect(anchor).toHaveAttribute('tabindex', '-1'); expect(anchor).toHaveAttribute('aria-disabled', 'true'); }); diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index c17d7386cc1..1bf9bbee899 100644 --- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -11,7 +11,11 @@ exports[`Renders basic button 1`] = ` data-ouia-safe="true" type="button" > - Basic Button + + Basic Button + `; diff --git a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx index 63d1339eee3..e04c6158958 100644 --- a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx @@ -35,18 +35,14 @@ export const ButtonDisabled: React.FunctionComponent = () => ( - + - + + - + - + + icon={} + /> @@ -359,9 +358,8 @@ export const CalendarMonth = ({ variant="plain" aria-label={nextMonthAriaLabel} onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)} - > - - + icon={} + /> setHoveredDate(undefined)}> diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx index 96d248dd31c..de8e030129f 100644 --- a/packages/react-core/src/components/Card/CardHeader.tsx +++ b/packages/react-core/src/components/Card/CardHeader.tsx @@ -91,11 +91,12 @@ export const CardHeader: React.FunctionComponent = ({ onExpand(evt, cardId); }} {...toggleButtonProps} - > - - - + icon={ + + + } + /> ); diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap index 0d39b20535d..57590a85713 100644 --- a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap @@ -29,21 +29,25 @@ exports[`CardHeader onExpand adds the toggle button 1`] = ` type="button" > - + + diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx index ad55776ca61..5af4f859a5b 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx @@ -83,11 +83,10 @@ export const ClipboardCopyButton: React.FunctionComponent} {...props} ref={triggerRef} - > - - + /> ); }; diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx index c26bdbbc2e9..5e0787cfc17 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx @@ -31,10 +31,11 @@ export const ClipboardCopyToggle: React.FunctionComponent -
-
- + icon={ +
+
+ } + /> ); ClipboardCopyToggle.displayName = 'ClipboardCopyToggle'; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap index 2348e69bfdf..fc0d0427834 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap @@ -38,19 +38,23 @@ exports[`Matches snapshot 1`] = ` id="button-id" type="button" > - + + diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap index ade060ee0ed..a9d2ebd12fa 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap @@ -14,23 +14,27 @@ exports[`Matches snapshot 1`] = ` id="main-id" type="button" > -
- -
+ + + `; diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx index bfb39e08afb..39fb548eb27 100644 --- a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx +++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx @@ -9,9 +9,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo variant="inline-compact" additionalActions={ - + + + + icon={ +
+ +
+ } + /> ); diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap index 0ee0e0d4886..72dcdaa86c9 100644 --- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap @@ -21,23 +21,27 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = ` id="string" type="button" > -
- -
+ + + diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap index e441b3ab4f2..6a954a85173 100644 --- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap @@ -21,23 +21,27 @@ exports[`Renders to match snapshot 1`] = ` id="ex-toggle2" type="button" > -
- -
+ + + diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap index a880245773a..d88f3c24aeb 100644 --- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap @@ -94,19 +94,23 @@ exports[`With popover opened 1`] = ` data-ouia-safe="true" type="button" > - + + +
- + + +
diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index 6eab5c68895..e89a27f3f39 100644 --- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -42,19 +42,23 @@ exports[`Drawer expands from bottom 1`] = ` data-ouia-safe="true" type="button" > - + + @@ -131,19 +135,23 @@ exports[`Drawer has resizable callback and id 1`] = ` data-ouia-safe="true" type="button" > - + + @@ -222,19 +230,23 @@ exports[`Drawer has resizable css and color variants 1`] = ` data-ouia-safe="true" type="button" > - + + @@ -347,19 +359,23 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`] data-ouia-safe="true" type="button" > - + + @@ -417,19 +433,23 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] = data-ouia-safe="true" type="button" > - + + @@ -487,19 +507,23 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] = data-ouia-safe="true" type="button" > - + + diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx index 8ce13d6f23c..94c90eafb46 100644 --- a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx +++ b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx @@ -11,6 +11,8 @@ import styles from '@patternfly/react-styles/css/components/DualListSelector/dua export interface DualListSelectorControlProps extends Omit, 'onClick'> { /** Content to be rendered in the dual list selector control. */ children?: React.ReactNode; + /** Icon to be rendered in the dual list selector control. */ + icon?: React.ReactNode; /** @hide forwarded ref */ innerRef?: React.Ref; /** Flag indicating the control is disabled. */ @@ -30,6 +32,7 @@ export interface DualListSelectorControlProps extends Omit = ({ innerRef, children, + icon, className, 'aria-label': ariaLabel, isDisabled = true, @@ -50,6 +53,7 @@ export const DualListSelectorControlBase: React.FunctionComponent {children} diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx index 5ed946e2a9b..28ecdffe7fa 100644 --- a/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx +++ b/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx @@ -81,9 +81,11 @@ export const DualListSelectorListItemBase: React.FunctionComponent {/** TODO once keyboard accessibility is enabled, remove `component=span` and add `aria-label={draggableButtonAriaLabel}` */} - + , + icon={} + />, ) => ( - - , + icon={} + />, ) => ( option.selected) || isDisabled} onClick={() => moveSelected(true)} aria-label="Add selected" - > - - + icon={} + /> moveAll(true)} aria-label="Add all" - > - - + icon={} + /> moveAll(false)} aria-label="Remove all" - > - - + icon={} + /> moveSelected(false)} isDisabled={!chosenOptions.some((option) => option.selected) || isDisabled} aria-label="Remove selected" - > - - + icon={} + /> isDisabled={!availableOptions.some((option) => option.selected)} onClick={() => moveSelected(true)} aria-label="Add selected" - > - - + icon={} + /> moveAll(true)} aria-label="Add all" - > - - + icon={} + /> moveAll(false)} aria-label="Remove all" - > - - + icon={} + /> moveSelected(false)} isDisabled={!chosenOptions.some((option) => option.selected)} aria-label="Remove selected" - > - - + icon={} + /> { diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx index d6f3f368726..5f87520a26b 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx @@ -288,30 +288,26 @@ export const DualListSelectorComposableTree: React.FunctionComponent !chosenLeafIds.includes(x)).length} onClick={() => moveChecked(true)} aria-label="Add selected" - > - - + icon={} + /> moveAll(true)} aria-label="Add all" - > - - + icon={} + /> moveAll(false)} aria-label="Remove all" - > - - + icon={} + /> moveChecked(false)} isDisabled={!checkedLeafIds.filter((x) => !!chosenLeafIds.includes(x)).length} aria-label="Remove selected" - > - - + icon={} + /> {buildPane(true)} diff --git a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap index 9f59b302cb6..9523427e3e7 100644 --- a/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap +++ b/packages/react-core/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap @@ -101,7 +101,11 @@ exports[`EmptyState Main 1`] = ` data-ouia-safe="true" type="button" > - New HTTP Proxy + + New HTTP Proxy +
- Learn more about this in the documentation. + + Learn more about this in the documentation. +
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap index 939dab9556f..8b60cfb4b25 100644 --- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap +++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap @@ -44,7 +44,11 @@ exports[`simple fileupload 1`] = ` data-ouia-safe="true" type="button" > - Browse... + + Browse... +
- Clear + + Clear +
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap index 8e3f0b764fb..1071ecc139e 100644 --- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap +++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap @@ -43,7 +43,11 @@ exports[`simple fileuploadfield 1`] = ` data-ouia-safe="true" type="button" > - Browse... + + Browse... +
- Clear + + Clear +
diff --git a/packages/react-core/src/components/Form/FormFieldGroupToggle.tsx b/packages/react-core/src/components/Form/FormFieldGroupToggle.tsx index 10609d251e0..551cad6b328 100644 --- a/packages/react-core/src/components/Form/FormFieldGroupToggle.tsx +++ b/packages/react-core/src/components/Form/FormFieldGroupToggle.tsx @@ -37,11 +37,12 @@ export const FormFieldGroupToggle: React.FunctionComponent - - - + icon={ + + + } + /> ); diff --git a/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx index 0fc16d53865..f8bba50758c 100644 --- a/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx +++ b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx @@ -45,9 +45,8 @@ const FormGroupLabelHelpBase: React.FunctionComponent = variant="plain" hasNoPadding {...props} - > - - + icon={} + /> ); }; diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap index dcbbe62fbbd..840088289a9 100644 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap @@ -26,21 +26,25 @@ exports[`Check expandable form field group example against snapshot 1`] = ` type="button" > - + + diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx index 5af8d261e6b..20e95a97ea3 100644 --- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx +++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx @@ -23,9 +23,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => { bodyContent="This field is an example of an input group with a popover." appendTo={() => inputGroupRef1.current} > - + + @@ -74,9 +78,13 @@ exports[`expandable vertical with subsection 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -96,9 +104,13 @@ exports[`expandable vertical with subsection 1`] = ` href="#" > - Section with active subsection + + Section with active subsection + @@ -122,9 +134,13 @@ exports[`expandable vertical with subsection 1`] = ` href="#" > - Active subsection + + Active subsection + @@ -144,9 +160,13 @@ exports[`expandable vertical with subsection 1`] = ` href="#" > - Inactive subsection + + Inactive subsection + @@ -166,9 +186,13 @@ exports[`expandable vertical with subsection 1`] = ` href="#" > - Inactive subsection + + Inactive subsection + @@ -190,9 +214,13 @@ exports[`expandable vertical with subsection 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -212,9 +240,13 @@ exports[`expandable vertical with subsection 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -255,9 +287,13 @@ exports[`jumplinks centered 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -278,9 +314,13 @@ exports[`jumplinks centered 1`] = ` href="#" > - Active section + + Active section + @@ -300,9 +340,13 @@ exports[`jumplinks centered 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -350,9 +394,13 @@ exports[`jumplinks with label 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -373,9 +421,13 @@ exports[`jumplinks with label 1`] = ` href="#" > - Active section + + Active section + @@ -395,9 +447,13 @@ exports[`jumplinks with label 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -438,9 +494,13 @@ exports[`simple jumplinks 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -461,9 +521,13 @@ exports[`simple jumplinks 1`] = ` href="#" > - Active section + + Active section + @@ -483,9 +547,13 @@ exports[`simple jumplinks 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -533,9 +601,13 @@ exports[`vertical with label 1`] = ` href="#" > - Inactive section + + Inactive section + @@ -556,9 +628,13 @@ exports[`vertical with label 1`] = ` href="#" > - Active section + + Active section + @@ -578,9 +654,13 @@ exports[`vertical with label 1`] = ` href="#" > - Inactive section + + Inactive section + diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx index e95339bdc5b..e56e85b2458 100644 --- a/packages/react-core/src/components/Label/Label.tsx +++ b/packages/react-core/src/components/Label/Label.tsx @@ -238,9 +238,8 @@ export const Label: React.FunctionComponent = ({ aria-label={closeBtnAriaLabel || `Close ${children}`} {...(isClickableDisabled && { isDisabled: true })} {...closeBtnProps} - > - - + icon={} + /> ); const closeButton = {closeBtn || defaultCloseButton}; diff --git a/packages/react-core/src/components/Label/LabelGroup.tsx b/packages/react-core/src/components/Label/LabelGroup.tsx index a3e12c8c361..973dcd0bdfc 100644 --- a/packages/react-core/src/components/Label/LabelGroup.tsx +++ b/packages/react-core/src/components/Label/LabelGroup.tsx @@ -210,9 +210,8 @@ class LabelGroup extends React.Component { onClick={onClick} id={`remove_group_${id}`} aria-labelledby={`remove_group_${id} ${id}`} - > -
-
- -
+ + + 		-
- -
+ + + 		-
- -
+ + + 		-
- -
+ + + 		- + +
- + +
@@ -10590,19 +10618,23 @@ exports[`Table simple Editable table 1`] = ` data-ouia-safe="true" type="button" > - + + @@ -10766,19 +10798,23 @@ exports[`Table simple Editable table 1`] = ` data-ouia-safe="true" type="button" > - + +
- + +
@@ -10821,19 +10861,23 @@ exports[`Table simple Editable table 1`] = ` data-ouia-safe="true" type="button" > - + + diff --git a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx index eeb9bf37af1..5e9a080aa08 100644 --- a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx +++ b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx @@ -282,9 +282,12 @@ export const TypeaheadSelectBase: React.FunctionComponent /> - +