refactor(misc): rename styles and other imports

patternfly · Oct 11, 2023 · 85850e8 · 85850e8
1 parent 30b579d
commit 85850e8
Show file tree

Hide file tree

Showing 19 changed files with 87 additions and 87 deletions.
diff --git a/packages/react-core/src/components/Drawer/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md
@@ -18,7 +18,6 @@ propComponents:
 section: components
 ---
 
-import styles from '@patternfly/react-styles/css/components/Title/title';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ## Examples

diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
@@ -41,7 +41,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   const privateRef = React.useRef(null);
   const ref = innerRef || privateRef;
   return (
-    <div className={css(`${styles.dualListSelectorControls}-item`, className)} {...props}>
+    <div className={css(styles.dualListSelectorControlsItem, className)} {...props}>
       <Button
         isDisabled={isDisabled}
         aria-disabled={isDisabled}

diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -11,7 +11,7 @@ import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-ico
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
-import styles from '@patternfly/react-styles/css/components/Form/form';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples
 

diff --git a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal, ModalVariant, Button, Form, FormGroup, Popover, TextInput } 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';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 export const ModalWithForm: React.FunctionComponent = () => {
   const [isModalOpen, setModalOpen] = React.useState(false);
@@ -80,7 +80,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   aria-label="More info for name field"
                   onClick={(e) => e.preventDefault()}
                   aria-describedby="modal-with-form-form-name"
-                  className={styles.formGroupLabelHelp}
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>
@@ -129,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={styles.formGroupLabelHelp}
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>
@@ -177,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={styles.formGroupLabelHelp}
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>

