From 285d82b74733505b9410027a33822b407c8ca2a6 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 20 Oct 2020 09:59:56 -0700 Subject: [PATCH 1/7] Adding support for semantic color for icons --- lib/varsToTypeScript.js | 3 +- packages/@react-spectrum/icon/src/Icon.tsx | 12 +++-- .../@react-spectrum/utils/src/styleProps.ts | 11 +++- packages/@react-types/shared/src/dna.d.ts | 53 ++++++++++++++----- 4 files changed, 61 insertions(+), 18 deletions(-) diff --git a/lib/varsToTypeScript.js b/lib/varsToTypeScript.js index b7c5cabcfb9..a02d9762bf0 100644 --- a/lib/varsToTypeScript.js +++ b/lib/varsToTypeScript.js @@ -22,6 +22,7 @@ const patterns = [ [/^--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/src/Icon.tsx b/packages/@react-spectrum/icon/src/Icon.tsx index 6cb19c9000b..338656026ce 100644 --- 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; @@ -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 index 4284ef8f4d9..b2a25976cce 100644 --- 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 index 40733e40d0f..c840965a297 100644 --- a/packages/@react-types/shared/src/dna.d.ts +++ b/packages/@react-types/shared/src/dna.d.ts @@ -1,14 +1,16 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ +-/* +- * Copyright 2020 Adobe. All rights reserved. +- * This file is licensed to you under the Apache License, Version 2.0 (the "License"); +- * you may not use this file except in compliance with the License. You may obtain a copy +- * of the License at http://www.apache.org/licenses/LICENSE-2.0 +- * +- * Unless required by applicable law or agreed to in writing, software distributed under +- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +- * OF ANY KIND, either express or implied. See the License for the specific language +- * 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 = @@ -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' @@ -95,6 +99,8 @@ export type DimensionValue = | number; export type ColorValue = + | 'status' + | 'version' | 'celery-400' | 'celery-500' | 'celery-600' @@ -168,10 +174,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 +193,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 +224,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 +249,10 @@ export type BorderColorValue = | 'positive' | 'informative' | 'hover' - | 'focus' | 'down' + | 'focus' + | 'mouse-focus' + | 'disabled' | 'extralight' | 'light' | 'mid' @@ -245,6 +268,12 @@ export type BackgroundColorValue = | 'label-gray' | ColorValue; +export type IconColorValue = + | 'negative' + | 'notice' + | 'positive' + | 'informative'; + export type BorderSizeValue = | 'thin' | 'thick' From 4a3e70a5e02dfec4e3fb0f760b41c1d3a7d8e28f Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 20 Oct 2020 10:33:49 -0700 Subject: [PATCH 2/7] fixing dna ts file --- packages/@react-types/shared/src/dna.d.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/@react-types/shared/src/dna.d.ts b/packages/@react-types/shared/src/dna.d.ts index c840965a297..21ecae136b3 100644 --- a/packages/@react-types/shared/src/dna.d.ts +++ b/packages/@react-types/shared/src/dna.d.ts @@ -1,14 +1,14 @@ --/* -- * Copyright 2020 Adobe. All rights reserved. -- * This file is licensed to you under the Apache License, Version 2.0 (the "License"); -- * you may not use this file except in compliance with the License. You may obtain a copy -- * of the License at http://www.apache.org/licenses/LICENSE-2.0 -- * -- * Unless required by applicable law or agreed to in writing, software distributed under -- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -- * OF ANY KIND, either express or implied. See the License for the specific language -- * governing permissions and limitations under the License. -- */ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ // This file is generated by lib/varsToTypeScript.js! DO NOT EDIT. From cb54f9c89cd1416abe3e648ef15d789b244e844f Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 20 Oct 2020 10:39:00 -0700 Subject: [PATCH 3/7] fix lint --- packages/@react-spectrum/utils/src/styleProps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/utils/src/styleProps.ts b/packages/@react-spectrum/utils/src/styleProps.ts index b2a25976cce..572efab05d9 100644 --- a/packages/@react-spectrum/utils/src/styleProps.ts +++ b/packages/@react-spectrum/utils/src/styleProps.ts @@ -113,7 +113,7 @@ const borderStyleProps = { export const iconStyleProps: StyleHandlers = { ...baseStyleProps, color: ['color', iconColorValue] -} +}; function rtl(ltr: string, rtl: string) { return (direction: Direction) => ( From d1d44885fb672c7295ddbb4876017d0bd534c4ee Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 20 Oct 2020 11:19:52 -0700 Subject: [PATCH 4/7] updating workflow icon docs for color prop --- .../@react-spectrum/icon/docs/workflow-icons.mdx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/@react-spectrum/icon/docs/workflow-icons.mdx b/packages/@react-spectrum/icon/docs/workflow-icons.mdx index 4140329a4d4..4f10239edc5 100644 --- a/packages/@react-spectrum/icon/docs/workflow-icons.mdx +++ b/packages/@react-spectrum/icon/docs/workflow-icons.mdx @@ -60,6 +60,21 @@ import Beaker from '@spectrum-icons/workflow/Beaker'; ``` +## 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'; + + + + + + +``` + ## Labeling By default, icons are considered decorative, and are hidden from assistive technology. When used within a component like a button From f001364db1a1a804be63b0a577fc27b2c18a349e Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 23 Oct 2020 14:51:25 -0700 Subject: [PATCH 5/7] adding flex and aria labels to icon docs --- .../icon/docs/workflow-icons.mdx | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/@react-spectrum/icon/docs/workflow-icons.mdx b/packages/@react-spectrum/icon/docs/workflow-icons.mdx index 4f10239edc5..b9f45e8faaf 100644 --- 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'; - + ``` ## Sizing @@ -51,13 +52,15 @@ 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'; - - - - - - - + + + + + + + + + ``` ## Coloring @@ -68,11 +71,13 @@ have their colors styled appropriately, but you can use the `color` prop to adju ```tsx example import Alert from '@spectrum-icons/workflow/Alert'; - - - - - + + + + + + + ``` ## Labeling From f2d9bf7e74ce6f9c4c15ea397025f5e694dff329 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 23 Oct 2020 14:59:04 -0700 Subject: [PATCH 6/7] updating varsToTypeScript to exclude status and version --- lib/varsToTypeScript.js | 2 +- packages/@react-types/shared/src/dna.d.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/varsToTypeScript.js b/lib/varsToTypeScript.js index a02d9762bf0..54db821bc74 100644 --- a/lib/varsToTypeScript.js +++ b/lib/varsToTypeScript.js @@ -17,7 +17,7 @@ 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'], diff --git a/packages/@react-types/shared/src/dna.d.ts b/packages/@react-types/shared/src/dna.d.ts index 21ecae136b3..7a4b6f4c488 100644 --- a/packages/@react-types/shared/src/dna.d.ts +++ b/packages/@react-types/shared/src/dna.d.ts @@ -99,8 +99,6 @@ export type DimensionValue = | number; export type ColorValue = - | 'status' - | 'version' | 'celery-400' | 'celery-500' | 'celery-600' From 45218fbc5bda545d066e9c6126ee7dda9a8de18a Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 23 Oct 2020 15:11:42 -0700 Subject: [PATCH 7/7] Update workflow-icons.mdx --- packages/@react-spectrum/icon/docs/workflow-icons.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/icon/docs/workflow-icons.mdx b/packages/@react-spectrum/icon/docs/workflow-icons.mdx index b9f45e8faaf..0c06f8a9404 100644 --- a/packages/@react-spectrum/icon/docs/workflow-icons.mdx +++ b/packages/@react-spectrum/icon/docs/workflow-icons.mdx @@ -60,7 +60,7 @@ import Beaker from '@spectrum-icons/workflow/Beaker'; - + ``` ## Coloring