Skip to content

Commit 5cb97e7

Browse files
kmcfaulkmcfaul
committed
use react-styles instead of hardcoded css classes
1 parent 05de07b commit 5cb97e7

6 files changed

Lines changed: 27 additions & 19 deletions

File tree

‎packages/react-core/src/components/Compass/Compass.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
2+
import styles from '@patternfly/react-styles/css/components/Compass/compass';
3+
import { css } from '@patternfly/react-styles';
4+
25
import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_light';
36
import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';
4-
import { css } from '@patternfly/react-styles';
57

68
export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
79
/** Additional classes added to the compass. */
@@ -62,28 +64,28 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
6264
}
6365

6466
const compassContent = (
65-
<div className={css('pf-v6-c-compass', className)} style={{ ...props.style, ...backgroundImageStyles }} {...props}>
67+
<div className={css(styles.compass, className)} style={{ ...props.style, ...backgroundImageStyles }} {...props}>
6668
<div
67-
className={css('pf-v6-c-compass__header', isHeaderExpanded && 'pf-m-expanded')}
69+
className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
6870
{...(!isHeaderExpanded && { inert: true })}
6971
>
7072
{header}
7173
</div>
7274
<div
73-
className={css('pf-v6-c-compass__sidebar pf-m-start', isSidebarStartExpanded && 'pf-m-expanded')}
75+
className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
7476
{...(!isSidebarStartExpanded && { inert: true })}
7577
>
7678
{sidebarStart}
7779
</div>
78-
<div className={css('pf-v6-c-compass__main')}>{main}</div>
80+
<div className={css(styles.compassMain)}>{main}</div>
7981
<div
80-
className={css('pf-v6-c-compass__sidebar pf-m-end', isSidebarEndExpanded && 'pf-m-expanded')}
82+
className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
8183
{...(!isSidebarEndExpanded && { inert: true })}
8284
>
8385
{sidebarEnd}
8486
</div>
8587
<div
86-
className={css('pf-v6-c-compass__footer', isFooterExpanded && 'pf-m-expanded')}
88+
className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
8789
{...(!isFooterExpanded && { inert: true })}
8890
>
8991
{footer}

‎packages/react-core/src/components/Compass/CompassContent.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
2+
import styles from '@patternfly/react-styles/css/components/Compass/compass';
23
import { css } from '@patternfly/react-styles';
34

45
interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
@@ -22,7 +23,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
2223
const hasDrawer = drawerContent !== undefined;
2324

2425
const compassContent = (
25-
<div className={css('pf-v6-c-compass__content', className)} {...props}>
26+
<div className={css(styles.compassContent, className)} {...props}>
2627
{children}
2728
</div>
2829
);

‎packages/react-core/src/components/Compass/CompassHeader.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import styles from '@patternfly/react-styles/css/components/Compass/compass';
12
import { css } from '@patternfly/react-styles';
23

34
interface CompassHeaderProps {
@@ -12,8 +13,8 @@ interface CompassHeaderProps {
1213
export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
1314
<>
1415
<div className={css('pf-v6-c-compass__logo')}>{logo}</div>
15-
<div className={css('pf-v6-c-compass__nav')}>{nav}</div>
16-
<div className={css('pf-v6-c-compass__profile')}>{profile}</div>
16+
<div className={css(styles.compassNav)}>{nav}</div>
17+
<div className={css(styles.compassProfile)}>{profile}</div>
1718
</>
1819
);
1920

‎packages/react-core/src/components/Compass/CompassHero.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import styles from '@patternfly/react-styles/css/components/Compass/compass';
2+
import { css } from '@patternfly/react-styles';
3+
14
import compassHeroBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_light';
25
import compassHeroBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_dark';
36
import compassHeroGradientStop1Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_light';
@@ -6,7 +9,6 @@ import compassHeroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_c
69
import compassHeroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_dark';
710
import compassHeroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_dark';
811
import compassHeroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_dark';
9-
import { css } from '@patternfly/react-styles';
1012

1113
interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
1214
/** Additional classes added to the hero. */
@@ -73,11 +75,11 @@ export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
7375

7476
return (
7577
<div
76-
className={css('pf-v6-c-compass__panel pf-v6-c-compass__hero', className)}
78+
className={css(styles.compassPanel, styles.compassHero, className)}
7779
style={{ ...props.style, ...backgroundImageStyles }}
7880
{...props}
7981
>
80-
<div className={css('pf-v6-c-compass__hero-body')}>{children}</div>
82+
<div className={css(styles.compassHeroBody)}>{children}</div>
8183
</div>
8284
);
8385
};

‎packages/react-core/src/components/Compass/CompassMessageBar.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import styles from '@patternfly/react-styles/css/components/Compass/compass';
12
import { css } from '@patternfly/react-styles';
23

34
interface CompassMessageBarProps {
@@ -6,7 +7,7 @@ interface CompassMessageBarProps {
67
}
78

89
export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps> = ({ children }) => (
9-
<div className={css('pf-v6-c-compass__message-bar')}>{children}</div>
10+
<div className={css(styles.compassMessageBar)}>{children}</div>
1011
);
1112

1213
CompassMessageBar.displayName = 'CompassMessageBar';

‎packages/react-core/src/components/Compass/CompassPanel.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import styles from '@patternfly/react-styles/css/components/Compass/compass';
12
import { css } from '@patternfly/react-styles';
23

34
interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
@@ -35,14 +36,14 @@ export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
3536
}) => (
3637
<div
3738
className={css(
38-
'pf-v6-c-compass__panel',
39+
styles.compassPanel,
3940
isPill && 'pf-m-pill',
40-
hasNoBorder && 'pf-m-no-border',
41-
hasNoPadding && 'pf-m-no-padding',
41+
hasNoBorder && styles.modifiers.noBorder,
42+
hasNoPadding && styles.modifiers.noPadding,
4243
hasGradientBorder && 'pf-m-gradient-border',
4344
isThinking && 'pf-m-thinking',
44-
isFullHeight && 'pf-m-full-height',
45-
isScrollable && 'pf-m-scrollable',
45+
isFullHeight && styles.modifiers.fullHeight,
46+
isScrollable && styles.modifiers.scrollable,
4647
className
4748
)}
4849
{...props}

0 commit comments

Comments
 (0)