diff --git a/packages/react-core/src/components/Tabs/OverflowTab.tsx b/packages/react-core/src/components/Tabs/OverflowTab.tsx
@@ -85,7 +85,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
 
   const overflowTab = (
     <li
-      className={css(styles.tabsItem, 'pf-m-overflow', selectedTab && styles.modifiers.current, className)}
+      className={css(styles.tabsItem, styles.modifiers.overflow, selectedTab && styles.modifiers.current, className)}
       role="presentation"
       ref={overflowLIRef}
       {...props}

diff --git a/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx b/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx
@@ -78,7 +78,7 @@ test('Renders with inherited element props spread to the component', () => {
 test(`Renders with class names pf-m-overflow and ${styles.tabsItem} on the presentation element`, () => {
   render(<OverflowTab />);
 
-  expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
+  expect(screen.getByRole('presentation')).toHaveClass(styles.modifiers.overflow);
   expect(screen.getByRole('presentation')).toHaveClass(styles.tabsItem);
 });
 
@@ -377,7 +377,7 @@ test('Passes Popper an appendTo value of the presentation element', async () =>
   await user.click(screen.getByRole('tab'));
 
   // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
-  expect(screen.getByText(`Append to class name: ${styles.tabsItem} pf-m-overflow`)).toBeVisible();
+  expect(screen.getByText(`Append to class name: ${styles.tabsItem} ${styles.modifiers.overflow}`)).toBeVisible();
 });
 
 test('Does not render an overflowing tab as a selected menu item by default', async () => {

diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
@@ -181,7 +181,7 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeInTheDocument();
   });
 
-  it(`renders the hint input with classes ${styles.textInputGroupTextInput} and pf-m-hint`, () => {
+  it(`renders the hint input with classes ${styles.textInputGroupTextInput} and ${styles.modifiers.hint}`, () => {
     // we set the type of the main input to search here so that we can accurately target the hint input
     render(
       <TextInputGroupMain hint="Test" type="search">
@@ -191,7 +191,7 @@ describe('TextInputGroupMain', () => {
 
     const hintInput = screen.getByRole('textbox', { hidden: true });
 
-    expect(hintInput).toHaveClass('pf-m-hint');
+    expect(hintInput).toHaveClass(styles.modifiers.hint);
     expect(hintInput).toHaveClass(styles.textInputGroupTextInput);
   });
 

diff --git a/packages/react-core/src/components/Title/__tests__/Title.test.tsx b/packages/react-core/src/components/Title/__tests__/Title.test.tsx
@@ -22,9 +22,9 @@ test(`Renders with the ${styles.title}`, () => {
   expect(screen.getByRole('heading')).toHaveClass(styles.title);
 });
 
-test(`Renders with only the class ${styles.title} and the heading level modifier class pf-m-2xl by default`, () => {
+test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers['2xl']} by default`, () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass(`${styles.title} pf-m-2xl`, { exact: true });
+  expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers['2xl']}`, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

diff --git a/packages/react-core/src/components/Truncate/examples/Truncate.md b/packages/react-core/src/components/Truncate/examples/Truncate.md
@@ -5,29 +5,27 @@ propComponents: [Truncate]
 ---
 
 import './TruncateExamples.css';
-import truncateStyles from '@patternfly/react-styles/css/docs/components/Truncate/examples/Truncate';
 
 ## Examples
 
 ### Default
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-import truncateStyles from '@patternfly/react-styles/css/docs/components/Truncate/examples/Truncate';
-<div className={truncateStyles.truncateExample}>
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
   />
 </div>
 ```
 
 ### Middle
-
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-import truncateStyles from '@patternfly/react-styles/css/docs/components/Truncate/examples/Truncate';
-<div className={truncateStyles.truncateExample}>
+
+<div className="truncate-example-resize">
   <Truncate
     content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     trailingNumChars={10}
@@ -40,8 +38,8 @@ import truncateStyles from '@patternfly/react-styles/css/docs/components/Truncat
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-import truncateStyles from '@patternfly/react-styles/css/docs/components/Truncate/examples/Truncate';
-<div className={truncateStyles.truncateExample}>
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     position={'start'}
@@ -53,8 +51,8 @@ import truncateStyles from '@patternfly/react-styles/css/docs/components/Truncat
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-import truncateStyles from '@patternfly/react-styles/css/docs/components/Truncate/examples/Truncate';
-<div className={truncateStyles.truncateExample}>
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     tooltipPosition={'bottom'}

diff --git a/packages/react-core/src/components/Truncate/examples/TruncateExamples.css b/packages/react-core/src/components/Truncate/examples/TruncateExamples.css
@@ -1,4 +1,4 @@
-.pf-v5-c-truncate--example {
+.truncate-example-resize {
   width: 320px;
   resize: horizontal;
   overflow: auto;

diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md
@@ -4,7 +4,7 @@ section: components
 ---
 
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/utilities/Display/display';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 ## Demos
 
@@ -27,7 +27,7 @@ import {
 
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/utilities/Display/display';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
@@ -39,12 +39,12 @@ class BannerDemo extends React.Component {
               justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
               flexWrap={{ default: 'nowrap' }}
             >
-              <div className={css(styles.displayNone, styles.displayBlockOnLg)}>Localhost</div>
-              <div className={css(styles.displayNone, styles.displayBlockOnLg)}>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>
                 This message is sticky to the top of the page.
               </div>
-              <div className={css(styles.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-              <div className={css(styles.displayNone, styles.displayBlockOnLg)}>Ned Username</div>
+              <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
             </Flex>
           </Banner>
           <PageSection variant={PageSectionVariants.light}>
@@ -93,7 +93,7 @@ import {
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/utilities/Display/display';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
@@ -111,12 +111,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className={css(styles.displayNone, styles.displayBlockOnLg)}>Localhost</div>
-                <div className={css(styles.displayNone, styles.displayBlockOnLg)}>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>
                   This message is sticky to the top of the page.
                 </div>
-                <div className={css(styles.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(styles.displayNone, styles.displayBlockOnLg)}>Ned Username</div>
+                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>
@@ -150,12 +150,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className={css(styles.displayNone, styles.displayBlockOnLg)}>Localhost</div>
-                <div className={css(styles.displayNone, styles.displayBlockOnLg)}>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>
                   This message is sticky to the bottom of the page.
                 </div>
-                <div className={css(styles.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(styles.displayNone, styles.displayBlockOnLg)}>Ned Username</div>
+                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>