Skip to content

Commit 2aa8cef

Browse files
dsmmckendsmmcken
authored
feat: theme fontawesome icon size wrapped in spectrum icons (#1658)
Spectrum icons are 18px. However, our icons look best at 16px as they were designed on a 16px grid. This overrides the default spectrum icon size when wrapping a font-awesome icon inside a spectrum icon wrapper. Made overrides not a module, so it doesn't add hashes to the classes in overrides, as I have a feeling this file will be used to target specific classes and that wouldn't be desirable. Note: please suggest somewhere for that variable I added to live if you think that location sucks
1 parent 89f2be5 commit 2aa8cef

10 files changed

Lines changed: 109 additions & 95 deletions

File tree

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

Lines changed: 79 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
Well,
3232
} from '@adobe/react-spectrum';
3333
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
34-
import { dh } from '@deephaven/icons';
34+
import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
3535
import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
3636
import { sampleSectionIdAndClassesSpectrum } from './utils';
3737

@@ -75,78 +75,86 @@ export default SpectrumComponents;
7575

7676
function ButtonsSample(): JSX.Element {
7777
return (
78-
<Grid
79-
autoFlow="column"
80-
columnGap="size-250"
81-
rowGap="size-150"
82-
columns={repeat(4, 'size-2000')}
83-
rows={repeat(8, 'size-400')}
84-
>
85-
<label>Button style=&quot;outline&quot;</label>
86-
<Button variant="primary" style="outline">
87-
Primary
88-
</Button>
89-
<Button variant="secondary" style="outline">
90-
Secondary
91-
</Button>
92-
<Button variant="accent" style="outline">
93-
Accent
94-
</Button>
95-
<Button variant="negative" style="outline">
96-
Negative
97-
</Button>
98-
<Button variant="primary" staticColor="black" style="outline">
99-
Static Black
100-
</Button>
101-
<Button variant="primary" staticColor="white" style="outline">
102-
Static White
103-
</Button>
104-
<Button variant="primary" isDisabled style="outline">
105-
Disabled
106-
</Button>
78+
<>
79+
<ActionButton marginBottom="size-200">
80+
<Icon>
81+
<FontAwesomeIcon icon={dhTruck} />
82+
</Icon>
83+
<Text>Icon Button</Text>
84+
</ActionButton>
85+
<Grid
86+
autoFlow="column"
87+
columnGap="size-250"
88+
rowGap="size-150"
89+
columns={repeat(4, 'size-2000')}
90+
rows={repeat(8, 'size-400')}
91+
>
92+
<label>Button style=&quot;outline&quot;</label>
93+
<Button variant="primary" style="outline">
94+
Primary
95+
</Button>
96+
<Button variant="secondary" style="outline">
97+
Secondary
98+
</Button>
99+
<Button variant="accent" style="outline">
100+
Accent
101+
</Button>
102+
<Button variant="negative" style="outline">
103+
Negative
104+
</Button>
105+
<Button variant="primary" staticColor="black" style="outline">
106+
Static Black
107+
</Button>
108+
<Button variant="primary" staticColor="white" style="outline">
109+
Static White
110+
</Button>
111+
<Button variant="primary" isDisabled style="outline">
112+
Disabled
113+
</Button>
107114

108-
<label>Button style=&quot;fill&quot;</label>
109-
<Button variant="primary" style="fill">
110-
Primary
111-
</Button>
112-
<Button variant="secondary" style="fill">
113-
Secondary
114-
</Button>
115-
<Button variant="accent" style="fill">
116-
Accent
117-
</Button>
118-
<Button variant="negative" style="fill">
119-
Negative
120-
</Button>
121-
<Button variant="primary" staticColor="black" style="fill">
122-
Static Black
123-
</Button>
124-
<Button variant="primary" staticColor="white" style="fill">
125-
Static White
126-
</Button>
127-
<Button variant="primary" isDisabled style="fill">
128-
Disabled
129-
</Button>
115+
<label>Button style=&quot;fill&quot;</label>
116+
<Button variant="primary" style="fill">
117+
Primary
118+
</Button>
119+
<Button variant="secondary" style="fill">
120+
Secondary
121+
</Button>
122+
<Button variant="accent" style="fill">
123+
Accent
124+
</Button>
125+
<Button variant="negative" style="fill">
126+
Negative
127+
</Button>
128+
<Button variant="primary" staticColor="black" style="fill">
129+
Static Black
130+
</Button>
131+
<Button variant="primary" staticColor="white" style="fill">
132+
Static White
133+
</Button>
134+
<Button variant="primary" isDisabled style="fill">
135+
Disabled
136+
</Button>
130137

131-
<label>Action Button</label>
132-
<ActionButton>Normal</ActionButton>
133-
<ActionButton gridRow="span 3" isQuiet>
134-
Quiet
135-
</ActionButton>
136-
<ActionButton staticColor="black">Static Black</ActionButton>
137-
<ActionButton staticColor="white">Static White</ActionButton>
138-
<ActionButton isDisabled>Disabled</ActionButton>
138+
<label>Action Button</label>
139+
<ActionButton>Normal</ActionButton>
140+
<ActionButton gridRow="span 3" isQuiet>
141+
Quiet
142+
</ActionButton>
143+
<ActionButton staticColor="black">Static Black</ActionButton>
144+
<ActionButton staticColor="white">Static White</ActionButton>
145+
<ActionButton isDisabled>Disabled</ActionButton>
139146

140-
<label>Toggle Button</label>
141-
<ToggleButton>Normal</ToggleButton>
142-
<ToggleButton isQuiet>Quiet</ToggleButton>
143-
<ToggleButton gridRow="span 2" isEmphasized>
144-
Emphasized
145-
</ToggleButton>
146-
<ToggleButton staticColor="black">Static Black</ToggleButton>
147-
<ToggleButton staticColor="white">Static White</ToggleButton>
148-
<ToggleButton isDisabled>Disabled</ToggleButton>
149-
</Grid>
147+
<label>Toggle Button</label>
148+
<ToggleButton>Normal</ToggleButton>
149+
<ToggleButton isQuiet>Quiet</ToggleButton>
150+
<ToggleButton gridRow="span 2" isEmphasized>
151+
Emphasized
152+
</ToggleButton>
153+
<ToggleButton staticColor="black">Static Black</ToggleButton>
154+
<ToggleButton staticColor="white">Static White</ToggleButton>
155+
<ToggleButton isDisabled>Disabled</ToggleButton>
156+
</Grid>
157+
</>
150158
);
151159
}
152160

