diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 608af5bb005..1f8f10e10e1 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -85,7 +85,7 @@ export interface ButtonProps extends Omit, 'r iconPosition?: 'start' | 'end' | 'left' | 'right'; /** Adds accessible text to the button. */ 'aria-label'?: string; - /** Icon for the button. Usable by all variants except for plain. */ + /** Icon for the button. */ icon?: React.ReactNode | null; /** Sets the button tabindex. */ tabIndex?: number; diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx index 8e510b2c1f0..2fb14b50944 100644 --- a/packages/react-core/src/components/DatePicker/DatePicker.tsx +++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DatePicker/date-picker'; -import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; import calendarMonthStyles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month'; import { TextInput, TextInputProps } from '../TextInput/TextInput'; +import { Button } from '../Button'; import { Popover, PopoverProps } from '../Popover/Popover'; import { InputGroup, InputGroupItem } from '../InputGroup'; import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon'; @@ -325,17 +325,15 @@ const DatePickerBase = ( /> - + isDisabled={isDisabled} + icon={} + aria-haspopup="dialog" + /> 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 d88f3c24aeb..3ed0e038d24 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 @@ -34,23 +34,32 @@ exports[`With popover opened 1`] = ` class="pf-v6-c-input-group__item" > @@ -820,24 +829,33 @@ exports[`disabled date picker 1`] = ` class="pf-v6-c-input-group__item" > diff --git a/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx b/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx index 9ef2c99818d..abfaad1d646 100644 --- a/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx +++ b/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx @@ -21,9 +21,7 @@ export const DrawerCloseButton: React.FunctionComponent ...props }: DrawerCloseButtonProps) => (
- +
); DrawerCloseButton.displayName = 'DrawerCloseButton'; 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 e89a27f3f39..0acf4225d20 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 @@ -43,7 +43,7 @@ exports[`Drawer expands from bottom 1`] = ` type="button" > + + } {...minusBtnProps} - > - - - + /> = ({ aria-label={plusBtnAriaLabel} isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) >= max} onClick={(evt) => onPlus(evt, inputName)} + icon={ + + + } {...plusBtnProps} - > - - - + /> {unit && unitPosition === 'after' && numberInputUnit} diff --git a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap index 0920b154e7c..68314bd08f3 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap +++ b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap @@ -22,7 +22,7 @@ exports[`numberInput disables lower threshold 1`] = ` type="button" > = ({ aria-label={ariaLabel} onClick={onClick} isDisabled={isDisabled} + icon={{children}} {...getOUIAProps(TabAction.displayName, ouiaId, ouiaSafe)} {...props} - > - {children} - + /> ); diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap index bd9356bac29..97001d56bb2 100644 --- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap +++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap @@ -35,7 +35,7 @@ exports[`renders tab action 1`] = ` type="button" > { aria-label="Search menu items" id="pf-v6-context-selector-search-button-id-1" onClick={onSearchButtonClick} - > - one @@ -47,25 +55,33 @@ exports[`renders some divs 1`] = ` aria-label="Drag button" aria-roledescription="sortable" class="pf-v6-c-button pf-m-plain" + data-ouia-component-id="OUIA-Generated-Button-plain-2" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" role="button" tabindex="0" + type="button" > - + + two @@ -79,25 +95,33 @@ exports[`renders some divs 1`] = ` aria-label="Drag button" aria-roledescription="sortable" class="pf-v6-c-button pf-m-plain" + data-ouia-component-id="OUIA-Generated-Button-plain-3" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" role="button" tabindex="0" + type="button" > - + + three diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx index f400a400867..2c2de6ab37c 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx @@ -22,9 +22,7 @@ export class ClipboardCopyDemo extends React.Component { isBlock additionalActions={ - + , + icon={this.state.availableDescending ? : } + />, this.onSort('chosen')} aria-label="Sort" key="chosenSortButton" - > - {this.state.chosenDescending ? : } - , + icon={this.state.chosenDescending ? : } + />, this.setState({ isChosenKebabOpen: isOpen })} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx index 45e24556079..8bda8622753 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx @@ -176,9 +176,7 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> { - + + + + + + + + + + - ), + action: + icon={ +
+ +
+ } + /> )} {children} diff --git a/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx b/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx index c20c3f68f42..ede991634c0 100644 --- a/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/treeRow.tsx @@ -53,11 +53,12 @@ export const treeRow = className={css(isExpanded && styles.modifiers.expanded)} aria-expanded={isExpanded} aria-label={toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}`} - > -
-
- + icon={ +
+
+ } + />
)} {!!onCheckChange && ( @@ -82,11 +83,12 @@ export const treeRow = onClick={(event) => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content as React.ReactNode, rowData) } - > - - - - + icon={ + + + + } + />
)} diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap index 350187be62f..2c1ed757436 100644 --- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap @@ -1538,7 +1538,7 @@ exports[`Table Collapsible nested table 1`] = ` type="button" >