Skip to content

Commit bae5877

Browse files
kmcfaulkmcfaul
committed
move props to compass from container, update tests to remove bg
1 parent 52b0cbb commit bae5877

3 files changed

Lines changed: 79 additions & 92 deletions

File tree

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
6060
const hasDrawer = drawerContent !== undefined;
6161

6262
const compassContent = (
63-
<div className={css(styles.compassContainer, dock !== undefined && styles.modifiers.docked, className)} {...props}>
63+
<div className={css(styles.compassContainer)}>
6464
{dock && masthead}
6565
{dock && (
6666
<div
@@ -109,19 +109,19 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
109109
</div>
110110
);
111111

112-
if (hasDrawer) {
113-
return (
114-
<div className={css(styles.compass)}>
112+
return (
113+
<div className={css(styles.compass, dock !== undefined && styles.modifiers.docked, className)} {...props}>
114+
{hasDrawer ? (
115115
<Drawer isPill {...drawerProps}>
116116
<DrawerContent panelContent={drawerContent}>
117117
<DrawerContentBody>{compassContent}</DrawerContentBody>
118118
</DrawerContent>
119119
</Drawer>
120-
</div>
121-
);
122-
}
123-
124-
return <div className={css(styles.compass)}>{compassContent}</div>;
120+
) : (
121+
compassContent
122+
)}
123+
</div>
124+
);
125125
};
126126

127127
Compass.displayName = 'Compass';

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

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -99,27 +99,6 @@ test('Renders with drawer when drawerContent is provided', () => {
9999
expect(screen.getByText('Drawer content')).toBeVisible();
100100
});
101101

102-
test('Renders with light background image when backgroundSrcLight is provided', () => {
103-
const backgroundSrc = 'light-bg.jpg';
104-
render(<Compass backgroundSrcLight={backgroundSrc} data-testid="compass" />);
105-
expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${backgroundSrc})`);
106-
});
107-
108-
test('Renders with dark background image when backgroundSrcDark is provided', () => {
109-
const backgroundSrc = 'dark-bg.jpg';
110-
render(<Compass backgroundSrcDark={backgroundSrc} data-testid="compass" />);
111-
expect(screen.getByTestId('compass')).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${backgroundSrc})`);
112-
});
113-
114-
test('Renders with both light and dark background images when both are provided', () => {
115-
const lightSrc = 'light-bg.jpg';
116-
const darkSrc = 'dark-bg.jpg';
117-
render(<Compass backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc} data-testid="compass" />);
118-
const compassElement = screen.getByTestId('compass');
119-
expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--light: url(${lightSrc})`);
120-
expect(compassElement).toHaveStyle(`--pf-v6-c-compass--BackgroundImage--dark: url(${darkSrc})`);
121-
});
122-
123102
test('Renders with additional props spread to the component', () => {
124103
render(<Compass aria-label="Test label" data-testid="compass" />);
125104
expect(screen.getByTestId('compass')).toHaveAccessibleName('Test label');

‎packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap‎

Lines changed: 70 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,42 @@ exports[`Matches the snapshot with basic layout 1`] = `
66
class="pf-v6-c-compass"
77
>
88
<div
9-
class="pf-v6-c-compass__header pf-m-expanded"
9+
class=""
1010
>
11-
<div>
12-
Header
11+
<div
12+
class="pf-v6-c-compass__header pf-m-expanded"
13+
>
14+
<div>
15+
Header
16+
</div>
1317
</div>
14-
</div>
15-
<div
16-
class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
17-
>
18-
<div>
19-
Sidebar start
18+
<div
19+
class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
20+
>
21+
<div>
22+
Sidebar start
23+
</div>
2024
</div>
21-
</div>
22-
<div
23-
class="pf-v6-c-compass__main"
24-
>
25-
<div>
26-
Main content
25+
<div
26+
class="pf-v6-c-compass__main"
27+
>
28+
<div>
29+
Main content
30+
</div>
2731
</div>
28-
</div>
29-
<div
30-
class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
31-
>
32-
<div>
33-
Sidebar end
32+
<div
33+
class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
34+
>
35+
<div>
36+
Sidebar end
37+
</div>
3438
</div>
35-
</div>
36-
<div
37-
class="pf-v6-c-compass__footer pf-m-expanded"
38-
>
39-
<div>
40-
Footer
39+
<div
40+
class="pf-v6-c-compass__footer pf-m-expanded"
41+
>
42+
<div>
43+
Footer
44+
</div>
4145
</div>
4246
</div>
4347
</div>
@@ -47,60 +51,64 @@ exports[`Matches the snapshot with basic layout 1`] = `
4751
exports[`Matches the snapshot with drawer 1`] = `
4852
<DocumentFragment>
4953
<div
50-
class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
54+
class="pf-v6-c-compass"
5155
>
5256
<div
53-
class="pf-v6-c-drawer__main"
57+
class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
5458
>
5559
<div
56-
class="pf-v6-c-drawer__content"
60+
class="pf-v6-c-drawer__main"
5761
>
5862
<div
59-
class="pf-v6-c-drawer__body"
63+
class="pf-v6-c-drawer__content"
6064
>
6165
<div
62-
class="pf-v6-c-compass"
66+
class="pf-v6-c-drawer__body"
6367
>
6468
<div
65-
class="pf-v6-c-compass__header pf-m-expanded"
69+
class=""
6670
>
67-
<div>
68-
Header
71+
<div
72+
class="pf-v6-c-compass__header pf-m-expanded"
73+
>
74+
<div>
75+
Header
76+
</div>
6977
</div>
70-
</div>
71-
<div
72-
class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
73-
>
74-
<div>
75-
Sidebar start
78+
<div
79+
class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
80+
>
81+
<div>
82+
Sidebar start
83+
</div>
7684
</div>
77-
</div>
78-
<div
79-
class="pf-v6-c-compass__main"
80-
>
81-
<div>
82-
Main content
85+
<div
86+
class="pf-v6-c-compass__main"
87+
>
88+
<div>
89+
Main content
90+
</div>
8391
</div>
84-
</div>
85-
<div
86-
class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
87-
>
88-
<div>
89-
Sidebar end
92+
<div
93+
class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
94+
>
95+
<div>
96+
Sidebar end
97+
</div>
9098
</div>
91-
</div>
92-
<div
93-
class="pf-v6-c-compass__footer pf-m-expanded"
94-
>
95-
<div>
96-
Footer
99+
<div
100+
class="pf-v6-c-compass__footer pf-m-expanded"
101+
>
102+
<div>
103+
Footer
104+
</div>
97105
</div>
98106
</div>
99107
</div>
100108
</div>
101-
</div>
102-
<div>
103-
Drawer content
109+
<div>
110+
Drawer content
111+
</div>
104112
</div>
105113
</div>
106114
</div>

0 commit comments

Comments
 (0)