From 0f4ddc10629e6c7c9eeb42ea38d98e4f3da7db77 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 22 Oct 2018 12:32:59 -0700 Subject: [PATCH 1/5] redlining colors for icons --- .../States/IconExampleDisabled.shorthand.tsx | 3 -- .../Usage/IconButtonExample.shorthand.tsx | 17 +++++++ .../examples/components/Icon/Usage/index.tsx | 5 +++ .../Variations/IconExampleColor.shorthand.tsx | 13 ++++++ .../components/Icon/Variations/index.tsx | 5 +++ .../teams/components/Icon/iconStyles.ts | 45 +++++++++---------- .../teams/components/Icon/iconVariables.ts | 8 ++-- 7 files changed, 65 insertions(+), 31 deletions(-) create mode 100644 docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx create mode 100644 docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx diff --git a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx index 587fee7e9e..395d07095f 100644 --- a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx +++ b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx @@ -4,9 +4,6 @@ import { Icon } from '@stardust-ui/react' const IconExampleDisabled = () => (
- - -
) diff --git a/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx new file mode 100644 index 0000000000..612f95c0e7 --- /dev/null +++ b/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { Icon, Button, Text } from '@stardust-ui/react' + +const IconExampleButton = () => ( +
+ + +
+) + +export default IconExampleButton diff --git a/docs/src/examples/components/Icon/Usage/index.tsx b/docs/src/examples/components/Icon/Usage/index.tsx index 33eff7d26e..04b3491c41 100644 --- a/docs/src/examples/components/Icon/Usage/index.tsx +++ b/docs/src/examples/components/Icon/Usage/index.tsx @@ -9,6 +9,11 @@ const Usage = () => ( description="You can access all icon names available in the current theme." examplePath="components/Icon/Usage/IconSetExample" /> + ) diff --git a/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx new file mode 100644 index 0000000000..231e3bb8ae --- /dev/null +++ b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { Icon } from '@stardust-ui/react' + +const IconExampleColor = () => ( +
+ + + + +
+) + +export default IconExampleColor diff --git a/docs/src/examples/components/Icon/Variations/index.tsx b/docs/src/examples/components/Icon/Variations/index.tsx index 0cb86f7721..1f80f5d24f 100644 --- a/docs/src/examples/components/Icon/Variations/index.tsx +++ b/docs/src/examples/components/Icon/Variations/index.tsx @@ -9,6 +9,11 @@ const Variations = () => ( description="An icon can have space before, after or on both sides. 'none' value removes the default space around the icon." examplePath="components/Icon/Variations/IconExampleSpace" /> + ): IC const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName) return { + display: 'inline-block', fontFamily, - width: '1.18em', - fontStyle: 'normal', - fontWeight: 400, - textDecoration: 'inherit', textAlign: 'center', - - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale', - backfaceVisibility: 'hidden', - lineHeight: 1, '::before': { content, - boxSizing: 'inherit', - background: '0 0', }, } } @@ -67,7 +57,6 @@ const getBorderedStyles = (isFontBased, circular, borderColor, color): ICSSInJSS return { ...getPaddedStyle(isFontBased), - // TODO: "black" here should actually match the Icon's fill or text color boxShadow: `0 0 0 0.05em ${borderColor || color || 'black'} inset`, ...(circular ? { borderRadius: '50%' } : {}), } @@ -87,34 +76,42 @@ const iconStyles: ComponentSlotStylesInput = { }): ICSSInJSStyle => { const iconSpec = theme.icons[name] const isFontBased = !iconSpec || !iconSpec.isSvg + const iconColor = v.color || 'currentColor' return { + backgroundColor: v.backgroundColor, display: 'inline-block', fontSize: getSize(size), - + margin: v.margin, + speak: 'none', + verticalAlign: 'middle', + overflow: 'hidden', width: '1em', height: '1em', ...(isFontBased && getFontStyles(name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())), - ...(isFontBased && { color: v.color }), - backgroundColor: v.backgroundColor, + ...(isFontBased && { + color: iconColor, - opacity: 1, - margin: v.margin, + ...(disabled && { + color: v.disabledColor, + }), + }), - speak: 'none', + ...(!isFontBased && { + fill: iconColor, - verticalAlign: 'middle', - overflow: 'hidden', + ...(disabled && { + fill: v.disabledColor, + }), + }), ...getXSpacingStyles(xSpacing, v.horizontalSpace), ...((bordered || v.borderColor || circular) && getBorderedStyles(isFontBased, circular, v.borderColor, v.color)), - - ...(disabled && disabledStyle), } }, @@ -122,8 +119,8 @@ const iconStyles: ComponentSlotStylesInput = { g: getSvgStyle('g'), - /* additional SVG styles for different paths could be added/used in the same way */ path: getSvgStyle('path'), + secondaryPath: getSvgStyle('secondaryPath'), } diff --git a/src/themes/teams/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts index f222c2534e..11132ed0f3 100644 --- a/src/themes/teams/components/Icon/iconVariables.ts +++ b/src/themes/teams/components/Icon/iconVariables.ts @@ -9,15 +9,15 @@ export interface IconVariables { horizontalSpace: string margin: string secondaryColor: string + disabledColor: string } -export default (): IconVariables => ({ +export default (siteVars): IconVariables => ({ color: undefined, - // TODO move initial variable discovery to JSON files - // similar to how components have an info.json file backgroundColor: undefined, borderColor: undefined, horizontalSpace: pxToRem(10), margin: '0 0.25em 0 0', - secondaryColor: 'white', + secondaryColor: siteVars.white, + disabledColor: siteVars.gray06, }) From 3b47304c0b30a7685a604aa56142b92926768251 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 22 Oct 2018 12:45:41 -0700 Subject: [PATCH 2/5] showing disabled button with icon in Icon Usages section --- .../components/Icon/Usage/IconButtonExample.shorthand.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx index 612f95c0e7..83bb7387b0 100644 --- a/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx +++ b/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx @@ -9,7 +9,11 @@ const IconExampleButton = () => ( + ) From 8cba566ca76a38744356626fcdab65dd3b3862a7 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 23 Oct 2018 14:15:01 -0700 Subject: [PATCH 3/5] removing the icon button example from Usages in Icon component. will add this as a Usage example in the Button component in a future PR --- .../Usage/IconButtonExample.shorthand.tsx | 21 ------------------- .../examples/components/Icon/Usage/index.tsx | 5 ----- 2 files changed, 26 deletions(-) delete mode 100644 docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx diff --git a/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx deleted file mode 100644 index 83bb7387b0..0000000000 --- a/docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { Icon, Button, Text } from '@stardust-ui/react' - -const IconExampleButton = () => ( -
- - - -
-) - -export default IconExampleButton diff --git a/docs/src/examples/components/Icon/Usage/index.tsx b/docs/src/examples/components/Icon/Usage/index.tsx index 04b3491c41..33eff7d26e 100644 --- a/docs/src/examples/components/Icon/Usage/index.tsx +++ b/docs/src/examples/components/Icon/Usage/index.tsx @@ -9,11 +9,6 @@ const Usage = () => ( description="You can access all icon names available in the current theme." examplePath="components/Icon/Usage/IconSetExample" /> - ) From 694c5726bbe1592beae1689281c34aeece876c7b Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 24 Oct 2018 11:19:42 -0700 Subject: [PATCH 4/5] didn't mean to remove this in this PR. will remove in my next Icon PR dealing with spacing/padding --- src/themes/teams/components/Icon/iconStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index 113e62493a..5238a2745d 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -29,10 +29,10 @@ const getFontStyles = (iconName: string, themeIcon?: ResultOf): IC const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName) return { - display: 'inline-block', fontFamily, textAlign: 'center', lineHeight: 1, + width: '1.18em', '::before': { content, From 073e00d8a9c465e5de5bdb23a28b269ec69b8279 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 24 Oct 2018 11:24:34 -0700 Subject: [PATCH 5/5] add changelog entry for icon color updates --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b1187aae05..cc4613501b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Fix build on Windows @jurokapsiar ([#383](https://github.com/stardust-ui/react/pull/383)) - Add warning for rendering components outside provider @Bugaa92 ([#378](https://github.com/stardust-ui/react/pull/378)) +- Fix icon colors for Teams theme @codepretty ([#384](https://github.com/stardust-ui/react/pull/384)) ### Features - Export `mergeThemes` @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))