Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

feat(Icon): add outline prop #1002

Merged
layershifter merged 4 commits into from
Mar 1, 2019
Merged

feat(Icon): add outline prop #1002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ede8445
feat(Icon): add `outline` prop
layershifter Mar 1, 2019
634459f
add changelog entry
layershifter Mar 1, 2019
36aea22
Merge branches 'feat/icon-outline' and 'master' of https://github.com…
layershifter Mar 1, 2019
532da2e
add copy and fix filters
layershifter Mar 1, 2019
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
2 changes: 1 addition & 1 deletion docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
16 changes: 8 additions & 8 deletions docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const items = [
key: 'format',
icon: {
name: 'format',
variables: { outline: true },
outline: true,
},
accessibility: toolbarButtonBehavior,
'aria-label': 'Format Tool',
Expand All @@ -15,7 +15,7 @@ const items = [
key: 'paperclip',
icon: {
name: 'paperclip',
variables: { outline: true },
outline: true,
},
accessibility: toolbarButtonBehavior,
'aria-label': 'Paperclip Tool',
Expand All @@ -24,7 +24,7 @@ const items = [
key: 'emoji',
icon: {
name: 'emoji',
variables: { outline: true },
outline: true,
},
accessibility: toolbarButtonBehavior,
'aria-label': 'Emoji Tool',
Expand All @@ -33,7 +33,7 @@ const items = [
key: 'giphy',
icon: {
name: 'giphy',
variables: { outline: true },
outline: true,
},
accessibility: toolbarButtonBehavior,
'aria-label': 'Giphy tool',
Expand All @@ -42,7 +42,7 @@ const items = [
key: 'sticker',
icon: {
name: 'sticker',
variables: { outline: true },
outline: true,
},
accessibility: toolbarButtonBehavior,
'aria-label': 'Sticker Tool',
Expand All @@ -51,7 +51,7 @@ const items = [
key: 'meetup',
icon: {
name: 'video-camera-emphasis',
variables: { outline: true },
outline: true,
},
accessibility: toolbarButtonBehavior,
'aria-label': 'Meetup Tool',
Expand All @@ -60,7 +60,7 @@ const items = [
key: 'book',
icon: {
name: 'book',
variables: { outline: true },
outline: true,
},
accessibility: toolbarButtonBehavior,
'aria-label': 'Book Tool',
Expand All @@ -69,7 +69,7 @@ const items = [
key: 'menuButton',
icon: {
name: 'more',
variables: { outline: true },
outline: true,
},
accessibility: toolbarButtonBehavior,
'aria-label': 'More options',
Expand Down
22 changes: 17 additions & 5 deletions docs/src/prototypes/IconViewer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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' : ''} />`}
Copy link
Contributor

@kuzhelov kuzhelov Mar 1, 2019

Choose a reason for hiding this comment

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

👍

/>
</>
)
)
}
Expand Down Expand Up @@ -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 })}
/>
Expand Down Expand Up @@ -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>
Copy link
Contributor

@mnajdova mnajdova Mar 1, 2019

Choose a reason for hiding this comment

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

I don't like that here we are kind a suggesting that the outline is part of the name :\ Not related to your changes, but would rather see something like <Icon name=${name.replace(processedIconsNamePrefix, '')} outline /> or some object {name: ${name.replace(processedIconsNamePrefix, '')}, outline: true}, because I was asked multiple times by people about what the name like outline for example for the Icon's doesn't work. It is not obvious that the outline is something else...

Copy link
Member Author

@layershifter layershifter Mar 1, 2019

Choose a reason for hiding this comment

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

copy

Added copy 😺

<br />
Expand Down
3 changes: 2 additions & 1 deletion docs/src/prototypes/chatPane/chatPaneHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions packages/react/src/components/Icon/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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']),
Expand Down
8 changes: 4 additions & 4 deletions packages/react/src/themes/teams/components/Icon/iconStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}),
}
Expand Down
2 changes: 0 additions & 2 deletions packages/react/src/themes/teams/components/Icon/iconVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export interface IconVariables {
disabledColor: string

horizontalSpace: string
outline?: boolean
sizeModifier?: IconSizeModifier
}

Expand All @@ -33,5 +32,4 @@ export default (siteVars): IconVariables => ({
disabledColor: siteVars.gray06,

horizontalSpace: pxToRem(10),
outline: undefined,
})