Skip to content

Commit 52545d1

Browse files
HerrTopiHerrTopi
committed
feat(ui-avatar,shared-types): add new ai color variant
1 parent c943d27 commit 52545d1

File tree

5 files changed

+201
-96
lines changed

5 files changed

+201
-96
lines changed

‎packages/shared-types/src/ComponentThemeVariables.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,21 +66,25 @@ export type AlertTheme = {
6666
}
6767

6868
export type AvatarTheme = {
69-
background: Colors['contrasts']['white1010']
69+
background: string
7070
borderWidthSmall: Border['widthSmall']
7171
borderWidthMedium: Border['widthMedium']
72-
borderColor: Colors['contrasts']['grey1214']
72+
borderColor: string
7373
boxShadowColor: string
7474
boxShadowBlur: string
7575
fontFamily: Typography['fontFamily']
7676
fontWeight: Typography['fontWeightBold']
77-
color: Colors['contrasts']['blue4570']
78-
colorShamrock: Colors['contrasts']['green4570']
79-
colorBarney: Colors['contrasts']['blue4570']
80-
colorCrimson: Colors['contrasts']['orange4570']
81-
colorFire: Colors['contrasts']['red4570']
82-
colorLicorice: Colors['contrasts']['grey125125']
83-
colorAsh: Colors['contrasts']['grey4570']
77+
color: string
78+
colorShamrock: string
79+
colorBarney: string
80+
colorCrimson: string
81+
colorFire: string
82+
colorLicorice: string
83+
colorAsh: string
84+
85+
aiTopGradientColor: string
86+
aiBottomGradientColor: string
87+
aiFontColor: string
8488
}
8589

