Adding support for semantic color for icons (#1182)

adobe · Oct 24, 2020 · d6206f7 · d6206f7
1 parent a44c769
commit d6206f7
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 16 deletions.
diff --git a/lib/varsToTypeScript.js b/lib/varsToTypeScript.js
@@ -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']
 ];
@@ -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');
diff --git a/packages/@react-spectrum/icon/docs/workflow-icons.mdx b/packages/@react-spectrum/icon/docs/workflow-icons.mdx
@@ -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';
 ```
 
 ---
@@ -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
@@ -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

diff --git a/packages/@react-spectrum/icon/src/Icon.tsx b/packages/@react-spectrum/icon/src/Icon.tsx
@@ -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';
@@ -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'>;
@@ -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';

diff --git a/packages/@react-spectrum/utils/src/styleProps.ts b/packages/@react-spectrum/utils/src/styleProps.ts
@@ -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';
 
@@ -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
@@ -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')})`;
 }

diff --git a/packages/@react-types/shared/src/dna.d.ts b/packages/@react-types/shared/src/dna.d.ts
@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+// This file is generated by lib/varsToTypeScript.js! DO NOT EDIT.
+
 /** See the [Styling docs](styling.html#dimension-values) for a visualization of these values. */
 export type DimensionValue =
   | 'size-0'
@@ -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'
@@ -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'
@@ -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'
@@ -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'
@@ -228,8 +247,10 @@ export type BorderColorValue =
   | 'positive'
   | 'informative'
   | 'hover'
-  | 'focus'
   | 'down'
+  | 'focus'
+  | 'mouse-focus'
+  | 'disabled'
   | 'extralight'
   | 'light'
   | 'mid'
@@ -245,6 +266,12 @@ export type BackgroundColorValue =
   | 'label-gray'
   | ColorValue;
 
+export type IconColorValue =
+  | 'negative'
+  | 'notice'
+  | 'positive'
+  | 'informative';
+
 export type BorderSizeValue =
   | 'thin'
   | 'thick'