feat: wrap spectrum View, Text and Heading to accept custom colors (#1903)

dsmmcken · web-flow · commit a03fa0796e8a · 2024-03-28T11:22:57.000-05:00
- Exposes our extra semantic colors to these components
- Created colorUtils in theme, containing theme variables
- Move spectrumUtils to spectrum/utils (was originally going to put it
here)
- Added eslint config to allow using UNSAFE_styles/UNSAFE_classname

Tested with:

```html
&lt;Text color="red"&gt;css red&lt;/Text&gt;
&lt;Text color="red-1000"&gt;theme red-1000&lt;/Text&gt;
&lt;Text color="accent"&gt;accent&lt;/Text&gt;
&lt;Text color="positive"&gt;positive&lt;/Text&gt;
&lt;Text color="negative"&gt;negative&lt;/Text&gt;
&lt;Text color="info"&gt;info&lt;/Text&gt;
&lt;Text color="notice"&gt;notice&lt;/Text&gt;
&lt;Text color="bg"&gt;bg&lt;/Text&gt;
&lt;Text color="color-mix(in srgb, red, blue)"&gt;purple&lt;/Text&gt;
```
diff --git a/packages/code-studio/src/styleguide/Pickers.tsx b/packages/code-studio/src/styleguide/Pickers.tsx
@@ -1,7 +1,13 @@
 import React, { useCallback, useState } from 'react';
-import { Picker, PickerItemKey, Section } from '@deephaven/components';
+import {
+  Flex,
+  Picker,
+  PickerItemKey,
+  Section,
+  Text,
+} from '@deephaven/components';
 import { vsPerson } from '@deephaven/icons';
-import { Flex, Icon, Item, Text } from '@adobe/react-spectrum';
+import { Icon, Item } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { sampleSectionIdAndClasses } from './utils';
 
diff --git a/packages/code-studio/src/styleguide/RandomAreaPlotAnimation.tsx b/packages/code-studio/src/styleguide/RandomAreaPlotAnimation.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { View } from '@adobe/react-spectrum';
-import { RandomAreaPlotAnimation as Animation } from '@deephaven/components';
+import {
+  View,
+  RandomAreaPlotAnimation as Animation,
+} from '@deephaven/components';
 import { sampleSectionIdAndClasses } from './utils';
 
 export function RandomAreaPlotAnimation(): JSX.Element {
diff --git a/packages/code-studio/src/styleguide/SpectrumComparison.tsx b/packages/code-studio/src/styleguide/SpectrumComparison.tsx
@@ -14,9 +14,7 @@ import {
   Radio,
   RadioGroup,
   SpectrumButtonProps,
-  Text,
   TextField,
-  View,
 } from '@adobe/react-spectrum';
 import {
   Button as BootstrapButtonOld,
@@ -25,6 +23,8 @@ import {
   RadioGroup as RadioGroupOld,
   RadioItem,
   Select,
+  View,
+  Text,
 } from '@deephaven/components';
 import { EMPTY_FUNCTION } from '@deephaven/utils';
 import { vsPlay } from '@deephaven/icons';
diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
@@ -11,7 +11,6 @@ import {
   Column,
   ComboBox,
   Form,
-  Heading,
   Grid,
   Icon,
   IllustratedMessage,
@@ -24,10 +23,8 @@ import {
   TableBody,
   TableHeader,
   TableView,
-  Text,
   TextField,
   ToggleButton,
-  View,
   Well,
   DialogTrigger,
   Dialog,
@@ -39,6 +36,7 @@ import {
 } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
+import { Heading, View, Text } from '@deephaven/components';
 import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
 import { sampleSectionIdAndClassesSpectrum } from './utils';
 
diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { Flex } from '@adobe/react-spectrum';
-import { ContextMenuRoot, ThemePicker, useTheme } from '@deephaven/components';
+
+import {
+  ContextMenuRoot,
+  ThemePicker,
+  useTheme,
+  Flex,
+} from '@deephaven/components';
 
 import Buttons from './Buttons';
 import Charts from './Charts';
diff --git a/packages/components/src/TextWithTooltip.tsx b/packages/components/src/TextWithTooltip.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Text } from '@adobe/react-spectrum';
+import { Text } from './spectrum';
 import stylesCommon from './SpectrumComponent.module.scss';
 import { PopperOptions, Tooltip } from './popper';
 
diff --git a/packages/components/src/dialogs/ActionButtonDialogTrigger.tsx b/packages/components/src/dialogs/ActionButtonDialogTrigger.tsx
@@ -1,9 +1,10 @@
 import { ReactElement } from 'react';
-import { ActionButton, DialogTrigger, Icon, Text } from '@adobe/react-spectrum';
+import { ActionButton, DialogTrigger, Icon } from '@adobe/react-spectrum';
 import type { SpectrumDialogClose } from '@react-types/dialog';
 import type { StyleProps } from '@react-types/shared';
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Text } from '../spectrum';
 import { Tooltip } from '../popper';
 
 export interface ActionButtonDialogTriggerProps extends StyleProps {
diff --git a/packages/components/src/dialogs/ConfirmationDialog.tsx b/packages/components/src/dialogs/ConfirmationDialog.tsx
@@ -7,10 +7,10 @@ import {
   Dialog,
   Divider,
   Form,
-  Heading,
 } from '@adobe/react-spectrum';
 import type { SpectrumLabelableProps } from '@react-types/shared';
 import { useFormWithDetachedSubmitButton } from '@deephaven/react-hooks';
+import { Heading } from '../spectrum';
 import styles from '../SpectrumComponent.module.scss';
 
 export interface ConfirmationDialogProps {
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -49,7 +49,7 @@ export * from './SelectValueList';
 export * from './shortcuts';
 export { default as SocketedButton } from './SocketedButton';
 export * from './spectrum';
-export * from './SpectrumUtils';
+export * from './spectrum/utils';
 export * from './TableViewEmptyState';
 export * from './TextWithTooltip';
 export * from './theme';
diff --git a/packages/components/src/spectrum/Heading.test.tsx b/packages/components/src/spectrum/Heading.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Heading } from './Heading';
+
+describe('Heading', () => {
+  it('mounts and unmounts', () => {
+    render(<Heading>{null}</Heading>);
+  });
+
+  it('renders without color', () => {
+    const { getByTestId } = render(<Heading data-testid="Heading" />);
+    const HeadingElement = getByTestId('Heading');
+    expect(HeadingElement).toBeInTheDocument();
+  });
+
+  it('renders with color', () => {
+    const color = 'red';
+    const { getByTestId } = render(
+      <Heading data-testid="Heading" color={color} />
+    );
+    const HeadingElement = getByTestId('Heading');
+    expect(HeadingElement).toBeInTheDocument();
+    expect(HeadingElement).toHaveStyle(`color: ${color}`);
+  });
+});
diff --git a/packages/components/src/spectrum/Heading.tsx b/packages/components/src/spectrum/Heading.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { useMemo } from 'react';
+import {
+  Heading as SpectrumHeading,
+  type HeadingProps as SpectrumHeadingProps,
+} from '@adobe/react-spectrum';
+import { type ColorValue, colorValueStyle } from '../theme/colorUtils';
+
+export type HeadingProps = SpectrumHeadingProps & {
+  color?: ColorValue;
+};
+
+/**
+ * A Heading component that re-exports the Spectrum Heading component.
+ * It overrides ColorValues to accept CSS color strings and custom
+ * variable names from our color paletee and semantic colors.
+ *
+ * @param props The props for the Heading component
+ * @returns The Heading component
+ *
+ */
+
+export function Heading(props: HeadingProps): JSX.Element {
+  const { color, UNSAFE_style, ...rest } = props;
+  const style = useMemo(
+    () => ({
+      ...UNSAFE_style,
+      color: colorValueStyle(color),
+    }),
+    [color, UNSAFE_style]
+  );
+
+  return <SpectrumHeading {...rest} UNSAFE_style={style} />;
+}
+
+export default Heading;
diff --git a/packages/components/src/spectrum/Text.test.tsx b/packages/components/src/spectrum/Text.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Text } from './Text';
+
+describe('Text', () => {
+  it('mounts and unmounts', () => {
+    render(<Text>test</Text>);
+  });
+
+  it('renders without color', () => {
+    const { getByTestId } = render(<Text data-testid="Text">test</Text>);
+    const TextElement = getByTestId('Text');
+    expect(TextElement).toBeInTheDocument();
+  });
+
+  it('renders with color', () => {
+    const color = 'red';
+    const { getByTestId } = render(
+      <Text data-testid="Text" color={color}>
+        test
+      </Text>
+    );
+    const TextElement = getByTestId('Text');
+    expect(TextElement).toBeInTheDocument();
+    expect(TextElement).toHaveStyle(`color: ${color}`);
+  });
+});
diff --git a/packages/components/src/spectrum/Text.tsx b/packages/components/src/spectrum/Text.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { useMemo } from 'react';
+import {
+  Text as SpectrumText,
+  type TextProps as SpectrumTextProps,
+} from '@adobe/react-spectrum';
+import { type ColorValue, colorValueStyle } from '../theme/colorUtils';
+
+export type TextProps = SpectrumTextProps & {
+  color?: ColorValue;
+};
+
+/**
+ * A Text component that re-exports the Spectrum Text component.
+ * It overrides ColorValues to accept CSS color strings and custom
+ * variable names from our color paletee and semantic colors.
+ *
+ * @param props The props for the Text component
+ * @returns The Text component
+ *
+ */
+
+export function Text(props: TextProps): JSX.Element {
+  const { color, UNSAFE_style, ...rest } = props;
+  const style = useMemo(
+    () => ({
+      ...UNSAFE_style,
+      color: colorValueStyle(color),
+    }),
+    [color, UNSAFE_style]
+  );
+
+  return <SpectrumText {...rest} UNSAFE_style={style} />;
+}
+
+export default Text;
diff --git a/packages/components/src/spectrum/View.test.tsx b/packages/components/src/spectrum/View.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { View } from './View';
+
+describe('View', () => {
+  it('mounts and unmounts', () => {
+    render(<View>{null}</View>);
+  });
+
+  it('renders without backgroundColor', () => {
+    const { getByTestId } = render(<View data-testid="view" />);
+    const viewElement = getByTestId('view');
+    expect(viewElement).toBeInTheDocument();
+  });
+
+  it('renders with backgroundColor', () => {
+    const backgroundColor = 'red';
+    const { getByTestId } = render(
+      <View data-testid="view" backgroundColor={backgroundColor} />
+    );
+    const viewElement = getByTestId('view');
+    expect(viewElement).toBeInTheDocument();
+    expect(viewElement).toHaveStyle(`background-color: ${backgroundColor}`);
+  });
+});
diff --git a/packages/components/src/spectrum/View.tsx b/packages/components/src/spectrum/View.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { useMemo } from 'react';
+import {
+  View as SpectrumView,
+  type ViewProps as SpectrumViewProps,
+} from '@adobe/react-spectrum';
+import { type ColorValue, colorValueStyle } from '../theme/colorUtils';
+
+export type ViewProps = Omit<SpectrumViewProps<6>, 'backgroundColor'> & {
+  backgroundColor?: ColorValue;
+};
+
+/**
+ * A View component that re-exports the Spectrum View component.
+ * However, it overrides ColorValues to accept CSS color strings and
+ * our custom variable names from our color paletee and semantic colors.
+ *
+ * @param props The props for the View component
+ * @returns The View component
+ *
+ */
+
+export function View(props: ViewProps): JSX.Element {
+  const { backgroundColor, UNSAFE_style, ...rest } = props;
+  const style = useMemo(
+    () => ({
+      ...UNSAFE_style,
+      backgroundColor: colorValueStyle(backgroundColor),
+    }),
+    [backgroundColor, UNSAFE_style]
+  );
+
+  return <SpectrumView {...rest} UNSAFE_style={style} />;
+}
+
+export default View;
diff --git a/packages/components/src/spectrum/__snapshots__/utils.test.ts.snap b/packages/components/src/spectrum/__snapshots__/utils.test.ts.snap
diff --git a/packages/components/src/spectrum/content.ts b/packages/components/src/spectrum/content.ts
@@ -7,18 +7,12 @@ export {
   type SpectrumDividerProps as DividerProps,
   Footer,
   type FooterProps,
-  Heading,
-  type HeadingProps,
   IllustratedMessage,
   type SpectrumIllustratedMessageProps as IllustratedMessageProps,
   Image,
   type SpectrumImageProps as ImageProps,
   Keyboard,
   type KeyboardProps,
-  Text,
-  type TextProps,
-  View,
-  type ViewProps,
   Well,
   type SpectrumWellProps as WellProps,
 } from '@adobe/react-spectrum';
diff --git a/packages/components/src/spectrum/index.ts b/packages/components/src/spectrum/index.ts
@@ -17,3 +17,11 @@ export * from './status';
  * Custom DH components wrapping React Spectrum components.
  */
 export * from './picker';
+export * from './Heading';
+export * from './Text';
+export * from './View';
+
+/**
+ * Custom DH spectrum utils
+ */
+export * from './utils';
diff --git a/packages/components/src/spectrum/picker/PickerUtils.test.tsx b/packages/components/src/spectrum/picker/PickerUtils.test.tsx
@@ -17,7 +17,7 @@ import {
 } from './PickerUtils';
 import type { PickerProps } from './Picker';
 import { Item, Section } from '../shared';
-import { Text } from '../content';
+import { Text } from '../Text';
 
 beforeEach(() => {
   expect.hasAssertions();
diff --git a/packages/components/src/spectrum/utils.test.ts b/packages/components/src/spectrum/utils.test.ts
@@ -1,4 +1,4 @@
-import { themeDHDefault } from './SpectrumUtils';
+import { themeDHDefault } from './utils';
 
 describe('themeDHDefault', () => {
   it('should merge Spectrum default with DH custom styles', () => {
diff --git a/packages/components/src/spectrum/utils.ts b/packages/components/src/spectrum/utils.ts
@@ -1,5 +1,5 @@
 import { theme } from '@react-spectrum/theme-default';
-import { themeSpectrumClassesCommon } from './theme/theme-spectrum';
+import { themeSpectrumClassesCommon } from '../theme/theme-spectrum';
 
 const { global, light, dark, medium, large } = theme;
 
diff --git a/packages/components/src/theme/SpectrumThemeProvider.tsx b/packages/components/src/theme/SpectrumThemeProvider.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useState } from 'react';
 import { Provider } from '@adobe/react-spectrum';
 import type { Theme } from '@react-types/provider';
 import shortid from 'shortid';
-import { themeDHDefault } from '../SpectrumUtils';
+import { themeDHDefault } from '../spectrum/utils';
 
 export interface SpectrumThemeProviderProps {
   children: ReactNode;
diff --git a/packages/components/src/theme/colorUtils.test.ts b/packages/components/src/theme/colorUtils.test.ts
@@ -0,0 +1,15 @@
+import { colorValueStyle } from './colorUtils';
+
+describe('ColorValues', () => {
+  test('should return the correct color style', () => {
+    // dh-color variables
+    expect(colorValueStyle('blue-1000')).toBe('var(--dh-color-blue-1000)');
+    expect(colorValueStyle('accent-1000')).toBe('var(--dh-color-accent-1000)');
+    expect(colorValueStyle('bg')).toBe('var(--dh-color-bg)');
+    // pass-through variables
+    expect(colorValueStyle('red')).toBe('red');
+    expect(colorValueStyle('rgb(255, 0, 0)')).toBe('rgb(255, 0, 0)');
+    expect(colorValueStyle('#ff0000')).toBe('#ff0000');
+    expect(colorValueStyle(undefined)).toBe(undefined);
+  });
+});
diff --git a/packages/components/src/theme/colorUtils.ts b/packages/components/src/theme/colorUtils.ts
diff --git a/packages/components/src/theme/index.ts b/packages/components/src/theme/index.ts
diff --git a/packages/eslint-config/index.js b/packages/eslint-config/index.js
