From 0e906c90958def7ba49a3e5f012de4be32e3476e Mon Sep 17 00:00:00 2001 From: adamviktora Date: Thu, 8 Jun 2023 09:58:40 +0200 Subject: [PATCH 01/17] refactor(misc): replace hardcoded css variables with tokens --- .../components/Alert/__tests__/Alert.test.tsx | 3 ++- .../BackgroundImage/BackgroundImage.tsx | 3 ++- .../__tests__/BackgroundImage.test.tsx | 6 ++++-- .../react-core/src/components/Brand/Brand.tsx | 7 +++++-- .../react-core/src/components/Chip/Chip.tsx | 3 ++- .../examples/DataListWidthModifiers.tsx | 10 ++++++--- .../src/components/DatePicker/DatePicker.tsx | 3 ++- .../DescriptionList/DescriptionList.tsx | 9 +++++--- .../src/components/DragDrop/Draggable.tsx | 3 ++- .../components/Drawer/DrawerPanelContent.tsx | 13 +++++++----- .../DualListSelector/DualListSelectorPane.tsx | 5 +++-- .../components/EmptyState/EmptyStateIcon.tsx | 4 ++-- .../examples/EmptyStateCustomIconColor.tsx | 3 ++- .../react-core/src/components/Form/Form.tsx | 3 ++- .../react-core/src/components/Label/Label.tsx | 3 ++- .../src/components/Menu/MenuContent.tsx | 6 ++++-- .../src/components/Menu/__mocks__/Menu.tsx | 3 ++- .../components/NumberInput/NumberInput.tsx | 3 ++- .../Page/examples/PageCenteredSection.tsx | 3 ++- .../src/components/Panel/PanelMain.tsx | 3 ++- .../Panel/__tests__/PanelMain.test.tsx | 3 ++- .../src/components/Skeleton/Skeleton.tsx | 6 ++++-- .../Skeleton/examples/SkeletonText.tsx | 21 ++++++++++++------- .../src/components/Slider/Slider.tsx | 14 +++++++------ .../src/components/Spinner/Spinner.tsx | 3 ++- .../src/components/TimePicker/TimePicker.tsx | 4 +++- .../src/components/Toolbar/ToolbarItem.tsx | 3 ++- .../src/components/Wizard/WizardNavItem.tsx | 6 ++++-- .../ApplicationLauncherRouterLink.tsx | 3 ++- .../src/layouts/Gallery/Gallery.tsx | 6 ++++-- .../demos/TableDemo/TableComposableDemo.tsx | 3 ++- .../demos/TableDemo/TableRowWrapperDemo.tsx | 3 ++- .../react-table/src/components/Table/Td.tsx | 10 ++++++--- .../react-table/src/components/Table/Th.tsx | 9 +++++--- .../components/Table/examples/TableMisc.tsx | 3 ++- .../Table/examples/LegacyTableMisc.tsx | 3 ++- 36 files changed, 129 insertions(+), 67 deletions(-) diff --git a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx index b036aeda9e6..01f19b569b8 100644 --- a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx @@ -6,6 +6,7 @@ import { act } from 'react-dom/test-utils'; import { Alert, AlertVariant } from '../Alert'; import { AlertContext } from '../AlertContext'; import { capitalize } from '../../../helpers'; +import cssAlertTitleMaxLines from '@patternfly/react-tokens/dist/esm/c_alert__title_max_lines'; jest.mock('../AlertToggleExpandButton', () => ({ AlertToggleExpandButton: ({ isExpanded, onToggleExpand, ...props }) => ( @@ -578,7 +579,7 @@ test('Renders titles with the expected truncation styling when truncateTitle is const title = screen.getByRole('heading'); expect(title).toHaveClass('pf-m-truncate'); - expect(title).toHaveAttribute('style', '--pf-v5-c-alert__title--max-lines: 3;'); + expect(title).toHaveAttribute('style', `${cssAlertTitleMaxLines.name}: 3;`); }); test('Passes customIcon value to AlertIcon', () => { diff --git a/packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx b/packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx index f8303224167..9586f2b5d96 100644 --- a/packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx +++ b/packages/react-core/src/components/BackgroundImage/BackgroundImage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image'; +import cssBackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage'; export interface BackgroundImageProps extends React.HTMLProps { /** The URL or file path of the image for the background */ @@ -19,7 +20,7 @@ export const BackgroundImage: React.FunctionComponent = ({ className={css(styles.backgroundImage, className)} style={ { - '--pf-v5-c-background-image--BackgroundImage': `url(${src})` + [cssBackgroundImage.name]: `url(${src})` } as React.CSSProperties } {...props} diff --git a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx index ddca7b08c6b..91d777337d2 100644 --- a/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx +++ b/packages/react-core/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { BackgroundImage } from '../BackgroundImage'; +import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image'; +import cssBackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage'; test('has default className and src URL applied to style', () => { render(); @@ -8,8 +10,8 @@ test('has default className and src URL applied to style', () => { const backgroundImage = screen.getByTestId('test-id'); const backgroundImageStyle = backgroundImage.getAttribute('style'); - expect(backgroundImage).toHaveClass('pf-v5-c-background-image'); - expect(backgroundImageStyle).toContain('--pf-v5-c-background-image--BackgroundImage'); + expect(backgroundImage).toHaveClass(styles.backgroundImage); + expect(backgroundImageStyle).toContain(cssBackgroundImage.name); expect(backgroundImageStyle).toContain('/image/url.png'); }); diff --git a/packages/react-core/src/components/Brand/Brand.tsx b/packages/react-core/src/components/Brand/Brand.tsx index dfed3aa33c9..eeae2ce7b7f 100644 --- a/packages/react-core/src/components/Brand/Brand.tsx +++ b/packages/react-core/src/components/Brand/Brand.tsx @@ -2,6 +2,9 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Brand/brand'; import { setBreakpointCssVars } from '../../helpers'; +import cssBrandHeight from '@patternfly/react-tokens/dist/esm/c_brand_Height'; +import cssBrandWidth from '@patternfly/react-tokens/dist/esm/c_brand_Width'; + export interface BrandProps extends React.DetailedHTMLProps, HTMLImageElement> { /** Transforms the Brand into a element from an element. Container for child elements. */ @@ -45,13 +48,13 @@ export const Brand: React.FunctionComponent = ({ let responsiveStyles; if (children !== undefined && widths !== undefined) { responsiveStyles = { - ...setBreakpointCssVars(widths, '--pf-v5-c-brand--Width') + ...setBreakpointCssVars(widths, cssBrandWidth.name) }; } if (children !== undefined && heights !== undefined) { responsiveStyles = { - ...setBreakpointCssVars(heights, '--pf-v5-c-brand--Height') + ...setBreakpointCssVars(heights, cssBrandHeight.name) }; } diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx index d4778c6f5c0..9b47d5fde57 100644 --- a/packages/react-core/src/components/Chip/Chip.tsx +++ b/packages/react-core/src/components/Chip/Chip.tsx @@ -6,6 +6,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import styles from '@patternfly/react-styles/css/components/Chip/chip'; import { GenerateId } from '../../helpers/GenerateId/GenerateId'; import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers'; +import cssChipTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_chip__text_MaxWidth'; export interface ChipProps extends React.HTMLProps, OUIAProps { /** Content rendered inside the chip text */ @@ -79,7 +80,7 @@ export class Chip extends React.Component { } setChipStyle = () => ({ - '--pf-v5-c-chip__text--MaxWidth': this.props.textMaxWidth + [cssChipTextMaxWidth.name]: this.props.textMaxWidth }); renderOverflowChip = () => { diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx index e3102e97fdb..cf930e85653 100644 --- a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx @@ -19,6 +19,10 @@ import { MenuToggleElement } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import globalColor100 from '@patternfly/react-tokens/dist/esm/global_Color_100'; +import globalBackgroundColor200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200'; +import globalBorderColor100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100'; +import globalBorderWidthSm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm'; export const DataListWidthModifiers: React.FunctionComponent = () => { const [show, setShow] = React.useState(true); @@ -45,9 +49,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { display: 'block', width: '100%', padding: '.25rem .5rem', - color: 'var(--pf-v5-global--Color--100)', - backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)', - border: 'var(--pf-v5-global--BorderWidth--sm) var(--pf-v5-global--BorderColor--100) solid' + color: globalColor100.var, + backgroundColor: globalBackgroundColor200.var, + border: `${globalBorderWidthSm.var} ${globalBorderColor100.var} solid` }; return ( diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx index a10f4f9640e..5f3ab7a490f 100644 --- a/packages/react-core/src/components/DatePicker/DatePicker.tsx +++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx @@ -11,6 +11,7 @@ import { useImperativeHandle } from 'react'; import { KeyTypes } from '../../helpers'; import { isValidDate } from '../../helpers/datetimeUtils'; import { HelperText, HelperTextItem } from '../HelperText'; +import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_width_chars'; /** The main date picker component. */ @@ -118,7 +119,7 @@ const DatePickerBase = ( const [selectOpen, setSelectOpen] = React.useState(false); const [pristine, setPristine] = React.useState(true); const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]); - const style = { '--pf-v5-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps }; + const style = { [cssFormControlWidthChars.name]: widthChars, ...styleProps }; const buttonRef = React.useRef(); const datePickerWrapperRef = React.useRef(); const triggerRef = React.useRef(); diff --git a/packages/react-core/src/components/DescriptionList/DescriptionList.tsx b/packages/react-core/src/components/DescriptionList/DescriptionList.tsx index 4957d6b8884..240fe6953ca 100644 --- a/packages/react-core/src/components/DescriptionList/DescriptionList.tsx +++ b/packages/react-core/src/components/DescriptionList/DescriptionList.tsx @@ -2,6 +2,9 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list'; import { formatBreakpointMods } from '../../helpers'; +import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min'; +import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width'; +import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width'; export interface BreakpointModifiers { default?: string; @@ -102,19 +105,19 @@ export const DescriptionList: React.FunctionComponent = ({ if (isAutoFit && autoFitMinModifier) { style = { ...style, - ...setBreakpointModifiers('--pf-v5-c-description-list--GridTemplateColumns--min', autoFitMinModifier) + ...setBreakpointModifiers(cssGridTemplateColumnsMin.name, autoFitMinModifier) }; } if (termWidth) { style = { ...style, - ...{ '--pf-v5-c-description-list__term--width': termWidth } + ...{ [cssTermWidth.name]: termWidth } }; } if (isHorizontal && horizontalTermWidthModifier) { style = { ...style, - ...setBreakpointModifiers('--pf-v5-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier) + ...setBreakpointModifiers(cssHorizontalTermWidth.name, horizontalTermWidthModifier) }; } diff --git a/packages/react-core/src/components/DragDrop/Draggable.tsx b/packages/react-core/src/components/DragDrop/Draggable.tsx index e76b802946e..b457e5dd0f2 100644 --- a/packages/react-core/src/components/DragDrop/Draggable.tsx +++ b/packages/react-core/src/components/DragDrop/Draggable.tsx @@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop'; import { DroppableContext } from './DroppableContext'; import { DragDropContext } from './DragDrop'; +import cssDraggingBackgroundColor from '@patternfly/react-tokens/dist/esm/c_draggable_m_dragging_BackgroundColor'; export interface DraggableProps extends React.HTMLProps { /** Content rendered inside DragDrop */ @@ -275,7 +276,7 @@ export const Draggable: React.FunctionComponent = ({ left: rect.x, width: rect.width, height: rect.height, - '--pf-v5-c-draggable--m-dragging--BackgroundColor': getInheritedBackgroundColor(dragging), + [cssDraggingBackgroundColor.name]: getInheritedBackgroundColor(dragging), position: 'fixed', zIndex: 5000 } as any; diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx index 13a28cadfe3..44b3405ce71 100644 --- a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx +++ b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx @@ -4,6 +4,9 @@ import { css } from '@patternfly/react-styles'; import { DrawerColorVariant, DrawerContext } from './Drawer'; import { formatBreakpointMods } from '../../helpers/util'; import { GenerateId } from '../../helpers/GenerateId/GenerateId'; +import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis'; +import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min'; +import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max'; export interface DrawerPanelContentProps extends React.HTMLProps { /** Additional classes added to the drawer. */ @@ -163,7 +166,7 @@ export const DrawerPanelContent: React.FunctionComponent diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx index c98bfe212e2..1c921872415 100644 --- a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx +++ b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx @@ -7,6 +7,7 @@ import { DualListSelectorListWrapper } from './DualListSelectorListWrapper'; import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext'; import { DualListSelectorList } from './DualListSelectorList'; import { SearchInput } from '../SearchInput'; +import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight'; /** Acts as the container for a list of options that are either available or chosen, * depending on the pane type (available or chosen). A search input and other actions, @@ -201,7 +202,7 @@ export const DualListSelectorPane: React.FunctionComponent {children} @@ -212,7 +213,7 @@ export const DualListSelectorPane: React.FunctionComponent {options.length > 0 ? ( diff --git a/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx b/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx index ef4b1e70b47..fb892e01e0b 100644 --- a/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx +++ b/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state'; import { Spinner } from '../Spinner'; +import cssIconColor from '@patternfly/react-tokens/dist/esm/c_empty_state__icon_Color'; export interface IconProps extends Omit, 'size'> { /** Changes the color of the icon. */ @@ -27,8 +28,7 @@ export const EmptyStateIcon: React.FunctionComponent = ({ return (
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx index 40eba04b292..6ba5a9f48c0 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core'; import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; +import globalSuccessColor100 from '@patternfly/react-tokens/dist/esm/global_success_color_100'; export const EmptyStateCustomIconColor: React.FunctionComponent = () => ( } + icon={} /> This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to diff --git a/packages/react-core/src/components/Form/Form.tsx b/packages/react-core/src/components/Form/Form.tsx index 0043c5c89b9..0d28c8ca495 100644 --- a/packages/react-core/src/components/Form/Form.tsx +++ b/packages/react-core/src/components/Form/Form.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Form/form'; import { css } from '@patternfly/react-styles'; +import cssMaxWidth from '@patternfly/react-tokens/dist/esm/c_form_m_limit_width_MaxWidth'; export interface FormProps extends Omit, 'ref'> { /** Anything that can be rendered as Form content. */ @@ -30,7 +31,7 @@ const FormBase: React.FunctionComponent = ({ noValidate {...(maxWidth && { style: { - '--pf-v5-c-form--m-limit-width--MaxWidth': maxWidth, + [cssMaxWidth.name]: maxWidth, ...props.style } as React.CSSProperties })} diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx index 7f15a1a56ac..1f8f76332c4 100644 --- a/packages/react-core/src/components/Label/Label.tsx +++ b/packages/react-core/src/components/Label/Label.tsx @@ -7,6 +7,7 @@ import { Tooltip, TooltipPosition } from '../Tooltip'; import { css } from '@patternfly/react-styles'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import { useIsomorphicLayoutEffect } from '../../helpers'; +import cssTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_label__text_MaxWidth'; export interface LabelProps extends React.HTMLProps { /** Content rendered inside the label. */ @@ -213,7 +214,7 @@ export const Label: React.FunctionComponent = ({ className={css(styles.labelText)} {...(textMaxWidth && { style: { - '--pf-v5-c-label__text--MaxWidth': textMaxWidth + [cssTextMaxWidth.name]: textMaxWidth } as React.CSSProperties })} > diff --git a/packages/react-core/src/components/Menu/MenuContent.tsx b/packages/react-core/src/components/Menu/MenuContent.tsx index be8f906d140..33261a582d4 100644 --- a/packages/react-core/src/components/Menu/MenuContent.tsx +++ b/packages/react-core/src/components/Menu/MenuContent.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Menu/menu'; import { css } from '@patternfly/react-styles'; import { MenuContext } from './MenuContext'; +import cssHeight from '@patternfly/react-tokens/dist/esm/c_menu__content_Height'; +import cssMaxHeight from '@patternfly/react-tokens/dist/esm/c_menu__content_MaxHeight'; export interface MenuContentProps extends React.HTMLProps { /** Items within group */ @@ -58,8 +60,8 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React ref={(el) => refCallback(el, menuId, onGetMenuHeight)} style={ { - ...(menuHeight && { '--pf-v5-c-menu__content--Height': menuHeight }), - ...(maxMenuHeight && { '--pf-v5-c-menu__content--MaxHeight': maxMenuHeight }) + ...(menuHeight && { [cssHeight.name]: menuHeight }), + ...(maxMenuHeight && { [cssMaxHeight.name]: maxMenuHeight }) } as React.CSSProperties } > diff --git a/packages/react-core/src/components/Menu/__mocks__/Menu.tsx b/packages/react-core/src/components/Menu/__mocks__/Menu.tsx index e0bede78091..962851bffc9 100644 --- a/packages/react-core/src/components/Menu/__mocks__/Menu.tsx +++ b/packages/react-core/src/components/Menu/__mocks__/Menu.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { MenuProps } from '../Menu'; +import cssMenuMinWidth from '@patternfly/react-tokens/dist/esm/c_menu_MinWidth'; export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...props }: MenuProps) => ( <> @@ -7,6 +8,6 @@ export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...pro
{'Mock item'}

{`isPlain: ${isPlain}`}

{`isScrollable: ${isScrollable}`}

-

{`minWidth: ${style?.['--pf-v5-c-menu--MinWidth']}`}

+

{`minWidth: ${style?.[cssMenuMinWidth.name]}`}

); diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index 84ccd70a307..2e5494819f2 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -7,6 +7,7 @@ import { InputGroup, InputGroupItem } from '../InputGroup'; import { Button, ButtonProps } from '../Button'; import { KeyTypes, ValidatedOptions } from '../../helpers'; import { TextInput } from '../TextInput'; +import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_number_input_c_form_control_width_chars'; export interface NumberInputProps extends React.HTMLProps { /** Value of the number input */ @@ -108,7 +109,7 @@ export const NumberInput: React.FunctionComponent = ({ className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)} {...(widthChars && { style: { - '--pf-v5-c-number-input--c-form-control--width-chars': widthChars, + [cssFormControlWidthChars.name]: widthChars, ...props.style } as React.CSSProperties })} diff --git a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx index 89f8d0de450..d6b8a787475 100644 --- a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx +++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx @@ -17,6 +17,7 @@ import { CardBody } from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; +import cssLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth'; export const PageCenteredSection: React.FunctionComponent = () => { const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); @@ -67,7 +68,7 @@ export const PageCenteredSection: React.FunctionComponent = () => { When a width limited page section is wider than the value of - --pf-v5-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main + {cssLimitMaxWidth.name}, the section will be centered in the main section.

diff --git a/packages/react-core/src/components/Panel/PanelMain.tsx b/packages/react-core/src/components/Panel/PanelMain.tsx index d03bb1b1f17..2c35dd34078 100644 --- a/packages/react-core/src/components/Panel/PanelMain.tsx +++ b/packages/react-core/src/components/Panel/PanelMain.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Panel/panel'; import { css } from '@patternfly/react-styles'; +import cssMaxHeight from '@patternfly/react-tokens/dist/esm/c_panel__main_MaxHeight'; export interface PanelMainProps extends React.HTMLProps { /** Content rendered inside the panel main div */ @@ -19,7 +20,7 @@ export const PanelMain: React.FunctionComponent = ({ }: PanelMainProps) => (
{children} diff --git a/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx index a17dd917441..4115892f2dc 100644 --- a/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx +++ b/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { PanelMain } from '../PanelMain'; +import cssPanelMainMaxHeight from '@patternfly/react-tokens/dist/esm/c_panel__main_MaxHeight'; test('Renders without children', () => { render( @@ -34,7 +35,7 @@ test('Renders with custom class name when className prop is passed', () => { test('Renders with custom max height name when maxHeight prop is passed', () => { render(Test); const styles = getComputedStyle(screen.getByText('Test')); - expect(styles.getPropertyValue('--pf-v5-c-panel__main--MaxHeight')).toBe('100px'); + expect(styles.getPropertyValue(cssPanelMainMaxHeight.name)).toBe('100px'); }); test('Renders with the inherited element props spread to the component', () => { diff --git a/packages/react-core/src/components/Skeleton/Skeleton.tsx b/packages/react-core/src/components/Skeleton/Skeleton.tsx index 44f77cfa75f..40a854bc5a6 100644 --- a/packages/react-core/src/components/Skeleton/Skeleton.tsx +++ b/packages/react-core/src/components/Skeleton/Skeleton.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Skeleton/skeleton'; import { css } from '@patternfly/react-styles'; +import cssHeight from '@patternfly/react-tokens/dist/esm/c_skeleton_Height'; +import cssWidth from '@patternfly/react-tokens/dist/esm/c_skeleton_Width'; export interface SkeletonProps extends React.HTMLProps { /** Additional classes added to the Skeleton */ @@ -42,8 +44,8 @@ export const Skeleton: React.FunctionComponent = ({ )} {...((width || height) && { style: { - '--pf-v5-c-skeleton--Width': width ? width : undefined, - '--pf-v5-c-skeleton--Height': height ? height : undefined, + [cssWidth.name]: width ? width : undefined, + [cssHeight.name]: height ? height : undefined, ...props.style } as React.CSSProperties })} diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx index 260cb9b9b82..c2e39eaa06a 100644 --- a/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx +++ b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx @@ -1,27 +1,34 @@ import React from 'react'; import { Skeleton } from '@patternfly/react-core'; +import globalFontSize4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl'; +import globalFontSize3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl'; +import globalFontSize2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl'; +import globalFontSizeXl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl'; +import globalFontSizeLg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg'; +import globalFontSizeMd from '@patternfly/react-tokens/dist/esm/global_FontSize_md'; +import globalFontSizeSm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm'; export const SkeletonText: React.FunctionComponent = () => ( - --pf-v5-global--FontSize--4xl + {globalFontSize4xl.name}
- --pf-v5-global--FontSize--3xl + {globalFontSize3xl.name}
- --pf-v5-global--FontSize--2xl + {globalFontSize2xl.name}
- --pf-v5-global--FontSize--xl + {globalFontSizeXl.name}
- --pf-v5-global--FontSize--lg + {globalFontSizeLg.name}
- --pf-v5-global--FontSize--md + {globalFontSizeMd.name}
- --pf-v5-global--FontSize--sm + {globalFontSizeSm.name} ); diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx index f5e48ae0244..0bf7d1cff15 100644 --- a/packages/react-core/src/components/Slider/Slider.tsx +++ b/packages/react-core/src/components/Slider/Slider.tsx @@ -6,6 +6,8 @@ import { SliderStep } from './SliderStep'; import { InputGroup, InputGroupText, InputGroupItem } from '../InputGroup'; import { TextInput } from '../TextInput'; import { Tooltip } from '../Tooltip'; +import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value'; +import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars'; /** Properties for creating custom steps in a slider. These properties should be passed in as * an object within an array to the slider component's customSteps property. @@ -127,9 +129,9 @@ export const Slider: React.FunctionComponent = ({ // calculate style value percentage const stylePercent = ((localValue - min) * 100) / (max - min); - const style = { '--pf-v5-c-slider--value': `${stylePercent}%` } as React.CSSProperties; + const style = { [cssSliderValue.name]: `${stylePercent}%` } as React.CSSProperties; const widthChars = React.useMemo(() => localInputValue.toString().length, [localInputValue]); - const inputStyle = { '--pf-v5-c-slider__value--c-form-control--width-chars': widthChars } as React.CSSProperties; + const inputStyle = { [cssFormControlWidthChars.name]: widthChars } as React.CSSProperties; const onChangeHandler = (_event: React.FormEvent, value: string) => { setLocalInputValue(Number(value)); @@ -201,7 +203,7 @@ export const Slider: React.FunctionComponent = ({ const onSliderRailClick = (e: any) => { handleThumbMove(e); if (snapValue && !areCustomStepsContinuous) { - thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${snapValue}%`); + thumbRef.current.style.setProperty(cssSliderValue.name, `${snapValue}%`); setValue(snapValue); if (onChange) { onChange(e, snapValue); @@ -233,7 +235,7 @@ export const Slider: React.FunctionComponent = ({ const newPercentage = getPercentage(newPosition, end); - thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${newPercentage}%`); + thumbRef.current.style.setProperty(cssSliderValue.name, `${newPercentage}%`); // convert percentage to value const newValue = Math.round(((newPercentage * (max - min)) / 100 + min) * 100) / 100; setValue(newValue); @@ -241,7 +243,7 @@ export const Slider: React.FunctionComponent = ({ if (!customSteps) { // snap to new value if not custom steps snapValue = Math.round((Math.round((newValue - min) / step) * step + min) * 100) / 100; - thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${snapValue}%`); + thumbRef.current.style.setProperty(cssSliderValue.name, `${snapValue}%`); setValue(snapValue); } @@ -307,7 +309,7 @@ export const Slider: React.FunctionComponent = ({ } if (newValue !== localValue) { - thumbRef.current.style.setProperty('--pf-v5-c-slider--value', `${newValue}%`); + thumbRef.current.style.setProperty(cssSliderValue.name, `${newValue}%`); setValue(newValue); if (onChange) { onChange(e, newValue); diff --git a/packages/react-core/src/components/Spinner/Spinner.tsx b/packages/react-core/src/components/Spinner/Spinner.tsx index cd4953c974d..4221a5fa959 100644 --- a/packages/react-core/src/components/Spinner/Spinner.tsx +++ b/packages/react-core/src/components/Spinner/Spinner.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Spinner/spinner'; import { css } from '@patternfly/react-styles'; +import cssDiameter from '@patternfly/react-tokens/dist/esm/c_spinner_diameter'; export enum spinnerSize { sm = 'sm', @@ -42,7 +43,7 @@ export const Spinner: React.FunctionComponent = ({ role="progressbar" aria-valuetext={ariaValueText} viewBox="0 0 100 100" - {...(diameter && { style: { ['--pf-v5-c-spinner--diameter']: diameter } as React.CSSProperties })} + {...(diameter && { style: { [cssDiameter.name]: diameter } as React.CSSProperties })} {...(ariaLabel && { 'aria-label': ariaLabel })} {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })} {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })} diff --git a/packages/react-core/src/components/TimePicker/TimePicker.tsx b/packages/react-core/src/components/TimePicker/TimePicker.tsx index a8f57858036..91a90d3931e 100644 --- a/packages/react-core/src/components/TimePicker/TimePicker.tsx +++ b/packages/react-core/src/components/TimePicker/TimePicker.tsx @@ -21,6 +21,8 @@ import { } from './TimePickerUtils'; import { HelperText, HelperTextItem } from '../HelperText'; import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon'; +import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width'; + export interface TimePickerProps extends Omit, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> { /** Additional classes added to the time picker. */ @@ -472,7 +474,7 @@ export class TimePicker extends React.Component = ({ if (widths) { Object.entries(widths || {}).map( ([breakpoint, value]) => - (widthStyles[`--pf-v5-c-toolbar__item--Width${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value) + (widthStyles[`${cssWidth.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value) ); } diff --git a/packages/react-core/src/components/Wizard/WizardNavItem.tsx b/packages/react-core/src/components/Wizard/WizardNavItem.tsx index de51a9b4631..065ab6235e2 100644 --- a/packages/react-core/src/components/Wizard/WizardNavItem.tsx +++ b/packages/react-core/src/components/Wizard/WizardNavItem.tsx @@ -7,6 +7,8 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam import { OUIAProps, useOUIAProps } from '../../helpers'; import { WizardNavItemStatus } from './types'; +import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm'; +import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100'; export interface WizardNavItemProps extends OUIAProps { /** Can nest a WizardNav component for substeps */ @@ -125,8 +127,8 @@ export const WizardNavItem = ({ {content} {/* TODO, patternfly/patternfly#5142 */} {status === WizardNavItemStatus.Error && ( - - + + )} diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx index f2e5bf2a2f2..de707970510 100644 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx +++ b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx @@ -6,11 +6,12 @@ import { ApplicationLauncherContent } from '@patternfly/react-core/deprecated'; import pfLogoSm from './pf-logo-small.svg'; +import cssMenuItemColor from '@patternfly/react-tokens/dist/esm/c_app_launcher__menu_item_Color'; const icon: JSX.Element = ; const linkStyle: React.CSSProperties = { - color: 'var(--pf-v5-c-app-launcher__menu-item--Color)', + color: cssMenuItemColor.var, textDecoration: 'none' }; diff --git a/packages/react-core/src/layouts/Gallery/Gallery.tsx b/packages/react-core/src/layouts/Gallery/Gallery.tsx index f4e6250cd8b..9739f68bcc8 100644 --- a/packages/react-core/src/layouts/Gallery/Gallery.tsx +++ b/packages/react-core/src/layouts/Gallery/Gallery.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/layouts/Gallery/gallery'; +import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min'; +import cssGridTemplateColumnsMax from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_max'; export interface GalleryProps extends React.HTMLProps { /** content rendered inside the Gallery layout */ @@ -46,7 +48,7 @@ export const Gallery: React.FunctionComponent = ({ Object.entries(minWidths || {}).map( ([breakpoint, value]) => (minWidthStyles[ - `--pf-v5-l-gallery--GridTemplateColumns--min${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}` + `${cssGridTemplateColumnsMin.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}` ] = value) ); } @@ -55,7 +57,7 @@ export const Gallery: React.FunctionComponent = ({ Object.entries(maxWidths || {}).map( ([breakpoint, value]) => (maxWidthStyles[ - `--pf-v5-l-gallery--GridTemplateColumns--max${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}` + `${cssGridTemplateColumnsMax.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}` ] = value) ); } 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 f7c0efea35e..72c885ba6db 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 @@ -28,6 +28,7 @@ import { import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import globalPrimaryColor100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100'; export const TableComposableDemo = () => { const ComposableTableBasic = () => { @@ -141,7 +142,7 @@ export const TableComposableDemo = () => { {rows.map((row, rowIndex) => { const isOddRow = (rowIndex + 1) % 2; const customStyle = { - borderLeft: '3px solid var(--pf-v5-global--primary-color--100)' + borderLeft: `3px solid ${globalPrimaryColor100.var}` }; return ( , 'onSelect' | 'width'> { /** * The column header the cell corresponds to. @@ -288,9 +292,9 @@ const TdBase: React.FunctionComponent = ({ {...props} {...(isStickyColumn && { style: { - '--pf-v5-c-table__sticky-cell--MinWidth': stickyMinWidth ? stickyMinWidth : undefined, - '--pf-v5-c-table__sticky-cell--Left': stickyLeftOffset ? stickyLeftOffset : 0, - '--pf-v5-c-table__sticky-cell--Right': stickyRightOffset ? stickyRightOffset : 0, + [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined, + [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0, + [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0, ...props.style } as React.CSSProperties })} diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx index 5461c8de975..31a19bb2db2 100644 --- a/packages/react-table/src/components/Table/Th.tsx +++ b/packages/react-table/src/components/Table/Th.tsx @@ -9,6 +9,9 @@ import { IVisibility } from './utils/decorators/classNames'; import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip'; import { BaseCellProps } from './Table'; import { IFormatterValueType, IColumn } from './TableTypes'; +import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth'; +import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left'; +import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right'; export interface ThProps extends BaseCellProps, @@ -193,9 +196,9 @@ const ThBase: React.FunctionComponent = ({ {...props} {...(isStickyColumn && { style: { - '--pf-v5-c-table__sticky-cell--MinWidth': stickyMinWidth ? stickyMinWidth : undefined, - '--pf-v5-c-table__sticky-cell--Left': stickyLeftOffset ? stickyLeftOffset : 0, - '--pf-v5-c-table__sticky-cell--Right': stickyRightOffset ? stickyRightOffset : 0, + [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined, + [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0, + [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0, ...props.style } as React.CSSProperties })} diff --git a/packages/react-table/src/components/Table/examples/TableMisc.tsx b/packages/react-table/src/components/Table/examples/TableMisc.tsx index fbe764241b1..c49af0f0361 100644 --- a/packages/react-table/src/components/Table/examples/TableMisc.tsx +++ b/packages/react-table/src/components/Table/examples/TableMisc.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; +import globalBackgroundColor150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150'; interface Repository { name: string; @@ -65,7 +66,7 @@ export const TableMisc: React.FunctionComponent = () => { {repositories.map((repo, rowIndex) => { const isOddRow = (rowIndex + 1) % 2; const customStyle = { - backgroundColor: 'var(--pf-v5-global--BackgroundColor--150)' + backgroundColor: globalBackgroundColor150.var }; // Some arbitrary logic to demonstrate that cell styles can be based on anything const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1; diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx index c2a1bc863dc..e1ddc6a461c 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated'; import { css } from '@patternfly/react-styles'; +import globalPrimaryColor100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100'; interface Repository { name: string; @@ -30,7 +31,7 @@ export const LegacyTableMisc: React.FunctionComponent = () => { const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row, ...props }) => { const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true; const customStyle = { - borderLeft: '3px solid var(--pf-v5-global--primary-color--100)' + borderLeft: `3px solid ${globalPrimaryColor100.var}` }; return ( Date: Mon, 12 Jun 2023 11:55:15 +0200 Subject: [PATCH 02/17] refactor(misc): replace hardcoded CSS classes with react-styles --- .../src/components/CodeEditor/CodeEditor.tsx | 7 +- .../AboutModal/AboutModalBoxContent.tsx | 2 +- ...AboutModalComplexUserPositionedContent.tsx | 7 +- .../Accordion/__tests__/Accordion.test.tsx | 5 +- .../__tests__/AccordionContent.test.tsx | 5 +- .../AccordionExpandedContentBody.test.tsx | 5 +- .../__tests__/AccordionToggle.test.tsx | 13 +- .../components/ActionList/ActionListItem.tsx | 3 +- .../ActionList/__tests__/ActionList.test.tsx | 13 +- .../__tests__/ActionListGroup.test.tsx | 5 +- .../__tests__/ActionListItem.test.tsx | 5 +- .../components/Alert/__tests__/Alert.test.tsx | 25 +-- .../Alert/__tests__/AlertIcon.test.tsx | 5 +- .../AlertToggleExpandButton.test.tsx | 5 +- .../Alert/examples/AlertDynamicLiveRegion.tsx | 3 +- .../Alert/examples/AlertGroupAsync.tsx | 3 +- .../examples/AlertGroupMultipleDynamic.tsx | 3 +- .../examples/AlertGroupSingularDynamic.tsx | 3 +- .../AlertGroupSingularDynamicOverflow.tsx | 3 +- .../Alert/examples/AlertGroupToast.tsx | 3 +- .../AlertGroupToastOverflowCapture.tsx | 3 +- .../Avatar/__tests__/Avatar.test.tsx | 3 +- .../BackToTop/__tests__/BackToTop.test.tsx | 3 +- .../Backdrop/__tests__/Backdrop.test.tsx | 9 +- .../react-core/src/components/Badge/Badge.tsx | 3 +- .../components/Badge/__tests__/Badge.test.tsx | 14 +- .../src/components/Banner/Banner.tsx | 3 +- .../Banner/__tests__/Banner.test.tsx | 12 +- .../CalendarMonth/CalendarMonth.tsx | 3 +- .../react-core/src/components/Card/Card.tsx | 3 +- .../src/components/Card/CardHeader.tsx | 3 +- .../Checkbox/__tests__/Checkbox.test.tsx | 3 +- .../components/CodeBlock/CodeBlockAction.tsx | 3 +- .../src/components/DataList/DataListItem.tsx | 3 +- .../DataList/__tests__/DataList.test.tsx | 11 +- .../DataList/examples/DataListDraggable.tsx | 5 +- .../DrawerStackedContentBodyElements.tsx | 3 +- .../Drawer/examples/DrawerStatic.tsx | 3 +- .../DualListSelectorControl.tsx | 3 +- .../DualListSelector/DualListSelectorPane.tsx | 2 +- .../EmptyState/EmptyStateHeader.tsx | 4 +- .../EmptyState/__tests__/EmptyState.test.tsx | 13 +- .../examples/FileUploadCustomPreview.tsx | 3 +- .../examples/FileUploadCustomUpload.tsx | 3 +- .../src/components/Form/FormAlert.tsx | 3 +- .../components/Form/examples/FormBasic.tsx | 3 +- .../Form/examples/FormGroupLabelInfo.tsx | 3 +- .../Form/examples/FormLimitWidth.tsx | 3 +- .../components/HelperText/HelperTextItem.tsx | 3 +- .../components/Hint/__tests__/Hint.test.tsx | 9 +- .../Hint/__tests__/HintBody.test.tsx | 5 +- .../Hint/__tests__/HintFooter.test.tsx | 5 +- .../Hint/__tests__/HintTitle.test.tsx | 5 +- .../components/Icon/__tests__/Icon.test.tsx | 23 +-- .../src/components/JumpLinks/JumpLinks.tsx | 2 +- .../react-core/src/components/Menu/Menu.tsx | 12 +- .../src/components/Menu/MenuSearchInput.tsx | 3 +- .../MenuToggle/examples/MenuToggle.css | 5 +- .../src/components/Modal/ModalBoxHeader.tsx | 2 +- .../examples/ModalCustomHeaderFooter.tsx | 5 +- .../Modal/examples/ModalWithForm.tsx | 7 +- .../MultipleFileUploadStatus.tsx | 2 +- .../MultipleFileUploadStatusItem.tsx | 3 +- .../NotificationDrawerGroup.tsx | 2 +- .../NotificationDrawerList.tsx | 3 +- .../NotificationDrawerListItem.tsx | 2 +- .../Page/__tests__/PageSidebarBody.test.tsx | 29 +-- .../components/Panel/__tests__/Panel.test.tsx | 21 +-- .../Panel/__tests__/PanelFooter.test.tsx | 9 +- .../Panel/__tests__/PanelHeader.test.tsx | 9 +- .../Panel/__tests__/PanelMain.test.tsx | 9 +- .../Panel/__tests__/PanelMainBody.test.tsx | 9 +- .../src/components/Popover/PopoverHeader.tsx | 3 +- .../__tests__/ProgressHelperText.test.tsx | 5 +- .../__tests__/ProgressStep.test.tsx | 19 +- .../__tests__/ProgressStepper.test.tsx | 9 +- .../components/SearchInput/SearchInput.tsx | 3 +- .../__tests__/SearchInput.test.tsx | 8 +- .../Sidebar/__tests__/Sidebar.test.tsx | 13 +- .../Sidebar/__tests__/SidebarContent.test.tsx | 9 +- .../Sidebar/__tests__/SidebarPanel.test.tsx | 9 +- .../src/components/Skeleton/Skeleton.tsx | 3 +- .../Tabs/__tests__/OverflowTab.test.tsx | 15 +- .../Text/__tests__/TextContent.test.tsx | 5 +- .../TextArea/__tests__/TextArea.test.tsx | 3 +- .../__tests__/TextInputGroup.test.tsx | 5 +- .../__tests__/TextInputGroupMain.test.tsx | 17 +- .../TextInputGroupUtilities.test.tsx | 6 +- .../src/components/Timestamp/Timestamp.tsx | 2 +- .../Timestamp/__tests__/Timestamp.test.tsx | 9 +- .../components/Title/__tests__/Title.test.tsx | 9 +- .../src/components/TreeView/TreeViewList.tsx | 3 +- .../src/components/TreeView/TreeViewRoot.tsx | 25 ++- .../Truncate/__tests__/Truncate.test.tsx | 19 +- .../components/Truncate/examples/Truncate.md | 12 +- .../examples/WizardStepDrawerContent.tsx | 3 +- .../examples/WizardValidateOnButtonPress.tsx | 3 +- .../examples/WizardWithSubmitProgress.tsx | 3 +- packages/react-core/src/demos/Banner.md | 28 +-- packages/react-core/src/demos/CardDemos.md | 166 ++++++++++-------- .../examples/ComposableDateSelect.tsx | 9 +- .../CustomMenus/examples/DateSelectDemo.tsx | 9 +- packages/react-core/src/demos/JumpLinks.md | 3 +- .../react-core/src/demos/PasswordStrength.md | 3 +- packages/react-core/src/demos/ProgressDemo.md | 6 +- .../src/demos/ProgressStepperDemo.md | 3 +- packages/react-core/src/demos/Tabs.md | 6 +- .../examples/JumpLinks/JumpLinksWithDrawer.js | 3 +- .../src/demos/examples/Tabs/NestedTabs.tsx | 3 +- .../src/demos/examples/Tabs/TabsAndTable.tsx | 3 +- .../ApplicationLauncherText.tsx | 3 +- .../components/Select/SelectMenu.tsx | 2 +- .../Wizard/examples/WizardFinished.tsx | 3 +- .../examples/WizardValidateOnButtonPress.tsx | 3 +- .../src/layouts/Flex/__tests__/Flex.test.tsx | 3 +- .../demos/AlertGroupDemo/AlertGroupDemo.tsx | 13 +- .../demos/ButtonDemo/ButtonDemo.tsx | 23 +-- .../ChipGroupWithOverflowChipEventHandler.tsx | 7 +- .../DataListDemo/DataListDraggableDemo.tsx | 3 +- .../components/demos/FormDemo/FormDemo.tsx | 6 +- .../components/demos/MenuDemo/MenuDemo.tsx | 3 +- .../components/demos/ModalDemo/ModalDemo.tsx | 5 +- .../demos/TableDemo/TableSelectableDemo.tsx | 3 +- .../src/components/Table/Table.tsx | 9 +- .../react-table/src/components/Table/Td.tsx | 5 +- .../examples/TableCompoundExpandable.tsx | 3 +- .../Table/examples/TableNestedHeaders.tsx | 7 +- .../examples/TableNestedStickyHeader.tsx | 7 +- .../Table/utils/decorators/treeRow.tsx | 6 +- .../Table/utils/transformers.test.tsx | 19 +- .../LegacyTableCompoundExpandable.tsx | 7 +- .../Table/examples/LegacyTableSelectable.tsx | 3 +- .../demos/table-demos/CompoundExpansion.jsx | 3 +- 133 files changed, 605 insertions(+), 440 deletions(-) diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 7abc5263d7d..08b8924665e 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor'; +import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload'; import { Button, ButtonVariant, @@ -605,7 +606,7 @@ export class CodeEditor extends React.Component{headerMainContent}
} {!!shortcutsPopoverProps.bodyContent && ( -
+
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx index 39bfe859e39..f0d6239bf05 100644 --- a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx +++ b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import { Button, ButtonVariant } from '../Button'; import { Tooltip } from '../Tooltip'; +import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector'; /** Renders an individual control button for moving selected options between each * dual list selector pane. @@ -40,7 +41,7 @@ export const DualListSelectorControlBase: React.FunctionComponent +
diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx index de8075cadb1..be5df5fce6d 100644 --- a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx +++ b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx @@ -9,6 +9,7 @@ import { FormHelperText } from '@patternfly/react-core'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import styles from '@patternfly/react-styles/css/components/Form/form'; export const FormGroupLabelInfo: React.FunctionComponent = () => { const [name, setName] = React.useState(''); @@ -55,7 +56,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => { aria-label="More info for name field" onClick={(e) => e.preventDefault()} aria-describedby="form-group-label-info" - className="pf-v5-c-form__group-label-help" + className={styles.formGroupLabelHelp} > diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx index 98512d63484..8be09a9d2d7 100644 --- a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx +++ b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx @@ -13,6 +13,7 @@ import { FormHelperText } from '@patternfly/react-core'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import styles from '@patternfly/react-styles/css/components/Form/form'; export const FormLimitWidth: React.FunctionComponent = () => { const [name, setName] = React.useState(''); @@ -68,7 +69,7 @@ export const FormLimitWidth: React.FunctionComponent = () => { aria-label="More info for name field" onClick={(e) => e.preventDefault()} aria-describedby="simple-form-name-02" - className="pf-v5-c-form__group-label-help" + className={styles.formGroupLabelHelp} > diff --git a/packages/react-core/src/components/HelperText/HelperTextItem.tsx b/packages/react-core/src/components/HelperText/HelperTextItem.tsx index 8306a7bd3d5..a70af0eaaae 100644 --- a/packages/react-core/src/components/HelperText/HelperTextItem.tsx +++ b/packages/react-core/src/components/HelperText/HelperTextItem.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/HelperText/helper-text'; +import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; import { css } from '@patternfly/react-styles'; import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; @@ -78,7 +79,7 @@ export const HelperTextItem: React.FunctionComponent = ({ {children} - {isDynamic && : {screenReaderText};} + {isDynamic && : {screenReaderText};} ); diff --git a/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx b/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx index 10000957fc3..aa84b2d5c35 100644 --- a/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx +++ b/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { Hint } from '../Hint'; +import styles from '@patternfly/react-styles/css/components/Hint/hint'; test('renders without children', () => { render(); @@ -14,12 +15,12 @@ test('renders children', () => { expect(screen.getByText('Test')).toBeVisible(); }); -test('renders with class pf-v5-c-hint', () => { +test(`renders with class ${styles.hint}`, () => { render(Test); const hint = screen.getByText('Test'); - expect(hint).toHaveClass('pf-v5-c-hint'); + expect(hint).toHaveClass(styles.hint); }); test('renders with custom class names provided via prop', () => { @@ -46,12 +47,12 @@ test('renders actions options', () => { expect(actions).toBeVisible(); }); -test('renders with class pf-v5-c-hint__actions if there is an action prop', () => { +test(`renders with class ${styles.hintActions} if there is an action prop`, () => { render(Test); const hint = screen.getByText('actions'); - expect(hint).toHaveClass('pf-v5-c-hint__actions'); + expect(hint).toHaveClass(styles.hintActions); }); test('renders with inherited element props spread to the component', () => { diff --git a/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx index d9142507670..8c2c72b7b78 100644 --- a/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx +++ b/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; +import styles from '@patternfly/react-styles/css/components/Hint/hint'; import { HintBody } from '../HintBody'; @@ -16,12 +17,12 @@ test('renders children', () => { expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible(); }); -test('renders with class pf-v5-c-hint__body', () => { +test(`renders with class ${styles.hintBody}`, () => { render(Hint Body Test); const body = screen.getByText('Hint Body Test'); - expect(body).toHaveClass('pf-v5-c-hint__body'); + expect(body).toHaveClass(styles.hintBody); }); test('renders with custom class names provided via prop', () => { diff --git a/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx index f71df174798..1e8e6daac33 100644 --- a/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx +++ b/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; +import styles from '@patternfly/react-styles/css/components/Hint/hint'; import { HintFooter } from '../HintFooter'; @@ -16,12 +17,12 @@ test('renders children', () => { expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible(); }); -test('renders with class pf-v5-c-hint__footer', () => { +test(`renders with class ${styles.hintFooter}`, () => { render(Hint Body Test); const body = screen.getByText('Hint Body Test'); - expect(body).toHaveClass('pf-v5-c-hint__footer'); + expect(body).toHaveClass(styles.hintFooter); }); test('renders with custom class names provided via prop', () => { diff --git a/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx index 8fd536bcbf6..62164522f20 100644 --- a/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx +++ b/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; +import styles from '@patternfly/react-styles/css/components/Hint/hint'; import { HintTitle } from '../HintTitle'; @@ -16,12 +17,12 @@ test('renders children', () => { expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible(); }); -test('renders with class pf-v5-c-hint__title', () => { +test(`renders with class ${styles.hintTitle}`, () => { render(Hint Body Test); const body = screen.getByText('Hint Body Test'); - expect(body).toHaveClass('pf-v5-c-hint__title'); + expect(body).toHaveClass(styles.hintTitle); }); test('renders with custom class names provided via prop', () => { diff --git a/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx b/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx index 595df963a1e..2fd2cf47834 100644 --- a/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx +++ b/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { Icon } from '../Icon'; import { CheckIcon } from '@patternfly/react-icons'; +import styles from '@patternfly/react-styles/css/components/Icon/icon'; test('renders basic icon successfully', () => { const { asFragment } = render( @@ -19,9 +20,9 @@ test('checks basic icon structure', () => { ); const iconContainer = screen.getByTitle('icon'); - expect(iconContainer).toHaveClass('pf-v5-c-icon'); - const iconContent = iconContainer.querySelector('.pf-v5-c-icon__content'); - expect(iconContent).toHaveClass('pf-v5-c-icon__content'); + expect(iconContainer).toHaveClass(styles.icon); + const iconContent = iconContainer.querySelector(`.${styles.iconContent}`); + expect(iconContent).toHaveClass(styles.iconContent); }); test('renders without children', () => { @@ -47,7 +48,7 @@ Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => { ); - const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector('.pf-v5-c-icon__content'); + const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector(`.${styles.iconContent}`); expect(iconContainer).toHaveClass(`pf-m-${size}`); }); @@ -59,7 +60,7 @@ test('check icon without iconSize', () => { ); - const iconContainer = screen.getByTitle('no-icon-size').querySelector('.pf-v5-c-icon__content'); + const iconContainer = screen.getByTitle('no-icon-size').querySelector(`.${styles.iconContent}`); expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added }); @@ -70,7 +71,7 @@ Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => { ); - const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector('.pf-v5-c-icon__progress'); + const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`); expect(iconContainer).toHaveClass(`pf-m-${size}`); }); @@ -82,7 +83,7 @@ test('check icon without progress icon size', () => { ); - const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector('.pf-v5-c-icon__progress'); + const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector(`.${styles.iconProgress}`); expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added }); @@ -116,7 +117,7 @@ Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((statu ); - const iconContent = screen.getByTitle(`${status}-icon`).querySelector('.pf-v5-c-icon__content'); + const iconContent = screen.getByTitle(`${status}-icon`).querySelector(`.${styles.iconContent}`); expect(iconContent).toHaveClass(`pf-m-${status}`); }); @@ -128,7 +129,7 @@ test('check icon without status', () => { ); - const iconContent = screen.getByTitle('no-status').querySelector('.pf-v5-c-icon__content'); + const iconContent = screen.getByTitle('no-status').querySelector(`.${styles.iconContent}`); expect(Array.from(iconContent?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added }); @@ -162,8 +163,8 @@ test('sets isInProgress successfully', () => { const iconContainer = screen.getByTitle('progress-icon'); expect(iconContainer).toHaveClass('pf-m-in-progress'); - const iconContent = iconContainer.querySelector('.pf-v5-c-icon__progress'); - expect(iconContent).toHaveClass('pf-v5-c-icon__progress'); + const iconContent = iconContainer.querySelector(`.${styles.iconProgress}`); + expect(iconContent).toHaveClass(styles.iconProgress); }); test('check icon without isInProgress', () => { diff --git a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx index b8560f4f28f..9f4590954ac 100644 --- a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx +++ b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx @@ -222,7 +222,7 @@ export const JumpLinks: React.FunctionComponent = ({ {...props} >
-
+
{expandable && (
@@ -128,7 +129,7 @@ export const ModalWithForm: React.FunctionComponent = () => { aria-label="More info for e-mail field" onClick={(e) => e.preventDefault()} aria-describedby="modal-with-form-form-email" - className="pf-v5-c-form__group-label-help" + className={styles.formGroupLabelHelp} > @@ -176,7 +177,7 @@ export const ModalWithForm: React.FunctionComponent = () => { aria-label="More info for address field" onClick={(e) => e.preventDefault()} aria-describedby="modal-with-form-form-address" - className="pf-v5-c-form__group-label-help" + className={styles.formGroupLabelHelp} > diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx index eb832f83140..239e4d5222a 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx @@ -66,7 +66,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent -
    +
      {children}
    diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx index 7cfab80a1d3..c9288e863f4 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload'; +import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; import { css } from '@patternfly/react-styles'; import { Progress } from '../Progress'; import { Button } from '../Button'; @@ -148,7 +149,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent
    {fileIcon || }
    -
    +
    {progressAriaLiveMessage && typeof progressAriaLiveMessage === 'function' && progressAriaLiveMessage(+loadPercentage.toFixed(2))} diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx index a08f53209f3..db4cd38906a 100644 --- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx +++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx @@ -111,7 +111,7 @@ export const NotificationDrawerGroup: React.FunctionComponent{count}
    - + diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerList.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerList.tsx index e377d19270c..2f186ce71ff 100644 --- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerList.tsx +++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerList.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer'; export interface NotificationDrawerListProps extends React.HTMLProps { /** Content rendered inside the notification drawer list body */ @@ -22,7 +23,7 @@ export const NotificationDrawerList: React.FunctionComponent (