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

Commit 7effe12

Browse files
authored
feat(Icon): Redlining icons (#441)
* showing filled & outline versions of icons * adding some new icons * modify existing icons * getting styles for Icon working with font icons & SVGs all lined up * remove size='big' from examples * add fallback for boxShadow if no color is supplied * fixed a bunch of icons to use correct filled/outline props * removing icons i added earlier. will add as needed * updating signature for getBorderedStyles * separating out the filled / outline icon versions in the icon set example * add changelog entry * fix ui where image customizations using icon for avatar was incorrect * keeping status as close to what it is now until for now
1 parent 4986628 commit 7effe12

27 files changed

+352
-279
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
3030
- Remove `Sizes` and `Weights` enums, use typed string in `Text` instead @jurokapsiar ([#446](https://github.com/stardust-ui/react/pull/446))
3131
- Fix React's version in `peerDependencies` @layershifter ([#452](https://github.com/stardust-ui/react/pull/452))
3232
- Added Dark and Contrast theme variables for `Header` @bcalvery ([#427](https://github.com/stardust-ui/react/pull/427))
33+
- Fix Teams Icons styles to match spec @codepretty ([#441](https://github.com/stardust-ui/react/pull/441))
3334
- Fix styles as functions in shorthands are not applied @mnajdova ([#470](https://github.com/stardust-ui/react/pull/470))
3435

3536
### Features

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
1010
 
1111
<Avatar
1212
renderImage={(Image, props, children) => (
13-
<Icon name="user" circular variables={{ color: 'blue' }} styles={{ fontSize: '16px' }} />
13+
<Icon name="user" circular variables={{ color: 'blue' }} styles={{ padding: '8px' }} />
1414
)}
1515
status={{ color: 'green', icon: 'check', title: 'Available' }}
1616
/>

docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Icon } from '@stardust-ui/react'
33

44
const IconExampleDisabled = () => (
55
<div>
6-
<Icon disabled name="umbrella" size="big" />
6+
<Icon disabled name="call-video" />
77
</div>
88
)
99

docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { Icon } from '@stardust-ui/react'
33

44
const IconExample = () => (
55
<div>
6-
<Icon name="umbrella" size="big" />
7-
<Icon name="chess rook" size="big" />
8-
<Icon name="book" size="big" />
9-
<Icon name="circle" size="big" />
6+
<Icon name="call-video" />
7+
<Icon name="chess rook" />
8+
<Icon name="book" />
9+
<Icon name="circle" />
1010
</div>
1111
)
1212

docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,44 @@
11
import React from 'react'
2-
import { Grid, Icon, Provider } from '@stardust-ui/react'
2+
import { Grid, Divider, Header, Icon, Provider } from '@stardust-ui/react'
3+
4+
const cellStyles = {
5+
margin: '10px 0',
6+
}
37

48
const IconSetExampleShorthand = () => (
59
<Provider.Consumer
610
render={theme => (
7-
<Grid columns={3} style={{ textAlign: 'center' }}>
8-
{Object.keys(theme.icons).map(name => (
9-
<span key={name}>
10-
<Icon name={name} />
11-
<br />
12-
<code>{name}</code>
13-
</span>
14-
))}
15-
</Grid>
11+
<>
12+
<div>
13+
<Divider>
14+
<Header as="h3" content="Regular" />
15+
</Divider>
16+
<Grid columns={4} style={{ textAlign: 'center' }}>
17+
{Object.keys(theme.icons).map(name => (
18+
<div key={name} style={cellStyles}>
19+
<Icon name={name} />
20+
<br />
21+
<code>{name}</code>
22+
</div>
23+
))}
24+
</Grid>
25+
</div>
26+
27+
<div>
28+
<Divider>
29+
<Header as="h3" content="Outline" />
30+
</Divider>
31+
<Grid columns={4} style={{ textAlign: 'center' }}>
32+
{Object.keys(theme.icons).map(name => (
33+
<div key={name + '-outline'} style={cellStyles}>
34+
<Icon name={name} variables={{ outline: true }} />
35+
<br />
36+
<code>{name} outline</code>
37+
</div>
38+
))}
39+
</Grid>
40+
</div>
41+
</>
1642
)}
1743
/>
1844
)

docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ const IconExampleBordered = () => (
77
<Icon name="book" bordered />
88
<Icon name="expand" bordered />
99
<Icon name="play" bordered />
10+
<Icon name="call" bordered />
11+
<Icon name="call-video" bordered />
1012
<Icon name="stop" bordered />
1113
<Icon name="calendar alternate outline" bordered />
1214
<Icon name="coffee" bordered />

docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ const IconExampleCircular = () => (
77
<Icon name="book" circular />
88
<Icon name="expand" circular />
99
<Icon name="play" circular />
10+
<Icon name="call" circular />
11+
<Icon name="call-video" circular />
1012
<Icon name="stop" circular />
1113
<Icon name="calendar alternate outline" circular />
1214
<Icon name="coffee" circular />
Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,35 @@
11
import React from 'react'
2-
import { Icon } from '@stardust-ui/react'
2+
import { Grid, Icon } from '@stardust-ui/react'
33

44
const IconExampleSize = () => (
5-
<div>
5+
<Grid rows={2} style={{ textAlign: 'center' }}>
66
<Icon name="home" size="micro" />
7+
<Icon name="call-video" size="micro" />
8+
79
<Icon name="home" size="mini" />
10+
<Icon name="call-video" size="mini" />
11+
812
<Icon name="home" size="tiny" />
13+
<Icon name="call-video" size="tiny" />
14+
915
<Icon name="home" size="small" />
16+
<Icon name="call-video" size="small" />
17+
1018
<Icon name="home" />
19+
<Icon name="call-video" />
20+
1121
<Icon name="home" size="large" />
22+
<Icon name="call-video" size="large" />
23+
1224
<Icon name="home" size="big" />
25+
<Icon name="call-video" size="big" />
26+
1327
<Icon name="home" size="huge" />
28+
<Icon name="call-video" size="huge" />
29+
1430
<Icon name="home" size="massive" />
15-
</div>
31+
<Icon name="call-video" size="massive" />
32+
</Grid>
1633
)
1734

1835
export default IconExampleSize

docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,27 @@ const IconExampleSpace = () => (
55
<div>
66
<div style={{ marginBottom: '1.2rem' }}>
77
<Label content="Default" />
8-
<Icon name="umbrella" size="big" />
8+
<Icon name="call-video" />
99
<Label content="Default" />
1010
</div>
1111
<div style={{ marginBottom: '1.2rem' }}>
1212
<Label content="Before" />
13-
<Icon name="umbrella" xSpacing="before" size="big" />
13+
<Icon name="call-video" xSpacing="before" />
1414
<Label content="Before" />
1515
</div>
1616
<div style={{ marginBottom: '1.2rem' }}>
1717
<Label content="After" />
18-
<Icon name="umbrella" xSpacing="after" size="big" />
18+
<Icon name="call-video" xSpacing="after" />
1919
<Label content="After" />
2020
</div>
2121
<div style={{ marginBottom: '1.2rem' }}>
2222
<Label content="Both" />
23-
<Icon name="umbrella" xSpacing="both" size="big" />
23+
<Icon name="call-video" xSpacing="both" />
2424
<Label content="Both" />
2525
</div>
2626
<div style={{ marginBottom: '1.2rem' }}>
2727
<Label content="None" />
28-
<Icon name="umbrella" xSpacing="none" size="big" />
28+
<Icon name="call-video" xSpacing="none" />
2929
<Label content="None" />
3030
</div>
3131
</div>

src/components/Status/Status.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ class Status extends UIComponent<Extendable<StatusProps>, any> {
6161
<ElementType {...rest} className={classes.root}>
6262
{Icon.create(icon, {
6363
defaultProps: {
64-
size: 'tiny',
64+
size: 'micro',
6565
styles: styles.icon,
6666
variables: variables.icon,
6767
xSpacing: 'none',

0 commit comments

Comments
 (0)