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

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 1 commit
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
7 changes: 6 additions & 1 deletion 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 {
// TODO: where's a better place to put this?
--dh-svg-inline-icon-size: 16px;
dsmmcken marked this conversation as resolved.
Show resolved Hide resolved
}

//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
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.

Loading