From c2bef0a44e0f9f60ab009dd6407b6b96d515e338 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 16 Feb 2024 14:29:21 -0500 Subject: [PATCH 1/6] feat(Menu): consumed Penta updates --- .../src/components/Button/Button.tsx | 5 ++- .../CalendarMonth/examples/CalendarMonth.md | 4 ++- .../src/components/Menu/MenuItemAction.tsx | 31 +++++++++++-------- .../src/helpers/KeyboardHandler.tsx | 20 +++++++----- 4 files changed, 38 insertions(+), 22 deletions(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 886c67fcf48..45914883daf 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -95,6 +95,8 @@ export interface ButtonProps extends Omit, 'r innerRef?: React.Ref; /** Adds count number to button */ countOptions?: BadgeCountObject; + /** @hide Sets the role of the button. Should only be used when the button is a descendant of a menu or tablist. */ + role?: 'menuitem' | 'tab'; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ @@ -124,6 +126,7 @@ const ButtonBase: React.FunctionComponent = ({ iconPosition = 'start', 'aria-label': ariaLabel = null, icon = null, + role, ouiaId, ouiaSafe = true, tabIndex = null, @@ -182,7 +185,7 @@ const ButtonBase: React.FunctionComponent = ({ disabled={isButtonElement ? isDisabled : null} tabIndex={tabIndex !== null ? tabIndex : getDefaultTabIdx()} type={isButtonElement || isInlineSpan ? type : null} - role={isInlineSpan ? 'button' : null} + role={isInlineSpan ? 'button' : role} ref={innerRef} {...ouiaProps} > diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md index c994bf6aa27..0939ade50e6 100644 --- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md +++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md @@ -11,13 +11,15 @@ propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps'] ### Selectable date ```ts file="./CalendarMonthSelectableDate.tsx" + ``` ### Date range In this example, there are 2 dates selected: a range start date (via the `rangeStart` prop) and a range end date (via the `date` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `validators` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date. -For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](https://www.patternfly.org/v4/components/date-picker/react-demos). +For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](/components/date-and-time/date-picker/react-demos). ```ts file="./CalendarMonthDateRange.tsx" + ``` diff --git a/packages/react-core/src/components/Menu/MenuItemAction.tsx b/packages/react-core/src/components/Menu/MenuItemAction.tsx index a86a02c91a6..c8ee8a77ab4 100644 --- a/packages/react-core/src/components/Menu/MenuItemAction.tsx +++ b/packages/react-core/src/components/Menu/MenuItemAction.tsx @@ -3,8 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Menu/menu'; import { css } from '@patternfly/react-styles'; import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; import { MenuContext, MenuItemContext } from './MenuContext'; - -export interface MenuItemActionProps extends Omit, 'type' | 'ref'> { +import { Button } from '../Button'; +export interface MenuItemActionProps extends React.HTMLProps { /** Additional classes added to the action button */ className?: string; /** The action icon to use */ @@ -24,7 +24,7 @@ export interface MenuItemActionProps extends Omit = ({ - className = '', + className, icon, onClick, 'aria-label': ariaLabel, @@ -45,24 +45,29 @@ const MenuItemActionBase: React.FunctionComponent = ({ onActionClick && onActionClick(event, itemId, actionId); }; return ( - + + ); }} diff --git a/packages/react-core/src/helpers/KeyboardHandler.tsx b/packages/react-core/src/helpers/KeyboardHandler.tsx index 1d499b992fa..afdaf7b5fb0 100644 --- a/packages/react-core/src/helpers/KeyboardHandler.tsx +++ b/packages/react-core/src/helpers/KeyboardHandler.tsx @@ -106,23 +106,30 @@ export const handleArrows = ( if (!activeRow.length || onlyTraverseSiblings) { let nextSibling = activeElement; - // While a sibling exists, check each sibling to determine if it should be focussed + while (nextSibling) { - // Set the next checked sibling, determined by the horizontal arrow key direction - nextSibling = key === 'ArrowLeft' ? nextSibling.previousElementSibling : nextSibling.nextElementSibling; + const isDirectChildOfNavigableElement = nextSibling.parentElement === element; + const nextSiblingMainElement = isDirectChildOfNavigableElement ? nextSibling : nextSibling.parentElement; + nextSibling = + key === 'ArrowLeft' + ? nextSiblingMainElement.previousElementSibling + : nextSiblingMainElement.nextElementSibling; + if (nextSibling) { if (validSiblingTags.includes(nextSibling.tagName)) { - // If the sibling's tag is included in validSiblingTags, set the next target element and break the loop moveTarget = nextSibling; break; } - // If the sibling's tag is not valid, skip to the next sibling if possible + // For cases where the validSiblingTag is inside a div wrapper + if (validSiblingTags.includes(nextSibling.children[0].tagName)) { + moveTarget = nextSibling.children[0]; + break; + } } } } else { activeRow.forEach((focusableElement, index) => { if (event.target === focusableElement) { - // Once found, move up or down the array by 1. Determined by the vertical arrow key direction const increment = key === 'ArrowLeft' ? -1 : 1; currentIndex = index + increment; if (currentIndex >= activeRow.length) { @@ -132,7 +139,6 @@ export const handleArrows = ( currentIndex = activeRow.length - 1; } - // Set the next target element moveTarget = activeRow[currentIndex]; } }); From 78f447d0270b8725ace0b62b3ff32d223645f7d0 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 16 Feb 2024 14:43:14 -0500 Subject: [PATCH 2/6] Update role type --- packages/react-core/src/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 45914883daf..4199ee24738 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -96,7 +96,7 @@ export interface ButtonProps extends Omit, 'r /** Adds count number to button */ countOptions?: BadgeCountObject; /** @hide Sets the role of the button. Should only be used when the button is a descendant of a menu or tablist. */ - role?: 'menuitem' | 'tab'; + role?: string; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ From 3370c90aea8f95b688fb68336b5531249902139d Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 20 Feb 2024 09:28:21 -0500 Subject: [PATCH 3/6] Updated integration tests --- packages/react-integration/cypress/integration/menu.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-integration/cypress/integration/menu.spec.ts b/packages/react-integration/cypress/integration/menu.spec.ts index dfdb3dd0c37..386f292bb5a 100644 --- a/packages/react-integration/cypress/integration/menu.spec.ts +++ b/packages/react-integration/cypress/integration/menu.spec.ts @@ -57,11 +57,11 @@ describe('Menu Test', () => { }); it('Verify Menu with Actions', () => { - cy.get('#actions-list.pf-v6-c-menu__list > li > button').last().should('have.class', 'pf-v6-c-menu__item-action'); + cy.get('#actions-list.pf-v5-c-menu__list > li > div').last().should('have.class', 'pf-v5-c-menu__item-action'); }); it('Verify Menu with Favorites', () => { - cy.get('#favorites-menu .pf-v6-c-menu__item-action[aria-label="not starred"]').first().click(); + cy.get('#favorites-menu .pf-v5-c-menu__item-action > button[aria-label="not starred"]').first().click(); cy.get('#favorites-menu.pf-v6-c-menu > section').first().should('contain', 'Favorites'); }); From 1b08af1d724444175444c60e11c010089b2e4166 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 26 Feb 2024 11:51:37 -0500 Subject: [PATCH 4/6] Remvoed role prop from interface --- packages/react-core/src/components/Button/Button.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 4199ee24738..6966811e045 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -95,8 +95,6 @@ export interface ButtonProps extends Omit, 'r innerRef?: React.Ref; /** Adds count number to button */ countOptions?: BadgeCountObject; - /** @hide Sets the role of the button. Should only be used when the button is a descendant of a menu or tablist. */ - role?: string; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ From 65ee8507d7e47e9c4f6d738aa28e24de104067b0 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 26 Feb 2024 13:18:57 -0500 Subject: [PATCH 5/6] Updated tests and removed action icon wrapper --- .../src/components/Menu/MenuItemAction.tsx | 4 +- .../cypress/integration/menu.spec.ts | 4 +- .../__snapshots__/Table.test.tsx.snap | 532 ++++++++++-------- 3 files changed, 307 insertions(+), 233 deletions(-) diff --git a/packages/react-core/src/components/Menu/MenuItemAction.tsx b/packages/react-core/src/components/Menu/MenuItemAction.tsx index c8ee8a77ab4..bd0d02d5359 100644 --- a/packages/react-core/src/components/Menu/MenuItemAction.tsx +++ b/packages/react-core/src/components/Menu/MenuItemAction.tsx @@ -63,9 +63,7 @@ const MenuItemActionBase: React.FunctionComponent = ({ tabIndex={-1} isDisabled={isDisabled || isDisabledContext} > - - {icon === 'favorites' || isFavorited !== null ? : icon} - + {icon === 'favorites' || isFavorited !== null ? : icon} ); diff --git a/packages/react-integration/cypress/integration/menu.spec.ts b/packages/react-integration/cypress/integration/menu.spec.ts index 386f292bb5a..f26e40820b7 100644 --- a/packages/react-integration/cypress/integration/menu.spec.ts +++ b/packages/react-integration/cypress/integration/menu.spec.ts @@ -57,11 +57,11 @@ describe('Menu Test', () => { }); it('Verify Menu with Actions', () => { - cy.get('#actions-list.pf-v5-c-menu__list > li > div').last().should('have.class', 'pf-v5-c-menu__item-action'); + cy.get('#actions-list.pf-v6-c-menu__list > li > div').last().should('have.class', 'pf-v6-c-menu__item-action'); }); it('Verify Menu with Favorites', () => { - cy.get('#favorites-menu .pf-v5-c-menu__item-action > button[aria-label="not starred"]').first().click(); + cy.get('#favorites-menu .pf-v6-c-menu__item-action > button[aria-label="not starred"]').first().click(); cy.get('#favorites-menu.pf-v6-c-menu > section').first().should('contain', 'Favorites'); }); 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 f73d563d53b..0116e7a16bd 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 @@ -165,19 +165,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -239,19 +243,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -313,19 +321,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -387,19 +399,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -461,19 +477,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -535,19 +555,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -609,19 +633,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -683,19 +711,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -757,19 +789,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5774,19 +5810,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5848,19 +5888,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5922,19 +5966,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5996,19 +6044,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6070,19 +6122,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6144,19 +6200,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6218,19 +6278,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6292,19 +6356,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6366,19 +6434,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6441,19 +6513,23 @@ exports[`Table Simple Actions table 1`] = ` disabled="" type="button" > - + + From 6d8e422c18e905473abd6976a964f6219caddbba Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 26 Feb 2024 13:32:12 -0500 Subject: [PATCH 6/6] Updated snapshots --- .../__snapshots__/Table.test.tsx.snap | 532 ++++++++---------- 1 file changed, 228 insertions(+), 304 deletions(-) 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 0116e7a16bd..f73d563d53b 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 @@ -165,23 +165,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -243,23 +239,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -321,23 +313,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -399,23 +387,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -477,23 +461,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -555,23 +535,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -633,23 +609,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -711,23 +683,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -789,23 +757,19 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5810,23 +5774,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5888,23 +5848,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5966,23 +5922,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6044,23 +5996,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6122,23 +6070,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6200,23 +6144,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6278,23 +6218,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6356,23 +6292,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6434,23 +6366,19 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6513,23 +6441,19 @@ exports[`Table Simple Actions table 1`] = ` disabled="" type="button" > - + +