Skip to content

Commit 36025f5

Browse files
AnemyAnemy
authored
feat(compass-components): add feature flag for using theme in components instead of darkreader theming COMPASS-5520 (#2856)
1 parent 3d46b9b commit 36025f5

File tree

22 files changed

+324
-119
lines changed

22 files changed

+324
-119
lines changed

‎packages/compass-components/src/components/accordion.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useState } from 'react';
22
import { spacing } from '@leafygreen-ui/tokens';
33
import { css } from '@leafygreen-ui/emotion';
4-
import Icon from '@leafygreen-ui/icon';
54
import { uiColors } from '@leafygreen-ui/palette';
65
import { useId } from '@react-aria/utils';
76

7+
import { Icon } from './leafygreen';
88
import { defaultFontSize } from '../compass-font-sizes';
99

1010
const buttonStyles = css({

‎packages/compass-components/src/components/checkbox.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,15 @@
11
import React from 'react';
2-
import LeafyGreenCheckbox from '@leafygreen-ui/checkbox';
3-
import { css } from '@leafygreen-ui/emotion';
42

3+
import { Checkbox as LeafyGreenCheckbox } from './leafygreen';
54
import { Theme, useTheme } from '../hooks/use-theme';
65

7-
const checkboxOverrideStyles = css({
8-
fontWeight: 'bold',
9-
});
10-
116
function Checkbox(
127
props: React.ComponentProps<typeof LeafyGreenCheckbox>
138
): ReturnType<typeof LeafyGreenCheckbox> {
149
const theme = useTheme();
1510

1611
return (
17-
<LeafyGreenCheckbox
18-
className={checkboxOverrideStyles}
19-
darkMode={theme?.theme === Theme.Dark}
20-
{...props}
21-
/>
12+
<LeafyGreenCheckbox darkMode={theme?.theme === Theme.Dark} {...props} />
2213
);
2314
}
2415

‎packages/compass-components/src/components/confirmation-modal.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useEffect } from 'react';
2-
import LeafyGreenConfirmationModal from '@leafygreen-ui/confirmation-modal';
32
import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
43
const { track } = createLoggerAndTelemetry('COMPASS-UI');
54

5+
import { ConfirmationModal as LeafyGreenConfirmationModal } from './leafygreen';
6+
67
function ConfirmationModal({
78
trackingId,
89
...props

‎packages/compass-components/src/components/error-boundary.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import type { ErrorInfo } from 'react';
22
import React from 'react';
3-
import Banner from '@leafygreen-ui/banner';
43
import { css } from '@leafygreen-ui/emotion';
54
import { spacing } from '@leafygreen-ui/tokens';
65

6+
import { Banner } from './leafygreen';
7+
78
const errorContainerStyles = css({
89
padding: spacing[3],
910
width: '100%',

‎packages/compass-components/src/components/file-input.tsx

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,16 @@ import path from 'path';
33
import { css, cx } from '@leafygreen-ui/emotion';
44
import { uiColors } from '@leafygreen-ui/palette';
55
import { spacing } from '@leafygreen-ui/tokens';
6+
import { withTheme } from '../hooks/use-theme';
67

7-
import { Button, Icon, IconButton, Label, Link, Description } from '..';
8+
import {
9+
Button,
10+
Icon,
11+
IconButton,
12+
Label,
13+
Link,
14+
Description,
15+
} from './leafygreen';
816

917
const { base: redBaseColor } = uiColors.red;
1018

@@ -79,10 +87,14 @@ const labelIconStyles = css({
7987
},
8088
});
8189

82-
const disabledDescriptionStyles = css({
90+
const disabledDescriptionLightStyles = css({
8391
color: uiColors.gray.dark1,
8492
});
8593

94+
const disabledDescriptionDarkStyles = css({
95+
color: uiColors.gray.light1,
96+
});
97+
8698
export enum Variant {
8799
Horizontal = 'HORIZONTAL',
88100
Vertical = 'VERTICAL',
@@ -98,6 +110,7 @@ function FileInput({
98110
id,
99111
label,
100112
dataTestId,
113+
darkMode,
101114
onChange,
102115
disabled,
103116
multi = false,
@@ -115,6 +128,7 @@ function FileInput({
115128
label: string;
116129
dataTestId?: string;
117130
onChange: (files: string[]) => void;
131+
darkMode?: boolean;
118132
disabled?: boolean;
119133
multi?: boolean;
120134
optional?: boolean;
@@ -171,6 +185,8 @@ function FileInput({
171185
);
172186
};
173187

188+
const applyTheme = global?.process?.env?.COMPASS_LG_DARKMODE === 'true';
189+
174190
return (
175191
<div>
176192
<div
@@ -187,7 +203,9 @@ function FileInput({
187203
<Label htmlFor={`${id}_file_input`} disabled={disabled}>
188204
<span
189205
className={cx({
190-
[disabledDescriptionStyles]: disabled,
206+
[applyTheme && darkMode
207+
? disabledDescriptionDarkStyles
208+
: disabledDescriptionLightStyles]: disabled,
191209
})}
192210
>
193211
{label}
@@ -261,4 +279,4 @@ function FileInput({
261279
);
262280
}
263281

264-
export default FileInput;
282+
export default withTheme(FileInput);

‎packages/compass-components/src/components/inline-definition.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/prop-types */
22
import React from 'react';
3-
import { Body } from '@leafygreen-ui/typography';
43
import { css } from '@leafygreen-ui/emotion';
4+
import { Body } from './leafygreen';
55
import { Tooltip } from './tooltip';
66
import { mergeProps } from '../utils/merge-props';
77

‎packages/compass-components/src/components/inline-info-link.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import { css } from '@leafygreen-ui/emotion';
33
import { spacing } from '@leafygreen-ui/tokens';
4-
import IconButton from '@leafygreen-ui/icon-button';
5-
import Icon from '@leafygreen-ui/icon';
4+
5+
import { Icon, IconButton } from './leafygreen';
66

77
const infoButtonStyles = css({
88
marginTop: -spacing[2],

‎packages/compass-components/src/components/leafygreen.tsx

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import type React from 'react';
2+
3+
import { withTheme } from '../hooks/use-theme';
4+
5+
// This file exports `@leafygreen-ui` components and wraps some of
6+
// them with a listener to Compass' theme in the react context.
7+
8+
// 1. Import the components we use from leafygreen.
9+
import { default as Badge } from '@leafygreen-ui/badge';
10+
import { default as Banner } from '@leafygreen-ui/banner';
11+
import { default as LeafyGreenButton } from '@leafygreen-ui/button';
12+
import { default as LeafyGreenCheckbox } from '@leafygreen-ui/checkbox';
13+
import { default as LeafyGreenCard } from '@leafygreen-ui/card';
14+
import { default as LeafyGreenConfirmationModal } from '@leafygreen-ui/confirmation-modal';
15+
import { default as Icon } from '@leafygreen-ui/icon';
16+
import { default as LeafyGreenIconButton } from '@leafygreen-ui/icon-button';
17+
import {
18+
AtlasLogoMark,
19+
MongoDBLogoMark,
20+
MongoDBLogo,
21+
} from '@leafygreen-ui/logo';
22+
import { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu';
23+
import {
24+
default as LeafyGreenModal,
25+
Footer as LeafyGreenFooter,
26+
} from '@leafygreen-ui/modal';
27+
import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
28+
import {
29+
Radio,
30+
RadioGroup as LeafyGreenRadioGroup,
31+
} from '@leafygreen-ui/radio-group';
32+
import {
33+
SegmentedControl as LeafyGreenSegmentedControl,
34+
SegmentedControlOption,
35+
} from '@leafygreen-ui/segmented-control';
36+
import {
37+
Select as LeafyGreenSelect,
38+
Option,
39+
OptionGroup,
40+
} from '@leafygreen-ui/select';
41+
import {
42+
Table as LeafyGreenTable,
43+
TableHeader,
44+
Row,
45+
Cell,
46+
} from '@leafygreen-ui/table';
47+
import { Tabs as LeafyGreenTabs, Tab } from '@leafygreen-ui/tabs';
48+
import { default as LeafyGreenTextArea } from '@leafygreen-ui/text-area';
49+
import { default as LeafyGreenTextInput } from '@leafygreen-ui/text-input';
50+
import { default as Toast } from '@leafygreen-ui/toast';
51+
import { default as LeafyGreenToggle } from '@leafygreen-ui/toggle';
52+
import { default as LeafyGreenTooltip } from '@leafygreen-ui/tooltip';
53+
import {
54+
H1,
55+
H2,
56+
H3,
57+
Subtitle,
58+
Body,
59+
InlineCode,
60+
InlineKeyCode,
61+
Disclaimer,
62+
Overline,
63+
Label as LeafyGreenLabel,
64+
Link,
65+
Description as LeafyGreenDescription,
66+
} from '@leafygreen-ui/typography';
67+
68+
// 2. Wrap the components that accept darkMode with Compass' theme.
69+
const Button = withTheme(
70+
LeafyGreenButton as React.ComponentType<
71+
React.ComponentProps<typeof LeafyGreenButton>
72+
>
73+
) as typeof LeafyGreenButton;
74+
const Card: typeof LeafyGreenCard = withTheme(
75+
LeafyGreenCard as React.ComponentType<
76+
React.ComponentProps<typeof LeafyGreenCard>
77+
>
78+
) as typeof LeafyGreenCard;
79+
const Checkbox = withTheme(
80+
LeafyGreenCheckbox as React.ComponentType<
81+
React.ComponentProps<typeof LeafyGreenCheckbox>
82+
>
83+
) as typeof LeafyGreenCheckbox;
84+
const ConfirmationModal: typeof LeafyGreenConfirmationModal = withTheme(
85+
LeafyGreenConfirmationModal as React.ComponentType<
86+
React.ComponentProps<typeof LeafyGreenConfirmationModal>
87+
>
88+
) as typeof LeafyGreenConfirmationModal;
89+
const IconButton: typeof LeafyGreenIconButton = withTheme(
90+
LeafyGreenIconButton as React.ComponentType<
91+
React.ComponentProps<typeof LeafyGreenIconButton>
92+
>
93+
) as typeof LeafyGreenIconButton;
94+
const Footer: typeof LeafyGreenFooter = withTheme(
95+
LeafyGreenFooter
96+
) as typeof LeafyGreenFooter;
97+
const Modal = withTheme(
98+
LeafyGreenModal as React.ComponentType<
99+
React.ComponentProps<typeof LeafyGreenModal>
100+
>
101+
) as typeof LeafyGreenModal;
102+
const RadioGroup: typeof LeafyGreenRadioGroup = withTheme(
103+
LeafyGreenRadioGroup as React.ComponentType<
104+
React.ComponentProps<typeof LeafyGreenRadioGroup>
105+
>
106+
) as typeof LeafyGreenRadioGroup;
107+
const SegmentedControl: typeof LeafyGreenSegmentedControl = withTheme(
108+
LeafyGreenSegmentedControl
109+
) as typeof LeafyGreenSegmentedControl;
110+
const Select: typeof LeafyGreenSelect = withTheme(
111+
LeafyGreenSelect as React.ComponentType<
112+
React.ComponentProps<typeof LeafyGreenSelect>
113+
>
114+
) as typeof LeafyGreenSelect;
115+
const Table = withTheme(LeafyGreenTable) as typeof LeafyGreenTable;
116+
const Tabs = withTheme(
117+
LeafyGreenTabs as React.ComponentType<
118+
React.ComponentProps<typeof LeafyGreenTabs>
119+
>
120+
) as typeof LeafyGreenTabs;
121+
const TextArea: typeof LeafyGreenTextArea = withTheme(LeafyGreenTextArea);
122+
const TextInput: typeof LeafyGreenTextInput = withTheme(LeafyGreenTextInput);
123+
const Toggle = withTheme(
124+
LeafyGreenToggle as React.ComponentType<
125+
React.ComponentProps<typeof LeafyGreenToggle>
126+
>
127+
) as typeof LeafyGreenToggle;
128+
const Tooltip = withTheme(
129+
LeafyGreenTooltip as React.ComponentType<
130+
React.ComponentProps<typeof LeafyGreenTooltip>
131+
>
132+
) as typeof LeafyGreenTooltip;
133+
const Label = withTheme(LeafyGreenLabel) as typeof LeafyGreenLabel;
134+
const Description = withTheme(
135+
LeafyGreenDescription
136+
) as typeof LeafyGreenDescription;
137+
138+
// 3. Export the leafygreen components.
139+
export {
140+
AtlasLogoMark,
141+
Badge,
142+
Banner,
143+
Button,
144+
Card,
145+
Checkbox,
146+
ConfirmationModal,
147+
Icon,
148+
IconButton,
149+
Footer,
150+
Menu,
151+
MenuItem,
152+
MenuSeparator,
153+
Modal,
154+
MongoDBLogoMark,
155+
MongoDBLogo,
156+
RadioBox,
157+
RadioBoxGroup,
158+
Radio,
159+
RadioGroup,
160+
SegmentedControl,
161+
SegmentedControlOption,
162+
Select,
163+
Option,
164+
OptionGroup,
165+
Table,
166+
TableHeader,
167+
Row,
168+
Cell,
169+
Tab,
170+
Tabs,
171+
TextArea,
172+
TextInput,
173+
Toast,
174+
Toggle,
175+
Tooltip,
176+
H1,
177+
H2,
178+
H3,
179+
Subtitle,
180+
Body,
181+
InlineCode,
182+
InlineKeyCode,
183+
Disclaimer,
184+
Overline,
185+
Label,
186+
Link,
187+
Description,
188+
};

‎packages/compass-components/src/components/modal.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useEffect } from 'react';
2-
import LeafyGreenModal from '@leafygreen-ui/modal';
32
import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
43
const { track } = createLoggerAndTelemetry('COMPASS-UI');
54

5+
import { Modal as LeafyGreenModal } from './leafygreen';
6+
67
function Modal({
78
trackingId,
89
...props

‎packages/compass-components/src/components/radio-box-group.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import { css } from '@leafygreen-ui/emotion';
33
import { spacing } from '@leafygreen-ui/tokens';
4-
import { RadioBoxGroup as LeafyGreenRadioBoxGroup } from '@leafygreen-ui/radio-box-group';
4+
5+
import { RadioBoxGroup as LeafyGreenRadioBoxGroup } from './leafygreen';
56

67
const radioBoxGroupStyles = css({
78
marginTop: spacing[1],

‎packages/compass-components/src/components/toggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import LeafyGreenToggle from '@leafygreen-ui/toggle';
32

3+
import { Toggle as LeafyGreenToggle } from './leafygreen';
44
import { Theme, useTheme } from '../hooks/use-theme';
55

66
function Toggle(

‎packages/compass-components/src/components/tooltip.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* eslint-disable react/prop-types */
22
import { useTooltipTriggerState } from '@react-stately/tooltip';
33
import { useTooltipTrigger } from '@react-aria/tooltip';
4-
import LeafyGreenTooltip from '@leafygreen-ui/tooltip';
54
import React, { useCallback, useRef } from 'react';
5+
import { Tooltip as LeafyGreenTooltip } from './leafygreen';
66
import { mergeProps } from '../utils/merge-props';
77

88
/**

0 commit comments

Comments
 (0)