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

Adding support for semantic color for icons #1182

Merged
merged 9 commits into from
Oct 24, 2020
Merged

Adding support for semantic color for icons #1182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
285d82b
Adding support for semantic color for icons
LFDanLu Oct 20, 2020
4a3e70a
fixing dna ts file
LFDanLu Oct 20, 2020
cb54f9c
fix lint
LFDanLu Oct 20, 2020
d1d4488
updating workflow icon docs for color prop
LFDanLu Oct 20, 2020
6112368
Merge branch 'main' into issue_1159
LFDanLu Oct 20, 2020
f001364
adding flex and aria labels to icon docs
LFDanLu Oct 23, 2020
f2d9bf7
updating varsToTypeScript to exclude status and version
LFDanLu Oct 23, 2020
329cec7
Merge branch 'main' into issue_1159
LFDanLu Oct 23, 2020
45218fb
Update workflow-icons.mdx
devongovett Oct 23, 2020
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
5 changes: 3 additions & 2 deletions lib/varsToTypeScript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@ const customPropertyRegExp = /^--[A-z][\w-]*$/;
const patterns = [
[/^--spectrum-global-dimension-((?:static-)?size-.*)$/, 'DimensionValue'],
[/^--spectrum-alias-(?!.*text)(.*-(?:height|width))$/, 'DimensionValue'],
[/^--spectrum-global-color-(?!.*opacity)(.*)$/, 'ColorValue'],
[/^--spectrum-global-color-(?!.*opacity|status|version)(.*)$/, 'ColorValue'],
[/^--spectrum-semantic-(.*?)-color-default$/, 'ColorValue'],
[/^--spectrum-semantic-(.*?)-color-border$/, 'BorderColorValue'],
[/^--spectrum-alias-border-color-(.*)$/, 'BorderColorValue'],
[/^--spectrum-alias-background-color-(?!.*overlay|quickactions)(.*)$/, 'BackgroundColorValue'],
[/^--spectrum-semantic-(.*?)-color-icon$/, 'IconColorValue'],
[/^--spectrum-alias-border-size-(.*)$/, 'BorderSizeValue'],
[/^--spectrum-alias-border-radius-(.*)$/, 'BorderRadiusValue']
];
Expand Down Expand Up @@ -86,4 +87,4 @@ for (let type in types) {
ts = ts.trim() + ';\n\n';
}

fs.writeFileSync(`${__dirname}/../packages/@react-types/shared/src/dna.ts`, ts.trim() + '\n');
fs.writeFileSync(`${__dirname}/../packages/@react-types/shared/src/dna.d.ts`, ts.trim() + '\n');
36 changes: 28 additions & 8 deletions packages/@react-spectrum/icon/docs/workflow-icons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import workflowIconPackageData from '@spectrum-icons/workflow/package.json';
```jsx import
// import {Icon} from '@react-spectrum/icon';
// import IconTable from './IconTable';
import {Flex} from '@react-spectrum/layout';
```

---
Expand All @@ -39,7 +40,7 @@ Workflow icons are graphical metaphors or symbols that can be used to compliment
```tsx example
import Airplane from '@spectrum-icons/workflow/Airplane';

<Airplane />
<Airplane aria-label="Airplane" />
```

## Sizing
Expand All @@ -51,13 +52,32 @@ but if you use icons standalone, you can use the `size` prop to control the sizi
```tsx example
import Beaker from '@spectrum-icons/workflow/Beaker';

<Beaker size="XXS" />
<Beaker size="XS" />
<Beaker size="S" />
<Beaker size="M" />
<Beaker size="L" />
<Beaker size="XL" />
<Beaker size="XXL" />
<Flex gap="size-100">
<Beaker aria-label="XXS Beaker" size="XXS" />
<Beaker aria-label="XS Beaker" size="XS" />
<Beaker aria-label="S Beaker" size="S" />
<Beaker aria-label="M Beaker" size="M" />
<Beaker aria-label="L Beaker" size="L" />
<Beaker aria-label="XL Beaker" size="XL" />
<Beaker aria-label="XXL Beaker" size="XXL" />
</Flex>
```

## Coloring

Icons support four Spectrum semantic colors: `negative`, `notice`, `positive`, and `informative`. Icons within React Spectrum components typically
have their colors styled appropriately, but you can use the `color` prop to adjust the color of any standalone icons.

```tsx example
import Alert from '@spectrum-icons/workflow/Alert';

<Flex gap="size-100">
<Alert aria-label="Default Alert" />
<Alert aria-label="Negative Alert" color="negative" />
<Alert aria-label="Notification Alert" color="notice" />
<Alert aria-label="Positive Alert" color="positive" />
<Alert aria-label="Informative Alert" color="informative" />
</Flex>
```

## Labeling
Expand Down
12 changes: 8 additions & 4 deletions packages/@react-spectrum/icon/src/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
* governing permissions and limitations under the License.
*/

import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
import {classNames, useSlotProps, useStyleProps} from '@react-spectrum/utils';
import {AriaLabelingProps, DOMProps, IconColorValue, StyleProps} from '@react-types/shared';
import {classNames, iconStyleProps, useSlotProps, useStyleProps} from '@react-spectrum/utils';
import {filterDOMProps} from '@react-aria/utils';
import React, {ReactElement} from 'react';
import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
Expand All @@ -38,7 +38,11 @@ interface IconProps extends DOMProps, AriaLabelingProps, StyleProps {
/**
* Indicates whether the element is exposed to an accessibility API.
*/
'aria-hidden'?: boolean | 'false' | 'true'
'aria-hidden'?: boolean | 'false' | 'true',
/**
* Color of the Icon.
*/
color?: IconColorValue
}