8690
export type BadgeTheme = {

‎packages/ui-avatar/src/Avatar/README.md‎

Lines changed: 72 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,35 @@ type: example
1414
readonly: true
1515
---
1616
<div>
17-
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" />
18-
<Avatar name="Sarah Robinson" margin="0 small 0 0" />
19-
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" />
20-
<Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 small 0 0" />
21-
<Avatar name="Kyle Montgomery" shape="rectangle" margin="0 small 0 0" />
17+
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 space8 0 0" />
18+
<Avatar name="Sarah Robinson" margin="0 space8 0 0" />
19+
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 space8 0 0" />
20+
<Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 space8 0 0" />
21+
<Avatar name="Kyle Montgomery" shape="rectangle" margin="0 space8 0 0" />
2222
<Avatar name="Kyle Montgomery" renderIcon={<IconGroupLine />} shape="rectangle" />
2323
</div>
2424
```
2525

26+
### AI Avatar
27+
28+
There is a need for special, `ai avatars`. These have a specific look. You can achieve it the following way
29+
30+
```js
31+
---
32+
type: example
33+
readonly: true
34+
---
35+
<View display="block" padding="small medium" background="primary">
36+
<Avatar size="xx-small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
37+
<Avatar size="x-small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
38+
<Avatar size="small" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
39+
<Avatar size="medium" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
40+
<Avatar size="large" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
41+
<Avatar size="x-large" color="ai" renderIcon={IconAiSolid} margin="0 space8 0 0"/>
42+
<Avatar size="xx-large" color="ai" renderIcon={IconAiSolid} />
43+
</View>
44+
```
45+
2646
### Size
2747

2848
The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, and `xx-large`. If the `auto` prop is set, the avatar size will adjust according to the font-size
@@ -34,30 +54,30 @@ type: example
3454
---
3555
<div>
3656
<View display="block" padding="small medium">
37-
<Avatar name="Arthur C. Clarke" size="xx-small" margin="0 small 0 0" />
38-
<Avatar name="James Arias" size="x-small" margin="0 small 0 0" />
39-
<Avatar name="Charles Kimball" size="small" margin="0 small 0 0" />
40-
<Avatar name="Melissa Reed" size="medium" margin="0 small 0 0" />
41-
<Avatar name="Heather Wheeler" size="large" margin="0 small 0 0" />
42-
<Avatar name="David Herbert" size="x-large" margin="0 small 0 0" />
57+
<Avatar name="Arthur C. Clarke" size="xx-small" margin="0 space8 0 0" />
58+
<Avatar name="James Arias" size="x-small" margin="0 space8 0 0" />
59+
<Avatar name="Charles Kimball" size="small" margin="0 space8 0 0" />
60+
<Avatar name="Melissa Reed" size="medium" margin="0 space8 0 0" />
61+
<Avatar name="Heather Wheeler" size="large" margin="0 space8 0 0" />
62+
<Avatar name="David Herbert" size="x-large" margin="0 space8 0 0" />
4363
<Avatar name="Isaac Asimov" size="xx-large" />
4464
</View>
4565
<View display="block" padding="small medium" background="primary">
46-
<Avatar name="Arthur C. Clarke" size="xx-small" margin="0 small 0 0" src={avatarSquare} />
47-
<Avatar name="James Arias" size="x-small" margin="0 small 0 0" src={avatarSquare} />
48-
<Avatar name="Charles Kimball" size="small" margin="0 small 0 0" src={avatarSquare} />
49-
<Avatar name="Melissa Reed" size="medium" margin="0 small 0 0" src={avatarSquare} />
50-
<Avatar name="Heather Wheeler" size="large" margin="0 small 0 0" src={avatarSquare} />
51-
<Avatar name="David Herbert" size="x-large" margin="0 small 0 0" src={avatarSquare} />
66+
<Avatar name="Arthur C. Clarke" size="xx-small" margin="0 space8 0 0" src={avatarSquare} />
67+
<Avatar name="James Arias" size="x-small" margin="0 space8 0 0" src={avatarSquare} />
68+
<Avatar name="Charles Kimball" size="small" margin="0 space8 0 0" src={avatarSquare} />
69+
<Avatar name="Melissa Reed" size="medium" margin="0 space8 0 0" src={avatarSquare} />
70+
<Avatar name="Heather Wheeler" size="large" margin="0 space8 0 0" src={avatarSquare} />
71+
<Avatar name="David Herbert" size="x-large" margin="0 space8 0 0" src={avatarSquare} />
5272
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
5373
</View>
5474
<View display="block" padding="small medium">
55-
<Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" margin="0 small 0 0" />
56-
<Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" margin="0 small 0 0" />
57-
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" margin="0 small 0 0" />
58-
<Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" margin="0 small 0 0" />
59-
<Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" margin="0 small 0 0" />
60-
<Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" margin="0 small 0 0" />
75+
<Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" margin="0 space8 0 0" />
76+
<Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" margin="0 space8 0 0" />
77+
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" margin="0 space8 0 0" />
78+
<Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" margin="0 space8 0 0" />
79+
<Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" margin="0 space8 0 0" />
80+
<Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" margin="0 space8 0 0" />
6181
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} size="xx-large" />
6282
</View>
6383
</div>
@@ -73,21 +93,21 @@ type: example
7393
---
7494
<div>
7595
<View display="block" padding="small medium">
76-
<Avatar name="Arthur C. Clarke" margin="0 small 0 0" />
77-
<Avatar name="James Arias" color="shamrock" margin="0 small 0 0" />
78-
<Avatar name="Charles Kimball" color="barney" margin="0 small 0 0" />
79-
<Avatar name="Melissa Reed" color="crimson" margin="0 small 0 0" />
80-
<Avatar name="Heather Wheeler" color="fire" margin="0 small 0 0" />
81-
<Avatar name="David Herbert" color="licorice" margin="0 small 0 0" />
96+
<Avatar name="Arthur C. Clarke" margin="0 space8 0 0" />
97+
<Avatar name="James Arias" color="shamrock" margin="0 space8 0 0" />
98+
<Avatar name="Charles Kimball" color="barney" margin="0 space8 0 0" />
99+
<Avatar name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
100+
<Avatar name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
101+
<Avatar name="David Herbert" color="licorice" margin="0 space8 0 0" />
82102
<Avatar name="Isaac Asimov" color="ash" />
83103
</View>
84104
<View display="block" padding="small medium">
85-
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" margin="0 small 0 0" />
86-
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" margin="0 small 0 0" />
87-
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" margin="0 small 0 0" />
88-
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" margin="0 small 0 0" />
89-
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" margin="0 small 0 0" />
90-
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" margin="0 small 0 0" />
105+
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" margin="0 space8 0 0" />
106+
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" margin="0 space8 0 0" />
107+
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" margin="0 space8 0 0" />
108+
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" margin="0 space8 0 0" />
109+
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" margin="0 space8 0 0" />
110+
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" margin="0 space8 0 0" />
91111
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="ash" />
92112
</View>
93113
</div>
@@ -103,21 +123,21 @@ type: example
103123
---
104124
<div>
105125
<View display="block" padding="small medium" background="primary">
106-
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 small 0 0" />
107-
<Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 small 0 0" />
108-
<Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 small 0 0" />
109-
<Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 small 0 0" />
110-
<Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 small 0 0" />
111-
<Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 small 0 0" />
126+
<Avatar name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
127+
<Avatar name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
128+
<Avatar name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
129+
<Avatar name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
130+
<Avatar name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
131+
<Avatar name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
112132
<Avatar name="Isaac Asimov" color="ash" hasInverseColor />
113133
</View>
114134
<View display="block" padding="small medium" background="primary">
115-
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor margin="0 small 0 0" />
116-
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" hasInverseColor margin="0 small 0 0" />
117-
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" hasInverseColor margin="0 small 0 0" />
118-
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" hasInverseColor margin="0 small 0 0" />
119-
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" hasInverseColor margin="0 small 0 0" />
120-
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" hasInverseColor margin="0 small 0 0" />
135+
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor margin="0 space8 0 0" />
136+
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="shamrock" hasInverseColor margin="0 space8 0 0" />
137+
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="barney" hasInverseColor margin="0 space8 0 0" />
138+
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="crimson" hasInverseColor margin="0 space8 0 0" />
139+
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="fire" hasInverseColor margin="0 space8 0 0" />
140+
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="licorice" hasInverseColor margin="0 space8 0 0" />
121141
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="ash" hasInverseColor />
122142
</View>
123143
</div>
@@ -130,9 +150,9 @@ In case you need more control over the color, feel free to use the `themeOverrid
130150
type: example
131151
---
132152
<div>
133-
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ color: '#efb410' }} margin="0 small 0 0" />
134-
<Avatar name="Heather Wheeler" color="fire" themeOverride={{ colorFire: 'magenta' }} margin="0 small 0 0" />
135-
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ color: 'lightblue', background: 'black' }} margin="0 small 0 0" />
153+
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ color: '#efb410' }} margin="0 space8 0 0" />
154+
<Avatar name="Heather Wheeler" color="fire" themeOverride={{ colorFire: 'magenta' }} margin="0 space8 0 0" />
155+
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ color: 'lightblue', background: 'black' }} margin="0 space8 0 0" />
136156
<Avatar name="David Herbert" hasInverseColor color="fire" themeOverride={{ colorFire: '#efb410' }} />
137157
</div>
138158
```
@@ -146,8 +166,8 @@ By default only avatars without an image have borders but you can force it to `a
146166
type: example
147167
---
148168
<div>
149-
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" showBorder="always"/>
150-
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" showBorder="never"/>
169+
<Avatar name="Sarah Robinson" src={avatarSquare} margin="0 space8 0 0" showBorder="always"/>
170+
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 space8 0 0" showBorder="never"/>
151171
</div>
152172
```
153173

‎packages/ui-avatar/src/Avatar/props.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ type AvatarOwnProps = {
6868
| 'fire'
6969
| 'licorice'
7070
| 'ash'
71+
| 'ai'
7172
/**
7273
* In inverse color mode the background and text/icon colors are inverted
7374
*/
@@ -139,7 +140,8 @@ const propTypes: PropValidators<PropKeys> = {
139140
'crimson',
140141
'fire',
141142
'licorice',
142-
'ash'
143+
'ash',
144+
'ai'
143145
]),
144146
hasInverseColor: PropTypes.bool,
145147
showBorder: PropTypes.oneOf(['auto', 'always', 'never']),

0 commit comments

Comments
 (0)