Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: theme fontawesome icon size wrapped in spectrum icons #1658

Merged
merged 3 commits into from
Nov 27, 2023
Merged

feat: theme fontawesome icon size wrapped in spectrum icons #1658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8535174
feat: theme fontawesome icon size wrapped in spectrum icons
dsmmcken Nov 24, 2023
fc7cf4b
update failing test
dsmmcken Nov 27, 2023
5c2f742
Merge remote-tracking branch 'origin/main' into dmckenzie_spectrum_ic…
dsmmcken Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 79 additions & 71 deletions packages/code-studio/src/styleguide/SpectrumComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
Well,
} from '@adobe/react-spectrum';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { dh } from '@deephaven/icons';
import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
import { sampleSectionIdAndClassesSpectrum } from './utils';

Expand Down Expand Up @@ -75,78 +75,86 @@ export default SpectrumComponents;

function ButtonsSample(): JSX.Element {
return (
<Grid
autoFlow="column"
columnGap="size-250"
rowGap="size-150"
columns={repeat(4, 'size-2000')}
rows={repeat(8, 'size-400')}
>
<label>Button style=&quot;outline&quot;</label>
<Button variant="primary" style="outline">
Primary
</Button>
<Button variant="secondary" style="outline">
Secondary
</Button>
<Button variant="accent" style="outline">
Accent
</Button>
<Button variant="negative" style="outline">
Negative
</Button>
<Button variant="primary" staticColor="black" style="outline">
Static Black
</Button>
<Button variant="primary" staticColor="white" style="outline">
Static White
</Button>
<Button variant="primary" isDisabled style="outline">
Disabled
</Button>
<>
<ActionButton marginBottom="size-200">
<Icon>
<FontAwesomeIcon icon={dhTruck} />
</Icon>
<Text>Icon Button</Text>
</ActionButton>
<Grid
autoFlow="column"
columnGap="size-250"
rowGap="size-150"
columns={repeat(4, 'size-2000')}
rows={repeat(8, 'size-400')}
>
<label>Button style=&quot;outline&quot;</label>
<Button variant="primary" style="outline">
Primary
</Button>
<Button variant="secondary" style="outline">
Secondary
</Button>
<Button variant="accent" style="outline">
Accent
</Button>
<Button variant="negative" style="outline">
Negative
</Button>
<Button variant="primary" staticColor="black" style="outline">
Static Black
</Button>
<Button variant="primary" staticColor="white" style="outline">
Static White
</Button>
<Button variant="primary" isDisabled style="outline">
Disabled
</Button>

<label>Button style=&quot;fill&quot;</label>
<Button variant="primary" style="fill">
Primary
</Button>
<Button variant="secondary" style="fill">
Secondary
</Button>
<Button variant="accent" style="fill">
Accent
</Button>
<Button variant="negative" style="fill">
Negative
</Button>
<Button variant="primary" staticColor="black" style="fill">
Static Black
</Button>
<Button variant="primary" staticColor="white" style="fill">
Static White
</Button>
<Button variant="primary" isDisabled style="fill">
Disabled
</Button>
<label>Button style=&quot;fill&quot;</label>
<Button variant="primary" style="fill">
Primary
</Button>
<Button variant="secondary" style="fill">
Secondary
</Button>
<Button variant="accent" style="fill">
Accent
</Button>
<Button variant="negative" style="fill">
Negative
</Button>
<Button variant="primary" staticColor="black" style="fill">
Static Black
</Button>
<Button variant="primary" staticColor="white" style="fill">
Static White
</Button>
<Button variant="primary" isDisabled style="fill">
Disabled
</Button>

<label>Action Button</label>
<ActionButton>Normal</ActionButton>
<ActionButton gridRow="span 3" isQuiet>
Quiet
</ActionButton>
<ActionButton staticColor="black">Static Black</ActionButton>
<ActionButton staticColor="white">Static White</ActionButton>
<ActionButton isDisabled>Disabled</ActionButton>
<label>Action Button</label>
<ActionButton>Normal</ActionButton>
<ActionButton gridRow="span 3" isQuiet>
Quiet
</ActionButton>
<ActionButton staticColor="black">Static Black</ActionButton>
<ActionButton staticColor="white">Static White</ActionButton>
<ActionButton isDisabled>Disabled</ActionButton>

<label>Toggle Button</label>
<ToggleButton>Normal</ToggleButton>
<ToggleButton isQuiet>Quiet</ToggleButton>
<ToggleButton gridRow="span 2" isEmphasized>
Emphasized
</ToggleButton>
<ToggleButton staticColor="black">Static Black</ToggleButton>
<ToggleButton staticColor="white">Static White</ToggleButton>
<ToggleButton isDisabled>Disabled</ToggleButton>
</Grid>
<label>Toggle Button</label>
<ToggleButton>Normal</ToggleButton>
<ToggleButton isQuiet>Quiet</ToggleButton>
<ToggleButton gridRow="span 2" isEmphasized>
Emphasized
</ToggleButton>
<ToggleButton staticColor="black">Static Black</ToggleButton>
<ToggleButton staticColor="white">Static White</ToggleButton>
<ToggleButton isDisabled>Disabled</ToggleButton>
</Grid>
</>
);
}