export type IconPropsWithoutChildren = Omit<IconProps, 'children'>;
Expand All @@ -55,7 +59,7 @@ export function Icon(props: IconProps) {
'aria-hidden': ariaHidden,
...otherProps
} = props;
let {styleProps} = useStyleProps(otherProps);
let {styleProps} = useStyleProps(otherProps, iconStyleProps);

let provider = useProvider();
let scale = 'M';
Expand Down
11 changes: 10 additions & 1 deletion packages/@react-spectrum/utils/src/styleProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, ColorValue, DimensionValue, Direction, StyleProps, ViewStyleProps} from '@react-types/shared';
import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, ColorValue, DimensionValue, Direction, IconColorValue, StyleProps, ViewStyleProps} from '@react-types/shared';
import {CSSProperties, HTMLAttributes} from 'react';
import {useLocale} from '@react-aria/i18n';

Expand Down Expand Up @@ -110,6 +110,11 @@ const borderStyleProps = {
borderBottomWidth: 'borderBottomStyle'
};

export const iconStyleProps: StyleHandlers = {
...baseStyleProps,
color: ['color', iconColorValue]
};

function rtl(ltr: string, rtl: string) {
return (direction: Direction) => (
direction === 'rtl' ? rtl : ltr
Expand All @@ -134,6 +139,10 @@ function colorValue(value: ColorValue, type: ColorType = 'default') {
return `var(--spectrum-global-color-${value}, var(--spectrum-semantic-${value}-color-${type}))`;
}

function iconColorValue(value: IconColorValue) {
return `var(--spectrum-semantic-${value}-color-icon)`;
}

function backgroundColorValue(value: BackgroundColorValue) {
return `var(--spectrum-alias-background-color-${value}, ${colorValue(value as ColorValue, 'background')})`;
}
Expand Down
29 changes: 28 additions & 1 deletion packages/@react-types/shared/src/dna.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
* governing permissions and limitations under the License.
*/

// This file is generated by lib/varsToTypeScript.js! DO NOT EDIT.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

generated by running varsToTypeScript, not entirely sure if we wanna keep or not.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but why wasn't it there previously?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dunno, removed in this pull: #206. Not sure the reason for its removal, seems innocuous to me (helps others understand where the file came from)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, i'm definitely in favor of leaving it in if it is truly a generated file


/** See the [Styling docs](styling.html#dimension-values) for a visualization of these values. */
export type DimensionValue =
| 'size-0'
Expand Down Expand Up @@ -63,7 +65,9 @@ export type DimensionValue =
| 'static-size-100'
| 'static-size-115'
| 'static-size-125'
| 'static-size-130'
| 'static-size-150'
| 'static-size-160'
| 'static-size-175'
| 'static-size-200'
| 'static-size-225'
Expand Down Expand Up @@ -168,10 +172,13 @@ export type ColorValue =
| 'static-gray-700'
| 'static-gray-800'
| 'static-gray-900'
| 'static-blue-200'
| 'static-blue-300'
| 'static-blue-400'
| 'static-blue-500'
| 'static-blue-600'
| 'static-blue-700'
| 'static-blue-800'
| 'static-red-400'
| 'static-red-500'
| 'static-red-600'
Expand All @@ -184,18 +191,25 @@ export type ColorValue =
| 'static-green-500'
| 'static-green-600'
| 'static-green-700'
| 'static-celery-200'
| 'static-celery-300'
| 'static-celery-400'
| 'static-celery-500'
| 'static-celery-600'
| 'static-celery-700'
| 'static-chartreuse-300'
| 'static-chartreuse-400'
| 'static-chartreuse-500'
| 'static-chartreuse-600'
| 'static-chartreuse-700'
| 'static-yellow-200'
| 'static-yellow-300'
| 'static-yellow-400'
| 'static-yellow-500'
| 'static-yellow-600'
| 'static-yellow-700'
| 'static-magenta-200'
| 'static-magenta-300'
| 'static-magenta-400'
| 'static-magenta-500'
| 'static-magenta-600'
Expand All @@ -208,10 +222,15 @@ export type ColorValue =
| 'static-purple-500'
| 'static-purple-600'
| 'static-purple-700'
| 'static-purple-800'
| 'static-indigo-200'
| 'static-indigo-300'
| 'static-indigo-400'
| 'static-indigo-500'
| 'static-indigo-600'
| 'static-indigo-700'
| 'static-seafoam-200'
| 'static-seafoam-300'
| 'static-seafoam-400'
| 'static-seafoam-500'
| 'static-seafoam-600'
Expand All @@ -228,8 +247,10 @@ export type BorderColorValue =
| 'positive'
| 'informative'
| 'hover'
| 'focus'
| 'down'
| 'focus'
| 'mouse-focus'
| 'disabled'
| 'extralight'
| 'light'
| 'mid'
Expand All @@ -245,6 +266,12 @@ export type BackgroundColorValue =
| 'label-gray'
| ColorValue;

export type IconColorValue =
| 'negative'
| 'notice'
| 'positive'
| 'informative';

export type BorderSizeValue =
| 'thin'
| 'thick'
Expand Down