From f31b00165cb03d42471334fb59a17fdf8627af1e Mon Sep 17 00:00:00 2001 From: adamviktora <84135613+adamviktora@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:30:06 +0200 Subject: [PATCH 01/37] docs(Page): add example showing different type prop variants (#10352) * docs(Page): add example showing different type prop variants * docs(Page): make text color white in "subnav" section * docs(Page): rename IDs in example --- .../src/components/Page/examples/Page.md | 8 ++ .../examples/PageMainSectionVariations.tsx | 84 +++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md index f50ff195063..fb197ab4920 100644 --- a/packages/react-core/src/components/Page/examples/Page.md +++ b/packages/react-core/src/components/Page/examples/Page.md @@ -95,6 +95,14 @@ To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoi ``` +### Main section variations + +This example shows all types of page sections. + +```ts file="./PageMainSectionVariations.tsx" + +``` + ### Group section To group page content sections, add 1 or more `` components to a ``. diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx new file mode 100644 index 00000000000..56b640ada72 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { + Page, + Masthead, + MastheadToggle, + MastheadMain, + MastheadBrand, + MastheadContent, + PageSidebar, + PageSidebarBody, + PageSection, + PageToggleButton, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const PageMainSectionPadding: React.FunctionComponent = () => { + const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + + const onSidebarToggle = () => { + setIsSidebarOpen(!isSidebarOpen); + }; + + const headerToolbar = ( + + + header-tools + + + ); + + const header = ( + + + + + + + + + Logo + + + {headerToolbar} + + ); + + const sidebar = ( + + Navigation + + ); + + return ( + + + Section with type="subnav" for horizontal subnav navigation + + + Section with type="nav" for tertiary navigation + + + Section with type="tabs" for tabs + + + Section with type="breadcrumb" for breadcrumbs + + + Section without type prop or type="default" for main sections + + + Section with type="wizard" for wizards + + + ); +}; From 20ade82ca68bca55a58e14490de38a473f889373 Mon Sep 17 00:00:00 2001 From: adamviktora <84135613+adamviktora@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:39:32 +0200 Subject: [PATCH 02/37] docs(Table): update column management example to use link button for Cancel action (#10459) --- .../react-table/src/demos/examples/TableColumnManagement.tsx | 2 +- .../src/demos/examples/TableColumnManagementWithDraggable.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx index 9fadeac988b..ccce75c9f44 100644 --- a/packages/react-table/src/demos/examples/TableColumnManagement.tsx +++ b/packages/react-table/src/demos/examples/TableColumnManagement.tsx @@ -225,7 +225,7 @@ export const TableColumnManagement: React.FunctionComponent = () => { , - ]} diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx index f56db266632..20ee4d9b9a5 100644 --- a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx +++ b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx @@ -439,7 +439,7 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () => , - ]} From 34b90a39b9bb0c7d8be14be9ab26d1121be07e67 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 14 Jun 2024 15:10:45 -0400 Subject: [PATCH 03/37] feat(Modal): support ReactNode type for 'title' prop --- .../react-core/src/deprecated/components/Modal/Modal.tsx | 8 ++++---- .../src/deprecated/components/Modal/ModalContent.tsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/deprecated/components/Modal/Modal.tsx b/packages/react-core/src/deprecated/components/Modal/Modal.tsx index 51b2950cc34..73923f64539 100644 --- a/packages/react-core/src/deprecated/components/Modal/Modal.tsx +++ b/packages/react-core/src/deprecated/components/Modal/Modal.tsx @@ -6,7 +6,7 @@ import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop'; import { ModalContent } from './ModalContent'; import { OUIAProps, getDefaultOUIAId } from '../../../helpers'; -export interface ModalProps extends React.HTMLProps, OUIAProps { +export interface ModalProps extends Omit, 'title'>, OUIAProps { /** Action buttons to add to the standard modal footer. Ignored if the footer property * is passed in. */ @@ -64,8 +64,8 @@ export interface ModalProps extends React.HTMLProps, OUIAProps { positionOffset?: string; /** Flag to show the close button in the header area of the modal. */ showClose?: boolean; - /** Simple text content of the modal header. Also used for the aria-label on the body. */ - title?: string; + /** Text content of the modal header. */ + title?: React.ReactNode; /** Optional alert icon (or other) to show before the title of the modal header. When the * predefined alert types are used the default styling will be automatically applied. */ @@ -186,7 +186,7 @@ class Modal extends React.Component { target.classList.remove(css(styles.backdropOpen)); } - if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) { + if (!title && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) { // eslint-disable-next-line no-console console.error('Modal: Specify at least one of: title, aria-label, aria-labelledby.'); } diff --git a/packages/react-core/src/deprecated/components/Modal/ModalContent.tsx b/packages/react-core/src/deprecated/components/Modal/ModalContent.tsx index 26a070fec92..4f0ddab0bae 100644 --- a/packages/react-core/src/deprecated/components/Modal/ModalContent.tsx +++ b/packages/react-core/src/deprecated/components/Modal/ModalContent.tsx @@ -71,8 +71,8 @@ export interface ModalContentProps extends OUIAProps { positionOffset?: string; /** Flag to show the close button in the header area of the modal. */ showClose?: boolean; - /** Simple text content of the modal header. Also used for the aria-label on the body. */ - title?: string; + /** Text content of the modal header. */ + title?: React.ReactNode; /** Optional alert icon (or other) to show before the title of the modal header. When the * predefined alert types are used the default styling will be automatically applied. */ From 58c3c571c04c85d2e0d70c27684644229d23f0d2 Mon Sep 17 00:00:00 2001 From: adamviktora <84135613+adamviktora@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:43:21 +0200 Subject: [PATCH 04/37] fix(DatePicker/CalendarMonth): better range styling when some dates are disabled (#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description --- .../CalendarMonth/CalendarMonth.tsx | 38 +++++++++---------- .../src/components/DatePicker/DatePicker.tsx | 20 +++++++++- 2 files changed, 38 insertions(+), 20 deletions(-) diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index 879289a6725..d6f24104634 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -168,7 +168,7 @@ export const CalendarMonth = ({ const yearFormatted = yearFormat(focusedDate); const [yearInput, setYearInput] = React.useState(yearFormatted.toString()); - const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate)); + const [hoveredDate, setHoveredDate] = React.useState(undefined); const focusRef = React.useRef(); const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span')); const [shouldFocus, setShouldFocus] = React.useState(false); @@ -192,7 +192,6 @@ export const CalendarMonth = ({ const onMonthClick = (ev: React.MouseEvent, newDate: Date) => { setFocusedDate(newDate); - setHoveredDate(newDate); setShouldFocus(false); onMonthChange(ev, newDate); setYearInput(yearFormat(newDate).toString()); @@ -212,7 +211,6 @@ export const CalendarMonth = ({ if (newDate.getTime() !== focusedDate.getTime() && isValidated(newDate)) { ev.preventDefault(); setFocusedDate(newDate); - setHoveredDate(newDate); setShouldFocus(true); } }; @@ -238,7 +236,6 @@ export const CalendarMonth = ({ if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) { const newDate = changeYear(yearNum); setFocusedDate(newDate); - setHoveredDate(newDate); setShouldFocus(false); // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically @@ -282,10 +279,9 @@ export const CalendarMonth = ({ .map(({ date }) => date)[0]; if (toFocus) { setFocusedDate(toFocus); - setHoveredDate(toFocus); } } - const isHoveredDateValid = isValidated(hoveredDate); + const isHoveredDateValid = hoveredDate && isValidated(hoveredDate); const monthFormatted = monthFormat(focusedDate); const calendarToRender = ( @@ -331,7 +327,6 @@ export const CalendarMonth = ({ onSelectToggle(false); const newDate = changeMonth(Number(monthNum as string)); setFocusedDate(newDate); - setHoveredDate(newDate); setShouldFocus(false); onMonthChange(ev, newDate); }, 0); @@ -369,7 +364,7 @@ export const CalendarMonth = ({ - +
setHoveredDate(undefined)}> {calendar[0].map(({ date }, index) => ( @@ -392,16 +387,21 @@ export const CalendarMonth = ({ const isRangeStart = isValidDate(rangeStart) && isSameDate(date, rangeStart); let isInRange = false; let isRangeEnd = false; - if (isValidDate(rangeStart) && isValidDate(dateProp)) { - isInRange = date > rangeStart && date < dateProp; - isRangeEnd = isSameDate(date, dateProp); - } else if (isValidDate(rangeStart) && isHoveredDateValid) { - if (hoveredDate > rangeStart || isSameDate(hoveredDate, rangeStart)) { - isInRange = date > rangeStart && date < hoveredDate; - isRangeEnd = isSameDate(date, hoveredDate); + if (isValidDate(rangeStart)) { + let rangeEndDate: Date; + + if (isValidDate(dateProp)) { + rangeEndDate = dateProp; + } + if (isHoveredDateValid && (!isValidDate(dateProp) || hoveredDate > dateProp)) { + rangeEndDate = hoveredDate; + } + + if (rangeEndDate) { + isInRange = date >= rangeStart && date <= rangeEndDate; + isRangeEnd = isSameDate(date, rangeEndDate); } - // Don't handle focused dates before start dates for now. - // Core would likely need new styles + // Core would likely need new styles for "is selected but disabled" } return ( @@ -412,8 +412,8 @@ export const CalendarMonth = ({ isAdjacentMonth && styles.modifiers.adjacentMonth, isToday && styles.modifiers.current, (isSelected || isRangeStart) && styles.modifiers.selected, - !isValid && styles.modifiers.disabled, - (isInRange || isRangeStart || isRangeEnd) && styles.modifiers.inRange, + !isValid && !(isInRange || isRangeStart || isRangeEnd || isSelected) && styles.modifiers.disabled, + isInRange && styles.modifiers.inRange, isRangeStart && styles.modifiers.startRange, isRangeEnd && styles.modifiers.endRange )} diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx index dbe306ce54a..8e510b2c1f0 100644 --- a/packages/react-core/src/components/DatePicker/DatePicker.tsx +++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx @@ -231,12 +231,30 @@ const DatePickerBase = ( const createFocusSelectorString = (modifierClass: string) => `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`; const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected); + const focusSelectorForSelectedEndRangeDate = createFocusSelectorString( + `${calendarMonthStyles.modifiers.selected}.${calendarMonthStyles.modifiers.endRange}` + ); const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current); + /** + * Returns a CSS selector for a date button element which will receive initial focus after opening calendar popover. + * In case of a range picker it returns the end date, if it is selected, start date otherwise. + * In case of a normal datepicker it returns the selected date, if present, today otherwise. + */ + const getElementSelectorToFocus = () => { + if (isValidDate(valueDate) && isValidDate(rangeStart)) { + return focusSelectorForSelectedEndRangeDate; + } + if (isValidDate(valueDate) || isValidDate(rangeStart)) { + return focusSelectorForSelectedDate; + } + return focusSelectorForUnselectedDate; + }; + return (
Date: Fri, 14 Jun 2024 15:21:53 -0400 Subject: [PATCH 05/37] feat(MenuToggle): add OUIA support --- .../src/components/MenuToggle/MenuToggle.tsx | 36 +++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx index 90b1d2fdc18..4853fa7400c 100644 --- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx +++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx @@ -6,6 +6,7 @@ import { BadgeProps } from '../Badge'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import { OUIAProps, getDefaultOUIAId, getOUIAProps } from '../../helpers'; export enum MenuToggleStatus { success = 'success', @@ -24,12 +25,13 @@ export interface SplitButtonOptions { export interface MenuToggleProps extends Omit< - React.DetailedHTMLProps< - React.ButtonHTMLAttributes & React.HTMLAttributes, - MenuToggleElement + React.DetailedHTMLProps< + React.ButtonHTMLAttributes & React.HTMLAttributes, + MenuToggleElement + >, + 'ref' >, - 'ref' - > { + OUIAProps { /** Content rendered inside the toggle */ children?: React.ReactNode; /** Additional classes added to the toggle */ @@ -58,16 +60,29 @@ export interface MenuToggleProps badge?: BadgeProps | React.ReactNode; /** @hide Forwarded ref */ innerRef?: React.Ref; + /** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */ + ouiaId?: number | string; + /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ + ouiaSafe?: boolean; } -class MenuToggleBase extends React.Component { +interface MenuToggleState { + ouiaStateId: string; +} + +class MenuToggleBase extends React.Component { displayName = 'MenuToggleBase'; static defaultProps: MenuToggleProps = { className: '', isExpanded: false, isDisabled: false, isFullWidth: false, - isFullHeight: false + isFullHeight: false, + ouiaSafe: true + }; + + state: MenuToggleState = { + ouiaStateId: getDefaultOUIAId(MenuToggle.displayName, this.props.variant) }; render() { @@ -87,12 +102,16 @@ class MenuToggleBase extends React.Component { innerRef, onClick, 'aria-label': ariaLabel, + ouiaId, + ouiaSafe, ...otherProps } = this.props; const isPlain = variant === 'plain'; const isPlainText = variant === 'plainText'; const isTypeahead = variant === 'typeahead'; + const ouiaProps = getOUIAProps(MenuToggle.displayName, ouiaId ?? this.state.ouiaStateId, ouiaSafe); + let _statusIcon = statusIcon; if (!statusIcon) { switch (status) { @@ -130,6 +149,7 @@ class MenuToggleBase extends React.Component { onClick={onClick} aria-label={ariaLabel || 'Menu toggle'} tabIndex={-1} + {...ouiaProps} > {toggleControls} @@ -189,6 +209,7 @@ class MenuToggleBase extends React.Component { onClick={onClick} {...(children && { style: { display: 'flex', paddingLeft: 'var(--pf-v5-global--spacer--sm)' } })} {...otherProps} + {...ouiaProps} > {children && {children}} {toggleControls} @@ -207,6 +228,7 @@ class MenuToggleBase extends React.Component { disabled={isDisabled} onClick={onClick} {...componentProps} + {...ouiaProps} /> ); } From 3962b396fc1704db6e18e8458e35f8426d7340c2 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 3 Jun 2024 10:15:44 -0400 Subject: [PATCH 06/37] docs(menu-toggle): Adds docs for split button examples. (#10268) * docs(menu-toggle): Adds docs for split button examples. * Update names of split toggle examples. --- .../MenuToggle/examples/MenuToggle.md | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 9cb7440138d..5f1a01eb660 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -191,9 +191,11 @@ import { MenuToggle } from '@patternfly/react-core'; ``` -### Split button toggle with checkbox +### Split toggle with checkbox -To add an action button or other control to a menu toggle, use a split button. A `` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`. +To add a checkbox (or other action/control) to a menu toggle, use a split button. + +A `` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`. The following example shows a split button with a ``. @@ -203,25 +205,25 @@ Variant styling can be applied to split button toggles to adjust their appearanc ``` -### Split button toggle with checkbox label +### Split toggle with labeled checkbox -To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`. +To add a text label to a split button toggle, pass `children` to the `` component. -```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' +```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx' ``` -### Split button toggle with checkbox and toggle button text +### Split toggle with checkbox and toggle text label -For split button toggles that should still contain text which will trigger the toggle's `onClick`, pass `children` to the `MenuToggle`. +You can allow users to select a toggle checkbox by clicking either the checkbox or the text label. -The following example shows a split button with a `` and toggle button text. +To do so, pass `children` to the `` component. When the menu toggle text is clicked, the checkbox's `onChange` callback will be triggered. -```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx' +```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' ``` -### Split button toggle with action +### Split toggle with action To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `` to the `items` property of `splitButtonOptions`. From 6dc67a50f6a1887ef866b1d3757c52da4fa8e49e Mon Sep 17 00:00:00 2001 From: Ajay Pratap Date: Thu, 6 Jun 2024 18:03:45 +0530 Subject: [PATCH 07/37] Add description list basic demo (#10184) * add description list basic demo * fix DashboardWrapper not found issue * implement review comments * add divider and size * update content * fixed layout issues --- .../demos/DescriptionList/DescriptionList.md | 14 +++ .../examples/DescriptionListBasic.tsx | 86 +++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 packages/react-core/src/demos/DescriptionList/DescriptionList.md create mode 100644 packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md new file mode 100644 index 00000000000..bf064a69b39 --- /dev/null +++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md @@ -0,0 +1,14 @@ +--- +id: Description list +section: components +--- + +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +## Demos + +### Basic + +```js file='./examples/DescriptionListBasic.tsx' isFullscreen +``` \ No newline at end of file diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx new file mode 100644 index 00000000000..772ce127546 --- /dev/null +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription, + PageSection, + PageSectionVariants, + Card, + CardBody, + CardHeader, + TextContent, + Text, + Title, + Divider, + Flex, + FlexItem +} from '@patternfly/react-core'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +export const DescriptionListBasic: React.FunctionComponent = () => ( + + + + Projects + This is a full page demo + + + + + + + Details + + + + + + + Name + mary-test + + + Status + + + + + + Active + + + + + Default pull secret + Not configured + + + Tolerations + 6 Tolerations + + + Network Policies + + Network Policies + + + + Display name + mary + + + Requester + kube:admin + + + Created at: + 3 minutes ago + + + + + + +); From b5dcb71c2a707c7c83f4ccca87bf143cb93b261c Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 14 Jun 2024 16:14:49 -0400 Subject: [PATCH 08/37] Convert demo application to Vite --- .eslintignore | 2 +- .eslintrc.json | 8 + .github/workflows/main.yml | 4 +- package.json | 7 +- packages/react-integration/demo-app-ts/.env | 1 - .../react-integration/demo-app-ts/.gitignore | 1 - .../react-integration/demo-app-ts/index.html | 13 + .../demo-app-ts/package.json | 32 +- .../demo-app-ts/public/vite.svg | 1 + .../demo-app-ts/scripts/serve.js | 8 - .../react-integration/demo-app-ts/src/App.css | 10 - .../demo-app-ts/src/App.test.tsx | 14 - .../demos/AboutModal/AboutModalDemo.tsx | 4 +- .../components/demos/AlertDemo/AlertDemo.tsx | 4 +- .../AlertDemo/AlertTimeoutCloseButtonDemo.tsx | 4 +- .../demos/AlertGroupDemo/AlertGroupDemo.tsx | 4 +- .../AlertGroupTimeoutFromBottomDemo.tsx | 8 +- .../demos/BackToTopDemo/BackToTopDemo.tsx | 1 - .../components/demos/CardDemo/CardDemo.tsx | 11 +- .../ChipGroupDefaultIsOpenDemo.tsx | 2 +- .../demos/ChipGroupDemo/ChipGroupDemo.tsx | 2 +- .../ChipGroupWithCategoryDemo.tsx | 2 +- .../ChipGroupWithOverflowChipEventHandler.tsx | 2 +- .../ClipboardCopyDemo/ClipboardCopyDemo.tsx | 4 +- .../DescriptionListBreakpointsDemo.tsx | 2 +- .../DescriptionListDemo.tsx | 2 +- .../demos/DrawerDemo/DrawerDemo.tsx | 4 +- .../demos/DrawerDemo/DrawerResizeDemo.tsx | 4 +- .../ExpandableSectionDemo.tsx | 4 +- .../components/demos/FormDemo/FormDemo.tsx | 4 +- .../demos/InputGroupDemo/InputGroupDemo.tsx | 4 +- .../demos/JumpLinksDemo/JumpLinksDemo.tsx | 9 +- .../components/demos/LabelDemo/LabelDemo.tsx | 8 +- .../LabelGroupDemo/LabelGroupEditableDemo.tsx | 2 +- .../LabelGroupDemo/LabelGroupVerticalDemo.tsx | 6 +- .../LabelGroupWithCategoryDemo.tsx | 4 +- .../demos/LoginPageDemo/LoginPageDemo.tsx | 16 +- .../demos/MastheadDemo/MastheadDemo.tsx | 2 +- .../components/demos/MenuDemo/MenuDemo.tsx | 4 +- .../components/demos/ModalDemo/ModalDemo.tsx | 4 +- .../demos/NumberInputDemo/NumberInputDemo.tsx | 4 +- .../OverflowMenuDemo/OverflowMenuDemo.tsx | 4 +- .../demos/PaginationDemo/PaginationDemo.tsx | 12 +- .../components/demos/RadioDemo/RadioDemo.tsx | 4 +- .../demos/SearchInputDemo/SearchInputDemo.tsx | 4 +- .../SelectDeprecatedDemo/SelectInModal.tsx | 4 +- .../demos/SimpleList/SimpleListDemo.tsx | 4 +- .../demos/SliderDemo/SliderDemo.tsx | 2 +- .../components/demos/StackDemo/StackDemo.tsx | 6 +- .../demos/SwitchDemo/SwitchDemo.tsx | 8 +- .../demos/TableDemo/TableComposableDemo.tsx | 24 +- .../TableDemo/TableCompoundExpandableDemo.tsx | 24 +- .../TableEditableCompoundExpandableDemo.tsx | 24 +- .../demos/TableDemo/TableFavoritesDemo.tsx | 2 +- .../demos/TableDemo/TableRowClickDemo.tsx | 2 +- .../components/demos/TabsDemo/TabsDemo.tsx | 4 +- .../demos/TabsDemo/TabsExpandableDemo.tsx | 4 +- .../demos/TabsDemo/TabsStringEventKeyDemo.tsx | 4 +- .../demos/TabsDemo/TabsUncontrolledDemo.tsx | 4 +- .../demos/TextAreaDemo/TextAreaDemo.tsx | 4 +- .../demos/TextInputDemo/TextInputDemo.tsx | 4 +- .../demos/ToolbarDemo/ToolbarDemo.tsx | 12 +- .../ToolbarDemo/ToolbarVisibilityDemo.tsx | 16 +- .../demos/TreeViewDemo/TreeViewDemo.tsx | 6 +- .../demos/WizardDemo/WizardDemo.tsx | 4 +- .../WizardDeprecatedDemo.tsx | 4 +- .../demo-app-ts/src/custom.d.ts | 4 - .../demo-app-ts/src/index.html | 17 - .../demo-app-ts/src/index.tsx | 14 - .../demo-app-ts/src/main.tsx | 17 + .../demo-app-ts/src/vite-env.d.ts | 1 + .../demo-app-ts/static/favicon.ico | Bin 3870 -> 0 bytes .../demo-app-ts/tsconfig.dev.json | 15 - .../demo-app-ts/tsconfig.json | 40 +- .../demo-app-ts/tsconfig.node.json | 11 + .../demo-app-ts/vite.config.ts | 10 + .../demo-app-ts/webpack.config.js | 142 - packages/react-integration/package.json | 7 +- yarn.lock | 3333 ++--------------- 79 files changed, 636 insertions(+), 3397 deletions(-) delete mode 100644 packages/react-integration/demo-app-ts/.env delete mode 100644 packages/react-integration/demo-app-ts/.gitignore create mode 100644 packages/react-integration/demo-app-ts/index.html create mode 100644 packages/react-integration/demo-app-ts/public/vite.svg delete mode 100644 packages/react-integration/demo-app-ts/scripts/serve.js delete mode 100755 packages/react-integration/demo-app-ts/src/App.test.tsx delete mode 100644 packages/react-integration/demo-app-ts/src/custom.d.ts delete mode 100755 packages/react-integration/demo-app-ts/src/index.html delete mode 100755 packages/react-integration/demo-app-ts/src/index.tsx create mode 100644 packages/react-integration/demo-app-ts/src/main.tsx create mode 100644 packages/react-integration/demo-app-ts/src/vite-env.d.ts delete mode 100755 packages/react-integration/demo-app-ts/static/favicon.ico delete mode 100644 packages/react-integration/demo-app-ts/tsconfig.dev.json create mode 100644 packages/react-integration/demo-app-ts/tsconfig.node.json create mode 100644 packages/react-integration/demo-app-ts/vite.config.ts delete mode 100644 packages/react-integration/demo-app-ts/webpack.config.js diff --git a/.eslintignore b/.eslintignore index cdfefe2893d..6839bf69a5e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -16,7 +16,7 @@ packages/react-docs/.cache packages/react-docs/static packages/react-docs/public packages/react-integration/results -packages/react-integration/demo-app-ts/public +packages/react-integration/demo-app-ts/dist # package managers yarn-error.log diff --git a/.eslintrc.json b/.eslintrc.json index 3a119092f7d..9acf76f38a1 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -136,6 +136,14 @@ "react/jsx-key": "off", "no-console": "off" } + }, + { + "files": ["packages/react-integration/demo-app-ts/**/*"], + "rules": { + "patternfly-react/no-anonymous-functions": "off", + "react/react-in-jsx-scope": "off", + "spaced-comment": "off" + } } ] } diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e4fc55e74fb..64ccb220488 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -66,7 +66,7 @@ jobs: uses: actions/upload-artifact@v4 with: name: demo-app - path: packages/react-integration/demo-app-ts/public + path: packages/react-integration/demo-app-ts/dist integration-tests: name: Integration tests @@ -87,7 +87,7 @@ jobs: uses: actions/download-artifact@v4 with: name: demo-app - path: packages/react-integration/demo-app-ts/public + path: packages/react-integration/demo-app-ts/dist - name: Print environment variables run: printenv diff --git a/package.json b/package.json index c7da41fdb68..c20316d9014 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "build": "yarn clean && yarn build:generate && yarn build:esm && yarn build:cjs && yarn build:subpaths && yarn build:single:packages", "build:cjs": "tsc --build --verbose packages/tsconfig.cjs.json", "build:esm": "tsc --build --verbose packages/tsconfig.json", - "build:integration": "lerna run build:demo-app --stream", + "build:integration": "lerna run build --scope=demo-app-ts --stream", "build:docs": "yarn workspace @patternfly/react-docs build:docs", "build:generate": "lerna run generate --parallel --stream", "build:subpaths": "lerna run subpaths --parallel --stream", @@ -93,11 +93,10 @@ "lint:tests": "yarn lint packages/*/src/components/*/__tests__/*.test.*", "prepare": "ts-patch install -s", "serve:docs": "yarn workspace @patternfly/react-docs serve", - "serve:integration": "lerna run serve:demo-app", + "serve:integration": "lerna run preview --scope=demo-app-ts", "start": "yarn build && concurrently --kill-others \"yarn watch\" \"yarn workspace @patternfly/react-docs develop\"", "start:cypress": "lerna run cypress:open", - "start:demo-app": "lerna run start:demo-app --stream", - "start:demo-app:hot": "lerna run start:demo-app:hot --stream", + "start:demo-app": "lerna run dev --scope=demo-app-ts --stream", "test": "TZ=EST LC_ALL=en_US.UTF8 jest packages", "test:a11y": "lerna run test:a11y --stream", "test:integration": "yarn workspace @patternfly/react-integration test:integration", diff --git a/packages/react-integration/demo-app-ts/.env b/packages/react-integration/demo-app-ts/.env deleted file mode 100644 index 7d910f1484c..00000000000 --- a/packages/react-integration/demo-app-ts/.env +++ /dev/null @@ -1 +0,0 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/packages/react-integration/demo-app-ts/.gitignore b/packages/react-integration/demo-app-ts/.gitignore deleted file mode 100644 index a48cf0de7af..00000000000 --- a/packages/react-integration/demo-app-ts/.gitignore +++ /dev/null @@ -1 +0,0 @@ -public diff --git a/packages/react-integration/demo-app-ts/index.html b/packages/react-integration/demo-app-ts/index.html new file mode 100644 index 00000000000..b680cfed6c0 --- /dev/null +++ b/packages/react-integration/demo-app-ts/index.html @@ -0,0 +1,13 @@ + + + + + + React Demo App + + + +
+ + + diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index 75fc8151b90..4a4690e6120 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -3,10 +3,9 @@ "private": true, "version": "5.1.1-alpha.70", "scripts": { - "build:demo-app": "webpack --mode production", - "start:demo-app": "webpack-dev-server", - "start:demo-app:hot": "webpack-dev-server --hot=true", - "serve:demo-app": "node scripts/serve" + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview --port 3000" }, "dependencies": { "@patternfly/react-core": "^6.0.0-alpha.71", @@ -16,28 +15,9 @@ "react-router-dom": "^5.3.3" }, "devDependencies": { - "@pmmmwh/react-refresh-webpack-plugin": "0.5.13", - "@types/react": "^18", - "@types/react-dom": "^18", - "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", - "classnames": "^2.2.6", - "clean-webpack-plugin": "^3.0.0", - "copy-webpack-plugin": "^6.1.0", - "css-loader": "^4.3.0", - "file-loader": "^6.1.0", - "fork-ts-checker-webpack-plugin": "6.5.3", - "html-webpack-plugin": "^5.5.0", - "local-web-server": "^2.6.1", - "mini-css-extract-plugin": "^0.12.0", - "react-hot-loader": "4.13.1", - "react-refresh": "0.14.0", - "react-refresh-typescript": "2.0.9", - "style-loader": "3.3.4", - "ts-loader": "^8.3.0", - "url-loader": "^4.1.0", - "webpack": "5.91.0", - "webpack-cli": "4.10.0", - "webpack-dev-server": "4.15.2" + "@types/react-router": "^5.1.20", + "@vitejs/plugin-react-swc": "^3.5.0", + "vite": "^5.2.0" } } diff --git a/packages/react-integration/demo-app-ts/public/vite.svg b/packages/react-integration/demo-app-ts/public/vite.svg new file mode 100644 index 00000000000..e7b8dfb1b2a --- /dev/null +++ b/packages/react-integration/demo-app-ts/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/react-integration/demo-app-ts/scripts/serve.js b/packages/react-integration/demo-app-ts/scripts/serve.js deleted file mode 100644 index b035453ee46..00000000000 --- a/packages/react-integration/demo-app-ts/scripts/serve.js +++ /dev/null @@ -1,8 +0,0 @@ -const LocalWebServer = require('local-web-server'); - -const localWebServer = new LocalWebServer(); -localWebServer.listen({ - directory: './public', - port: 3000, - spa: 'index.html' -}); diff --git a/packages/react-integration/demo-app-ts/src/App.css b/packages/react-integration/demo-app-ts/src/App.css index 7a7a4ddba95..99235253251 100755 --- a/packages/react-integration/demo-app-ts/src/App.css +++ b/packages/react-integration/demo-app-ts/src/App.css @@ -25,16 +25,6 @@ color: #61dafb; } -#webpack-dev-server-client-overlay, -#react-refresh-overlay { - height: 75px !important; - min-height: 75px !important; - left: 50% !important; - top: 0px !important; - width: 400px !important; - position: absolute !important; -} - @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/packages/react-integration/demo-app-ts/src/App.test.tsx b/packages/react-integration/demo-app-ts/src/App.test.tsx deleted file mode 100755 index 772b5f88d60..00000000000 --- a/packages/react-integration/demo-app-ts/src/App.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import App from './App'; - -it('renders without crashing', () => { - const container = document.createElement('div'); - const root = createRoot(container); - root.render( - - - - ); - root.unmount(); -}); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx index c144e87e3a4..3cda19c050f 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx @@ -25,7 +25,7 @@ export class AboutModalDemo extends React.Component<{}, AboutModalState> { const { isModalOpen } = this.state; return ( - + <> @@ -56,7 +56,7 @@ export class AboutModalDemo extends React.Component<{}, AboutModalState> { - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx index 3898cf36a85..8934b159b19 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx @@ -24,7 +24,7 @@ export class AlertDemo extends React.Component<{}, AlertDemoState> { render() { const { alertOneVisible, alertTwoVisible } = this.state; return ( - + <> {alertOneVisible && ( { Expandable alert description - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx index b2bc63cc11c..357959dd58d 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx @@ -23,7 +23,7 @@ export class AlertTimeoutCloseButtonDemo extends React.Component<{}, AlertTimeou render() { const { isOpenAlert } = this.state; return ( - + <> @@ -37,7 +37,7 @@ export class AlertTimeoutCloseButtonDemo extends React.Component<{}, AlertTimeou Alert with close button and timeout )} - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx index 533031e651e..62f2fcbe810 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx @@ -63,7 +63,7 @@ export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> { this.setState({ timer: timerValue }); }; return ( - + <> {alerts} - + ); }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx index 61f354ba15b..4eb13c459c9 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { BackToTop, Card, diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx index 942fc61a2cc..9b3c259b08e 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Brand, Button, @@ -18,10 +17,12 @@ import { MenuToggle } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import { Component } from 'react'; + const pfLogo = '../../../assets/images/pfLogo.svg'; interface CardDemoState { - selected: string; + selected: string | null; isExpanded: boolean; isOpen: boolean; selectableChecked1: boolean; @@ -33,7 +34,7 @@ interface CardDemoState { selectaleClickableDrawerIsExpanded: boolean; } -class CardDemo extends React.Component { +class CardDemo extends Component { static displayName = 'CardDemo'; state: CardDemoState = { @@ -157,7 +158,7 @@ class CardDemo extends React.Component { ); return ( - + <> @@ -338,7 +339,7 @@ class CardDemo extends React.Component {
- + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx index 3daccde9ecb..4639acfaee0 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx @@ -1,6 +1,6 @@ import { Chip, ChipGroup } from '@patternfly/react-core/deprecated'; import { Badge } from '@patternfly/react-core'; -import React, { Component } from 'react'; +import { Component } from 'react'; interface BadgeChipState { badgeChipArray: { diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx index 0a2cc31b405..ae51f8d559e 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx @@ -1,6 +1,6 @@ import { Chip, ChipGroup } from '@patternfly/react-core/deprecated'; import { Badge } from '@patternfly/react-core'; -import React, { Component } from 'react'; +import { Component } from 'react'; interface BadgeChipState { badgeChipArray: { diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx index bc47b14b276..5a33772a2cd 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import { Component } from 'react'; import { Chip, ChipGroup } from '@patternfly/react-core/deprecated'; interface ChipWithCategoryGroupState { diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx index 2ba3e493656..f0092889b66 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import { Component } from 'react'; import { Chip, ChipGroup } from '@patternfly/react-core/deprecated'; import { css } from '@patternfly/react-styles'; import titleStyles from '@patternfly/react-styles/css/components/Title/title'; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx index cd4f0b3f555..f400a400867 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx @@ -7,7 +7,7 @@ export class ClipboardCopyDemo extends React.Component { static displayName = 'ClipboardCopyDemo'; render() { return ( - + <> Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion. @@ -55,7 +55,7 @@ export class ClipboardCopyDemo extends React.Component { > Some random text. - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx index 7d0a53734f5..d18a2261990 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx @@ -10,7 +10,7 @@ import { Divider } from '@patternfly/react-core'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; -import React, { Component } from 'react'; +import { Component } from 'react'; export class DescriptionListBreakpointsDemo extends Component { componentDidMount() { diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx index 2f358be5d9a..340b5f9e5d9 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx @@ -13,7 +13,7 @@ import { Popover } from '@patternfly/react-core'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; -import React, { Component } from 'react'; +import { Component } from 'react'; export class DescriptionListDemo extends Component { componentDidMount() { diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx index ed28d8152e6..ff04b1be5fc 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx @@ -119,7 +119,7 @@ export class DrawerDemo extends Component { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; return ( - + <> @@ -149,7 +149,7 @@ export class DrawerDemo extends Component { {drawerContent} - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx index d91fee2ced3..afa32cb83d0 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx @@ -75,7 +75,7 @@ export class DrawerResizeDemo extends React.Component + <> @@ -85,7 +85,7 @@ export class DrawerResizeDemo extends React.Component{drawerContent} - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx index 4c5a5f68cca..0bd22e40ba8 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx @@ -26,7 +26,7 @@ export class ExpandableSectionDemo extends React.Component + <>

Simple Expandable Example:

This content is visible only when the component is expanded. - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx index 6bf05ab0ebd..872db90837c 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx @@ -111,7 +111,7 @@ export class FormDemo extends Component { ]; return ( - + <>
{ - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx index 00f54a66816..45e24556079 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx @@ -51,7 +51,7 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> { render() { return ( - + <> @@ -93,6 +93,6 @@ export const SelectInModal = () => { - + ); }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SimpleList/SimpleListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SimpleList/SimpleListDemo.tsx index a38b1a0bb8f..ee90201c598 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SimpleList/SimpleListDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SimpleList/SimpleListDemo.tsx @@ -23,7 +23,7 @@ export class SimpleListDemo extends Component { const { activeItem } = this.state; return ( - + <>

Simple List

Item 1 @@ -66,7 +66,7 @@ export class SimpleListDemo extends Component { Item 3 - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx index 96d205a995c..d7ded077805 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx @@ -1,5 +1,5 @@ import { Slider, SliderOnChangeEvent } from '@patternfly/react-core'; -import React, { Component } from 'react'; +import { Component } from 'react'; export interface SliderDemoState { valueDiscrete: number; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/StackDemo/StackDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/StackDemo/StackDemo.tsx index 72270a33ddb..6e2dc811da2 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/StackDemo/StackDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/StackDemo/StackDemo.tsx @@ -1,10 +1,10 @@ -import React, { Component } from 'react'; +import { Component } from 'react'; import { Badge, Stack, StackItem } from '@patternfly/react-core'; export class StackDemo extends Component { render() { return ( - + <> 3 13 @@ -12,7 +12,7 @@ export class StackDemo extends Component { pf-m-fill content - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx index 92e6bf38dd4..91500a3fff8 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx @@ -50,7 +50,7 @@ export class SwitchDemo extends Component<{}, SwitchState> { simple: { isChecked } } = this.state; return ( - + <> Message when on} @@ -67,7 +67,7 @@ export class SwitchDemo extends Component<{}, SwitchState> { isChecked={false} isDisabled /> - + ); } @@ -104,10 +104,10 @@ export class SwitchDemo extends Component<{}, SwitchState> { render() { return ( - + <> {this.renderSimple()} {this.renderTable()} - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx index 7dbae156db0..ebc9252bc10 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx @@ -488,7 +488,7 @@ export const TableComposableDemo = () => { setChoice(id); }; return ( - + <> @@ -539,7 +539,7 @@ export const TableComposableDemo = () => { ))}
- + ); }; @@ -598,7 +598,7 @@ export const TableComposableDemo = () => { }; let rowIndex = -1; return ( - + <> @@ -700,7 +700,7 @@ export const TableComposableDemo = () => { ); })} - + ); }; @@ -803,21 +803,21 @@ export const TableComposableDemo = () => { return {cell}; } else if (index === 1) { return ( - + <> {cell} - + ); } else if (index === 2) { return ( - + <> {cell} - + ); } else if (index === 3) { return ( - + <> {cell} - + ); } else if (index === 5) { return {cell}; @@ -844,7 +844,7 @@ export const TableComposableDemo = () => { const isRowExpanded = activeChild[rowIndex] !== null; return ( - + <> {row.map((cell, cellIndex) => { // for this example, only columns 1 - 3 are clickable @@ -894,7 +894,7 @@ export const TableComposableDemo = () => { )} - + ); })} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx index 01be3562f18..0cb1a87d031 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx @@ -42,25 +42,25 @@ export class TableCompoundExpandableDemo extends Componentsiemur/test-space, props: { component: 'th' } }, { title: ( - + <> 10 - + ), props: { isOpen: true, ariaControls: 'compoound-expansion-table-1' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-2' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-3' } }, @@ -119,25 +119,25 @@ export class TableCompoundExpandableDemo extends Componentsiemur/test-space, props: { component: 'th' } }, { title: ( - + <> 3 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-4' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-5' } }, { title: ( - + <> 2 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-6' } }, diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx index e6e24e2917c..ba7974ab927 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx @@ -42,25 +42,25 @@ export class TableEditableCompoundExpandableDemo extends Componentsiemur/test-space, props: { component: 'th' } }, { title: ( - + <> 10 - + ), props: { isOpen: true, ariaControls: 'compoound-expansion-table-1' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-2' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-3' } }, @@ -119,25 +119,25 @@ export class TableEditableCompoundExpandableDemo extends Componentsiemur/test-space, props: { component: 'th' } }, { title: ( - + <> 3 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-4' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-5' } }, { title: ( - + <> 2 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-6' } }, diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx index 7e6e902c528..a183406cea6 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx @@ -84,7 +84,7 @@ export class TableFavoritesDemo extends Component { }); } - onSort(_event: React.MouseEvent, index: number, direction: 'asc' | 'desc') { + onSort(_: React.MouseEvent, index: number, direction: 'asc' | 'desc') { let sortedRows; if (index === 1) { // favorites column diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx index aa5662734d7..508a78e2586 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx @@ -1,6 +1,6 @@ -import React, { Component } from 'react'; import { ICell, IRow } from '@patternfly/react-table'; import { Table, TableBody, TableHeader, TableProps, type OnRowClick } from '@patternfly/react-table/deprecated'; +import { Component } from 'react'; interface ITableRowClickDemoState { rows: IRow[]; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx index 7790fb1bb9f..34b18b8be67 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx @@ -58,7 +58,7 @@ export class TabDemo extends Component { const { isTab2Hidden } = this.state; return ( - + <> @@ -185,7 +185,7 @@ export class TabDemo extends Component { Tab 3 section - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsExpandableDemo.tsx index 70585c255fb..d6dd65e0aa9 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsExpandableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsExpandableDemo.tsx @@ -88,7 +88,7 @@ export class TabsExpandableDemo extends Component { render() { return ( - + <>
- + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx index 6d3646b82e0..332dadc831e 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx @@ -31,7 +31,7 @@ export class TabsStringEventKeyDemo extends Component { render() { return ( - + <> - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx index 0f072c7c649..29af5aee4f7 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx @@ -26,7 +26,7 @@ export class TabUncontrolledDemo extends Component { const { isTab2Hidden } = this.state; return ( - + <> @@ -147,7 +147,7 @@ export class TabUncontrolledDemo extends Component { Tab 3 section - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx index 2cce8749f14..b6b5be34ae7 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx @@ -80,7 +80,7 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> { validated } = this.state; return ( - + <> Text area