From d74b33506ae010c64fa8daed8ac3182c3a9b48d2 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Thu, 12 Oct 2023 16:50:48 -0500 Subject: [PATCH 01/17] Spectrum theme provider #1543 --- .../src/styleguide/ThemeColors.tsx | 2 + packages/components/src/SpectrumUtils.ts | 7 +- packages/components/src/declaration.d.ts | 4 + .../src/theme/SpectrumThemeProvider.tsx | 30 +++ .../components/src/theme/ThemeProvider.tsx | 17 +- .../components/src/theme/theme-dark/index.ts | 5 + .../theme-dark/theme-dark-components.css | 20 ++ .../theme/theme-dark/theme-dark-semantic.css | 5 + .../src/theme/theme-spectrum/index.ts | 20 ++ .../theme-spectrum-alias.module.css | 108 +++++++++ .../theme-spectrum-palette.module.css | 222 ++++++++++++++++++ 11 files changed, 430 insertions(+), 10 deletions(-) create mode 100644 packages/components/src/theme/SpectrumThemeProvider.tsx create mode 100644 packages/components/src/theme/theme-dark/theme-dark-components.css create mode 100644 packages/components/src/theme/theme-spectrum/index.ts create mode 100644 packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css create mode 100644 packages/components/src/theme/theme-spectrum/theme-spectrum-palette.module.css diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx index 07e2ca95ad..8109c0211d 100644 --- a/packages/code-studio/src/styleguide/ThemeColors.tsx +++ b/packages/code-studio/src/styleguide/ThemeColors.tsx @@ -5,6 +5,7 @@ import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palet import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?inline'; import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?inline'; import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?inline'; +import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?inline'; import styles from './ThemeColors.module.scss'; // Group names are extracted from var names via a regex capture group. Most of @@ -54,6 +55,7 @@ export function ThemeColors(): JSX.Element { 'Semantic Colors': buildColorGroups(semantic, 1), 'Editor Colors': buildColorGroups(semanticEditor, 2, renameGroups.editor), 'Grid Colors': buildColorGroups(semanticGrid, 2, renameGroups.grid), + Components: buildColorGroups(components, 1), }), [] ); diff --git a/packages/components/src/SpectrumUtils.ts b/packages/components/src/SpectrumUtils.ts index 70f676a363..95e6f7e995 100644 --- a/packages/components/src/SpectrumUtils.ts +++ b/packages/components/src/SpectrumUtils.ts @@ -1,6 +1,5 @@ import { theme } from '@react-spectrum/theme-default'; -import darkDH from './SpectrumThemeDark.module.scss'; -import lightDH from './SpectrumThemeLight.module.scss'; +import { themeSpectrumClassesCommon } from './theme/theme-spectrum'; const { global, light, dark, medium, large } = theme; @@ -42,11 +41,11 @@ export const themeDHDefault = { global, light: { ...light, - ...lightDH, + ...themeSpectrumClassesCommon, }, dark: { ...dark, - ...darkDH, + ...themeSpectrumClassesCommon, }, // scales medium, diff --git a/packages/components/src/declaration.d.ts b/packages/components/src/declaration.d.ts index fde32658a1..f1577432ee 100644 --- a/packages/components/src/declaration.d.ts +++ b/packages/components/src/declaration.d.ts @@ -1,3 +1,7 @@ +declare module '*.module.css' { + const content: Record; + export default content; +} declare module '*.module.scss' { const content: Record; export default content; diff --git a/packages/components/src/theme/SpectrumThemeProvider.tsx b/packages/components/src/theme/SpectrumThemeProvider.tsx new file mode 100644 index 0000000000..c29ffcde86 --- /dev/null +++ b/packages/components/src/theme/SpectrumThemeProvider.tsx @@ -0,0 +1,30 @@ +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'; + +export interface SpectrumThemeProviderProps { + children: ReactNode; + isPortal?: boolean; + theme?: Theme; + colorScheme?: 'light' | 'dark'; +} + +export function SpectrumThemeProvider({ + children, + isPortal = false, + theme = themeDHDefault, + colorScheme, +}: SpectrumThemeProviderProps): JSX.Element { + // a unique ID is used per provider to force it to render the theme wrapper element inside portals + // based on https://github.com/adobe/react-spectrum/issues/1697#issuecomment-999827266 + // won't be needed if https://github.com/adobe/react-spectrum/pull/2669 is merged + const [id] = useState(isPortal ? shortid() : null); + + return ( + + {children} + + ); +} diff --git a/packages/components/src/theme/ThemeProvider.tsx b/packages/components/src/theme/ThemeProvider.tsx index d3ff14d0ec..d4d6291936 100644 --- a/packages/components/src/theme/ThemeProvider.tsx +++ b/packages/components/src/theme/ThemeProvider.tsx @@ -8,6 +8,7 @@ import { getThemePreloadData, setThemePreloadData, } from './ThemeUtils'; +import { SpectrumThemeProvider } from './SpectrumThemeProvider'; export interface ThemeContextValue { activeThemes: ThemeData[] | null; @@ -71,12 +72,16 @@ export function ThemeProvider({ return ( - {activeThemes?.map(theme => ( - - ))} - {children} + {activeThemes == null ? null : ( + + {activeThemes.map(theme => ( + + ))} + {children} + + )} ); } diff --git a/packages/components/src/theme/theme-dark/index.ts b/packages/components/src/theme/theme-dark/index.ts index 04f5f09c2b..49ba01478b 100644 --- a/packages/components/src/theme/theme-dark/index.ts +++ b/packages/components/src/theme/theme-dark/index.ts @@ -2,12 +2,17 @@ import themeDarkPalette from './theme-dark-palette.css?inline'; import themeDarkSemantic from './theme-dark-semantic.css?inline'; import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?inline'; import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?inline'; +import themeDarkComponents from './theme-dark-components.css?inline'; +/** + * Theme is exported as a string containing css variable definitions. + */ export const themeDark = [ themeDarkPalette, themeDarkSemantic, themeDarkSemanticEditor, themeDarkSemanticGrid, + themeDarkComponents, ].join('\n'); export default themeDark; diff --git a/packages/components/src/theme/theme-dark/theme-dark-components.css b/packages/components/src/theme/theme-dark/theme-dark-components.css new file mode 100644 index 0000000000..7cc2483d8a --- /dev/null +++ b/packages/components/src/theme/theme-dark/theme-dark-components.css @@ -0,0 +1,20 @@ +/* stylelint-disable alpha-value-notation */ +:root { + --dh-color-quickactions-bg: hsla(var(--dh-color-gray-hue), 0%, 11%, 0.9); + --dh-color-radial-reaction: hsla(var(--dh-color-gray-hue), 0%, 92%, 0.6); + --dh-color-colorpicker-border: hsla(var(--dh-color-gray-hue), 0%, 94%, 0.1); + + /* Miller Columns */ + --dh-color-column-miller-item-selected-bg: hsla( + calc(var(--dh-color-blue-hue) - 9deg), + 83%, + 54%, + 0.1 + ); + --dh-color-column-miller-item-selected-hover-bg: hsla( + calc(var(--dh-color-blue-hue) - 9deg), + 83%, + 54%, + 0.2 + ); +} diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic.css b/packages/components/src/theme/theme-dark/theme-dark-semantic.css index f3a003352f..96d67c7997 100644 --- a/packages/components/src/theme/theme-dark/theme-dark-semantic.css +++ b/packages/components/src/theme/theme-dark/theme-dark-semantic.css @@ -53,6 +53,11 @@ 0.2 ); + /* Shadows / Overlays */ + --dh-color-dropshadow: hsla(var(--dh-color-gray-hue), 0, 0, 0.8); + --dh-color-overlay-modal-bg: hsla(var(--dh-color-gray-hue), 0%, 0%, 0.6); + --dh-color-overlay-hover-bg: hsla(var(--dh-color-gray-hue), 0%, 100%, 0.08); + /* Negative Background */ --dh-color-negative-background-default: var(--dh-color-red-600); --dh-color-negative-background-hover: var(--dh-color-red-500); diff --git a/packages/components/src/theme/theme-spectrum/index.ts b/packages/components/src/theme/theme-spectrum/index.ts new file mode 100644 index 0000000000..a6cea2b39a --- /dev/null +++ b/packages/components/src/theme/theme-spectrum/index.ts @@ -0,0 +1,20 @@ +import palette from './theme-spectrum-palette.module.css'; +import alias from './theme-spectrum-alias.module.css'; + +/** + * Spectrum theme variables are exported as a map of css class names. The keys + * come from css classes in the imported css modules. The values are generated + * by Vite. + * + * e.g. + * { + * 'dh-spectrum-palette': '_dh-spectrum-palette_abr16_1', + * 'dh-spectrum-alias': '_dh-spectrum-alias_18mbe_1', + * } + */ +export const themeSpectrumClassesCommon = { + ...palette, + ...alias, +}; + +export default themeSpectrumClassesCommon; diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css new file mode 100644 index 0000000000..f2b0354ae3 --- /dev/null +++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css @@ -0,0 +1,108 @@ +/* stylelint-disable custom-property-empty-line-before */ +/* stylelint-disable alpha-value-notation */ +.dh-spectrum-alias { + --spectrum-alias-background-color-default: var(--dh-color-background); + + /* Shadows / Overlays */ + --spectrum-alias-dropshadow-color: var(--dh-color-dropshadow); + --spectrum-alias-background-color-modal-overlay: var( + --dh-color-modal-overlay-bg + ); + --spectrum-alias-background-color-hover-overlay: var( + --dh-color-overlay-hover-bg + ); + + /* Color Picker Borders */ + --spectrum-colorarea-border-color: var(--dh-color-colorpicker-border); + --spectrum-colorarea-border-color-hover: var(--dh-color-colorpicker-border); + --spectrum-colorarea-border-color-down: var(--dh-color-colorpicker-border); + --spectrum-colorarea-border-color-key-focus: var( + --dh-color-colorpicker-border + ); + --spectrum-colorslider-border-color: var(--dh-color-colorpicker-border); + --spectrum-colorslider-border-color-hover: var(--dh-color-colorpicker-border); + --spectrum-colorslider-border-color-down: var(--dh-color-colorpicker-border); + --spectrum-colorslider-border-color-key-focus: var( + --dh-color-colorpicker-border + ); + --spectrum-colorslider-vertical-border-color: var( + --dh-color-colorpicker-border + ); + --spectrum-colorslider-vertical-border-color-hover: var( + --dh-color-colorpicker-border + ); + --spectrum-colorslider-vertical-border-color-down: var( + --dh-color-colorpicker-border + ); + --spectrum-colorslider-vertical-border-color-key-focus: var( + --dh-color-colorpicker-border + ); + --spectrum-colorwheel-border-color: var(--dh-color-colorpicker-border); + --spectrum-colorwheel-border-color-hover: var(--dh-color-colorpicker-border); + --spectrum-colorwheel-border-color-down: var(--dh-color-colorpicker-border); + --spectrum-colorwheel-border-color-key-focus: var( + --dh-color-colorpicker-border + ); + + /* Highlight */ + --spectrum-alias-highlight-active: var(--dh-color-highlight-active); + --spectrum-alias-highlight-hover: var(--dh-color-highlight-hover); + --spectrum-alias-highlight-invalid: var(--dh-color-highlight-invalid); + --spectrum-alias-highlight-selected: var(--dh-color-highlight-selected); + --spectrum-alias-highlight-selected-hover: var( + --dh-color-highlight-selected-hover + ); + + --spectrum-alias-text-highlight-color: var(--dh-color-text-highlight); + --spectrum-alias-background-color-quickactions: var( + --dh-color-quickactions-bg + ); + --spectrum-alias-radial-reaction-color-default: var( + --dh-color-radial-reaction + ); + + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-50 + ); + + /* Miller Columns */ + --spectrum-miller-column-item-background-color-selected: var( + --dh-color-column-miller-item-selected-bg + ); + --spectrum-miller-column-item-background-color-selected-hover: var( + --dh-color-column-miller-item-selected-hover-bg + ); + + /* Compact Tabs */ + --spectrum-tabs-compact-selection-indicator-color: var( + --spectrum-global-color-blue-500 + ); + --spectrum-tabs-compact-vertical-rule-color: var( + --spectrum-global-color-gray-200 + ); + --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var( + --spectrum-global-color-blue-500 + ); + --spectrum-tabs-compact-vertical-emphasized-rule-color: var( + --spectrum-global-color-gray-200 + ); + --spectrum-tabs-emphasized-selection-indicator-color: var( + --spectrum-global-color-blue-500 + ); + --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var( + --spectrum-global-color-blue-500 + ); + --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var( + --spectrum-global-color-blue-500 + ); + --spectrum-tabs-quiet-emphasized-selection-indicator-color: var( + --spectrum-global-color-blue-500 + ); + --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( + --spectrum-global-color-blue-500 + ); +} diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-palette.module.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-palette.module.css new file mode 100644 index 0000000000..542d5bb60f --- /dev/null +++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-palette.module.css @@ -0,0 +1,222 @@ +.dh-spectrum-palette { + /* Gray */ + --spectrum-gray-50: var(--dh-color-gray-50); + --spectrum-gray-75: var(--dh-color-gray-75); + --spectrum-gray-100: var(--dh-color-gray-100); + --spectrum-gray-200: var(--dh-color-gray-200); + --spectrum-gray-300: var(--dh-color-gray-300); + --spectrum-gray-400: var(--dh-color-gray-400); + --spectrum-gray-500: var(--dh-color-gray-500); + --spectrum-gray-600: var(--dh-color-gray-600); + --spectrum-gray-700: var(--dh-color-gray-700); + --spectrum-gray-800: var(--dh-color-gray-800); + --spectrum-gray-900: var(--dh-color-gray-900); + + /* Blue */ + --spectrum-blue-100: var(--dh-color-blue-100); + --spectrum-blue-200: var(--dh-color-blue-200); + --spectrum-blue-300: var(--dh-color-blue-300); + --spectrum-blue-400: var(--dh-color-blue-400); + --spectrum-blue-500: var(--dh-color-blue-500); + --spectrum-blue-600: var(--dh-color-blue-600); + --spectrum-blue-700: var(--dh-color-blue-700); + --spectrum-blue-800: var(--dh-color-blue-800); + --spectrum-blue-900: var(--dh-color-blue-900); + --spectrum-blue-1000: var(--dh-color-blue-1000); + --spectrum-blue-1100: var(--dh-color-blue-1100); + --spectrum-blue-1200: var(--dh-color-blue-1200); + --spectrum-blue-1300: var(--dh-color-blue-1300); + --spectrum-blue-1400: var(--dh-color-blue-1400); + + /* Red */ + --spectrum-red-100: var(--dh-color-red-100); + --spectrum-red-200: var(--dh-color-red-200); + --spectrum-red-300: var(--dh-color-red-300); + --spectrum-red-400: var(--dh-color-red-400); + --spectrum-red-500: var(--dh-color-red-500); + --spectrum-red-600: var(--dh-color-red-600); + --spectrum-red-700: var(--dh-color-red-700); + --spectrum-red-800: var(--dh-color-red-800); + --spectrum-red-900: var(--dh-color-red-900); + --spectrum-red-1000: var(--dh-color-red-1000); + --spectrum-red-1100: var(--dh-color-red-1100); + --spectrum-red-1200: var(--dh-color-red-1200); + --spectrum-red-1300: var(--dh-color-red-1300); + --spectrum-red-1400: var(--dh-color-red-1400); + + /* Orange */ + --spectrum-orange-100: var(--dh-color-orange-100); + --spectrum-orange-200: var(--dh-color-orange-200); + --spectrum-orange-300: var(--dh-color-orange-300); + --spectrum-orange-400: var(--dh-color-orange-400); + --spectrum-orange-500: var(--dh-color-orange-500); + --spectrum-orange-600: var(--dh-color-orange-600); + --spectrum-orange-700: var(--dh-color-orange-700); + --spectrum-orange-800: var(--dh-color-orange-800); + --spectrum-orange-900: var(--dh-color-orange-900); + --spectrum-orange-1000: var(--dh-color-orange-1000); + --spectrum-orange-1100: var(--dh-color-orange-1100); + --spectrum-orange-1200: var(--dh-color-orange-1200); + --spectrum-orange-1300: var(--dh-color-orange-1300); + --spectrum-orange-1400: var(--dh-color-orange-1400); + + /* Yellow */ + --spectrum-yellow-100: var(--dh-color-yellow-100); + --spectrum-yellow-200: var(--dh-color-yellow-200); + --spectrum-yellow-300: var(--dh-color-yellow-300); + --spectrum-yellow-400: var(--dh-color-yellow-400); + --spectrum-yellow-500: var(--dh-color-yellow-500); + --spectrum-yellow-600: var(--dh-color-yellow-600); + --spectrum-yellow-700: var(--dh-color-yellow-700); + --spectrum-yellow-800: var(--dh-color-yellow-800); + --spectrum-yellow-900: var(--dh-color-yellow-900); + --spectrum-yellow-1000: var(--dh-color-yellow-1000); + --spectrum-yellow-1100: var(--dh-color-yellow-1100); + --spectrum-yellow-1200: var(--dh-color-yellow-1200); + --spectrum-yellow-1300: var(--dh-color-yellow-1300); + --spectrum-yellow-1400: var(--dh-color-yellow-1400); + + /* Chartreuse */ + --spectrum-chartreuse-100: var(--dh-color-chartreuse-100); + --spectrum-chartreuse-200: var(--dh-color-chartreuse-200); + --spectrum-chartreuse-300: var(--dh-color-chartreuse-300); + --spectrum-chartreuse-400: var(--dh-color-chartreuse-400); + --spectrum-chartreuse-500: var(--dh-color-chartreuse-500); + --spectrum-chartreuse-600: var(--dh-color-chartreuse-600); + --spectrum-chartreuse-700: var(--dh-color-chartreuse-700); + --spectrum-chartreuse-800: var(--dh-color-chartreuse-800); + --spectrum-chartreuse-900: var(--dh-color-chartreuse-900); + --spectrum-chartreuse-1000: var(--dh-color-chartreuse-1000); + --spectrum-chartreuse-1100: var(--dh-color-chartreuse-1100); + --spectrum-chartreuse-1200: var(--dh-color-chartreuse-1200); + --spectrum-chartreuse-1300: var(--dh-color-chartreuse-1300); + --spectrum-chartreuse-1400: var(--dh-color-chartreuse-1400); + + /* Celery */ + --spectrum-celery-100: var(--dh-color-celery-100); + --spectrum-celery-200: var(--dh-color-celery-200); + --spectrum-celery-300: var(--dh-color-celery-300); + --spectrum-celery-400: var(--dh-color-celery-400); + --spectrum-celery-500: var(--dh-color-celery-500); + --spectrum-celery-600: var(--dh-color-celery-600); + --spectrum-celery-700: var(--dh-color-celery-700); + --spectrum-celery-800: var(--dh-color-celery-800); + --spectrum-celery-900: var(--dh-color-celery-900); + --spectrum-celery-1000: var(--dh-color-celery-1000); + --spectrum-celery-1100: var(--dh-color-celery-1100); + --spectrum-celery-1200: var(--dh-color-celery-1200); + --spectrum-celery-1300: var(--dh-color-celery-1300); + --spectrum-celery-1400: var(--dh-color-celery-1400); + + /* Green */ + --spectrum-green-100: var(--dh-color-green-100); + --spectrum-green-200: var(--dh-color-green-200); + --spectrum-green-300: var(--dh-color-green-300); + --spectrum-green-400: var(--dh-color-green-400); + --spectrum-green-500: var(--dh-color-green-500); + --spectrum-green-600: var(--dh-color-green-600); + --spectrum-green-700: var(--dh-color-green-700); + --spectrum-green-800: var(--dh-color-green-800); + --spectrum-green-900: var(--dh-color-green-900); + --spectrum-green-1000: var(--dh-color-green-1000); + --spectrum-green-1100: var(--dh-color-green-1100); + --spectrum-green-1200: var(--dh-color-green-1200); + --spectrum-green-1300: var(--dh-color-green-1300); + --spectrum-green-1400: var(--dh-color-green-1400); + + /* Seafoam */ + --spectrum-seafoam-100: var(--dh-color-seafoam-100); + --spectrum-seafoam-200: var(--dh-color-seafoam-200); + --spectrum-seafoam-300: var(--dh-color-seafoam-300); + --spectrum-seafoam-400: var(--dh-color-seafoam-400); + --spectrum-seafoam-500: var(--dh-color-seafoam-500); + --spectrum-seafoam-600: var(--dh-color-seafoam-600); + --spectrum-seafoam-700: var(--dh-color-seafoam-700); + --spectrum-seafoam-800: var(--dh-color-seafoam-800); + --spectrum-seafoam-900: var(--dh-color-seafoam-900); + --spectrum-seafoam-1000: var(--dh-color-seafoam-1000); + --spectrum-seafoam-1100: var(--dh-color-seafoam-1100); + --spectrum-seafoam-1200: var(--dh-color-seafoam-1200); + --spectrum-seafoam-1300: var(--dh-color-seafoam-1300); + --spectrum-seafoam-1400: var(--dh-color-seafoam-1400); + + /* Cyan */ + --spectrum-cyan-100: var(--dh-color-cyan-100); + --spectrum-cyan-200: var(--dh-color-cyan-200); + --spectrum-cyan-300: var(--dh-color-cyan-300); + --spectrum-cyan-400: var(--dh-color-cyan-400); + --spectrum-cyan-500: var(--dh-color-cyan-500); + --spectrum-cyan-600: var(--dh-color-cyan-600); + --spectrum-cyan-700: var(--dh-color-cyan-700); + --spectrum-cyan-800: var(--dh-color-cyan-800); + --spectrum-cyan-900: var(--dh-color-cyan-900); + --spectrum-cyan-1000: var(--dh-color-cyan-1000); + --spectrum-cyan-1100: var(--dh-color-cyan-1100); + --spectrum-cyan-1200: var(--dh-color-cyan-1200); + --spectrum-cyan-1300: var(--dh-color-cyan-1300); + --spectrum-cyan-1400: var(--dh-color-cyan-1400); + + /* Indigo */ + --spectrum-indigo-100: var(--dh-color-indigo-100); + --spectrum-indigo-200: var(--dh-color-indigo-200); + --spectrum-indigo-300: var(--dh-color-indigo-300); + --spectrum-indigo-400: var(--dh-color-indigo-400); + --spectrum-indigo-500: var(--dh-color-indigo-500); + --spectrum-indigo-600: var(--dh-color-indigo-600); + --spectrum-indigo-700: var(--dh-color-indigo-700); + --spectrum-indigo-800: var(--dh-color-indigo-800); + --spectrum-indigo-900: var(--dh-color-indigo-900); + --spectrum-indigo-1000: var(--dh-color-indigo-1000); + --spectrum-indigo-1100: var(--dh-color-indigo-1100); + --spectrum-indigo-1200: var(--dh-color-indigo-1200); + --spectrum-indigo-1300: var(--dh-color-indigo-1300); + --spectrum-indigo-1400: var(--dh-color-indigo-1400); + + /* Purple */ + --spectrum-purple-100: var(--dh-color-purple-100); + --spectrum-purple-200: var(--dh-color-purple-200); + --spectrum-purple-300: var(--dh-color-purple-300); + --spectrum-purple-400: var(--dh-color-purple-400); + --spectrum-purple-500: var(--dh-color-purple-500); + --spectrum-purple-600: var(--dh-color-purple-600); + --spectrum-purple-700: var(--dh-color-purple-700); + --spectrum-purple-800: var(--dh-color-purple-800); + --spectrum-purple-900: var(--dh-color-purple-900); + --spectrum-purple-1000: var(--dh-color-purple-1000); + --spectrum-purple-1100: var(--dh-color-purple-1100); + --spectrum-purple-1200: var(--dh-color-purple-1200); + --spectrum-purple-1300: var(--dh-color-purple-1300); + --spectrum-purple-1400: var(--dh-color-purple-1400); + + /* Fuchsia */ + --spectrum-fuchsia-100: var(--dh-color-fuchsia-100); + --spectrum-fuchsia-200: var(--dh-color-fuchsia-200); + --spectrum-fuchsia-300: var(--dh-color-fuchsia-300); + --spectrum-fuchsia-400: var(--dh-color-fuchsia-400); + --spectrum-fuchsia-500: var(--dh-color-fuchsia-500); + --spectrum-fuchsia-600: var(--dh-color-fuchsia-600); + --spectrum-fuchsia-700: var(--dh-color-fuchsia-700); + --spectrum-fuchsia-800: var(--dh-color-fuchsia-800); + --spectrum-fuchsia-900: var(--dh-color-fuchsia-900); + --spectrum-fuchsia-1000: var(--dh-color-fuchsia-1000); + --spectrum-fuchsia-1100: var(--dh-color-fuchsia-1100); + --spectrum-fuchsia-1200: var(--dh-color-fuchsia-1200); + --spectrum-fuchsia-1300: var(--dh-color-fuchsia-1300); + --spectrum-fuchsia-1400: var(--dh-color-fuchsia-1400); + + /* Magenta */ + --spectrum-magenta-100: var(--dh-color-magenta-100); + --spectrum-magenta-200: var(--dh-color-magenta-200); + --spectrum-magenta-300: var(--dh-color-magenta-300); + --spectrum-magenta-400: var(--dh-color-magenta-400); + --spectrum-magenta-500: var(--dh-color-magenta-500); + --spectrum-magenta-600: var(--dh-color-magenta-600); + --spectrum-magenta-700: var(--dh-color-magenta-700); + --spectrum-magenta-800: var(--dh-color-magenta-800); + --spectrum-magenta-900: var(--dh-color-magenta-900); + --spectrum-magenta-1000: var(--dh-color-magenta-1000); + --spectrum-magenta-1100: var(--dh-color-magenta-1100); + --spectrum-magenta-1200: var(--dh-color-magenta-1200); + --spectrum-magenta-1300: var(--dh-color-magenta-1300); + --spectrum-magenta-1400: var(--dh-color-magenta-1400); +} From 0a699dca0c93ddb933b7f143d65317141fa411f1 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 17 Oct 2023 16:04:17 -0500 Subject: [PATCH 02/17] Spectrum theme + styleguide #1543 --- .../styleguide/SpectrumComponents.module.css | 1 + .../src/styleguide/SpectrumComponents.tsx | 134 ++++++++++++++++++ .../code-studio/src/styleguide/StyleGuide.tsx | 3 + .../src/styleguide/ThemeColors.tsx | 11 +- .../theme/theme-dark/theme-dark-semantic.css | 58 +++++++- .../theme-spectrum-alias.module.css | 108 +++++++++++++- 6 files changed, 308 insertions(+), 7 deletions(-) create mode 100644 packages/code-studio/src/styleguide/SpectrumComponents.module.css create mode 100644 packages/code-studio/src/styleguide/SpectrumComponents.tsx diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.module.css b/packages/code-studio/src/styleguide/SpectrumComponents.module.css new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/packages/code-studio/src/styleguide/SpectrumComponents.module.css @@ -0,0 +1 @@ + diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx new file mode 100644 index 0000000000..d7428cdeb0 --- /dev/null +++ b/packages/code-studio/src/styleguide/SpectrumComponents.tsx @@ -0,0 +1,134 @@ +/* eslint-disable react/style-prop-object */ +import React, { useMemo } from 'react'; +import { + ActionButton, + Button, + Cell, + Column, + ComboBox, + Grid, + Item, + repeat, + Row, + TableBody, + TableHeader, + TableView, + Well, +} from '@adobe/react-spectrum'; + +export function SpectrumComponents(): JSX.Element { + const samples = useMemo( + () => [ + { + title: 'Buttons', + content: ( + + + + + + + + + + + + + + + + + Normal + Quiet + Disabled + + ), + }, + { + title: 'Combobox', + content: ( + + One + Two + Three + + ), + }, + { + title: 'Table View', + content: ( + + + + Name + Age + + + City + State + + + + + John + 42 + San Francisco + CA + + + Jane + 38 + San Francisco + CA + + + Becky + 12 + San Francisco + CA + + + + ), + }, + { title: 'Wells', content: This is a well. }, + ], + [] + ); + + return ( + <> +