Expand Down Expand Up @@ -188,7 +196,7 @@ function IllustratedMessageSample(): JSX.Element {
return (
<IllustratedMessage>
<Icon size="XL">
<FontAwesomeIcon icon={dh.vsEmptyWindow} />
<FontAwesomeIcon icon={vsEmptyWindow} />
</Icon>
<Heading>Illustrated Message</Heading>
<Content>This is the content of the message.</Content>
Expand Down
13 changes: 6 additions & 7 deletions packages/components/scss/BaseStyleSheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
@import './custom.scss';
@import 'bootstrap/scss/bootstrap';

:root {
--dh-svg-inline-icon-size: 16px;
dsmmcken marked this conversation as resolved.
Show resolved Hide resolved
--scrollbar-color: 255, 255, 255;
}

//Various non-variable css overides
//Overide default size from 16px to 14px. We need density.
html {
Expand All @@ -14,7 +19,7 @@ html {
// and look best at that size. Default icon size back to 16px
// vertical alignment changed to best match icon set against 14px text
.svg-inline--fa {
font-size: 16px;
font-size: var(--dh-svg-inline-icon-size);
vertical-align: -3px;
}

Expand Down Expand Up @@ -656,12 +661,6 @@ input[type='number']::-webkit-inner-spin-button {
background: rgba(var(--scrollbar-color), 0.35);
}

/* stylelint-disable no-descending-specificity */
:root {
--scrollbar-color: 255, 255, 255;
}
/* stylelint-enable no-descending-specificity */

// used in inverted color sections, like light modals
.theme-bg-light {
--scrollbar-color: 0, 0, 0;
Expand Down
2 changes: 0 additions & 2 deletions packages/components/src/__snapshots__/SpectrumUtils.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ exports[`themeDHDefault should merge Spectrum default with DH custom styles 1`]
"dark": {
"spectrum--darkest": "spectrum--darkest_256eeb",
"theme-spectrum-alias": "theme-spectrum-alias",
"theme-spectrum-overrides": "theme-spectrum-overrides",
"theme-spectrum-palette": "theme-spectrum-palette",
},
"global": {
Expand All @@ -23,7 +22,6 @@ exports[`themeDHDefault should merge Spectrum default with DH custom styles 1`]
"light": {
"spectrum--light": "spectrum--light_a40724",
"theme-spectrum-alias": "theme-spectrum-alias",
"theme-spectrum-overrides": "theme-spectrum-overrides",
"theme-spectrum-palette": "theme-spectrum-palette",
},
"medium": {
Expand Down
16 changes: 8 additions & 8 deletions packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
./theme-light-palette.css?raw
</style>
<div
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
dir="ltr"
lang="en-US"
style="isolation: isolate; color-scheme: light;"
Expand Down Expand Up @@ -39,7 +39,7 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
data-theme-key="themeA"
/>
<div
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
dir="ltr"
lang="en-US"
style="isolation: isolate; color-scheme: light;"
Expand All @@ -56,7 +56,7 @@ exports[`ThemeProvider setSelectedThemeKey: null should change selected theme: d
<body>
<div>
<div
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
dir="ltr"
lang="en-US"
style="isolation: isolate; color-scheme: light;"
Expand All @@ -73,7 +73,7 @@ exports[`ThemeProvider setSelectedThemeKey: null should change selected theme: t
<body>
<div>
<div
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
dir="ltr"
lang="en-US"
style="isolation: isolate; color-scheme: light;"
Expand Down Expand Up @@ -103,7 +103,7 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
data-theme-key="themeA"
/>
<div
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
dir="ltr"
lang="en-US"
style="isolation: isolate; color-scheme: light;"
Expand All @@ -130,7 +130,7 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
./theme-dark-components.css?raw
</style>
<div
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
dir="ltr"
lang="en-US"
style="isolation: isolate; color-scheme: light;"
Expand All @@ -147,7 +147,7 @@ exports[`ThemeProvider should load themes based on preload data or default: null
<body>
<div>
<div
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
dir="ltr"
lang="en-US"
style="isolation: isolate; color-scheme: light;"
Expand All @@ -164,7 +164,7 @@ exports[`ThemeProvider should load themes based on preload data or default: null
<body>
<div>
<div
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias theme-spectrum-overrides spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
class="spectrum_b37d53 spectrum_2a241c spectrum--light_a40724 theme-spectrum-palette theme-spectrum-alias spectrum--large_c40598 spectrum_9e130c spectrum--medium_9e130c spectrum--large_9e130c spectrum--darkest_9e130c spectrum--dark_9e130c spectrum--light_9e130c spectrum--lightest_9e130c"
dir="ltr"
lang="en-US"
style="isolation: isolate; color-scheme: light;"
Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/theme/theme-spectrum/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import palette from './theme-spectrum-palette.module.css';
import alias from './theme-spectrum-alias.module.css';
import overrides from './theme-spectrum-overrides.module.css';

// don't import as module, so that classes can be used directly
import './theme-spectrum-overrides.css';

/**
* Spectrum theme variables are exported as a map of css class names. The keys
Expand All @@ -16,7 +18,6 @@ import overrides from './theme-spectrum-overrides.module.css';
export const themeSpectrumClassesCommon = {
...palette,
...alias,
...overrides,
};

export default themeSpectrumClassesCommon;
13 changes: 13 additions & 0 deletions packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
[class^='spectrum'] {
/* --font-family-sans-serif is defined in Bootstrap's _root.scss. We want
Spectrum to use the same default font-family */
font-family: var(--font-family-sans-serif) !important;
}

.svg-inline--fa[class*='spectrum-Icon--sizeS'] {
/*
Resize fontawesome icons used inside a spectrum icon wrapper to match
our icon size. Spectrum icons are 18px by default, but our icons are built on a 16px grid.
*/
--spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size);
}
5 changes: 0 additions & 5 deletions packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.module.css
View file
Open in desktop

This file was deleted.

Binary file modified tests/styleguide.spec.ts-snapshots/spectrum-buttons-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/styleguide.spec.ts-snapshots/spectrum-buttons-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/styleguide.spec.ts-snapshots/spectrum-buttons-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading