feat: wrap spectrum View, Text and Heading to accept custom colors

packages/code-studio/src/styleguide/SpectrumComponents.tsx

@@ -27,7 +27,7 @@ import {
   Text,
   TextField,
   ToggleButton,
-  View,
+  // View,
   Well,
   DialogTrigger,
   Dialog,
@@ -39,6 +39,7 @@ import {
 } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
+import { View } from '@deephaven/components';
 import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
 import { sampleSectionIdAndClassesSpectrum } from './utils';
 

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';

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}`);
+  });
+});

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;

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}`);
+  });
+});

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;

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}`);
+  });
+});

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;

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';

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';

packages/components/src/spectrum/picker/PickerUtils.test.tsx

@@ -13,7 +13,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();

packages/components/src/SpectrumUtils.test.ts → 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', () => {

packages/components/src/SpectrumUtils.ts → 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;
 

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;

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);
+  });
+});