Skip to content

Commit a429312

Browse files
matyasfmatyasf
committed
refactor(ui-spinner,ui-scripts,ui-avatar): add new tokens, fix Spacing build error, fix docs key warning
1 parent 9630b7f commit a429312

File tree

25 files changed

+1586
-759
lines changed

25 files changed

+1586
-759
lines changed

‎packages/__docs__/src/Nav/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,7 @@ class Nav extends Component<NavProps, NavState> {
499499
const themes = this.renderThemes()
500500
const icons = (
501501
<NavToggle
502+
key="Icons button"
502503
summary="Icons"
503504
onToggle={(e: any) => this.handleInternalNavigation('icons', e)}
504505
href="icons"

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

Lines changed: 81 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,22 @@ readonly: true
1616

1717
<div>
1818
<View display="block" padding="small medium" background="primary">
19-
<Avatar name="Arthur C. Clarke" margin="spacing.spaceXs" />
20-
<Avatar name="James Arias" color="accent2" margin="spacing.spaceXs" />
21-
<Avatar name="Charles Kimball" color="accent3" margin="spacing.spaceXs" />
22-
<Avatar name="Melissa Reed" color="accent4" margin="spacing.spaceXs" />
23-
<Avatar name="Heather Wheeler" color="accent5" margin="spacing.spaceXs" />
24-
<Avatar name="David Herbert" color="accent6" margin="spacing.spaceXs" />
25-
<Avatar name="Isaac Asimov" color="accent1" margin="spacing.spaceXs" />
19+
<Avatar name="Arthur C. Clarke" />
20+
<Avatar name="James Arias" color="accent2" />
21+
<Avatar name="Charles Kimball" color="accent3" />
22+
<Avatar name="Melissa Reed" color="accent4" />
23+
<Avatar name="Heather Wheeler" color="accent5" />
24+
<Avatar name="David Herbert" color="accent6" />
25+
<Avatar name="Isaac Asimov" color="accent1" />
2626
</View>
2727
<View display="block" padding="small medium" background="primary">
28-
<Avatar name="Arthur C. Clarke" hasInverseColor margin="spacing.spaceXs" />
29-
<Avatar name="James Arias" color="accent2" hasInverseColor margin="spacing.spaceXs" />
30-
<Avatar name="Charles Kimball" color="accent3" hasInverseColor margin="spacing.spaceXs" />
31-
<Avatar name="Melissa Reed" color="accent4" hasInverseColor margin="spacing.spaceXs" />
32-
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor margin="spacing.spaceXs" />
33-
<Avatar name="David Herbert" color="accent6" hasInverseColor margin="spacing.spaceXs" />
34-
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor margin="spacing.spaceXs" />
28+
<Avatar name="Arthur C. Clarke" hasInverseColor />
29+
<Avatar name="James Arias" color="accent2" hasInverseColor />
30+
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
31+
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
32+
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
33+
<Avatar name="David Herbert" color="accent6" hasInverseColor />
34+
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
3535
</View>
3636
</div>
3737
```
@@ -46,13 +46,13 @@ type: example
4646
readonly: true
4747
---
4848
<View display="block" padding="small medium" background="primary">
49-
<Avatar size="xx-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} margin="spacing.spaceXs" />
50-
<Avatar size="x-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} margin="spacing.spaceXs" />
51-
<Avatar size="small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} margin="spacing.spaceXs" />
52-
<Avatar size="medium" color="ai" name="AI Assistant" renderIcon={IconAiSolid} margin="spacing.spaceXs" />
53-
<Avatar size="large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} margin="spacing.spaceXs" />
54-
<Avatar size="x-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} margin="spacing.spaceXs" />
55-
<Avatar size="xx-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} margin="spacing.spaceXs" />
49+
<Avatar size="xx-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
50+
<Avatar size="x-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
51+
<Avatar size="small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
52+
<Avatar size="medium" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
53+
<Avatar size="large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
54+
<Avatar size="x-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
55+
<Avatar size="xx-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
5656
</View>
5757
```
5858

@@ -66,31 +66,31 @@ type: example
6666
---
6767
<div>
6868
<View display="block" padding="small medium">
69-
<Avatar name="Arthur C. Clarke" size="xx-small" margin="spacing.spaceXs" />
70-
<Avatar name="James Arias" size="x-small" margin="spacing.spaceXs" />
71-
<Avatar name="Charles Kimball" size="small" margin="spacing.spaceXs" />
72-
<Avatar name="Melissa Reed" size="medium" margin="spacing.spaceXs" />
73-
<Avatar name="Heather Wheeler" size="large" margin="spacing.spaceXs" />
74-
<Avatar name="David Herbert" size="x-large" margin="spacing.spaceXs" />
75-
<Avatar name="Isaac Asimov" size="xx-large" margin="spacing.spaceXs" />
69+
<Avatar name="Arthur C. Clarke" size="xx-small" />
70+
<Avatar name="James Arias" size="x-small" />
71+
<Avatar name="Charles Kimball" size="small" />
72+
<Avatar name="Melissa Reed" size="medium" />
73+
<Avatar name="Heather Wheeler" size="large" />
74+
<Avatar name="David Herbert" size="x-large" />
75+
<Avatar name="Isaac Asimov" size="xx-large" />
7676
</View>
7777
<View display="block" padding="small medium" background="primary">
78-
<Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} margin="spacing.spaceXs" />
79-
<Avatar name="James Arias" size="x-small" src={avatarSquare} margin="spacing.spaceXs" />
80-
<Avatar name="Charles Kimball" size="small" src={avatarSquare} margin="spacing.spaceXs" />
81-
<Avatar name="Melissa Reed" size="medium" src={avatarSquare} margin="spacing.spaceXs" />
82-
<Avatar name="Heather Wheeler" size="large" src={avatarSquare} margin="spacing.spaceXs" />
83-
<Avatar name="David Herbert" size="x-large" src={avatarSquare} margin="spacing.spaceXs" />
84-
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} margin="spacing.spaceXs" />
78+
<Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} />
79+
<Avatar name="James Arias" size="x-small" src={avatarSquare} />
80+
<Avatar name="Charles Kimball" size="small" src={avatarSquare} />
81+
<Avatar name="Melissa Reed" size="medium" src={avatarSquare} />
82+
<Avatar name="Heather Wheeler" size="large" src={avatarSquare} />
83+
<Avatar name="David Herbert" size="x-large" src={avatarSquare} />
84+
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
8585
</View>
8686
<View display="block" padding="small medium">
87-
<Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" margin="spacing.spaceXs" />
88-
<Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" margin="spacing.spaceXs" />
89-
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" margin="spacing.spaceXs" />
90-
<Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" margin="spacing.spaceXs" />
91-
<Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" margin="spacing.spaceXs" />
92-
<Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" margin="spacing.spaceXs" />
93-
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} size="xx-large" margin="spacing.spaceXs" />
87+
<Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" />
88+
<Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" />
89+
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" />
90+
<Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" />
91+
<Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" />
92+
<Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" />
93+
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} size="xx-large" />
9494
</View>
9595
</div>
9696
```
@@ -105,22 +105,22 @@ type: example
105105
---
106106
<div>
107107
<View display="block" padding="small medium">
108-
<Avatar name="Arthur C. Clarke" margin="spacing.spaceXs" />
109-
<Avatar name="James Arias" color="accent2" margin="spacing.spaceXs" />
110-
<Avatar name="Charles Kimball" color="accent3" margin="spacing.spaceXs" />
111-
<Avatar name="Melissa Reed" color="accent4" margin="spacing.spaceXs" />
112-
<Avatar name="Heather Wheeler" color="accent5" margin="spacing.spaceXs" />
113-
<Avatar name="David Herbert" color="accent6" margin="spacing.spaceXs" />
114-
<Avatar name="Isaac Asimov" color="accent1" margin="spacing.spaceXs" />
108+
<Avatar name="Arthur C. Clarke" />
109+
<Avatar name="James Arias" color="accent2" />
110+
<Avatar name="Charles Kimball" color="accent3" />
111+
<Avatar name="Melissa Reed" color="accent4" />
112+
<Avatar name="Heather Wheeler" color="accent5" />
113+
<Avatar name="David Herbert" color="accent6" />
114+
<Avatar name="Isaac Asimov" color="accent1" />
115115
</View>
116116
<View display="block" padding="small medium">
117-
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" margin="spacing.spaceXs" />
118-
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="accent2" margin="spacing.spaceXs" />
119-
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="accent3" margin="spacing.spaceXs" />
120-
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="accent4" margin="spacing.spaceXs" />
121-
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="accent5" margin="spacing.spaceXs" />
122-
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="accent6" margin="spacing.spaceXs" />
123-
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="accent1" margin="spacing.spaceXs" />
117+
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" />
118+
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="accent2" />
119+
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="accent3" />
120+
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="accent4" />
121+
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="accent5" />
122+
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="accent6" />
123+
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="accent1" />
124124
</View>
125125
</div>
126126
```
@@ -135,22 +135,22 @@ type: example
135135
---
136136
<div>
137137
<View display="block" padding="small medium" background="primary">
138-
<Avatar name="Arthur C. Clarke" hasInverseColor margin="spacing.spaceXs" />
139-
<Avatar name="James Arias" color="accent2" hasInverseColor margin="spacing.spaceXs" />
140-
<Avatar name="Charles Kimball" color="accent3" hasInverseColor margin="spacing.spaceXs" />
141-
<Avatar name="Melissa Reed" color="accent4" hasInverseColor margin="spacing.spaceXs" />
142-
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor margin="spacing.spaceXs" />
143-
<Avatar name="David Herbert" color="accent6" hasInverseColor margin="spacing.spaceXs" />
144-
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor margin="spacing.spaceXs" />
138+
<Avatar name="Arthur C. Clarke" hasInverseColor margin="general.spaceXs" />
139+
<Avatar name="James Arias" color="accent2" hasInverseColor />
140+
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
141+
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
142+
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
143+
<Avatar name="David Herbert" color="accent6" hasInverseColor />
144+
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
145145
</View>
146146
<View display="block" padding="small medium" background="primary">
147-
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor margin="spacing.spaceXs" />
148-
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="accent2" hasInverseColor margin="spacing.spaceXs" />
149-
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="accent3" hasInverseColor margin="spacing.spaceXs" />
150-
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="accent4" hasInverseColor margin="spacing.spaceXs" />
151-
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="accent5" hasInverseColor margin="spacing.spaceXs" />
152-
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="accent6" hasInverseColor margin="spacing.spaceXs" />
153-
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="accent1" hasInverseColor margin="spacing.spaceXs" />
147+
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor />
148+
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="accent2" hasInverseColor />
149+
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="accent3" hasInverseColor />
150+
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="accent4" hasInverseColor />
151+
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="accent5" hasInverseColor />
152+
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="accent6" hasInverseColor />
153+
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="accent1" hasInverseColor />
154154
</View>
155155
</div>
156156
```
@@ -162,10 +162,10 @@ In case you need more control over the color, feel free to use the `themeOverrid
162162
type: example
163163
---
164164
<div>
165-
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ accent1TextColor: '#efb410' }} margin="spacing.spaceXs" />
166-
<Avatar name="Heather Wheeler" color="accent5" themeOverride={{ accent5TextColor: 'magenta' }} margin="spacing.spaceXs" />
167-
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ textOnColor: 'lightblue', backgroundColor: 'black' }} margin="spacing.spaceXs" />
168-
<Avatar name="David Herbert" hasInverseColor color="accent5" themeOverride={{ accent5BackgroundColor: '#efb410' }} margin="spacing.spaceXs" />
165+
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ accent1TextColor: '#efb410' }} />
166+
<Avatar name="Heather Wheeler" color="accent5" themeOverride={{ accent5TextColor: 'magenta' }} />
167+
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ textOnColor: 'lightblue', backgroundColor: 'black' }} />
168+
<Avatar name="David Herbert" hasInverseColor color="accent5" themeOverride={{ accent5BackgroundColor: '#efb410' }} />
169169
</div>
170170
```
171171

@@ -179,14 +179,14 @@ type: example
179179
---
180180
<div>
181181
<Text>Inline avatars: </Text>
182-
<Avatar name="John Doe" size="small" display="inline" margin="0 spacing.spaceXs" />
183-
<Avatar name="Jane Smith" size="small" display="inline" margin="0 spacing.spaceXs" />
182+
<Avatar name="John Doe" size="small" display="inline" />
183+
<Avatar name="Jane Smith" size="small" display="inline" />
184184
<Text> are displayed inline with text.</Text>
185185

186186
<div style={{ marginTop: '1rem' }}>
187187
<Text>Block avatars:</Text>
188-
<Avatar name="John Doe" size="small" display="block" margin="spacing.spaceXs 0" />
189-
<Avatar name="Jane Smith" size="small" display="block" margin="spacing.spaceXs 0" />
188+
<Avatar name="John Doe" size="small" display="block" />
189+
<Avatar name="Jane Smith" size="small" display="block" />
190190
<Text>stack vertically.</Text>
191191
</div>
192192
</div>
@@ -201,8 +201,8 @@ By default only avatars without an image have borders but you can force it to `a
201201
type: example
202202
---
203203
<div>
204-
<Avatar name="Sarah Robinson" src={avatarSquare} showBorder="always" margin="spacing.spaceXs"/>
205-
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} showBorder="never" margin="spacing.spaceXs"/>
204+
<Avatar name="Sarah Robinson" src={avatarSquare} showBorder="always" />
205+
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} showBorder="never" />
206206
</div>
207207
```
208208

@@ -219,7 +219,7 @@ type: example
219219
name="John Doe"
220220
src={avatarSquare}
221221
renderIcon={<IconGroupLine />}
222-
margin="spacing.spaceXs"
222+
223223
/>
224224
<Text>Image takes priority over icon</Text>
225225
</div>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,11 @@ const generateStyle = (
182182
borderColor: componentTheme.borderColor,
183183
fontWeight: componentTheme.fontWeight,
184184
overflow: 'hidden',
185-
margin: calcMarginFromShorthand(margin, sharedTokens.margin)
185+
// TODO handle the merging on tokens inside the util
186+
margin: calcMarginFromShorthand(margin, {
187+
...sharedTokens.spacing,
188+
...sharedTokens.legacySpacing
189+
})
186190
},
187191
image: {
188192
label: 'avatar__image',

‎packages/ui-scripts/lib/build/tokensStudio/$metadata.json‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"canvas/component/Breadcrumb",
1111
"canvas/component/Checkbox",
1212
"canvas/component/ContextView",
13+
"canvas/component/Drilldown",
1314
"canvas/component/FormFieldLayout",
1415
"canvas/component/FormFieldMessage",
1516
"canvas/component/Heading",
@@ -19,26 +20,29 @@
1920
"canvas/component/Menu",
2021
"canvas/component/Metric",
2122
"canvas/component/Modal",
23+
"canvas/component/Options",
2224
"canvas/component/Pill",
25+
"canvas/component/Popover",
26+
"canvas/component/ProgressBar",
2327
"canvas/component/RadioInput",
28+
"canvas/component/SharedTokens",
2429
"canvas/component/Spinner",
25-
"canvas/component/TextInput",
26-
"canvas/component/TextArea",
2730
"canvas/component/Text",
28-
"canvas/component/Popover",
31+
"canvas/component/TextArea",
32+
"canvas/component/TextInput",
33+
"canvas/component/Tabs",
2934
"canvas/component/Tag",
3035
"canvas/component/Toggle",
3136
"canvas/component/Tooltip",
3237
"canvas/component/Tray",
33-
"canvas/component/SharedTokens",
34-
"canvas/component/ProgressBar",
3538
"canvas/component/View",
3639
"rebrand/component/Avatar",
3740
"rebrand/component/Badge",
3841
"rebrand/component/BaseButton",
3942
"rebrand/component/Breadcrumb",
4043
"rebrand/component/ContextView",
4144
"rebrand/component/Checkbox",
45+
"rebrand/component/Drilldown",
4246
"rebrand/component/FormFieldLayout",
4347
"rebrand/component/FormFieldMessage",
4448
"rebrand/component/Heading",
@@ -48,22 +52,24 @@
4852
"rebrand/component/Menu",
4953
"rebrand/component/Metric",
5054
"rebrand/component/Modal",
55+
"rebrand/component/Options",
5156
"rebrand/component/Pill",
57+
"rebrand/component/Popover",
5258
"rebrand/component/ProgressBar",
53-
"rebrand/component/Spinner",
5459
"rebrand/component/RadioInput",
55-
"rebrand/component/TextInput",
56-
"rebrand/component/TextArea",
57-
"rebrand/component/Text",
58-
"rebrand/component/Popover",
60+
"rebrand/component/SharedTokens",
61+
"rebrand/component/Spinner",
62+
"rebrand/component/Tabs",
5963
"rebrand/component/Tag",
64+
"rebrand/component/Text",
65+
"rebrand/component/TextArea",
66+
"rebrand/component/TextInput",
6067
"rebrand/component/Toggle",
6168
"rebrand/component/Tooltip",
6269
"rebrand/component/Tray",
63-
"rebrand/component/SharedTokens",
6470
"rebrand/component/View",
6571
"rebrand/semantic/layout/default",
6672
"rebrand/semantic/color/rebrandLight",
6773
"rebrand/semantic/color/rebrandDark"
6874
]
69-
}
75+
}

0 commit comments

Comments
 (0)