From 86cb4b4032ae6aa196e48a13809912e2b8c88a0d Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 30 Jul 2024 11:35:54 -0400 Subject: [PATCH 1/3] chore(Button): replaced native buttons with Button component --- .../src/components/Button/Button.tsx | 2 +- .../src/components/DatePicker/DatePicker.tsx | 16 ++- .../__snapshots__/DatePicker.test.tsx.snap | 66 +++++++----- .../src/components/DragDrop/DragButton.tsx | 34 ++++-- .../__snapshots__/DragDrop.test.tsx.snap | 102 +++++++++++------- 5 files changed, 136 insertions(+), 84 deletions(-) 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-drag-drop/src/components/DragDrop/DragButton.tsx b/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx index c28fee20d31..def72dd2215 100644 --- a/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx @@ -1,27 +1,39 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; +import { Button } from '@patternfly/react-core'; import dragButtonStyles from '@patternfly/react-styles/css/components/DataList/data-list'; -import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon'; -export interface DragButtonProps extends React.HTMLProps { +export interface DragButtonProps extends Omit, 'size'> { /** Additional classes added to the drag button */ className?: string; /** Sets button type */ type?: 'button' | 'submit' | 'reset'; /** Flag indicating if drag is disabled for the item */ isDisabled?: boolean; + /** Accessible name of the drag button. */ + 'aria-label'?: string; + /** Id or list of id's that label the drag button. */ + 'aria-labelledby'?: string; } -export const DragButton: React.FunctionComponent = ({ className, ...props }: DragButtonProps) => ( - + /> ); DragButton.displayName = 'DragButton'; diff --git a/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap b/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap index 73d509e5671..a18c05a3ffa 100644 --- a/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap +++ b/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap @@ -15,25 +15,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-1" + data-ouia-component-type="PF6/Button" + data-ouia-safe="true" role="button" tabindex="0" + type="button" > - + + 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 From 0c569dc8a7390f0c74d7faa4d7e3b5939efedf24 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 30 Jul 2024 14:32:16 -0400 Subject: [PATCH 2/3] Updated Button component usages --- .../components/Drawer/DrawerCloseButton.tsx | 4 +--- .../Form/examples/FormFieldGroups.tsx | 18 +++------------ .../Modal/examples/ModalWithHelp.tsx | 4 +--- .../components/NumberInput/NumberInput.tsx | 22 ++++++++++--------- .../src/components/Tabs/TabAction.tsx | 5 ++--- .../examples/ContextSelectorDemo.tsx | 5 ++--- .../Modal/examples/ModalWithHelp.tsx | 4 +--- .../ClipboardCopyDemo/ClipboardCopyDemo.tsx | 4 +--- ...lListSelectorDeprecatedWithActionsDemo.tsx | 10 ++++----- .../demos/InputGroupDemo/InputGroupDemo.tsx | 8 ++----- .../demos/MastheadDemo/MastheadDemo.tsx | 4 +--- .../OverflowMenuDemo/OverflowMenuDemo.tsx | 12 +++------- .../demos/ToolbarDemo/ToolbarDemo.tsx | 20 +++++++---------- .../demos/TreeViewDemo/TreeViewDemo.tsx | 6 +---- .../src/components/Table/CollapseColumn.tsx | 11 +++++----- .../Table/utils/decorators/treeRow.tsx | 22 ++++++++++--------- 16 files changed, 60 insertions(+), 99 deletions(-) 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/Form/examples/FormFieldGroups.tsx b/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx index 5f8c1db0b39..5a860605e9b 100644 --- a/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx +++ b/packages/react-core/src/components/Form/examples/FormFieldGroups.tsx @@ -73,11 +73,7 @@ export const FormFieldGroups: React.FunctionComponent = () => { - - - } + actions={ - } + actions={ - } + actions={ + + /> = ({ 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/Tabs/TabAction.tsx b/packages/react-core/src/components/Tabs/TabAction.tsx index 2806767bd89..49ad1592789 100644 --- a/packages/react-core/src/components/Tabs/TabAction.tsx +++ b/packages/react-core/src/components/Tabs/TabAction.tsx @@ -39,11 +39,10 @@ const TabActionBase: React.FunctionComponent = ({ aria-label={ariaLabel} onClick={onClick} isDisabled={isDisabled} + icon={{children}} {...getOUIAProps(TabAction.displayName, ouiaId, ouiaSafe)} {...props} - > - {children} - + /> ); diff --git a/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx index 9e07d760466..89305c138f3 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx @@ -128,9 +128,8 @@ export const ContextSelectorDemo: React.FunctionComponent = () => { aria-label="Search menu items" id="pf-v6-context-selector-search-button-id-1" onClick={onSearchButtonClick} - > -