Spectrum Components

+ + {samples.map(({ title, content }) => ( +
+

{title}

+
{content}
+
+ ))} + + + ); +} + +export default SpectrumComponents; diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx index a71843a61c..e5ff92c47b 100644 --- a/packages/code-studio/src/styleguide/StyleGuide.tsx +++ b/packages/code-studio/src/styleguide/StyleGuide.tsx @@ -22,6 +22,7 @@ import './StyleGuide.scss'; import DraggableLists from './DraggableLists'; import Navigations from './Navigations'; import ThemeColors from './ThemeColors'; +import SpectrumComponents from './SpectrumComponents'; function StyleGuide(): React.ReactElement { return ( @@ -71,6 +72,8 @@ function StyleGuide(): React.ReactElement { + + ); } diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx index 8109c0211d..dc7ba764cf 100644 --- a/packages/code-studio/src/styleguide/ThemeColors.tsx +++ b/packages/code-studio/src/styleguide/ThemeColors.tsx @@ -46,16 +46,23 @@ const renameGroups = { focus: 'state', }, grid: { data: 'Data Bars', context: 'Context Menu' }, + semantic: { + positive: 'status', + negative: 'status', + notice: 'status', + info: 'status', + well: 'wells', + }, }; export function ThemeColors(): JSX.Element { const swatchDataGroups = useMemo( () => ({ 'Theme Color Palette': buildColorGroups(palette, 1), - 'Semantic Colors': buildColorGroups(semantic, 1), + 'Semantic Colors': buildColorGroups(semantic, 1, renameGroups.semantic), 'Editor Colors': buildColorGroups(semanticEditor, 2, renameGroups.editor), 'Grid Colors': buildColorGroups(semanticGrid, 2, renameGroups.grid), - Components: buildColorGroups(components, 1), + 'Component Colors': buildColorGroups(components, 1), }), [] ); diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic.css b/packages/components/src/theme/theme-dark/theme-dark-semantic.css index 96d67c7997..364e2cb75e 100644 --- a/packages/components/src/theme/theme-dark/theme-dark-semantic.css +++ b/packages/components/src/theme/theme-dark/theme-dark-semantic.css @@ -36,6 +36,22 @@ --dh-color-accent-background-down: var(--dh-color-accent-400); --dh-color-accent-background-key-focus: var(--dh-color-accent-500); + /* Background Defaults */ + --dh-color-default-gray-bg: var(--dh-color-gray-700); + --dh-color-default-blue-bg: var(--dh-color-blue-700); + --dh-color-default-red-bg: var(--dh-color-red-700); + --dh-color-default-orange-bg: var(--dh-color-orange-800); + --dh-color-default-yellow-bg: var(--dh-color-yellow-1000); + --dh-color-default-chartreuse-bg: var(--dh-color-chartreuse-900); + --dh-color-default-celery-bg: var(--dh-color-celery-800); + --dh-color-default-green-bg: var(--dh-color-green-700); + --dh-color-default-seafoam-bg: var(--dh-color-seafoam-700); + --dh-color-default-cyan-bg: var(--dh-color-cyan-700); + --dh-color-default-indigo-bg: var(--dh-color-indigo-700); + --dh-color-default-purple-bg: var(--dh-color-purple-700); + --dh-color-default-fuchsia-bg: var(--dh-color-fuchsia-700); + --dh-color-default-magenta-bg: var(--dh-color-magenta-700); + /* Focus */ --dh-color-focus: var(--dh-color-blue-800); --dh-color-focus-border: var(--dh-color-blue-800); @@ -59,10 +75,39 @@ --dh-color-overlay-hover-bg: hsla(var(--dh-color-gray-hue), 0%, 100%, 0.08); /* Negative Background */ - --dh-color-negative-background-default: var(--dh-color-red-600); - --dh-color-negative-background-hover: var(--dh-color-red-500); - --dh-color-negative-background-down: var(--dh-color-red-400); - --dh-color-negative-background-key-focus: var(--dh-color-red-500); + --dh-color-negative-default-bg: var(--dh-color-red-600); + --dh-color-negative-hover-bg: var(--dh-color-red-500); + --dh-color-negative-down-bg: var(--dh-color-red-400); + --dh-color-negative-key-focus-bg: var(--dh-color-red-500); + + /* Neutral */ + --dh-neutral-default-bg: var(--dh-color-gray-500); + --dh-neutral-hover-bg: var(--dh-color-gray-400); + --dh-neutral-down-bg: var(--dh-color-gray-300); + --dh-neutral-key-focus-bg: var(--dh-color-gray-400); + + --dh-neutral-subdued-default-bg: var(--dh-color-gray-400); + --dh-neutral-subdued-hover-bg: var(--dh-color-gray-300); + --dh-neutral-subdued-down-bg: var(--dh-color-gray-200); + --dh-neutral-subdued-key-focus-bg: var(--dh-color-gray-300); + + /* Positive */ + --dh-color-positive-default-bg: var(--dh-color-green-900); + --dh-color-positive-hover-bg: var(--dh-color-green-800); + --dh-color-positive-down-bg: var(--dh-color-green-700); + --dh-color-positive-key-focus-bg: var(--dh-color-green-800); + + /* Informative */ + --dh-color-info-default-bg: var(--dh-color-cyan-1000); + --dh-color-info-hover-bg: var(--dh-color-cyan-900); + --dh-color-info-down-bg: var(--dh-color-cyan-800); + --dh-color-info-key-focus-bg: var(--dh-color-cyan-900); + + /* Notice */ + --dh-color-notice-default-bg: var(--dh-color-yellow-1000); + --dh-color-notice-hover-bg: var(--dh-color-yellow-900); + --dh-color-notice-down-bg: var(--dh-color-yellow-800); + --dh-color-notice-key-focus-bg: var(--dh-color-yellow-1000); /* Visual Colors */ --dh-color-visual-blue: var(--dh-color-blue-700); @@ -83,4 +128,9 @@ --dh-color-visual-positive: var(--dh-color-green-1100); --dh-color-visual-negative: var(--dh-color-red-800); --dh-color-visual-notice: var(--dh-color-yellow-1200); + --dh-color-visual-info: var(--dh-color-cyan-1100); + + /* Wells */ + --dh-color-well-bg: hsla(var(--dh-color-gray-hue) 0% 92% 0.02); + --dh-color-well-border: hsla(var(--dh-color-gray-hue) 0% 94% 0.05); } diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css index f2b0354ae3..8415d6e293 100644 --- a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css +++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css @@ -77,7 +77,7 @@ --dh-color-column-miller-item-selected-hover-bg ); - /* Compact Tabs */ + /* Tabs */ --spectrum-tabs-compact-selection-indicator-color: var( --spectrum-global-color-blue-500 ); @@ -105,4 +105,110 @@ --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 ); + + /* Wells */ + --spectrum-well-background-color: var(--dh-color-well-bg); + --spectrum-well-border-color: var(--dh-color-well-border); + + /* PATCH: This is missing in Spectrum css */ + --spectrum-tray-background-color: var(--spectrum-global-color-gray-100); + + --react-spectrum-datepicker-placeholder-color: var( + --spectrum-global-color-gray-600 + ); /* 4.8:1 contrast ratio */ + + /* Accent */ + --spectrum-accent-background-color-default: var( + --dh-color-accent-background-default + ); + --spectrum-accent-background-color-hover: var( + --dh-color-accent-background-hover + ); + --spectrum-accent-background-color-down: var( + --dh-color-accent-background-down + ); + --spectrum-accent-background-color-key-focus: var( + --dh-color-accent-background-key-focus + ); + + /* Neutral */ + --spectrum-neutral-background-color-default: var(--dh-neutral-default-bg); + --spectrum-neutral-background-color-hover: var(--dh-neutral-hover-bg); + --spectrum-neutral-background-color-down: var(--dh-neutral-down-bg); + --spectrum-neutral-background-color-key-focus: var(--dh-neutral-key-focus-bg); + + --spectrum-neutral-subdued-background-color-default: var( + --dh-neutral-subdued-default-bg + ); + --spectrum-neutral-subdued-background-color-hover: var( + --dh-neutral-subdued-hover-bg + ); + --spectrum-neutral-subdued-background-color-down: var( + --dh-neutral-subdued-down-bg + ); + --spectrum-neutral-subdued-background-color-key-focus: var( + --dh-neutral-subdued-key-focus-bg + ); + + /* Negative */ + --spectrum-negative-background-color-default: var( + --dh-color-negative-default-bg + ); + --spectrum-negative-background-color-hover: var(--dh-color-negative-hover-bg); + --spectrum-negative-background-color-down: var(--dh-color-negative-down-bg); + --spectrum-negative-background-color-key-focus: var( + --dh-color-negative-key-focus-bg + ); + + /* Positive */ + --spectrum-positive-background-color-default: var( + --dh-color-positive-default-bg + ); + --spectrum-positive-background-color-hover: var(--dh-color-positive-hover-bg); + --spectrum-positive-background-color-down: var(--dh-color-positive-down-bg); + --spectrum-positive-background-color-key-focus: var( + --dh-color-positive-key-focus-bg + ); + + /* Informative */ + --spectrum-informative-background-color-default: var( + --dh-color-info-default-bg + ); + --spectrum-informative-background-color-hover: var(--dh-color-info-hover-bg); + --spectrum-informative-background-color-down: var(--dh-color-info-down-bg); + --spectrum-informative-background-color-key-focus: var( + --dh-color-info-key-focus-bg + ); + + /* Notice */ + --spectrum-notice-background-color-default: var(--dh-color-notice-default-bg); + --spectrum-notice-background-color-hover: var(--dh-color-notice-hover-bg); + --spectrum-notice-background-color-down: var(--dh-color-notice-down-bg); + --spectrum-notice-background-color-key-focus: var( + --dh-color-notice-key-focus-bg + ); + + /* Default Background */ + --spectrum-gray-background-color-default: var(--dh-color-default-gray-bg); + --spectrum-red-background-color-default: var(--dh-color-default-red-bg); + --spectrum-orange-background-color-default: var(--dh-color-default-orange-bg); + --spectrum-yellow-background-color-default: var(--dh-color-default-yellow-bg); + --spectrum-chartreuse-background-color-default: var( + --dh-color-default-chartreuse-bg + ); + --spectrum-celery-background-color-default: var(--dh-color-default-celery-bg); + --spectrum-green-background-color-default: var(--dh-color-default-green-bg); + --spectrum-seafoam-background-color-default: var( + --dh-color-default-seafoam-bg + ); + --spectrum-cyan-background-color-default: var(--dh-color-default-cyan-bg); + --spectrum-blue-background-color-default: var(--dh-color-default-blue-bg); + --spectrum-indigo-background-color-default: var(--dh-color-default-indigo-bg); + --spectrum-purple-background-color-default: var(--dh-color-default-purple-bg); + --spectrum-fuchsia-background-color-default: var( + --dh-color-default-fuchsia-bg + ); + --spectrum-magenta-background-color-default: var( + --dh-color-default-magenta-bg + ); } From 876ef5d937e828e4d22a355be72a941b95dbbba8 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 17 Oct 2023 16:36:24 -0500 Subject: [PATCH 03/17] Removed unused code #1543 --- .../src/styleguide/SpectrumComponents.module.css | 1 - .../src/theme/theme-dark/theme-dark-components.css | 14 -------------- .../theme-spectrum/theme-spectrum-alias.module.css | 8 -------- 3 files changed, 23 deletions(-) delete mode 100644 packages/code-studio/src/styleguide/SpectrumComponents.module.css diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.module.css b/packages/code-studio/src/styleguide/SpectrumComponents.module.css deleted file mode 100644 index 8b13789179..0000000000 --- a/packages/code-studio/src/styleguide/SpectrumComponents.module.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/components/src/theme/theme-dark/theme-dark-components.css b/packages/components/src/theme/theme-dark/theme-dark-components.css index 7cc2483d8a..ce3946b392 100644 --- a/packages/components/src/theme/theme-dark/theme-dark-components.css +++ b/packages/components/src/theme/theme-dark/theme-dark-components.css @@ -3,18 +3,4 @@ --dh-color-quickactions-bg: hsla(var(--dh-color-gray-hue), 0%, 11%, 0.9); --dh-color-radial-reaction: hsla(var(--dh-color-gray-hue), 0%, 92%, 0.6); --dh-color-colorpicker-border: hsla(var(--dh-color-gray-hue), 0%, 94%, 0.1); - - /* Miller Columns */ - --dh-color-column-miller-item-selected-bg: hsla( - calc(var(--dh-color-blue-hue) - 9deg), - 83%, - 54%, - 0.1 - ); - --dh-color-column-miller-item-selected-hover-bg: hsla( - calc(var(--dh-color-blue-hue) - 9deg), - 83%, - 54%, - 0.2 - ); } diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css index 8415d6e293..753596c72a 100644 --- a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css +++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css @@ -69,14 +69,6 @@ --spectrum-global-color-gray-50 ); - /* Miller Columns */ - --spectrum-miller-column-item-background-color-selected: var( - --dh-color-column-miller-item-selected-bg - ); - --spectrum-miller-column-item-background-color-selected-hover: var( - --dh-color-column-miller-item-selected-hover-bg - ); - /* Tabs */ --spectrum-tabs-compact-selection-indicator-color: var( --spectrum-global-color-blue-500 From 62f517fcfb37930e8f69d58bfb3c94c0cbc1a36b Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 17 Oct 2023 16:36:41 -0500 Subject: [PATCH 04/17] Spectrum samples #1543 --- .../src/styleguide/SpectrumComponents.tsx | 215 +++++++++--------- 1 file changed, 109 insertions(+), 106 deletions(-) diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx index d7428cdeb0..97b99641da 100644 --- a/packages/code-studio/src/styleguide/SpectrumComponents.tsx +++ b/packages/code-studio/src/styleguide/SpectrumComponents.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/style-prop-object */ -import React, { useMemo } from 'react'; +import React from 'react'; import { ActionButton, Button, @@ -13,122 +13,125 @@ import { TableBody, TableHeader, TableView, + View, Well, } from '@adobe/react-spectrum'; export function SpectrumComponents(): JSX.Element { - const samples = useMemo( - () => [ - { - title: 'Buttons', - content: ( - - - - - - - - - - - - - - - - - Normal - Quiet - Disabled - - ), - }, - { - title: 'Combobox', - content: ( - + return ( + <> +

Spectrum Components

+ + +

Buttons

+ + + +

Combobox

+ One Two Three - ), - }, - { - title: 'Table View', - content: ( - - - - Name - Age - - - City - State - - - - - John - 42 - San Francisco - CA - - - Jane - 38 - San Francisco - CA - - - Becky - 12 - San Francisco - CA - - - - ), - }, - { title: 'Wells', content: This is a well. }, - ], - [] - ); - - return ( - <> -

Spectrum Components

- - {samples.map(({ title, content }) => ( -
-

{title}

-
{content}
-
- ))} + + +

Table View

+ + + +

Wells

+ This is a well. + ); } export default SpectrumComponents; + +function ButtonsSample(): JSX.Element { + return ( + + + + + + + + + + + + + + + + + Normal + Quiet + Disabled + + ); +} + +function TableViewSample(): JSX.Element { + return ( + + + + Name + Age + + + City + State + + + + + John + 42 + San Francisco + CA + + + Jane + 38 + San Francisco + CA + + + Becky + 12 + San Francisco + CA + + + + ); +} From 730dbe569e1a42742c449ce718d45ee2fdf992de Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 17 Oct 2023 17:36:40 -0500 Subject: [PATCH 05/17] Spectrum samples #1543 --- .../src/styleguide/SpectrumComponents.tsx | 86 +++++++++++++++++-- 1 file changed, 79 insertions(+), 7 deletions(-) diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx index 97b99641da..8a3b46cc3d 100644 --- a/packages/code-studio/src/styleguide/SpectrumComponents.tsx +++ b/packages/code-studio/src/styleguide/SpectrumComponents.tsx @@ -4,35 +4,58 @@ import { ActionButton, Button, Cell, + Checkbox, + Content, + ContextualHelp, Column, ComboBox, + Form, + Heading, Grid, + Icon, + IllustratedMessage, Item, + minmax, repeat, Row, + Slider, + Switch, TableBody, TableHeader, TableView, + Text, + TextField, + ToggleButton, View, Well, } from '@adobe/react-spectrum'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { vsEmptyWindow, vsStarFull } from '@deephaven/icons'; export function SpectrumComponents(): JSX.Element { return ( <>

Spectrum Components

- +

Buttons

 -

Combobox

- - One - Two - Three - +

Forms

+ + + +

Icons

+ + + +

Illustrated Message

+ + + +

Contextual Help

+

Table View

@@ -99,6 +122,55 @@ function ButtonsSample(): JSX.Element { ); } +function ContextualHelpSample(): JSX.Element { + return ( + + Need help? + + + This is a helpful description of the thing you need help with. + + + + ); +} + +function FormsSample(): JSX.Element { + return ( +
+ + + + One + Two + Three + + Checkbox + +
+ ); +} + +function IconSample(): JSX.Element { + return ( + + + + ); +} + +function IllustratedMessageSample(): JSX.Element { + return ( + + + + + No results + Try another search + + ); +} + function TableViewSample(): JSX.Element { return ( From 095209e53945b7d3461ba8b75a585aa649efd611 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Wed, 18 Oct 2023 17:10:20 -0500 Subject: [PATCH 06/17] Added a menu for styleguide #1543 --- .../src/styleguide/GotoTopButton.tsx | 31 ++++ packages/code-studio/src/styleguide/Icons.tsx | 5 +- .../src/styleguide/SamplesMenu.tsx | 124 +++++++++++++ .../src/styleguide/SpectrumComponents.tsx | 170 ++++++++++-------- .../src/styleguide/StyleGuide.scss | 5 - .../code-studio/src/styleguide/StyleGuide.tsx | 47 +++-- .../code-studio/src/styleguide/Typography.tsx | 22 ++- .../code-studio/src/styleguide/constants.ts | 3 + 8 files changed, 303 insertions(+), 104 deletions(-) create mode 100644 packages/code-studio/src/styleguide/GotoTopButton.tsx create mode 100644 packages/code-studio/src/styleguide/SamplesMenu.tsx create mode 100644 packages/code-studio/src/styleguide/constants.ts diff --git a/packages/code-studio/src/styleguide/GotoTopButton.tsx b/packages/code-studio/src/styleguide/GotoTopButton.tsx new file mode 100644 index 0000000000..361e908b86 --- /dev/null +++ b/packages/code-studio/src/styleguide/GotoTopButton.tsx @@ -0,0 +1,31 @@ +import React, { useCallback } from 'react'; +import { Button, Icon } from '@adobe/react-spectrum'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { vsChevronUp } from '@deephaven/icons'; + +/** + * Button that scrolls to top of page and clears location hash. + */ +export function GotoTopButton(): JSX.Element { + const gotoTop = useCallback(() => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + + // Small delay to give scrolling a chance to move smoothly to top + setTimeout(() => { + window.location.hash = ''; + }, 500); + }, []); + + return ( + + ); +} + +export default GotoTopButton; diff --git a/packages/code-studio/src/styleguide/Icons.tsx b/packages/code-studio/src/styleguide/Icons.tsx index efd25ac9cf..ce2e3f0b32 100644 --- a/packages/code-studio/src/styleguide/Icons.tsx +++ b/packages/code-studio/src/styleguide/Icons.tsx @@ -6,6 +6,7 @@ import { dhSquareFilled, dhAddSmall, } from '@deephaven/icons'; +import { Icon } from '@adobe/react-spectrum'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button } from '@deephaven/components'; import PropTypes from 'prop-types'; @@ -106,7 +107,9 @@ function Icons(): React.ReactElement { }); }} > - + + + diff --git a/packages/code-studio/src/styleguide/SamplesMenu.tsx b/packages/code-studio/src/styleguide/SamplesMenu.tsx new file mode 100644 index 0000000000..e348ca4222 --- /dev/null +++ b/packages/code-studio/src/styleguide/SamplesMenu.tsx @@ -0,0 +1,124 @@ +import React, { Key, useCallback, useEffect, useState } from 'react'; +import { + ActionButton, + Icon, + Item, + Menu, + MenuTrigger, + Section, +} from '@adobe/react-spectrum'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { vsMenu } from '@deephaven/icons'; +import { + MENU_CATEGORY_DATA_ATTRIBUTE, + NO_MENU_DATA_ATTRIBUTE, + SPECTRUM_COMPONENT_SAMPLES_ID, +} from './constants'; + +interface Link { + id: string; + label: string; +} +type LinkCategory = { category: string; items: Link[] }; + +/** + * Metadata only div that provides a MENU_CATEGORY_DATA_ATTRIBUTE defining a + * menu category. These will be queried by the SamplesMenu component to build + * up the menu sections. + */ +export function SampleMenuCategory({ + 'data-menu-category': dataMenuCategory, +}: Record): JSX.Element { + return
; +} + +/** + * Creates a menu from h2, h3 elements on the page and assigns them each an id + * for hash navigation purposes. If the current hash matches one of the ids, it + * will scroll to that element. This handles the initial page load scenario. + * Menu sections are identified by divs with MENU_CATEGORY_DATA_ATTRIBUTE + * attributes. + */ +export function SamplesMenu(): JSX.Element { + const [links, setLinks] = useState([]); + + useEffect(() => { + let currentSection: LinkCategory = { + category: '', + items: [], + }; + const categories: LinkCategory[] = [currentSection]; + + const spectrumComponentsSamples = document.querySelector( + `#${SPECTRUM_COMPONENT_SAMPLES_ID}` + ); + + document + .querySelectorAll(`h2,h3,[${MENU_CATEGORY_DATA_ATTRIBUTE}]`) + .forEach(el => { + if (el.textContent == null || el.hasAttribute(NO_MENU_DATA_ATTRIBUTE)) { + return; + } + + if (el.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) { + currentSection = { + category: el.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '', + items: [], + }; + categories.push(currentSection); + + return; + } + + const id = `${ + spectrumComponentsSamples?.contains(el) === true ? 'spectrum-' : '' + }${el.textContent}` + .toLowerCase() + .replace(/\s/g, '-'); + + // eslint-disable-next-line no-param-reassign + el.id = id; + + currentSection.items.push({ id, label: el.textContent }); + + if (`#${id}` === window.location.hash) { + el.scrollIntoView(); + } + }); + + setLinks(categories); + }, []); + + const onAction = useCallback((key: Key) => { + const id = String(key); + const el = document.getElementById(id); + el?.scrollIntoView({ + behavior: 'smooth', + }); + + // Keep hash in sync for page reloads, but give some delay to allow smooth + // scrolling above + setTimeout(() => { + window.location.hash = id; + }, 500); + }, []); + + return ( + + + + + + + + {({ category, items }) => ( +
+ {({ id, label }) => {label}} +
+ )} + + + ); +} + +export default SamplesMenu; diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx index 8a3b46cc3d..697fb87f9c 100644 --- a/packages/code-studio/src/styleguide/SpectrumComponents.tsx +++ b/packages/code-studio/src/styleguide/SpectrumComponents.tsx @@ -30,43 +30,42 @@ import { Well, } from '@adobe/react-spectrum'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { vsEmptyWindow, vsStarFull } from '@deephaven/icons'; +import { dh } from '@deephaven/icons'; +import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants'; export function SpectrumComponents(): JSX.Element { return ( - <> -

Spectrum Components

+
+

+ Spectrum Components +

Buttons

 -

Forms

- - - -

Icons

- +

Collections

+ -

Illustrated Message

+

Content

 -

Contextual Help

- +

Forms

+ -

Table View

- +

Overlays

+

Wells

This is a well. - +
); } @@ -76,11 +75,12 @@ function ButtonsSample(): JSX.Element { return ( - + @@ -93,11 +93,17 @@ function ButtonsSample(): JSX.Element { + + - + @@ -110,28 +116,51 @@ function ButtonsSample(): JSX.Element { + + Normal - Quiet + + Quiet + + Static Black + Static White Disabled + + + Normal + Quiet + + Emphasized + + Static Black + Static White + Disabled ); } function ContextualHelpSample(): JSX.Element { return ( - - Need help? - - - This is a helpful description of the thing you need help with. - - - + <> + Contextual Help + + Need help? + + + This is a helpful description of the thing you need help with. + + + + ); } @@ -146,64 +175,61 @@ function FormsSample(): JSX.Element { Three Checkbox + + Switch ); } -function IconSample(): JSX.Element { - return ( - - - - ); -} - function IllustratedMessageSample(): JSX.Element { return ( - + - No results - Try another search + Illustrated Message + This is the content of the message. ); } function TableViewSample(): JSX.Element { return ( - - - - Name - Age - - - City - State - - - - - John - 42 - San Francisco - CA - - - Jane - 38 - San Francisco - CA - - - Becky - 12 - San Francisco - CA - - - + <> + + + + + Name + Age + + + City + State + + + + + John + 42 + San Francisco + CA + + + Jane + 38 + San Francisco + CA + + + Becky + 12 + San Francisco + CA + + + + ); } diff --git a/packages/code-studio/src/styleguide/StyleGuide.scss b/packages/code-studio/src/styleguide/StyleGuide.scss index 58d270d8e2..3f77914e82 100644 --- a/packages/code-studio/src/styleguide/StyleGuide.scss +++ b/packages/code-studio/src/styleguide/StyleGuide.scss @@ -125,11 +125,6 @@ h5.sub-title { } } - .icon, - .icon .svg-inline--fa { - font-size: 36px; - } - .card label { max-width: 100%; font-size: 0.8rem; diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx index e5ff92c47b..d4db65af1d 100644 --- a/packages/code-studio/src/styleguide/StyleGuide.tsx +++ b/packages/code-studio/src/styleguide/StyleGuide.tsx @@ -1,4 +1,6 @@ +/* eslint-disable react/jsx-props-no-spreading */ import React from 'react'; +import { Flex } from '@adobe/react-spectrum'; import { ContextMenuRoot } from '@deephaven/components'; import Alerts from './Alerts'; @@ -23,56 +25,63 @@ import DraggableLists from './DraggableLists'; import Navigations from './Navigations'; import ThemeColors from './ThemeColors'; import SpectrumComponents from './SpectrumComponents'; +import SamplesMenu, { SampleMenuCategory } from './SamplesMenu'; +import GotoTopButton from './GotoTopButton'; + +const stickyProps = { + position: 'sticky', + justifyContent: 'end', + zIndex: 1, +} as const; function StyleGuide(): React.ReactElement { return (
-
+

Deephaven UI Components

+ + + + + + + - + - - - - - - - - - - - - - - - - - +
); diff --git a/packages/code-studio/src/styleguide/Typography.tsx b/packages/code-studio/src/styleguide/Typography.tsx index 747e2ec79e..a9255d2f55 100644 --- a/packages/code-studio/src/styleguide/Typography.tsx +++ b/packages/code-studio/src/styleguide/Typography.tsx @@ -3,15 +3,23 @@ import React from 'react'; function Typography(): React.ReactElement { return (
-

Typograpy

+

Typography

-

h1. Unused

-

h2. Unused

-

h3. Unused

-

h4. Standard Heading

-
h5. Small Heading
-
h6. Unused
+

+ h1. Unused +

+

+ h2. Unused +

+

+ h3. Unused +

+

h4. Standard Heading

+
h5. Small Heading
+
+ h6. Unused +
diff --git a/packages/code-studio/src/styleguide/constants.ts b/packages/code-studio/src/styleguide/constants.ts new file mode 100644 index 0000000000..af5b342f11 --- /dev/null +++ b/packages/code-studio/src/styleguide/constants.ts @@ -0,0 +1,3 @@ +export const MENU_CATEGORY_DATA_ATTRIBUTE = 'data-menu-category'; +export const NO_MENU_DATA_ATTRIBUTE = 'data-no-menu'; +export const SPECTRUM_COMPONENT_SAMPLES_ID = 'spectrum-component-samples'; From 908531742ff1da126d92bcb48ca9078c8e35b0d6 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Wed, 18 Oct 2023 18:14:37 -0500 Subject: [PATCH 07/17] Updated comments and added transition #1543 --- .../src/styleguide/GotoTopButton.css | 19 +++++++++++++++ .../src/styleguide/GotoTopButton.tsx | 23 ++++++++++++++++--- .../src/styleguide/SamplesMenu.tsx | 11 +++++---- .../code-studio/src/styleguide/StyleGuide.tsx | 18 +++++++-------- .../src/theme/SpectrumThemeProvider.tsx | 7 ++++++ .../components/src/theme/theme-dark/index.ts | 23 ++++++++++++++++++- 6 files changed, 82 insertions(+), 19 deletions(-) create mode 100644 packages/code-studio/src/styleguide/GotoTopButton.css diff --git a/packages/code-studio/src/styleguide/GotoTopButton.css b/packages/code-studio/src/styleguide/GotoTopButton.css new file mode 100644 index 0000000000..681a8f8871 --- /dev/null +++ b/packages/code-studio/src/styleguide/GotoTopButton.css @@ -0,0 +1,19 @@ +/* + * GotoTopButton is only visible if user has scrolled down. Visibility attribute + * can't really make use of CSS transitions, so we use opacity instead. Including + * visibility for accessibility reasons. + */ +.goto-top-button { + visibility: visible; + opacity: 1; + transition: + opacity 300ms, + visibility 0s linear 0s; +} +html:not([data-scroll='true']) .goto-top-button { + visibility: hidden; + opacity: 0; + transition: + opacity 300ms, + visibility 0s linear 300ms; +} diff --git a/packages/code-studio/src/styleguide/GotoTopButton.tsx b/packages/code-studio/src/styleguide/GotoTopButton.tsx index 361e908b86..f51039c4f7 100644 --- a/packages/code-studio/src/styleguide/GotoTopButton.tsx +++ b/packages/code-studio/src/styleguide/GotoTopButton.tsx @@ -1,10 +1,11 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { Button, Icon } from '@adobe/react-spectrum'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { vsChevronUp } from '@deephaven/icons'; +import './GotoTopButton.css'; /** - * Button that scrolls to top of page and clears location hash. + * Button that scrolls to top of styleguide and clears location hash. */ export function GotoTopButton(): JSX.Element { const gotoTop = useCallback(() => { @@ -19,8 +20,24 @@ export function GotoTopButton(): JSX.Element { }, 500); }, []); + // Set data-scroll="true" on the html element when the user scrolls down below + // 120px. CSS uses this to only show the button when the user has scrolled. + useEffect(() => { + function onScroll() { + document.documentElement.dataset.scroll = String(window.scrollY > 120); + } + document.addEventListener('scroll', onScroll, { passive: true }); + return () => { + document.removeEventListener('scroll', onScroll); + }; + }, []); + return ( -