@@ -188,7 +196,7 @@ function IllustratedMessageSample(): JSX.Element {
188196
return (
189197
<IllustratedMessage>
190198
<Icon size="XL">
191-
<FontAwesomeIcon icon={dh.vsEmptyWindow} />
199+
<FontAwesomeIcon icon={vsEmptyWindow} />
192200
</Icon>
193201
<Heading>Illustrated Message</Heading>
194202
<Content>This is the content of the message.</Content>

‎packages/components/scss/BaseStyleSheet.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
@import './custom.scss';
44
@import 'bootstrap/scss/bootstrap';
55

6+
:root {
7+
--dh-svg-inline-icon-size: 16px;
8+
--scrollbar-color: 255, 255, 255;
9+
}
10+
611
//Various non-variable css overides
712
//Overide default size from 16px to 14px. We need density.
813
html {
@@ -14,7 +19,7 @@ html {
1419
// and look best at that size. Default icon size back to 16px
1520
// vertical alignment changed to best match icon set against 14px text
1621
.svg-inline--fa {
17-
font-size: 16px;
22+
font-size: var(--dh-svg-inline-icon-size);
1823
vertical-align: -3px;
1924
}
2025

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

659-
/* stylelint-disable no-descending-specificity */
660-
:root {
661-
--scrollbar-color: 255, 255, 255;
662-
}
663-
/* stylelint-enable no-descending-specificity */
664-
665664
// used in inverted color sections, like light modals
666665
.theme-bg-light {
667666
--scrollbar-color: 0, 0, 0;

‎packages/components/src/__snapshots__/SpectrumUtils.test.ts.snap‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ exports[`themeDHDefault should merge Spectrum default with DH custom styles 1`]
55
"dark": {
66
"spectrum--darkest": "spectrum--darkest_256eeb",
77
"theme-spectrum-alias": "theme-spectrum-alias",
8-
"theme-spectrum-overrides": "theme-spectrum-overrides",
98
"theme-spectrum-palette": "theme-spectrum-palette",
109
},
1110
"global": {
@@ -23,7 +22,6 @@ exports[`themeDHDefault should merge Spectrum default with DH custom styles 1`]
2322
"light": {
2423
"spectrum--light": "spectrum--light_a40724",
2524
"theme-spectrum-alias": "theme-spectrum-alias",
26-
"theme-spectrum-overrides": "theme-spectrum-overrides",
2725
"theme-spectrum-palette": "theme-spectrum-palette",
2826
},
2927
"medium": {

‎packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
99
./theme-light-palette.css?raw
1010
</style>
1111
<div
12-
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"
12+
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"
1313
dir="ltr"
1414
lang="en-US"
1515
style="isolation: isolate; color-scheme: light;"
@@ -39,7 +39,7 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
3939
data-theme-key="themeA"
4040
/>
4141
<div
42-
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"
42+
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"
4343
dir="ltr"
4444
lang="en-US"
4545
style="isolation: isolate; color-scheme: light;"
@@ -56,7 +56,7 @@ exports[`ThemeProvider setSelectedThemeKey: null should change selected theme: d
5656
<body>
5757
<div>
5858
<div
59-
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"
59+
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"
6060
dir="ltr"
6161
lang="en-US"
6262
style="isolation: isolate; color-scheme: light;"
@@ -73,7 +73,7 @@ exports[`ThemeProvider setSelectedThemeKey: null should change selected theme: t
7373
<body>
7474
<div>
7575
<div
76-
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"
76+
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"
7777
dir="ltr"
7878
lang="en-US"
7979
style="isolation: isolate; color-scheme: light;"
@@ -103,7 +103,7 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
103103
data-theme-key="themeA"
104104
/>
105105
<div
106-
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"
106+
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"
107107
dir="ltr"
108108
lang="en-US"
109109
style="isolation: isolate; color-scheme: light;"
@@ -130,7 +130,7 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
130130
./theme-dark-components.css?raw
131131
</style>
132132
<div
133-
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"
133+
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"
134134
dir="ltr"
135135
lang="en-US"
136136
style="isolation: isolate; color-scheme: light;"
@@ -147,7 +147,7 @@ exports[`ThemeProvider should load themes based on preload data or default: null
147147
<body>
148148
<div>
149149
<div
150-
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"
150+
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"
151151
dir="ltr"
152152
lang="en-US"
153153
style="isolation: isolate; color-scheme: light;"
@@ -164,7 +164,7 @@ exports[`ThemeProvider should load themes based on preload data or default: null
164164
<body>
165165
<div>
166166
<div
167-
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"
167+
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"
168168
dir="ltr"
169169
lang="en-US"
170170
style="isolation: isolate; color-scheme: light;"

‎packages/components/src/theme/theme-spectrum/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import palette from './theme-spectrum-palette.module.css';
22
import alias from './theme-spectrum-alias.module.css';
3-
import overrides from './theme-spectrum-overrides.module.css';
3+
4+
// don't import as module, so that classes can be used directly
5+
import './theme-spectrum-overrides.css';
46

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

2223
export default themeSpectrumClassesCommon;

‎packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
[class^='spectrum'] {
2+
/* --font-family-sans-serif is defined in Bootstrap's _root.scss. We want
3+
Spectrum to use the same default font-family */
4+
font-family: var(--font-family-sans-serif) !important;
5+
}
6+
7+
.svg-inline--fa[class*='spectrum-Icon--sizeS'] {
8+
/*
9+
Resize fontawesome icons used inside a spectrum icon wrapper to match
10+
our icon size. Spectrum icons are 18px by default, but our icons are built on a 16px grid.
11+
*/
12+
--spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size);
13+
}

‎packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.module.css‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎tests/styleguide.spec.ts-snapshots/spectrum-buttons-chromium-linux.png‎

1.89 KB
Loading

‎tests/styleguide.spec.ts-snapshots/spectrum-buttons-firefox-linux.png‎

3.07 KB
Loading

‎tests/styleguide.spec.ts-snapshots/spectrum-buttons-webkit-linux.png‎

1.85 KB
Loading

0 commit comments

Comments
 (0)
⚡