diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 9751407ac26..2dcbacc83b2 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, @@ -609,7 +610,7 @@ 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..266098bdb85 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/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 8c3373d3a39..b2f2e67de4f 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 953b163d128..345dcb2ef87 100644 --- a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx +++ b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx @@ -227,7 +227,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={formStyles.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={formStyles.formGroupLabelHelp} > diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx index 10ec7937fff..6d48dfd11f2 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx @@ -75,7 +75,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent -
    +
      {children}
    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 (