From cfd927cf1b7c9315f5ab244368a909f4893464d2 Mon Sep 17 00:00:00 2001 From: adamviktora <84135613+adamviktora@users.noreply.github.com> Date: Wed, 20 Sep 2023 15:17:09 +0200 Subject: [PATCH 01/41] refactor(SliderStep): use token instead for hardcoded value (#9651) --- packages/react-core/src/components/Slider/SliderStep.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Slider/SliderStep.tsx b/packages/react-core/src/components/Slider/SliderStep.tsx index 36c184fe8be..81ff4afa54b 100644 --- a/packages/react-core/src/components/Slider/SliderStep.tsx +++ b/packages/react-core/src/components/Slider/SliderStep.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Slider/slider'; import { css } from '@patternfly/react-styles'; +import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left'; export interface SliderStepProps extends Omit, 'label'> { /** Additional classes added to the slider step. */ @@ -26,7 +27,7 @@ export const SliderStep: React.FunctionComponent = ({ isActive = false, ...props }: SliderStepProps) => { - const style = { '--pf-v5-c-slider__step--Left': `${value}%` } as React.CSSProperties; + const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties; return (
{!isTickHidden &&
} From e12b8726b9ebc2fec921b7316a270a9c09decf96 Mon Sep 17 00:00:00 2001 From: Titani Labaj <39532947+tlabaj@users.noreply.github.com> Date: Wed, 20 Sep 2023 11:20:08 -0400 Subject: [PATCH 02/41] feat(Drawer): Added start and end to position props, updated resizing to work with RTL (#9627) * feat(Drawer): Added start and end to position props, updaed resizing to work with RTL * update logic for newsize --- .../src/components/Drawer/Drawer.tsx | 12 +-- .../components/Drawer/DrawerPanelContent.tsx | 98 ++++++++++++++----- .../src/components/Drawer/examples/Drawer.md | 24 ++--- ...anelRight.tsx => DrawerInlinePanelEnd.tsx} | 2 +- ...nelLeft.tsx => DrawerInlinePanelStart.tsx} | 4 +- ...DrawerPanelLeft.tsx => DrawerPanelEnd.tsx} | 4 +- ...werPanelRight.tsx => DrawerPanelStart.tsx} | 4 +- ...leOnRight.tsx => DrawerResizableAtEnd.tsx} | 6 +- ...eOnLeft.tsx => DrawerResizableAtStart.tsx} | 4 +- 9 files changed, 102 insertions(+), 56 deletions(-) rename packages/react-core/src/components/Drawer/examples/{DrawerInlinePanelRight.tsx => DrawerInlinePanelEnd.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{DrawerInlinePanelLeft.tsx => DrawerInlinePanelStart.tsx} (92%) rename packages/react-core/src/components/Drawer/examples/{DrawerPanelLeft.tsx => DrawerPanelEnd.tsx} (93%) rename packages/react-core/src/components/Drawer/examples/{DrawerPanelRight.tsx => DrawerPanelStart.tsx} (93%) rename packages/react-core/src/components/Drawer/examples/{DrawerResizableOnRight.tsx => DrawerResizableAtEnd.tsx} (91%) rename packages/react-core/src/components/Drawer/examples/{DrawerResizableOnLeft.tsx => DrawerResizableAtStart.tsx} (96%) diff --git a/packages/react-core/src/components/Drawer/Drawer.tsx b/packages/react-core/src/components/Drawer/Drawer.tsx index e7516cb4d78..c8ffba99f3c 100644 --- a/packages/react-core/src/components/Drawer/Drawer.tsx +++ b/packages/react-core/src/components/Drawer/Drawer.tsx @@ -11,7 +11,7 @@ export enum DrawerColorVariant { export interface DrawerProps extends React.HTMLProps { /** Additional classes added to the Drawer. */ className?: string; - /** Content rendered in the left hand panel */ + /** Content rendered in the drawer panel */ children?: React.ReactNode; /** Indicates if the drawer is expanded */ isExpanded?: boolean; @@ -19,8 +19,8 @@ export interface DrawerProps extends React.HTMLProps { isInline?: boolean; /** Indicates if the drawer will always show both content and panel. */ isStatic?: boolean; - /** Position of the drawer panel */ - position?: 'left' | 'right' | 'bottom'; + /** Position of the drawer panel. left and right are deprecated, use start and end instead. */ + position?: 'start' | 'end' | 'bottom' | 'left' | 'right'; /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */ onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void; } @@ -39,7 +39,7 @@ export const DrawerContext = React.createContext>({ isExpanded: false, isStatic: false, onExpand: () => {}, - position: 'right', + position: 'end', drawerRef: null, drawerContentRef: null, isInline: false @@ -51,7 +51,7 @@ export const Drawer: React.FunctionComponent = ({ isExpanded = false, isInline = false, isStatic = false, - position = 'right', + position = 'end', onExpand = () => {}, ...props }: DrawerProps) => { @@ -66,7 +66,7 @@ export const Drawer: React.FunctionComponent = ({ isExpanded && styles.modifiers.expanded, isInline && styles.modifiers.inline, isStatic && styles.modifiers.static, - position === 'left' && styles.modifiers.panelLeft, + (position === 'left' || position === 'start') && styles.modifiers.panelLeft, position === 'bottom' && styles.modifiers.panelBottom, className )} diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx index 0a98f7c0fd2..a7069c01fa0 100644 --- a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx +++ b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx @@ -87,8 +87,8 @@ export const DrawerPanelContent: React.FunctionComponent { let splitterPos; let drawerSize; + const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl'; - if (isInline && position === 'right') { - splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left; - drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left; - } else if (isInline && position === 'left') { - splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left; - drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left; - } else if (position === 'right') { - splitterPos = - drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left; - drawerSize = - drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left; - } else if (position === 'left') { - splitterPos = - splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left; - drawerSize = - drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left; + if (isInline && (position === 'end' || position === 'right')) { + if (isRTL) { + splitterPos = panel.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right; + drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right; + } else { + splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left; + drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left; + } + } else if (isInline && (position === 'start' || position === 'left')) { + if (isRTL) { + splitterPos = splitterRef.current.getBoundingClientRect().left - panel.current.getBoundingClientRect().right; + drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right; + } else { + splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left; + drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left; + } + } else if (position === 'end' || position === 'right') { + if (isRTL) { + splitterPos = + drawerContentRef.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right; + drawerSize = + drawerContentRef.current.getBoundingClientRect().left - + drawerContentRef.current.getBoundingClientRect().right; + } else { + splitterPos = + drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left; + drawerSize = + drawerContentRef.current.getBoundingClientRect().right - + drawerContentRef.current.getBoundingClientRect().left; + } + } else if (position === 'start' || position === 'left') { + if (isRTL) { + splitterPos = + splitterRef.current.getBoundingClientRect().left - drawerContentRef.current.getBoundingClientRect().right; + drawerSize = + drawerContentRef.current.getBoundingClientRect().left - + drawerContentRef.current.getBoundingClientRect().right; + } else { + splitterPos = + splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left; + drawerSize = + drawerContentRef.current.getBoundingClientRect().right - + drawerContentRef.current.getBoundingClientRect().left; + } } else if (position === 'bottom') { splitterPos = drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top; @@ -166,6 +195,8 @@ export const DrawerPanelContent: React.FunctionComponent { + const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl'; + e.stopPropagation(); if (!isResizing) { return; @@ -173,17 +204,22 @@ export const DrawerPanelContent: React.FunctionComponent { + const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl'; + const key = e.key; if ( key !== 'Escape' && @@ -248,9 +286,17 @@ export const DrawerPanelContent: React.FunctionComponent { +export const DrawerInlinePanelEnd: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx similarity index 92% rename from packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx index c4ab29674ae..499f1ec7be3 100644 --- a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const DrawerInlinePanelLeft: React.FunctionComponent = () => { +export const DrawerInlinePanelStart: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); @@ -47,7 +47,7 @@ export const DrawerInlinePanelLeft: React.FunctionComponent = () => { - + {drawerContent} diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx similarity index 93% rename from packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx index 391b1ee953f..657a2bd0830 100644 --- a/packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const DrawerPanelLeft: React.FunctionComponent = () => { +export const DrawerPanelEnd: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); @@ -47,7 +47,7 @@ export const DrawerPanelLeft: React.FunctionComponent = () => { - + {drawerContent} diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx similarity index 93% rename from packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx index abb563a9700..df0f1d7802f 100644 --- a/packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const DrawerPanelRight: React.FunctionComponent = () => { +export const DrawerPanelStart: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); @@ -47,7 +47,7 @@ export const DrawerPanelRight: React.FunctionComponent = () => { - + {drawerContent} diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx similarity index 91% rename from packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx index 59a4cc30851..99ee9bdd29c 100644 --- a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const DrawerResizableOnRight: React.FunctionComponent = () => { +export const DrawerResizableAtEnd: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); @@ -32,7 +32,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => { }; const panelContent = ( - + drawer-panel @@ -52,7 +52,7 @@ export const DrawerResizableOnRight: React.FunctionComponent = () => { - + {drawerContent} diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx index 6e11e2525a8..d51cd308ef3 100644 --- a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const DrawerResizableOnLeft: React.FunctionComponent = () => { +export const DrawerResizableAtStart: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); @@ -47,7 +47,7 @@ export const DrawerResizableOnLeft: React.FunctionComponent = () => { - + {drawerContent} From 2953b78290b3baee6cf506303c88dfc5ab9d0329 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 20 Sep 2023 11:48:17 -0400 Subject: [PATCH 03/41] fix(Modal): Prevent duplicate ids within Modal (#9555) --- .../react-core/src/components/Modal/ModalContent.tsx | 10 ++++------ .../cypress/integration/modal.spec.ts | 8 ++++++++ .../src/components/demos/ModalDemo/ModalDemo.tsx | 3 +++ 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx index 2ae5a134fce..af6050ee5f3 100644 --- a/packages/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/react-core/src/components/Modal/ModalContent.tsx @@ -148,15 +148,13 @@ export const ModalContent: React.FunctionComponent = ({ const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined; + const hasNoDescription = !description && !ariaDescribedby; + const id = hasNoDescription ? descriptorId : undefined; + const modalBody = hasNoBodyWrapper ? ( children ) : ( - + {children} ); diff --git a/packages/react-integration/cypress/integration/modal.spec.ts b/packages/react-integration/cypress/integration/modal.spec.ts index d5c08b00dac..e196b3bdc31 100644 --- a/packages/react-integration/cypress/integration/modal.spec.ts +++ b/packages/react-integration/cypress/integration/modal.spec.ts @@ -95,4 +95,12 @@ describe('Modal Test', () => { cy.get('#modal-custom-focus-confirm-button').should('have.focus'); cy.get('#modal-custom-focus-cancel-button').click(); }); + + it("Verify the same id doesn't appear multiple times", () => { + cy.get('#showDescriptionModalButton').click(); + + cy.get('body').find('div#test-modal-id').should('have.length', 1); + + cy.get('.pf-v5-c-modal-box__close > .pf-v5-c-button.pf-m-plain').click(); + }); }); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx index 24c94181eca..0bd620d3af0 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx @@ -18,8 +18,10 @@ interface ModalDemoState { isCustomFocusModalOpen: boolean; } +// eslint-disable-next-line patternfly-react/no-anonymous-functions export class ModalDemo extends React.Component, ModalDemoState> { static displayName = 'ModalDemo'; + state = { isModalOpen: false, isModalDescriptionOpen: false, @@ -158,6 +160,7 @@ export class ModalDemo extends React.Component, Confirm ]} + id="test-modal-id" > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo From e27aac2f35e0a8bb16fa5397eb5ef841b3ecc578 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Wed, 20 Sep 2023 16:11:13 +0000 Subject: [PATCH 04/41] chore(release): releasing packages [ci skip] - @patternfly/react-code-editor@5.1.1-prerelease.14 - @patternfly/react-core@5.1.1-prerelease.14 - @patternfly/react-docs@6.1.1-prerelease.15 - @patternfly/react-integration@5.1.1-prerelease.8 - demo-app-ts@5.1.1-prerelease.13 - @patternfly/react-table@5.1.1-prerelease.14 --- packages/react-code-editor/CHANGELOG.md | 4 ++++ packages/react-code-editor/package.json | 4 ++-- packages/react-core/CHANGELOG.md | 10 ++++++++++ packages/react-core/package.json | 2 +- packages/react-docs/CHANGELOG.md | 4 ++++ packages/react-docs/package.json | 8 ++++---- packages/react-integration/CHANGELOG.md | 6 ++++++ packages/react-integration/demo-app-ts/CHANGELOG.md | 6 ++++++ packages/react-integration/demo-app-ts/package.json | 4 ++-- packages/react-integration/package.json | 2 +- packages/react-table/CHANGELOG.md | 4 ++++ packages/react-table/package.json | 4 ++-- 12 files changed, 46 insertions(+), 12 deletions(-) diff --git a/packages/react-code-editor/CHANGELOG.md b/packages/react-code-editor/CHANGELOG.md index b395ff65413..9e423043cc0 100644 --- a/packages/react-code-editor/CHANGELOG.md +++ b/packages/react-code-editor/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.13...@patternfly/react-code-editor@5.1.1-prerelease.14) (2023-09-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + ## [5.1.1-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.12...@patternfly/react-code-editor@5.1.1-prerelease.13) (2023-09-19) ### Bug Fixes diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index b9e852d4908..bf4d38e9b7f 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-code-editor", - "version": "5.1.1-prerelease.13", + "version": "5.1.1-prerelease.14", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.13", + "@patternfly/react-core": "^5.1.1-prerelease.14", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", "react-dropzone": "14.2.3", diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index 674bc9bbcb6..70662e386f8 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.1.1-prerelease.13...@patternfly/react-core@5.1.1-prerelease.14) (2023-09-20) + +### Bug Fixes + +- **Modal:** Prevent duplicate ids within Modal ([#9555](https://github.com/patternfly/patternfly-react/issues/9555)) ([2953b78](https://github.com/patternfly/patternfly-react/commit/2953b78290b3baee6cf506303c88dfc5ab9d0329)) + +### Features + +- **Drawer:** Added start and end to position props, updated resizing to work with RTL ([#9627](https://github.com/patternfly/patternfly-react/issues/9627)) ([e12b872](https://github.com/patternfly/patternfly-react/commit/e12b8726b9ebc2fec921b7316a270a9c09decf96)) + ## [5.1.1-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.1.1-prerelease.12...@patternfly/react-core@5.1.1-prerelease.13) (2023-09-19) ### Bug Fixes diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 196eaa25dd6..360bd352668 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "5.1.1-prerelease.13", + "version": "5.1.1-prerelease.14", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/react-docs/CHANGELOG.md b/packages/react-docs/CHANGELOG.md index 682468257e6..896336c9e83 100644 --- a/packages/react-docs/CHANGELOG.md +++ b/packages/react-docs/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.1.1-prerelease.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@6.1.1-prerelease.14...@patternfly/react-docs@6.1.1-prerelease.15) (2023-09-20) + +**Note:** Version bump only for package @patternfly/react-docs + ## [6.1.1-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@6.1.1-prerelease.13...@patternfly/react-docs@6.1.1-prerelease.14) (2023-09-19) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index df5d97f50f4..6fae1e81890 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "6.1.1-prerelease.14", + "version": "6.1.1-prerelease.15", "publishConfig": { "access": "public" }, @@ -24,11 +24,11 @@ "dependencies": { "@patternfly/patternfly": "5.1.0-prerelease.28", "@patternfly/react-charts": "^7.1.1-prerelease.7", - "@patternfly/react-code-editor": "^5.1.1-prerelease.13", - "@patternfly/react-core": "^5.1.1-prerelease.13", + "@patternfly/react-code-editor": "^5.1.1-prerelease.14", + "@patternfly/react-core": "^5.1.1-prerelease.14", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", - "@patternfly/react-table": "^5.1.1-prerelease.13", + "@patternfly/react-table": "^5.1.1-prerelease.14", "@patternfly/react-tokens": "^5.1.1-prerelease.6" }, "devDependencies": { diff --git a/packages/react-integration/CHANGELOG.md b/packages/react-integration/CHANGELOG.md index 196cb1ac9af..4ed89f7ff36 100644 --- a/packages/react-integration/CHANGELOG.md +++ b/packages/react-integration/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-integration@5.1.1-prerelease.7...@patternfly/react-integration@5.1.1-prerelease.8) (2023-09-20) + +### Bug Fixes + +- **Modal:** Prevent duplicate ids within Modal ([#9555](https://github.com/patternfly/patternfly-react/issues/9555)) ([2953b78](https://github.com/patternfly/patternfly-react/commit/2953b78290b3baee6cf506303c88dfc5ab9d0329)) + ## 5.1.1-prerelease.7 (2023-09-19) ### Features diff --git a/packages/react-integration/demo-app-ts/CHANGELOG.md b/packages/react-integration/demo-app-ts/CHANGELOG.md index 7bac3651053..6b35e9b16f1 100644 --- a/packages/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.13](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@5.1.1-prerelease.12...demo-app-ts@5.1.1-prerelease.13) (2023-09-20) + +### Bug Fixes + +- **Modal:** Prevent duplicate ids within Modal ([#9555](https://github.com/patternfly/patternfly-react/issues/9555)) ([2953b78](https://github.com/patternfly/patternfly-react/commit/2953b78290b3baee6cf506303c88dfc5ab9d0329)) + ## [5.1.1-prerelease.12](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@5.1.1-prerelease.11...demo-app-ts@5.1.1-prerelease.12) (2023-09-19) ### Features diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index ee7b4ff2440..8293619e69c 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -1,7 +1,7 @@ { "name": "demo-app-ts", "private": true, - "version": "5.1.1-prerelease.12", + "version": "5.1.1-prerelease.13", "scripts": { "build:demo-app": "webpack --mode production", "start:demo-app": "webpack-dev-server", @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.13", + "@patternfly/react-core": "^5.1.1-prerelease.14", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3", diff --git a/packages/react-integration/package.json b/packages/react-integration/package.json index fb7cd189cd5..b8b2858d7aa 100644 --- a/packages/react-integration/package.json +++ b/packages/react-integration/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-integration", - "version": "5.1.1-prerelease.7", + "version": "5.1.1-prerelease.8", "private": true, "description": "Integration testing for PF5 using demo applications", "main": "lib/index.js", diff --git a/packages/react-table/CHANGELOG.md b/packages/react-table/CHANGELOG.md index 31957d0937e..f7680d22277 100644 --- a/packages/react-table/CHANGELOG.md +++ b/packages/react-table/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@5.1.1-prerelease.13...@patternfly/react-table@5.1.1-prerelease.14) (2023-09-20) + +**Note:** Version bump only for package @patternfly/react-table + ## [5.1.1-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@5.1.1-prerelease.12...@patternfly/react-table@5.1.1-prerelease.13) (2023-09-19) **Note:** Version bump only for package @patternfly/react-table diff --git a/packages/react-table/package.json b/packages/react-table/package.json index 29234fce5b7..99528c1609d 100644 --- a/packages/react-table/package.json +++ b/packages/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "5.1.1-prerelease.13", + "version": "5.1.1-prerelease.14", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -39,7 +39,7 @@ "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.13", + "@patternfly/react-core": "^5.1.1-prerelease.14", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", "@patternfly/react-tokens": "^5.1.1-prerelease.6", From 255563b3095f3856f19a05877c0e254c8345e739 Mon Sep 17 00:00:00 2001 From: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Date: Thu, 21 Sep 2023 08:44:17 -0400 Subject: [PATCH 05/41] chore(Brand): update tests (#9543) * chore(Brand): update tests * add more tests * add width test * test updates --- .../components/Brand/__tests__/Brand.test.tsx | 135 ++++++++++++++---- .../__snapshots__/Brand.test.tsx.snap | 11 -- 2 files changed, 105 insertions(+), 41 deletions(-) delete mode 100644 packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap diff --git a/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx b/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx index 08e4fd1051f..7ed327f91db 100644 --- a/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx +++ b/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx @@ -3,34 +3,109 @@ import { render, screen } from '@testing-library/react'; import { Brand } from '../Brand'; import '@testing-library/jest-dom'; -describe('Brand', () => { - test('simple brand', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); - - test('passing children creates picture brand', () => { - render( - -
test
-
- ); - expect(screen.getByText('test')).toBeInTheDocument(); - }); - - test('styles get spread when there are children', () => { - render( - -
test width
-
- ); - expect(screen.getByTestId('brand')).toHaveStyle(`color: blue`); - }); - - test('styles get spread when there are no children', () => { - render( - - ); - expect(screen.getByAltText('brand no children')).toHaveStyle(`width: 30px`); - }); +test('simple brand', () => { + render(); + expect(screen.getByAltText('brand')).toBeInTheDocument(); +}); + +test('Renders with custom class name when className prop is provided', () => { + render(); + expect(screen.getByAltText('brand')).toHaveClass('custom-class'); +}); + +test('Renders with custom class name when className prop and children are provided', () => { + render( + +
test
+
+ ); + expect(screen.getByText('test')?.parentElement).toHaveClass('custom-class'); +}); + +test('Renders passed children', () => { + render( + +
test
+
+ ); + expect(screen.getByText('test')).toBeInTheDocument(); +}); + +test('Renders as picture when children are present', () => { + render( + +
test
+
+ ); + expect(screen.getByText('test')?.parentElement?.tagName).toBe('PICTURE'); +}); + +test('Renders as img when no children are present', () => { + render(); + expect(screen.getByAltText('brand')?.tagName).toBe('IMG'); +}); + +test('Has correct src with passed src prop', () => { + render(); + const image = screen.getByRole('img') as HTMLImageElement; + expect(image.src).toMatch('test.png'); +}); + +test('Has correct alt text with passed alt prop', () => { + render(); + + expect(screen.getByAltText('brand')).toBeTruthy(); +}); + +test('Has correct src with passed children', () => { + render( + +
test width
+
+ ); + const image = screen.getByRole('img') as HTMLImageElement; + expect(image.src).toMatch('test.png'); +}); + +test('Has correct alt text with passed children', () => { + render( + +
test width
+
+ ); + expect(screen.getByAltText('brand')).toBeTruthy(); +}); + +test('styles get spread when there are children', () => { + render( + +
test width
+
+ ); + expect(screen.getByTestId('brand')).toHaveStyle(`color: blue`); +}); + +test('styles get spread when there are no children', () => { + render(); + expect(screen.getByAltText('brand no children')).toHaveStyle(`width: 30px`); +}); + +test('width styles are present when passed', () => { + render( + + ); + expect(screen.getByAltText('brand with widths')).toHaveAttribute( + 'style', + '--pf-v5-c-brand--Width: 100px; --pf-v5-c-brand--Width-on-sm: 25px; --pf-v5-c-brand--Width-on-md: 50px; --pf-v5-c-brand--Width-on-lg: 100px; --pf-v5-c-brand--Width-on-xl: 125px; --pf-v5-c-brand--Width-on-2xl: 150px;' + ); }); diff --git a/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap b/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap deleted file mode 100644 index 11d5e553ce6..00000000000 --- a/packages/react-core/src/components/Brand/__tests__/__snapshots__/Brand.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Brand simple brand 1`] = ` - - brand - -`; From 2da108e030fba9d0a903c113cfc51d915d00a390 Mon Sep 17 00:00:00 2001 From: Maria Date: Thu, 21 Sep 2023 15:12:32 +0200 Subject: [PATCH 06/41] feat(Select) - add appendTo to SelectPopperProps (#9578) --- packages/react-core/src/components/Select/Select.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index d3f71d5862f..bee8089ef30 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -17,6 +17,14 @@ export interface SelectPopperProps { maxWidth?: string | 'trigger'; /** Enable to flip the popper when it reaches the boundary */ enableFlip?: boolean; + /** The container to append the select to. Defaults to 'inline'. + * If your select is being cut off you can append it to an element higher up the DOM tree. + * Some examples: + * appendTo="inline" + * appendTo={() => document.body} + * appendTo={document.getElementById('target')} + */ + appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; } export interface SelectToggleProps { From c02dcbcfe84c6aa5f67e8fa79839913c142541b4 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 21 Sep 2023 09:15:38 -0400 Subject: [PATCH 07/41] fix(misc): fixed broken CodeSandbox demos (#9519) * update import paths * fix(table): update data imports to absolute * fix remaining codesandbox demos --- .../examples/ApplicationLauncherDemo.tsx | 2 +- packages/react-core/src/demos/PrimaryDetail.md | 5 ++--- packages/react-table/src/docs/demos/Table.md | 14 ++++++++------ .../src/docs/demos/table-demos/BulkSelect.jsx | 3 +-- .../docs/demos/table-demos/ColumnManagement.jsx | 12 ++++++------ .../src/docs/demos/table-demos/Compact.jsx | 6 +++--- .../docs/demos/table-demos/SortableResponsive.jsx | 14 +++++++++++--- .../demos/table-demos/StaticBottomPagination.jsx | 5 ++--- .../src/docs/demos/table-demos/StickyHeader.jsx | 3 +-- 9 files changed, 35 insertions(+), 29 deletions(-) diff --git a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx index 2c14ae05576..93ec1fe1770 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx @@ -12,7 +12,7 @@ import { DropdownItem } from '@patternfly/react-core'; import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon'; -import pfIcon from 'pf-logo-small.svg'; +import pfIcon from '@patternfly/react-core/src/demos/Card/pf-logo-small.svg'; const MockLink: React.FunctionComponent = ({ to, ...props }: any) => ; diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index b792fb60ba1..ef9949d907f 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -24,14 +24,13 @@ import azureIcon from './assets/FuseConnector_Icons_AzureServices.png'; import restIcon from './assets/FuseConnector_Icons_REST.png'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx'; -import DashboardWrapper from './examples/DashboardWrapper'; +import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; ## Demos ### Primary-detail full page ```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen - ``` ### Primary-detail content padding @@ -554,7 +553,7 @@ class PrimaryDetailCardView extends React.Component { }} selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: () => this.onClick(product.id) }} > - {`${product.name} + {`${product.name} } - rightActions={ + endActions={ @@ -85,7 +85,7 @@ export const SliderActions: React.FunctionComponent = () => { inputLabel="%" isInputVisible isDisabled={isDisabled} - rightActions={buildAction(isDisabled)} + endActions={buildAction(isDisabled)} /> ); From 2504201e9925d23d2a8d75f3d5249ae426f92632 Mon Sep 17 00:00:00 2001 From: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Date: Thu, 21 Sep 2023 10:44:36 -0400 Subject: [PATCH 12/41] docs(Toolbar): remove test example (#9614) --- .../src/components/Toolbar/examples/Test.tsx | 258 ------------------ .../components/Toolbar/examples/Toolbar.md | 6 - 2 files changed, 264 deletions(-) delete mode 100644 packages/react-core/src/components/Toolbar/examples/Test.tsx diff --git a/packages/react-core/src/components/Toolbar/examples/Test.tsx b/packages/react-core/src/components/Toolbar/examples/Test.tsx deleted file mode 100644 index e4ad498ca23..00000000000 --- a/packages/react-core/src/components/Toolbar/examples/Test.tsx +++ /dev/null @@ -1,258 +0,0 @@ -import React from 'react'; -import { - MenuToggle, - MenuToggleElement, - Toolbar, - ToolbarItem, - ToolbarContent, - ToolbarToggleGroup, - ToolbarGroup, - SearchInput, - Select, - SelectList, - SelectOption, - ToolbarFilter, - Badge -} from '@patternfly/react-core'; -import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; - -export const Test: React.FunctionComponent = () => { - const statusChipContainerRef = React.useRef(); - const riskChipContainerRef = React.useRef(); - - const [isStatusGroupExpanded, setIsStatusGroupExpanded] = React.useState(false); - const [isRiskGroupExpanded, setIsRiskGroupExpanded] = React.useState(false); - - const [isStatusMenuExpanded, setIsStatusExpanded] = React.useState(false); - const [isRiskMenuExpanded, setIsRiskExpanded] = React.useState(false); - const [inputValue, setInputValue] = React.useState(''); - const [filters, setFilters] = React.useState({ - risk: ['Low'], - status: ['New', 'Pending'] - }); - - const closeToggleGroups = () => { - setIsStatusGroupExpanded(false); - setIsRiskGroupExpanded(false); - }; - - React.useEffect(() => { - window.addEventListener('resize', closeToggleGroups); // Resize observer to toggle off expand groups is required to properly reformat toolbar when growing - return () => { - window.removeEventListener('resize', closeToggleGroups); - }; - }, []); - - const onInputChange = (newValue: string) => { - setInputValue(newValue); - }; - - const onStatusToggle = () => { - setIsStatusExpanded(!isStatusMenuExpanded); - }; - - const onRiskToggle = () => { - setIsRiskExpanded(!isRiskMenuExpanded); - }; - - const onSelect = (type: string, event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => { - const checked = (event?.target as HTMLInputElement).checked; - setFilters((prev) => { - const prevSelections = prev[type]; - return { - ...prev, - [type]: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection) - }; - }); - }; - - const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => { - onSelect('status', event, selection); - }; - - const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => { - onSelect('risk', event, selection); - }; - - const onDelete = (type: string, id: string) => { - if (type === 'Risk') { - setFilters({ risk: filters.risk.filter((fil: string) => fil !== id), status: filters.status }); - } else if (type === 'Status') { - setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) => fil !== id) }); - } else { - setFilters({ risk: [], status: [] }); - } - }; - - const onDeleteGroup = (type: string) => { - if (type === 'Risk') { - setFilters({ risk: [], status: filters.status }); - } else if (type === 'Status') { - setFilters({ risk: filters.risk, status: [] }); - } - }; - - const statusToggleGroupItems = ( - - - onInputChange(value)} - value={inputValue} - onClear={() => { - onInputChange(''); - }} - /> - - - onDelete(category as string, chip as string)} - deleteChipGroup={(category) => onDeleteGroup(category as string)} - categoryName="Status" - isExpanded={isStatusGroupExpanded} - expandableChipContainerRef={statusChipContainerRef} // Required to link the toolbar filter chip group to the custom expandable group - > - - - - - ); - - const riskToggleGroupItems = ( - - onDelete(category as string, chip as string)} - categoryName="Risk" - isExpanded={isRiskGroupExpanded} - expandableChipContainerRef={riskChipContainerRef} // Required to link the toolbar filter chip group to the custom expandable group - > - - - - ); - - return ( - - - { - setIsStatusGroupExpanded(!isStatusGroupExpanded); - setIsRiskGroupExpanded(false); - }} // Required to control expanded state - toggleIcon={} - breakpoint="md" - chipContainerRef={statusChipContainerRef} - showClearFiltersButton - clearAllFilters={() => onDeleteGroup('Status')} - clearFiltersButtonText="Clear status filter" - > - {statusToggleGroupItems} - - { - setIsRiskGroupExpanded(!isRiskGroupExpanded); - setIsStatusGroupExpanded(false); - }} // Required to control expanded state - toggleIcon={} - breakpoint="xl" - chipContainerRef={riskChipContainerRef} - showClearFiltersButton - clearAllFilters={() => onDeleteGroup('Risk')} - clearFiltersButtonText={'Clear risk filter'} - > - {riskToggleGroupItems} - - - - ); -}; diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md index de3011cd7f3..1ab04da5720 100644 --- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md +++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md @@ -14,12 +14,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico ## Examples -### TEST - remove before merging - -```ts file="./Test.tsx" - -``` - ### Toolbar items A toolbar can contain multiple toolbar items, like filters and buttons. From ba947c7b790de2415780c1eea266d75ea71922d1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 21 Sep 2023 10:46:37 -0400 Subject: [PATCH 13/41] docs(tabs): Clean up React documentation content. (#9606) * docs(tabs):clean up React documentation content. * Update packages/react-core/src/components/Tabs/examples/Tabs.md --- packages/react-core/src/components/Tabs/examples/Tabs.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 0f52f7e728d..cf519f60f5b 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -28,7 +28,7 @@ You can adjust a tab in the following ways: - To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`. - To add a tooltip to an aria-disabled tab, use the `tooltip` property. -Most tab variations can either be 'default' or 'boxed': +Tabs can be styled as 'default' or 'boxed': - Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. - Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true. @@ -207,8 +207,6 @@ The tab its content should only be mounted when the tab is visible. To enable closeable tabs, pass the `onClose` property to the `` component. To enable a button that adds new tabs, pass the `onAdd` property to ``. -Aria labels may be controlled manually by passing the `closeButtonAriaLabel` property to a `` and the `addButtonAriaLabel` property to ``. - ```ts file="./TabsDynamic.tsx" ``` From 026096f9f505bb31b24bb25b551ec81a743ef1fa Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Thu, 21 Sep 2023 15:13:57 +0000 Subject: [PATCH 14/41] chore(release): releasing packages [ci skip] - @patternfly/react-code-editor@5.1.1-prerelease.17 - @patternfly/react-core@5.1.1-prerelease.17 - @patternfly/react-docs@6.1.1-prerelease.18 - demo-app-ts@5.1.1-prerelease.16 - @patternfly/react-table@5.1.1-prerelease.17 --- packages/react-code-editor/CHANGELOG.md | 4 ++++ packages/react-code-editor/package.json | 4 ++-- packages/react-core/CHANGELOG.md | 6 ++++++ packages/react-core/package.json | 2 +- packages/react-docs/CHANGELOG.md | 4 ++++ packages/react-docs/package.json | 8 ++++---- packages/react-integration/demo-app-ts/CHANGELOG.md | 4 ++++ packages/react-integration/demo-app-ts/package.json | 4 ++-- packages/react-table/CHANGELOG.md | 4 ++++ packages/react-table/package.json | 4 ++-- 10 files changed, 33 insertions(+), 11 deletions(-) diff --git a/packages/react-code-editor/CHANGELOG.md b/packages/react-code-editor/CHANGELOG.md index 8b159236a96..b3e80c76dbd 100644 --- a/packages/react-code-editor/CHANGELOG.md +++ b/packages/react-code-editor/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.16...@patternfly/react-code-editor@5.1.1-prerelease.17) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + ## [5.1.1-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.15...@patternfly/react-code-editor@5.1.1-prerelease.16) (2023-09-21) **Note:** Version bump only for package @patternfly/react-code-editor diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index fdd14795b04..a364e4016cf 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-code-editor", - "version": "5.1.1-prerelease.16", + "version": "5.1.1-prerelease.17", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.16", + "@patternfly/react-core": "^5.1.1-prerelease.17", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", "react-dropzone": "14.2.3", diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index 21e6d66ebd8..acde315adbc 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.1.1-prerelease.16...@patternfly/react-core@5.1.1-prerelease.17) (2023-09-21) + +### Bug Fixes + +- **Slider:** Updated slider to work in RTL. ([#9655](https://github.com/patternfly/patternfly-react/issues/9655)) ([1eb77cb](https://github.com/patternfly/patternfly-react/commit/1eb77cbdf98f1d9f140933ec5baaba37b8907492)) + ## [5.1.1-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.1.1-prerelease.15...@patternfly/react-core@5.1.1-prerelease.16) (2023-09-21) **Note:** Version bump only for package @patternfly/react-core diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 4affb8104b5..041a3c1aba2 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "5.1.1-prerelease.16", + "version": "5.1.1-prerelease.17", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/react-docs/CHANGELOG.md b/packages/react-docs/CHANGELOG.md index 96176accc98..e65ef138509 100644 --- a/packages/react-docs/CHANGELOG.md +++ b/packages/react-docs/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@6.1.1-prerelease.17...@patternfly/react-docs@6.1.1-prerelease.18) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-docs + ## [6.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@6.1.1-prerelease.16...@patternfly/react-docs@6.1.1-prerelease.17) (2023-09-21) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index bba0d87d35e..c9db1e25f1d 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "6.1.1-prerelease.17", + "version": "6.1.1-prerelease.18", "publishConfig": { "access": "public" }, @@ -24,11 +24,11 @@ "dependencies": { "@patternfly/patternfly": "5.1.0-prerelease.28", "@patternfly/react-charts": "^7.1.1-prerelease.7", - "@patternfly/react-code-editor": "^5.1.1-prerelease.16", - "@patternfly/react-core": "^5.1.1-prerelease.16", + "@patternfly/react-code-editor": "^5.1.1-prerelease.17", + "@patternfly/react-core": "^5.1.1-prerelease.17", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", - "@patternfly/react-table": "^5.1.1-prerelease.16", + "@patternfly/react-table": "^5.1.1-prerelease.17", "@patternfly/react-tokens": "^5.1.1-prerelease.6" }, "devDependencies": { diff --git a/packages/react-integration/demo-app-ts/CHANGELOG.md b/packages/react-integration/demo-app-ts/CHANGELOG.md index 1b23c21cc9d..ec965cb8490 100644 --- a/packages/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.16](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@5.1.1-prerelease.15...demo-app-ts@5.1.1-prerelease.16) (2023-09-21) + +**Note:** Version bump only for package demo-app-ts + ## [5.1.1-prerelease.15](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@5.1.1-prerelease.14...demo-app-ts@5.1.1-prerelease.15) (2023-09-21) **Note:** Version bump only for package demo-app-ts diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index aee20891c60..70bab8586a3 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -1,7 +1,7 @@ { "name": "demo-app-ts", "private": true, - "version": "5.1.1-prerelease.15", + "version": "5.1.1-prerelease.16", "scripts": { "build:demo-app": "webpack --mode production", "start:demo-app": "webpack-dev-server", @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.16", + "@patternfly/react-core": "^5.1.1-prerelease.17", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3", diff --git a/packages/react-table/CHANGELOG.md b/packages/react-table/CHANGELOG.md index 3cf4c97c16c..4f434360cdf 100644 --- a/packages/react-table/CHANGELOG.md +++ b/packages/react-table/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@5.1.1-prerelease.16...@patternfly/react-table@5.1.1-prerelease.17) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-table + ## [5.1.1-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@5.1.1-prerelease.15...@patternfly/react-table@5.1.1-prerelease.16) (2023-09-21) **Note:** Version bump only for package @patternfly/react-table diff --git a/packages/react-table/package.json b/packages/react-table/package.json index 6bd2247c6f8..a2e3790e383 100644 --- a/packages/react-table/package.json +++ b/packages/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "5.1.1-prerelease.16", + "version": "5.1.1-prerelease.17", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -39,7 +39,7 @@ "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.16", + "@patternfly/react-core": "^5.1.1-prerelease.17", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", "@patternfly/react-tokens": "^5.1.1-prerelease.6", From 033e6bcca19994f0dc1ead8bcd076096d045bd77 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Thu, 21 Sep 2023 12:19:28 -0400 Subject: [PATCH 15/41] fix(popper): add start/end positioning with RTL support, update default (#9628) * fix(popper): add start/end positioning with RTL support, update default * ensure that getLanguageDirection only returns ltr or rtl * fix(Popper): expanded types to include start/end; updated position value --- .../src/components/Dropdown/Dropdown.tsx | 2 +- .../src/components/Menu/MenuContainer.tsx | 2 +- .../src/components/Select/Select.tsx | 2 +- .../react-core/src/helpers/Popper/Popper.tsx | 49 ++++++++++++++++--- .../src/components/Table/ActionsColumn.tsx | 2 +- 5 files changed, 47 insertions(+), 10 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index b94c301f017..2819cc8eea1 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -8,7 +8,7 @@ export interface DropdownPopperProps { /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */ direction?: 'up' | 'down'; /** Horizontal position of the popper */ - position?: 'right' | 'left' | 'center'; + position?: 'right' | 'left' | 'center' | 'start' | 'end'; /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */ width?: string | 'trigger'; /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */ diff --git a/packages/react-core/src/components/Menu/MenuContainer.tsx b/packages/react-core/src/components/Menu/MenuContainer.tsx index 16f002561f3..f1bceac4eff 100644 --- a/packages/react-core/src/components/Menu/MenuContainer.tsx +++ b/packages/react-core/src/components/Menu/MenuContainer.tsx @@ -5,7 +5,7 @@ export interface MenuPopperProps { /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */ direction?: 'up' | 'down'; /** Horizontal position of the popper */ - position?: 'right' | 'left' | 'center'; + position?: 'right' | 'left' | 'center' | 'start' | 'end'; /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */ width?: string | 'trigger'; /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */ diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index bee8089ef30..5b902df64af 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -8,7 +8,7 @@ export interface SelectPopperProps { /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */ direction?: 'up' | 'down'; /** Horizontal position of the popper */ - position?: 'right' | 'left' | 'center'; + position?: 'right' | 'left' | 'center' | 'start' | 'end'; /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */ width?: string | 'trigger'; /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */ diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 403e232dfd6..b7ba8663470 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -45,6 +45,21 @@ const getOppositePlacement = (placement: Placement): any => export const getOpacityTransition = (animationDuration: number) => `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`; +export const getLanguageDirection = (targetElement: HTMLElement) => { + const defaultDirection = 'ltr'; + let direction = defaultDirection; + + if (targetElement) { + direction = getComputedStyle(targetElement).getPropertyValue('direction'); + } + + if (['ltr', 'rtl'].includes(direction)) { + return direction as 'ltr' | 'rtl'; + } + + return defaultDirection; +}; + export interface PopperProps { /** * Trigger reference element to which the popper is relatively placed to. @@ -66,7 +81,7 @@ export interface PopperProps { /** popper direction */ direction?: 'up' | 'down'; /** popper position */ - position?: 'right' | 'left' | 'center'; + position?: 'right' | 'left' | 'center' | 'start' | 'end'; /** Instead of direction and position can set the placement of the popper */ placement?: Placement; /** Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */ @@ -177,7 +192,7 @@ export const Popper: React.FunctionComponent = ({ trigger, popper, direction = 'down', - position = 'left', + position = 'start', placement, width, minWidth = 'trigger', @@ -226,6 +241,28 @@ export const Popper: React.FunctionComponent = ({ const refOrTrigger = refElement || triggerElement; const showPopper = isVisible || internalIsVisible; + const triggerParent = ((triggerRef as React.RefObject)?.current || triggerElement)?.parentElement; + const languageDirection = getLanguageDirection(triggerParent); + + const internalPosition = React.useMemo<'left' | 'right' | 'center'>(() => { + const fixedPositions = { left: 'left', right: 'right', center: 'center' }; + + const positionMap = { + ltr: { + start: 'left', + end: 'right', + ...fixedPositions + }, + rtl: { + start: 'right', + end: 'left', + ...fixedPositions + } + }; + + return positionMap[languageDirection][position] as 'left' | 'right' | 'center'; + }, [position, languageDirection]); + const onDocumentClickCallback = React.useCallback( (event: MouseEvent) => onDocumentClick(event, refOrTrigger, popperElement), [showPopper, triggerElement, refElement, popperElement, onDocumentClick] @@ -333,15 +370,15 @@ export const Popper: React.FunctionComponent = ({ return placement; } let convertedPlacement = direction === 'up' ? 'top' : 'bottom'; - if (position !== 'center') { - convertedPlacement = `${convertedPlacement}-${position === 'right' ? 'end' : 'start'}`; + if (internalPosition !== 'center') { + convertedPlacement = `${convertedPlacement}-${internalPosition === 'right' ? 'end' : 'start'}`; } return convertedPlacement as Placement; }; - const getPlacementMemo = React.useMemo(getPlacement, [direction, position, placement]); + const getPlacementMemo = React.useMemo(getPlacement, [direction, internalPosition, placement]); const getOppositePlacementMemo = React.useMemo( () => getOppositePlacement(getPlacement()), - [direction, position, placement] + [direction, internalPosition, placement] ); const widthMods: Modifier<'widthMods', {}> = React.useMemo( diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx index 369951d4a5d..5d8f01f0b94 100644 --- a/packages/react-table/src/components/Table/ActionsColumn.tsx +++ b/packages/react-table/src/components/Table/ActionsColumn.tsx @@ -39,7 +39,7 @@ const ActionsColumnBase: React.FunctionComponent = ({ extraData, actionsToggle, popperProps = { - position: 'right', + position: 'end', direction: 'down' }, innerRef, From 1bc53da876b757211a237832881820ccad64bdd7 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Thu, 21 Sep 2023 12:34:15 -0400 Subject: [PATCH 16/41] fix(Dropdown): Add appendTo to dropdownPopperProps interface (#9635) --- packages/react-core/src/components/Dropdown/Dropdown.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 2819cc8eea1..5fed1c51552 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -17,6 +17,8 @@ export interface DropdownPopperProps { maxWidth?: string | 'trigger'; /** Enable to flip the popper when it reaches the boundary */ enableFlip?: boolean; + /** The container to append the popper to. Defaults to 'inline'. */ + appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; } export interface DropdownToggleProps { From 7b3ec9275e6a8909b1e230c6e6f52d74c9c72842 Mon Sep 17 00:00:00 2001 From: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> Date: Thu, 21 Sep 2023 12:36:01 -0400 Subject: [PATCH 17/41] feat(Timestamp): allowed displayed datetime to be UTC (#9649) * feat(Timestamp): allowed displayed datetime to be UTC * Updated rendering of default UTC suffix --- .../src/components/Timestamp/Timestamp.tsx | 15 ++++++++++++--- .../Timestamp/__tests__/Timestamp.test.tsx | 6 ++++++ .../components/Timestamp/examples/Timestamp.md | 8 ++++++++ .../Timestamp/examples/TimestampDefault.tsx | 8 +++++++- .../examples/TimestampDefaultTooltip.tsx | 2 +- 5 files changed, 34 insertions(+), 5 deletions(-) diff --git a/packages/react-core/src/components/Timestamp/Timestamp.tsx b/packages/react-core/src/components/Timestamp/Timestamp.tsx index 941a8c5a18b..76e7caff5a4 100644 --- a/packages/react-core/src/components/Timestamp/Timestamp.tsx +++ b/packages/react-core/src/components/Timestamp/Timestamp.tsx @@ -64,6 +64,10 @@ export interface TimestampProps extends React.HTMLProps { * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation */ locale?: string; + /** Flag indicating whether the default content should be displayed as a UTC string + * instead of a local string. + */ + shouldDisplayUTC?: boolean; /** Determines the format of the displayed time in the timestamp and UTC tooltip. Examples: * "Full" => 11:25:00 AM Eastern Daylight Time * "Long" => 11:25:00 AM EDT @@ -84,6 +88,7 @@ export const Timestamp: React.FunctionComponent = ({ displaySuffix = '', is12Hour, locale, + shouldDisplayUTC, timeFormat, tooltip, ...props @@ -117,7 +122,6 @@ export const Timestamp: React.FunctionComponent = ({ ...formatOptions, ...(hasTimeFormat && { timeStyle: timeFormat }) }); - const defaultDisplay = `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`; const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short'; const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3); @@ -125,8 +129,13 @@ export const Timestamp: React.FunctionComponent = ({ ...formatOptions, ...(hasTimeFormat && { timeStyle: utcTimeFormat }) }); - const defaultTooltipContent = `${utcDateString}${tooltip?.suffix ? ' ' + tooltip.suffix : ' UTC'}`; + const defaultUTCSuffix = timeFormat === 'full' ? 'Coordinated Universal Time' : 'UTC'; + const createUTCContent = (customSuffix: string) => + `${utcDateString} ${customSuffix ? customSuffix : defaultUTCSuffix}`; + const defaultDisplay = shouldDisplayUTC + ? createUTCContent(displaySuffix) + : `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`; const { dateTime, ...propsWithoutDateTime } = props; const timestamp = ( @@ -143,7 +152,7 @@ export const Timestamp: React.FunctionComponent = ({ return tooltip ? ( {timestamp} diff --git a/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx b/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx index 14108715d51..804ee1b4f92 100644 --- a/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx +++ b/packages/react-core/src/components/Timestamp/__tests__/Timestamp.test.tsx @@ -55,6 +55,12 @@ test('Renders passed in date with default formatting', () => { expect(screen.getByText('1/1/2022, 12:00:00 AM')).toBeInTheDocument(); }); +test('Renders passed in date as UTC when shouldDisplayUTC is true', () => { + render(); + + expect(screen.getByText('1/1/2022, 5:00:00 AM UTC')).toBeInTheDocument(); +}); + test('Renders with correct datetime attribute when date is passed in', () => { const passedDate = new Date(2022, 0, 1); render(); diff --git a/packages/react-core/src/components/Timestamp/examples/Timestamp.md b/packages/react-core/src/components/Timestamp/examples/Timestamp.md index 377f15a630e..54534005e4e 100644 --- a/packages/react-core/src/components/Timestamp/examples/Timestamp.md +++ b/packages/react-core/src/components/Timestamp/examples/Timestamp.md @@ -12,7 +12,10 @@ beta: true By default, a timestamp will display the current date and time based on the current locale if the `date` prop is not passed in. +Passing the `shouldDisplayUTC` property will display the UTC date and time instead of the current or passed in locale. + ```ts file="./TimestampDefault.tsx" + ``` ### Basic formats @@ -22,6 +25,7 @@ The format of the displayed content can be customized by passing in the `dateFor You can also pass in the `displaySuffix` prop to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format. ```ts file="./TimestampBasicFormats.tsx" + ``` ### Custom format @@ -29,6 +33,7 @@ You can also pass in the `displaySuffix` prop to display a custom suffix at the The format of the displayed content can be further customized by passing in the `customFormat` prop. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be passed in. ```ts file="./TimestampCustomFormat.tsx" + ``` ### Default tooltip @@ -38,6 +43,7 @@ To render a tooltip that displays the timestamp content as a UTC time, you can p You can customize the suffix of this default tooltip variant by passing in `suffix` to the `tooltip` prop. ```ts file="./TimestampDefaultTooltip.tsx" + ``` ### Custom content @@ -47,6 +53,7 @@ To display custom content, such as a relative time or prefacing text, you can pa When also rendering a default tooltip with the `tooltip` prop, you can pass in the `dateFormat` and/or `timeFormat` props to customize the tooltip content without affecting the custom timestamp content. ```ts file="TimestampCustomContent.tsx" + ``` ### Custom tooltip @@ -54,4 +61,5 @@ When also rendering a default tooltip with the `tooltip` prop, you can pass in t By passing in `variant="custom"` and `content` to the `tooltip` prop, you can display custom content within the timestamp's tooltip. ```ts file="TimestampCustomTooltip.tsx" + ``` diff --git a/packages/react-core/src/components/Timestamp/examples/TimestampDefault.tsx b/packages/react-core/src/components/Timestamp/examples/TimestampDefault.tsx index b74ca416155..96a21fa14d6 100644 --- a/packages/react-core/src/components/Timestamp/examples/TimestampDefault.tsx +++ b/packages/react-core/src/components/Timestamp/examples/TimestampDefault.tsx @@ -1,4 +1,10 @@ import React from 'react'; import { Timestamp } from '@patternfly/react-core'; -export const TimestampDefault: React.FunctionComponent = () => ; +export const TimestampDefault: React.FunctionComponent = () => ( + <> + +
+ + +); diff --git a/packages/react-core/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx b/packages/react-core/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx index a1ca1e109a0..2dad0d988c3 100644 --- a/packages/react-core/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx +++ b/packages/react-core/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx @@ -11,7 +11,7 @@ export const TimestampDefaultTooltip: React.FunctionComponent = () => {
); From 2fa883df95ae47f12e4d5f90b6e184cbeca868a7 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Thu, 21 Sep 2023 16:58:23 +0000 Subject: [PATCH 18/41] chore(release): releasing packages [ci skip] - @patternfly/react-code-editor@5.1.1-prerelease.18 - @patternfly/react-core@5.1.1-prerelease.18 - @patternfly/react-docs@6.1.1-prerelease.19 - demo-app-ts@5.1.1-prerelease.17 - @patternfly/react-table@5.1.1-prerelease.18 --- packages/react-code-editor/CHANGELOG.md | 4 ++++ packages/react-code-editor/package.json | 4 ++-- packages/react-core/CHANGELOG.md | 11 +++++++++++ packages/react-core/package.json | 2 +- packages/react-docs/CHANGELOG.md | 4 ++++ packages/react-docs/package.json | 8 ++++---- packages/react-integration/demo-app-ts/CHANGELOG.md | 4 ++++ packages/react-integration/demo-app-ts/package.json | 4 ++-- packages/react-table/CHANGELOG.md | 6 ++++++ packages/react-table/package.json | 4 ++-- 10 files changed, 40 insertions(+), 11 deletions(-) diff --git a/packages/react-code-editor/CHANGELOG.md b/packages/react-code-editor/CHANGELOG.md index b3e80c76dbd..a311e4a6c37 100644 --- a/packages/react-code-editor/CHANGELOG.md +++ b/packages/react-code-editor/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.17...@patternfly/react-code-editor@5.1.1-prerelease.18) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + ## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.16...@patternfly/react-code-editor@5.1.1-prerelease.17) (2023-09-21) **Note:** Version bump only for package @patternfly/react-code-editor diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index a364e4016cf..98df271dc05 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-code-editor", - "version": "5.1.1-prerelease.17", + "version": "5.1.1-prerelease.18", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.17", + "@patternfly/react-core": "^5.1.1-prerelease.18", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", "react-dropzone": "14.2.3", diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index acde315adbc..1bea89f42e2 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.1.1-prerelease.17...@patternfly/react-core@5.1.1-prerelease.18) (2023-09-21) + +### Bug Fixes + +- **Dropdown:** Add appendTo to dropdownPopperProps interface ([#9635](https://github.com/patternfly/patternfly-react/issues/9635)) ([1bc53da](https://github.com/patternfly/patternfly-react/commit/1bc53da876b757211a237832881820ccad64bdd7)) +- **popper:** add start/end positioning with RTL support, update default ([#9628](https://github.com/patternfly/patternfly-react/issues/9628)) ([033e6bc](https://github.com/patternfly/patternfly-react/commit/033e6bcca19994f0dc1ead8bcd076096d045bd77)) + +### Features + +- **Timestamp:** allowed displayed datetime to be UTC ([#9649](https://github.com/patternfly/patternfly-react/issues/9649)) ([7b3ec92](https://github.com/patternfly/patternfly-react/commit/7b3ec9275e6a8909b1e230c6e6f52d74c9c72842)) + ## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.1.1-prerelease.16...@patternfly/react-core@5.1.1-prerelease.17) (2023-09-21) ### Bug Fixes diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 041a3c1aba2..8c2f364d6c7 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "5.1.1-prerelease.17", + "version": "5.1.1-prerelease.18", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/react-docs/CHANGELOG.md b/packages/react-docs/CHANGELOG.md index e65ef138509..52e8b14f98d 100644 --- a/packages/react-docs/CHANGELOG.md +++ b/packages/react-docs/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.1.1-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@6.1.1-prerelease.18...@patternfly/react-docs@6.1.1-prerelease.19) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-docs + ## [6.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@6.1.1-prerelease.17...@patternfly/react-docs@6.1.1-prerelease.18) (2023-09-21) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index c9db1e25f1d..53ce0de0feb 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "6.1.1-prerelease.18", + "version": "6.1.1-prerelease.19", "publishConfig": { "access": "public" }, @@ -24,11 +24,11 @@ "dependencies": { "@patternfly/patternfly": "5.1.0-prerelease.28", "@patternfly/react-charts": "^7.1.1-prerelease.7", - "@patternfly/react-code-editor": "^5.1.1-prerelease.17", - "@patternfly/react-core": "^5.1.1-prerelease.17", + "@patternfly/react-code-editor": "^5.1.1-prerelease.18", + "@patternfly/react-core": "^5.1.1-prerelease.18", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", - "@patternfly/react-table": "^5.1.1-prerelease.17", + "@patternfly/react-table": "^5.1.1-prerelease.18", "@patternfly/react-tokens": "^5.1.1-prerelease.6" }, "devDependencies": { diff --git a/packages/react-integration/demo-app-ts/CHANGELOG.md b/packages/react-integration/demo-app-ts/CHANGELOG.md index ec965cb8490..d37e87d6bea 100644 --- a/packages/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@5.1.1-prerelease.16...demo-app-ts@5.1.1-prerelease.17) (2023-09-21) + +**Note:** Version bump only for package demo-app-ts + ## [5.1.1-prerelease.16](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@5.1.1-prerelease.15...demo-app-ts@5.1.1-prerelease.16) (2023-09-21) **Note:** Version bump only for package demo-app-ts diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index 70bab8586a3..27e4499e456 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -1,7 +1,7 @@ { "name": "demo-app-ts", "private": true, - "version": "5.1.1-prerelease.16", + "version": "5.1.1-prerelease.17", "scripts": { "build:demo-app": "webpack --mode production", "start:demo-app": "webpack-dev-server", @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.17", + "@patternfly/react-core": "^5.1.1-prerelease.18", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3", diff --git a/packages/react-table/CHANGELOG.md b/packages/react-table/CHANGELOG.md index 4f434360cdf..a0e02b81530 100644 --- a/packages/react-table/CHANGELOG.md +++ b/packages/react-table/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@5.1.1-prerelease.17...@patternfly/react-table@5.1.1-prerelease.18) (2023-09-21) + +### Bug Fixes + +- **popper:** add start/end positioning with RTL support, update default ([#9628](https://github.com/patternfly/patternfly-react/issues/9628)) ([033e6bc](https://github.com/patternfly/patternfly-react/commit/033e6bcca19994f0dc1ead8bcd076096d045bd77)) + ## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@5.1.1-prerelease.16...@patternfly/react-table@5.1.1-prerelease.17) (2023-09-21) **Note:** Version bump only for package @patternfly/react-table diff --git a/packages/react-table/package.json b/packages/react-table/package.json index a2e3790e383..b646c3aa43c 100644 --- a/packages/react-table/package.json +++ b/packages/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "5.1.1-prerelease.17", + "version": "5.1.1-prerelease.18", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -39,7 +39,7 @@ "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.17", + "@patternfly/react-core": "^5.1.1-prerelease.18", "@patternfly/react-icons": "^5.1.1-prerelease.6", "@patternfly/react-styles": "^5.1.1-prerelease.6", "@patternfly/react-tokens": "^5.1.1-prerelease.6", From 832d99d4d82fa8db3b245481cd77f72517138888 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 21 Sep 2023 13:28:52 -0400 Subject: [PATCH 19/41] chore(deps): update dependency @patternfly/patternfly to v5.1.0-prerelease.32 (#9642) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/react-core/package.json | 2 +- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- yarn.lock | 8 ++++---- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 8c2f364d6c7..3459ca26cca 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -53,7 +53,7 @@ "tslib": "^2.5.0" }, "devDependencies": { - "@patternfly/patternfly": "5.1.0-prerelease.28", + "@patternfly/patternfly": "5.1.0-prerelease.32", "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-replace": "^5.0.2", diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 53ce0de0feb..4e4e4778145 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -22,7 +22,7 @@ "test:a11y": "patternfly-a11y --config patternfly-a11y.config" }, "dependencies": { - "@patternfly/patternfly": "5.1.0-prerelease.28", + "@patternfly/patternfly": "5.1.0-prerelease.32", "@patternfly/react-charts": "^7.1.1-prerelease.7", "@patternfly/react-code-editor": "^5.1.1-prerelease.18", "@patternfly/react-core": "^5.1.1-prerelease.18", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index edac098cefd..8dedd28f582 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -32,7 +32,7 @@ "@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-regular-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.14.0", - "@patternfly/patternfly": "5.1.0-prerelease.28", + "@patternfly/patternfly": "5.1.0-prerelease.32", "fs-extra": "^11.1.1", "glob": "^7.1.2", "rimraf": "^2.6.2", diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 0412f50386f..216c0fc98c3 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -18,7 +18,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "5.1.0-prerelease.28", + "@patternfly/patternfly": "5.1.0-prerelease.32", "camel-case": "^3.0.0", "css": "^2.2.3", "fs-extra": "^11.1.1", diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 712308c7194..6e7550d038b 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -28,7 +28,7 @@ "clean": "rimraf dist" }, "devDependencies": { - "@patternfly/patternfly": "5.1.0-prerelease.28", + "@patternfly/patternfly": "5.1.0-prerelease.32", "css": "^2.2.3", "fs-extra": "^11.1.1", "glob": "^7.1.2", diff --git a/yarn.lock b/yarn.lock index 53eab5007e3..889287929bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3878,10 +3878,10 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@5.1.0-prerelease.28": - version "5.1.0-prerelease.28" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.1.0-prerelease.28.tgz#8edd60e4b7537e83b8d8fa3cb8d67d8a2112794e" - integrity sha512-Z9PXZ1zV/OrOxeGR5gyAUK4LepU3cyUWLEH6JMp6rxljio1OujM5q54oPJBMAeQLdPyOgeFMLBh4NWu5PvojZg== +"@patternfly/patternfly@5.1.0-prerelease.32": + version "5.1.0-prerelease.32" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.1.0-prerelease.32.tgz#1a970c9077ce9fabdaa6e1b7fcc6cb035c9b9ad7" + integrity sha512-puUEzfGyNor9iCeEi46E9UoySAAq+V145eE06uU9JF21TxUcA/BgOHTC6abYxDwG5YhdessgI0Eec5s7uafS8Q== "@pkgjs/parseargs@^0.11.0": version "0.11.0" From 72f13c883b528ffc4ca428d068d479e2b688dc79 Mon Sep 17 00:00:00 2001 From: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Date: Thu, 21 Sep 2023 13:48:18 -0400 Subject: [PATCH 20/41] fix(Tabs): allow RTL scrolling (#9633) * fix(Tabs): allow RTL scrolling * add direction assignment to update * update aria label descriptions * add props and deprecate old, update internal state names * update desc --- .../react-core/src/components/Tabs/Tabs.tsx | 76 ++++++++++++------- 1 file changed, 50 insertions(+), 26 deletions(-) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 5781894ac37..ea37e047675 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -63,10 +63,14 @@ export interface TabsProps extends Omit { static displayName = 'Tabs'; tabList = React.createRef(); leftScrollButtonRef = React.createRef(); + private direction = 'ltr'; constructor(props: TabsProps) { super(props); this.state = { enableScrollButtons: false, showScrollButtons: false, renderScrollButtons: false, - disableLeftScrollButton: true, - disableRightScrollButton: true, + disableBackScrollButton: true, + disableForwardScrollButton: true, shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case uncontrolledActiveKey: this.props.defaultActiveKey, uncontrolledIsExpandedLocal: this.props.defaultIsExpanded, @@ -177,7 +182,9 @@ class Tabs extends React.Component { isBox: false, hasNoBorderBottom: false, leftScrollAriaLabel: 'Scroll left', + backScrollAriaLabel: 'Scroll back', rightScrollAriaLabel: 'Scroll right', + forwardScrollAriaLabel: 'Scroll forward', component: TabsComponent.div, mountOnEnter: false, unmountOnExit: false, @@ -232,8 +239,8 @@ class Tabs extends React.Component { clearTimeout(this.scrollTimeout); this.scrollTimeout = setTimeout(() => { const container = this.tabList.current; - let disableLeftScrollButton = true; - let disableRightScrollButton = true; + let disableBackScrollButton = true; + let disableForwardScrollButton = true; let enableScrollButtons = false; let overflowingTabCount = 0; @@ -246,8 +253,8 @@ class Tabs extends React.Component { enableScrollButtons = overflowOnLeft || overflowOnRight; - disableLeftScrollButton = !overflowOnLeft; - disableRightScrollButton = !overflowOnRight; + disableBackScrollButton = !overflowOnLeft; + disableForwardScrollButton = !overflowOnRight; } if (isOverflowHorizontal) { @@ -256,14 +263,14 @@ class Tabs extends React.Component { this.setState({ enableScrollButtons, - disableLeftScrollButton, - disableRightScrollButton, + disableBackScrollButton, + disableForwardScrollButton, overflowingTabCount }); }, 100); }; - scrollLeft = () => { + scrollBack = () => { // find first Element that is fully in view on the left, then scroll to the element before it if (this.tabList.current) { const container = this.tabList.current; @@ -278,12 +285,18 @@ class Tabs extends React.Component { } } if (lastElementOutOfView) { - container.scrollLeft -= lastElementOutOfView.scrollWidth; + if (this.direction === 'ltr') { + // LTR scrolls left to go back + container.scrollLeft -= lastElementOutOfView.scrollWidth; + } else { + // RTL scrolls right to go back + container.scrollLeft += lastElementOutOfView.scrollWidth; + } } } }; - scrollRight = () => { + scrollForward = () => { // find last Element that is fully in view on the right, then scroll to the element after it if (this.tabList.current) { const container = this.tabList.current as any; @@ -297,7 +310,13 @@ class Tabs extends React.Component { } } if (firstElementOutOfView) { - container.scrollLeft += firstElementOutOfView.scrollWidth; + if (this.direction === 'ltr') { + // LTR scrolls right to go forward + container.scrollLeft += firstElementOutOfView.scrollWidth; + } else { + // RTL scrolls left to go forward + container.scrollLeft -= firstElementOutOfView.scrollWidth; + } } } }; @@ -314,6 +333,7 @@ class Tabs extends React.Component { if (canUseDOM) { window.addEventListener('resize', this.handleScrollButtons, false); } + this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction'); // call the handle resize function to check if scroll buttons should be shown this.handleScrollButtons(); } @@ -360,6 +380,8 @@ class Tabs extends React.Component { } else if (prevState.enableScrollButtons && !enableScrollButtons) { this.setState({ showScrollButtons: false }); } + + this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction'); } render() { @@ -376,6 +398,8 @@ class Tabs extends React.Component { hasNoBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, + backScrollAriaLabel, + forwardScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, @@ -400,8 +424,8 @@ class Tabs extends React.Component { const { showScrollButtons, renderScrollButtons, - disableLeftScrollButton, - disableRightScrollButton, + disableBackScrollButton, + disableForwardScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal, @@ -497,10 +521,10 @@ class Tabs extends React.Component { From 262e474df57437fead3a7c4e995a96c68eb8f9ef Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Thu, 21 Sep 2023 18:20:49 +0000 Subject: [PATCH 21/41] chore(release): releasing packages [ci skip] - @patternfly/react-charts@7.1.1-prerelease.8 - @patternfly/react-code-editor@5.1.1-prerelease.19 - @patternfly/react-core@5.1.1-prerelease.19 - @patternfly/react-docs@6.1.1-prerelease.20 - @patternfly/react-icons@5.1.1-prerelease.7 - demo-app-ts@5.1.1-prerelease.18 - @patternfly/react-styles@5.1.1-prerelease.7 - @patternfly/react-table@5.1.1-prerelease.19 - @patternfly/react-tokens@5.1.1-prerelease.7 --- packages/react-charts/CHANGELOG.md | 4 ++++ packages/react-charts/package.json | 6 +++--- packages/react-code-editor/CHANGELOG.md | 4 ++++ packages/react-code-editor/package.json | 8 ++++---- packages/react-core/CHANGELOG.md | 6 ++++++ packages/react-core/package.json | 8 ++++---- packages/react-docs/CHANGELOG.md | 4 ++++ packages/react-docs/package.json | 16 ++++++++-------- packages/react-icons/CHANGELOG.md | 4 ++++ packages/react-icons/package.json | 2 +- .../react-integration/demo-app-ts/CHANGELOG.md | 4 ++++ .../react-integration/demo-app-ts/package.json | 4 ++-- packages/react-styles/CHANGELOG.md | 4 ++++ packages/react-styles/package.json | 2 +- packages/react-table/CHANGELOG.md | 4 ++++ packages/react-table/package.json | 10 +++++----- packages/react-tokens/CHANGELOG.md | 4 ++++ packages/react-tokens/package.json | 2 +- 18 files changed, 67 insertions(+), 29 deletions(-) diff --git a/packages/react-charts/CHANGELOG.md b/packages/react-charts/CHANGELOG.md index 473eec67629..c70f3a1d56c 100644 --- a/packages/react-charts/CHANGELOG.md +++ b/packages/react-charts/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.1.1-prerelease.8 (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-charts + ## [7.1.1-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.6...@patternfly/react-charts@7.1.1-prerelease.7) (2023-09-18) **Note:** Version bump only for package @patternfly/react-charts diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json index 9454fbec1db..881db4d6c90 100644 --- a/packages/react-charts/package.json +++ b/packages/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "7.1.1-prerelease.7", + "version": "7.1.1-prerelease.8", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,8 +28,8 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^5.1.1-prerelease.6", - "@patternfly/react-tokens": "^5.1.1-prerelease.6", + "@patternfly/react-styles": "^5.1.1-prerelease.7", + "@patternfly/react-tokens": "^5.1.1-prerelease.7", "hoist-non-react-statics": "^3.3.0", "lodash": "^4.17.19", "tslib": "^2.5.0", diff --git a/packages/react-code-editor/CHANGELOG.md b/packages/react-code-editor/CHANGELOG.md index a311e4a6c37..b65902a21b9 100644 --- a/packages/react-code-editor/CHANGELOG.md +++ b/packages/react-code-editor/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.18...@patternfly/react-code-editor@5.1.1-prerelease.19) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + ## [5.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.17...@patternfly/react-code-editor@5.1.1-prerelease.18) (2023-09-21) **Note:** Version bump only for package @patternfly/react-code-editor diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index 98df271dc05..08dd3fafa37 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-code-editor", - "version": "5.1.1-prerelease.18", + "version": "5.1.1-prerelease.19", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,9 +29,9 @@ "clean": "rimraf dist" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.18", - "@patternfly/react-icons": "^5.1.1-prerelease.6", - "@patternfly/react-styles": "^5.1.1-prerelease.6", + "@patternfly/react-core": "^5.1.1-prerelease.19", + "@patternfly/react-icons": "^5.1.1-prerelease.7", + "@patternfly/react-styles": "^5.1.1-prerelease.7", "react-dropzone": "14.2.3", "tslib": "^2.5.0" }, diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md index 1bea89f42e2..14fc1153e74 100644 --- a/packages/react-core/CHANGELOG.md +++ b/packages/react-core/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.1.1-prerelease.18...@patternfly/react-core@5.1.1-prerelease.19) (2023-09-21) + +### Bug Fixes + +- **Tabs:** allow RTL scrolling ([#9633](https://github.com/patternfly/patternfly-react/issues/9633)) ([72f13c8](https://github.com/patternfly/patternfly-react/commit/72f13c883b528ffc4ca428d068d479e2b688dc79)) + ## [5.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.1.1-prerelease.17...@patternfly/react-core@5.1.1-prerelease.18) (2023-09-21) ### Bug Fixes diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 3459ca26cca..dff8d38e696 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "5.1.1-prerelease.18", + "version": "5.1.1-prerelease.19", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -45,9 +45,9 @@ "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json" }, "dependencies": { - "@patternfly/react-icons": "^5.1.1-prerelease.6", - "@patternfly/react-styles": "^5.1.1-prerelease.6", - "@patternfly/react-tokens": "^5.1.1-prerelease.6", + "@patternfly/react-icons": "^5.1.1-prerelease.7", + "@patternfly/react-styles": "^5.1.1-prerelease.7", + "@patternfly/react-tokens": "^5.1.1-prerelease.7", "focus-trap": "7.5.2", "react-dropzone": "^14.2.3", "tslib": "^2.5.0" diff --git a/packages/react-docs/CHANGELOG.md b/packages/react-docs/CHANGELOG.md index 52e8b14f98d..877f1379c05 100644 --- a/packages/react-docs/CHANGELOG.md +++ b/packages/react-docs/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [6.1.1-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@6.1.1-prerelease.19...@patternfly/react-docs@6.1.1-prerelease.20) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-docs + ## [6.1.1-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@6.1.1-prerelease.18...@patternfly/react-docs@6.1.1-prerelease.19) (2023-09-21) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 4e4e4778145..90a5cb6ae01 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "6.1.1-prerelease.19", + "version": "6.1.1-prerelease.20", "publishConfig": { "access": "public" }, @@ -23,13 +23,13 @@ }, "dependencies": { "@patternfly/patternfly": "5.1.0-prerelease.32", - "@patternfly/react-charts": "^7.1.1-prerelease.7", - "@patternfly/react-code-editor": "^5.1.1-prerelease.18", - "@patternfly/react-core": "^5.1.1-prerelease.18", - "@patternfly/react-icons": "^5.1.1-prerelease.6", - "@patternfly/react-styles": "^5.1.1-prerelease.6", - "@patternfly/react-table": "^5.1.1-prerelease.18", - "@patternfly/react-tokens": "^5.1.1-prerelease.6" + "@patternfly/react-charts": "^7.1.1-prerelease.8", + "@patternfly/react-code-editor": "^5.1.1-prerelease.19", + "@patternfly/react-core": "^5.1.1-prerelease.19", + "@patternfly/react-icons": "^5.1.1-prerelease.7", + "@patternfly/react-styles": "^5.1.1-prerelease.7", + "@patternfly/react-table": "^5.1.1-prerelease.19", + "@patternfly/react-tokens": "^5.1.1-prerelease.7" }, "devDependencies": { "@patternfly/documentation-framework": "^5.0.15", diff --git a/packages/react-icons/CHANGELOG.md b/packages/react-icons/CHANGELOG.md index 269ae7e0bab..9be4fe709b7 100644 --- a/packages/react-icons/CHANGELOG.md +++ b/packages/react-icons/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.1.1-prerelease.7 (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-icons + ## 5.1.1-prerelease.6 (2023-09-18) **Note:** Version bump only for package @patternfly/react-icons diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 8dedd28f582..9c11fef0497 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-icons", - "version": "5.1.1-prerelease.6", + "version": "5.1.1-prerelease.7", "description": "PatternFly 4 Icons as React Components", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/react-integration/demo-app-ts/CHANGELOG.md b/packages/react-integration/demo-app-ts/CHANGELOG.md index d37e87d6bea..ec767ae5271 100644 --- a/packages/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@5.1.1-prerelease.17...demo-app-ts@5.1.1-prerelease.18) (2023-09-21) + +**Note:** Version bump only for package demo-app-ts + ## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@5.1.1-prerelease.16...demo-app-ts@5.1.1-prerelease.17) (2023-09-21) **Note:** Version bump only for package demo-app-ts diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index 27e4499e456..66436410ba6 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -1,7 +1,7 @@ { "name": "demo-app-ts", "private": true, - "version": "5.1.1-prerelease.17", + "version": "5.1.1-prerelease.18", "scripts": { "build:demo-app": "webpack --mode production", "start:demo-app": "webpack-dev-server", @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.18", + "@patternfly/react-core": "^5.1.1-prerelease.19", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3", diff --git a/packages/react-styles/CHANGELOG.md b/packages/react-styles/CHANGELOG.md index 32300931291..686d327be48 100644 --- a/packages/react-styles/CHANGELOG.md +++ b/packages/react-styles/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.1.1-prerelease.7 (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-styles + ## 5.1.1-prerelease.6 (2023-09-18) **Note:** Version bump only for package @patternfly/react-styles diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 216c0fc98c3..cb445ed1446 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-styles", - "version": "5.1.1-prerelease.6", + "version": "5.1.1-prerelease.7", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", diff --git a/packages/react-table/CHANGELOG.md b/packages/react-table/CHANGELOG.md index a0e02b81530..950538030dd 100644 --- a/packages/react-table/CHANGELOG.md +++ b/packages/react-table/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [5.1.1-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@5.1.1-prerelease.18...@patternfly/react-table@5.1.1-prerelease.19) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-table + ## [5.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@5.1.1-prerelease.17...@patternfly/react-table@5.1.1-prerelease.18) (2023-09-21) ### Bug Fixes diff --git a/packages/react-table/package.json b/packages/react-table/package.json index b646c3aa43c..875e756069e 100644 --- a/packages/react-table/package.json +++ b/packages/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "5.1.1-prerelease.18", + "version": "5.1.1-prerelease.19", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -39,10 +39,10 @@ "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json" }, "dependencies": { - "@patternfly/react-core": "^5.1.1-prerelease.18", - "@patternfly/react-icons": "^5.1.1-prerelease.6", - "@patternfly/react-styles": "^5.1.1-prerelease.6", - "@patternfly/react-tokens": "^5.1.1-prerelease.6", + "@patternfly/react-core": "^5.1.1-prerelease.19", + "@patternfly/react-icons": "^5.1.1-prerelease.7", + "@patternfly/react-styles": "^5.1.1-prerelease.7", + "@patternfly/react-tokens": "^5.1.1-prerelease.7", "lodash": "^4.17.19", "tslib": "^2.5.0" }, diff --git a/packages/react-tokens/CHANGELOG.md b/packages/react-tokens/CHANGELOG.md index c43f6a1aabb..388f2f57d3b 100644 --- a/packages/react-tokens/CHANGELOG.md +++ b/packages/react-tokens/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.1.1-prerelease.7 (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-tokens + ## 5.1.1-prerelease.6 (2023-09-18) **Note:** Version bump only for package @patternfly/react-tokens diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 6e7550d038b..3173980c68d 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-tokens", - "version": "5.1.1-prerelease.6", + "version": "5.1.1-prerelease.7", "description": "This library provides access to the design tokens of PatternFly 4 from JavaScript", "main": "dist/js/index.js", "module": "dist/esm/index.js", From faddb9cf243a5d4e0ac4cebd95c56e5723f7a8f2 Mon Sep 17 00:00:00 2001 From: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Date: Thu, 21 Sep 2023 14:35:00 -0400 Subject: [PATCH 22/41] fix(Nav): allow RTL scrolling (#9637) * fix(Nav): allow rtl scrolling * add direction assignment to update * update aria label descriptions * add new props and deprecate old * update desc * update other test snaps --- .../react-core/src/components/Nav/NavList.tsx | 56 +++++++++++++++---- .../__tests__/__snapshots__/Nav.test.tsx.snap | 20 +++---- .../__snapshots__/Page.test.tsx.snap | 12 ++-- 3 files changed, 60 insertions(+), 28 deletions(-) diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx index acb8de5776e..27ee81f9ba3 100644 --- a/packages/react-core/src/components/Nav/NavList.tsx +++ b/packages/react-core/src/components/Nav/NavList.tsx @@ -14,10 +14,14 @@ export interface NavListProps children?: React.ReactNode; /** Additional classes added to the list */ className?: string; - /** Aria-label for the left scroll button */ + /** @deprecated Please use backScrollAriaLabel. Aria-label for the left scroll button */ ariaLeftScroll?: string; - /** Aria-label for the right scroll button */ + /** @deprecated Please use forwardScrollAriaLabel. Aria-label for the right scroll button */ ariaRightScroll?: string; + /** Aria-label for the back scroll button */ + backScrollAriaLabel?: string; + /** Aria-label for the forward scroll button */ + forwardScrollAriaLabel?: string; } class NavList extends React.Component { @@ -26,8 +30,11 @@ class NavList extends React.Component { context!: React.ContextType; static defaultProps: NavListProps = { ariaLeftScroll: 'Scroll left', - ariaRightScroll: 'Scroll right' + backScrollAriaLabel: 'Scroll back', + ariaRightScroll: 'Scroll right', + forwardScrollAriaLabel: 'Scroll foward' }; + private direction = 'ltr'; state = { scrollViewAtStart: false, @@ -51,7 +58,7 @@ class NavList extends React.Component { } }; - scrollLeft = () => { + scrollBack = () => { // find first Element that is fully in view on the left, then scroll to the element before it const container = this.navList.current; if (container) { @@ -65,13 +72,19 @@ class NavList extends React.Component { } } if (lastElementOutOfView) { - container.scrollLeft -= lastElementOutOfView.scrollWidth; + if (this.direction === 'ltr') { + // LTR scrolls left to go back + container.scrollLeft -= lastElementOutOfView.scrollWidth; + } else { + // RTL scrolls right to go back + container.scrollLeft += lastElementOutOfView.scrollWidth; + } } this.handleScrollButtons(); } }; - scrollRight = () => { + scrollForward = () => { // find last Element that is fully in view on the right, then scroll to the element after it const container = this.navList.current; if (container) { @@ -85,7 +98,13 @@ class NavList extends React.Component { } } if (firstElementOutOfView) { - container.scrollLeft += firstElementOutOfView.scrollWidth; + if (this.direction === 'ltr') { + // LTR scrolls right to go forward + container.scrollLeft += firstElementOutOfView.scrollWidth; + } else { + // RTL scrolls left to go forward + container.scrollLeft -= firstElementOutOfView.scrollWidth; + } } this.handleScrollButtons(); } @@ -93,6 +112,7 @@ class NavList extends React.Component { componentDidMount() { this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true); + this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction'); this.handleScrollButtons(); } @@ -100,8 +120,20 @@ class NavList extends React.Component { this.observer(); } + componentDidUpdate() { + this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction'); + } + render() { - const { children, className, ariaLeftScroll, ariaRightScroll, ...props } = this.props; + const { + children, + className, + ariaLeftScroll, + ariaRightScroll, + backScrollAriaLabel, + forwardScrollAriaLabel, + ...props + } = this.props; const { scrollViewAtStart, scrollViewAtEnd } = this.state; return ( @@ -113,8 +145,8 @@ class NavList extends React.Component { {isHorizontal && (