feat(Icon): add outline prop (#1002)

* feat(Icon): add `outline` prop * add changelog entry * add copy and fix filters
microsoft · Mar 1, 2019 · 2903c31 · 2903c31
1 parent 1bb1493
commit 2903c31
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - Changed types of the slot's inside the `ListItem` component (`media`, `content`, `contentMedia`, `header`, `headerMedia` and `endMedia`) from `any` to `ShorthandValue` @mnajdova ([#886](https://github.com/stardust-ui/react/pull/886))
 - Changed class names of the slots inside the `ListItem` (`ItemLayout`'s classnames were replaced with `ListItem`'s) @mnajdova ([#886](https://github.com/stardust-ui/react/pull/886))
+- Replace the `outline` variable with the `outline` prop in `Icon` @layershifter ([#1002](https://github.com/stardust-ui/react/pull/1002))
 
 ### Fixes
 - Remove space between `Button.Group` items without `circular` prop @Bugaa92 ([#973](https://github.com/stardust-ui/react/pull/973))

diff --git a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx
@@ -31,7 +31,7 @@ const IconSetExampleShorthand = () => (
           <Grid columns={4} styles={{ textAlign: 'center' }}>
             {Object.keys(theme.icons).map(name => (
               <div key={`${name}-outline`} style={cellStyles}>
-                <Icon name={name} variables={{ outline: true }} />
+                <Icon name={name} outline />
                 <br />
                 <code>{name} outline</code>
               </div>

diff --git a/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx
@@ -12,9 +12,9 @@ const IconExampleColor = () => (
     </Flex>
     <Text content="INHERITED COLOR FOR OUTLINED ICONS:" weight="bold" />
     <Flex gap="gap.smaller" style={{ color: 'yellowgreen' }}>
-      <Icon name="calendar" bordered variables={{ outline: true }} />
-      <Icon name="call" bordered variables={{ outline: true }} />
-      <Icon name="call-video" bordered variables={{ outline: true }} />
+      <Icon name="calendar" bordered outline />
+      <Icon name="call" bordered outline />
+      <Icon name="call-video" bordered outline />
     </Flex>
     <Text weight="bold">
       USING THE <code>color</code> VARIABLE:

diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx b/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx
@@ -6,7 +6,7 @@ const items = [
     key: 'format',
     icon: {
       name: 'format',
-      variables: { outline: true },
+      outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Format Tool',
@@ -15,7 +15,7 @@ const items = [
     key: 'paperclip',
     icon: {
       name: 'paperclip',
-      variables: { outline: true },
+      outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Paperclip Tool',
@@ -24,7 +24,7 @@ const items = [
     key: 'emoji',
     icon: {
       name: 'emoji',
-      variables: { outline: true },
+      outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Emoji Tool',
@@ -33,7 +33,7 @@ const items = [
     key: 'giphy',
     icon: {
       name: 'giphy',
-      variables: { outline: true },
+      outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Giphy tool',
@@ -42,7 +42,7 @@ const items = [
     key: 'sticker',
     icon: {
       name: 'sticker',
-      variables: { outline: true },
+      outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Sticker Tool',
@@ -51,7 +51,7 @@ const items = [
     key: 'meetup',
     icon: {
       name: 'video-camera-emphasis',
-      variables: { outline: true },
+      outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Meetup Tool',
@@ -60,7 +60,7 @@ const items = [
     key: 'book',
     icon: {
       name: 'book',
-      variables: { outline: true },
+      outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'Book Tool',
@@ -69,7 +69,7 @@ const items = [
     key: 'menuButton',
     icon: {
       name: 'more',
-      variables: { outline: true },
+      outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'More options',

diff --git a/docs/src/prototypes/IconViewer/index.tsx b/docs/src/prototypes/IconViewer/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Provider, Grid, Divider, Header, Icon, Menu, Segment } from '@stardust-ui/react'
+import CopyToClipboard from 'docs/src/components/CopyToClipboard'
 import themeWithProcessedIcons from 'src/themes/teams/withProcessedIcons'
 import { TeamsProcessedSvgIconSpec } from 'src/themes/teams/components/Icon/svg/types'
 
@@ -13,9 +14,20 @@ const renderStardustIconName = (icon, isOutline = false) => {
   const maybeExportedAs = (icon as any).exportedAs
   return (
     maybeExportedAs && (
-      <code style={{ color: 'red' }}>
-        => {maybeExportedAs} {isOutline && 'outline'}
-      </code>
+      <>
+        <code style={{ color: 'red' }}>
+          => {maybeExportedAs} {isOutline && 'outline'}
+        </code>
+        <br />
+        <CopyToClipboard
+          render={(active, onClick) => (
+            <button onClick={onClick} style={{ fontSize: 10 }} title="Copy usage">
+              {active ? '✔' : 'Copy'}
+            </button>
+          )}
+          value={`<Icon name="${maybeExportedAs}" ${isOutline ? 'outline' : ''} />`}
+        />
+      </>
     )
   )
 }
@@ -53,8 +65,8 @@ class IconViewerExample extends React.Component<any, {}> {
           <Menu tabular styles={{ margin: '15px 0' }}>
             {Object.keys(this.iconFilters).map(filterName => (
               <Menu.Item
+                content={filterName}
                 key={filterName}
-                name={filterName}
                 active={this.state.filter === filterName}
                 onClick={() => this.setState({ filter: filterName })}
               />
@@ -94,7 +106,7 @@ class IconViewerExample extends React.Component<any, {}> {
                         .sort()
                         .map(name => (
                           <div key={`${name}-outline`} style={cellStyles}>
-                            <Icon name={name} variables={{ outline: true }} />
+                            <Icon name={name} outline />
                             <br />
                             <code>{name.replace(processedIconsNamePrefix, '')} outline</code>
                             <br />

diff --git a/docs/src/prototypes/chatPane/chatPaneHeader.tsx b/docs/src/prototypes/chatPane/chatPaneHeader.tsx
@@ -93,13 +93,14 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
           <Icon
             key={`${index}-${name}`}
             name={name}
+            outline
             tabIndex={0}
             styles={{
               fontWeight: 100,
               margin: 'auto',
               ...(!index && { margin: 'auto 1.6rem auto auto' }),
             }}
-            variables={siteVars => ({ color: siteVars.gray04, outline: true })}
+            variables={siteVars => ({ color: siteVars.gray04 })}
           />
         ))}
       </div>

diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx
@@ -37,6 +37,9 @@ export interface IconProps extends UIComponentProps, ColorComponentProps {
   /** Name of the icon. */
   name?: string
 
+  /** An icon can provide an outline variant. */
+  outline?: boolean
+
   /** An icon can be rotated by the degree specified as number. */
   rotate?: number
 
@@ -67,6 +70,7 @@ class Icon extends UIComponent<ReactProps<IconProps>, any> {
     circular: PropTypes.bool,
     disabled: PropTypes.bool,
     name: PropTypes.string,
+    outline: PropTypes.bool,
     rotate: PropTypes.number,
     size: customPropTypes.size,
     xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),

diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
@@ -139,19 +139,19 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
     }),
   }),
 
-  outlinePart: ({ variables: v }): ICSSInJSStyle => {
+  outlinePart: ({ props: p }): ICSSInJSStyle => {
     return {
       display: 'none',
 
-      ...(v.outline && {
+      ...(p.outline && {
         display: 'block',
       }),
     }
   },
 
-  filledPart: ({ variables: v }): ICSSInJSStyle => {
+  filledPart: ({ props: p }): ICSSInJSStyle => {
     return {
-      ...(v.outline && {
+      ...(p.outline && {
         display: 'none',
       }),
     }

diff --git a/packages/react/src/themes/teams/components/Icon/iconVariables.ts b/packages/react/src/themes/teams/components/Icon/iconVariables.ts
@@ -16,7 +16,6 @@ export interface IconVariables {
   disabledColor: string
 
   horizontalSpace: string
-  outline?: boolean
   sizeModifier?: IconSizeModifier
 }
 
@@ -33,5 +32,4 @@ export default (siteVars): IconVariables => ({
   disabledColor: siteVars.gray06,
 
   horizontalSpace: pxToRem(10),
-  outline: undefined,
 })