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

feat(Icon): add outline prop #1002

Merged
merged 4 commits into from
Mar 1, 2019
Merged

feat(Icon): add outline prop #1002

merged 4 commits into from
Mar 1, 2019

Conversation

layershifter
Copy link
Member

Fixes #793.

BREAKING CHANGES

This PR removes the iconVariables.outline variable and introduces the outline prop.

Before

<Icon name="calendar" variables={{ outline: true }} />

After

<Icon name="calendar" outline />

@codecov
Copy link

codecov bot commented Mar 1, 2019

Codecov Report

Merging #1002 into master will not change coverage.
The diff coverage is 0%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #1002   +/-   ##
=======================================
  Coverage   81.15%   81.15%           
=======================================
  Files         673      673           
  Lines        8653     8653           
  Branches     1528     1463   -65     
=======================================
  Hits         7022     7022           
  Misses       1616     1616           
  Partials       15       15
Impacted Files Coverage Δ
packages/react/src/components/Icon/Icon.tsx 83.33% <ø> (ø) ⬆️
.../src/themes/teams/components/Icon/iconVariables.ts 100% <ø> (ø) ⬆️
...act/src/themes/teams/components/Icon/iconStyles.ts 22.58% <0%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1bb1493...532da2e. Read the comment docs.

@@ -94,7 +94,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

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

Choose a reason for hiding this comment

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

copy

Added copy 😺

Copy link
Contributor

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

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

LGTM

{active ? '✔' : 'Copy'}
</button>
)}
value={`<Icon name="${maybeExportedAs}" ${isOutline ? 'outline' : ''} />`}
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants