Skip to content

Commit ccc98b4

Browse files
madsrasmussenmadsrasmussen
authored
Merge pull request #85 from umbraco/feature/ui-sizing
General improved sizing options and others minor corrections
2 parents 043d617 + 41d489f commit ccc98b4

File tree

27 files changed

+488
-379
lines changed

27 files changed

+488
-379
lines changed

‎.storybook/main.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ module.exports = {
2121

2222
// pre bundle dependencies for faster startup time
2323
config.optimizeDeps.include.push('@storybook/web-components');
24-
config.optimizeDeps.include.push('lit-element');
2524
config.optimizeDeps.include.push('lit-html');
2625
config.optimizeDeps.include.push('lit');
2726
config.optimizeDeps.include.push('lit/decorators.js');

‎packages/uui-avatar-group/lib/uui-avatar-group.story.ts

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Story } from '@storybook/web-components';
22
import { html } from 'lit-html';
33
import '@umbraco-ui/uui-avatar-group/lib/index';
4+
import { GetRandomUmbracoWordOfWordCount } from '../../../storyhelpers/UmbracoWordGenerator';
45

56
export default {
67
title: 'Displays/Avatar Group',
@@ -17,10 +18,10 @@ export const AAAOverview: Story = props => html`
1718
'--uui-avatar-border-color'
1819
]};"
1920
.limit=${props.limit}>
20-
<uui-avatar title="First Last"></uui-avatar>
21-
<uui-avatar title="First Last"></uui-avatar>
22-
<uui-avatar title="First Last"></uui-avatar>
23-
<uui-avatar title="First Last"></uui-avatar>
21+
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
22+
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
23+
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
24+
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
2425
</uui-avatar-group>
2526
`;
2627
AAAOverview.args = { fontSize: 2, '--uui-avatar-border-color': 'white' };
@@ -32,10 +33,10 @@ AAAOverview.parameters = {
3233
docs: {
3334
source: {
3435
code: html`<uui-avatar-group>
35-
<uui-avatar title="First Last"></uui-avatar>
36-
<uui-avatar title="First Last"></uui-avatar>
37-
<uui-avatar title="First Last"></uui-avatar>
38-
<uui-avatar title="First Last"></uui-avatar>
36+
<uui-avatar title="Firstname Lastname"></uui-avatar>
37+
<uui-avatar title="Firstname Lastname"></uui-avatar>
38+
<uui-avatar title="Firstname Lastname"></uui-avatar>
39+
<uui-avatar title="Firstname Lastname"></uui-avatar>
3940
</uui-avatar-group>`.strings,
4041
},
4142
},
@@ -47,10 +48,10 @@ export const Limit: Story = ({ limit }) => html`
4748
<uui-avatar-group
4849
style="font-size: 2rem; --uui-avatar-border-color: white;"
4950
.limit=${limit}>
50-
<uui-avatar title="First Last"></uui-avatar>
51-
<uui-avatar title="First Last"></uui-avatar>
52-
<uui-avatar title="First Last"></uui-avatar>
53-
<uui-avatar title="First Last"></uui-avatar>
51+
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
52+
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
53+
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
54+
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
5455
</uui-avatar-group>
5556
`;
5657
Limit.args = { limit: 2 };
@@ -59,10 +60,10 @@ Limit.parameters = {
5960
docs: {
6061
source: {
6162
code: html`<uui-avatar-group limit="2">
62-
<uui-avatar title="First Last"></uui-avatar>
63-
<uui-avatar title="First Last"></uui-avatar>
64-
<uui-avatar title="First Last"></uui-avatar>
65-
<uui-avatar title="First Last"></uui-avatar>
63+
<uui-avatar title="Firstname Lastname"></uui-avatar>
64+
<uui-avatar title="Firstname Lastname"></uui-avatar>
65+
<uui-avatar title="Firstname Lastname"></uui-avatar>
66+
<uui-avatar title="Firstname Lastname"></uui-avatar>
6667
</uui-avatar-group>`.strings,
6768
},
6869
},

‎packages/uui-avatar/lib/uui-avatar.element.ts

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,16 @@ export class UUIAvatarElement extends LitElement {
1010
static styles = [
1111
css`
1212
:host {
13-
display: flex;
13+
display: inline-flex;
1414
align-items: center;
1515
justify-content: center;
1616
position: relative;
1717
overflow: hidden;
1818
border-radius: 50%;
19-
font-weight: bold;
20-
width: 2em;
21-
height: 2em;
19+
font-weight: 700;
20+
-webkit-font-smoothing: subpixel-antialiased;
21+
width: calc(2em + 4px);
22+
height: calc(2em + 4px);
2223
user-select: none;
2324
/* box-sizing: border-box; */
2425
@@ -73,7 +74,7 @@ export class UUIAvatarElement extends LitElement {
7374
* @attr
7475
* @default ''
7576
*/
76-
@property({ type: String })
77+
@property({ type: String, reflect: true })
7778
get title() {
7879
return this._title;
7980
}
@@ -88,13 +89,22 @@ export class UUIAvatarElement extends LitElement {
8889
@state()
8990
private initials = '';
9091

92+
connectedCallback() {
93+
super.connectedCallback();
94+
if (!this.title) {
95+
console.warn(this.tagName + ' needs a `title`', this);
96+
}
97+
}
98+
9199
private createInitials(title: string) {
92100
let initials = '';
93101

94-
const words = (title || '').split(' ');
95-
initials = words[0].substring(0, 1);
96-
if (words.length > 1) {
97-
initials += words[words.length - 1].substring(0, 1);
102+
if (title) {
103+
const words = title.match(/(\w+)/g) || [];
104+
initials = words[0].substring(0, 1);
105+
if (words.length > 1) {
106+
initials += words[words.length - 1].substring(0, 1);
107+
}
98108
}
99109
return initials.toUpperCase();
100110
}

‎packages/uui-avatar/lib/uui-avatar.story.ts

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { Story } from '@storybook/web-components';
22
import { html } from 'lit-html';
33
import '@umbraco-ui/uui-avatar/lib/index';
4+
import { GetRandomUmbracoWordOfWordCount } from '../../../storyhelpers/UmbracoWordGenerator';
45

56
export default {
67
title: 'Displays/Avatar',
78
id: 'uui-avatar',
89
component: 'uui-avatar',
910
args: {
10-
title: 'First Last',
11-
fontSize: 32,
11+
title: GetRandomUmbracoWordOfWordCount(2),
12+
fontSize: 12,
1213
},
1314
// argTypes: {
1415
// 'img-src': { table: { disable: true } },
@@ -47,7 +48,7 @@ AAAOverview.argTypes = {
4748
AAAOverview.parameters = {
4849
docs: {
4950
source: {
50-
code: `<uui-avatar title="First Last"></uui-avatar>`,
51+
code: `<uui-avatar title="Firstname Lastname"></uui-avatar>`,
5152
},
5253
},
5354
};
@@ -58,7 +59,7 @@ Picture.parameters = {
5859
controls: { include: ['imgSrc', 'imgSrcset', 'title'] },
5960
docs: {
6061
source: {
61-
code: `<uui-avatar src="..."></uui-avatar>`,
62+
code: `<uui-avatar src="..." title="Firstname Lastname"></uui-avatar>`,
6263
},
6364
},
6465
};
@@ -88,7 +89,26 @@ SlottedContent.parameters = {
8889
controls: { include: ['slot', 'overflow'] },
8990
docs: {
9091
source: {
91-
code: `<uui-avatar>overflow</uui-avatar>`,
92+
code: `<uui-avatar overflow title="overflow title">overflow content</uui-avatar>`,
93+
},
94+
},
95+
};
96+
97+
export const InlineWithText = (props: any) => html`
98+
<div>
99+
Text
100+
<uui-avatar
101+
title="Hello world"
102+
style="background-color: ${props.backgroundColor}; color: ${props.color}"
103+
>${props.slot}</uui-avatar
104+
>
105+
around
106+
</div>
107+
`;
108+
InlineWithText.parameters = {
109+
docs: {
110+
source: {
111+
code: `Text <uui-avatar title="Hello world">overflow</uui-avatar> around`,
92112
},
93113
},
94114
};

‎packages/uui-badge/lib/uui-badge.element.ts

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,27 @@ export class UUIBadgeElement extends LitElement {
1313
css`
1414
:host {
1515
position: absolute;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
1619
1720
/* top: -8px;
1821
right: -8px; */
19-
padding: 3px 5px;
22+
padding: var(--uui-size-1) var(--uui-size-2);
2023
--uui-badge-inset: -8px -8px auto auto;
2124
/* 4 different ones */
2225
inset: var(--uui-badge-inset);
2326
2427
text-align: center;
25-
font-size: 12px;
26-
line-height: 16px;
28+
font-size: var(--uui-badge-font-size, var(--uui-type-small-size));
2729
font-weight: 900;
30+
line-height: 1;
2831
2932
margin-right: 0 !important;
3033
31-
min-width: var(--uui-size-4);
32-
min-height: var(--uui-size-4);
34+
min-width: var(--uui-size-8);
35+
min-height: var(--uui-size-8);
36+
box-sizing: border-box;
3337
3438
border-width: var(--uui-badge-border-width, 1px);
3539
border-style: solid;
@@ -44,9 +48,44 @@ export class UUIBadgeElement extends LitElement {
4448
var(--uui-interface-surface)
4549
);
4650
color: var(--uui-badge-contrast, var(--uui-interface-contrast));
47-
display: flex;
48-
justify-content: center;
49-
align-items: center;
51+
}
52+
53+
/** TODO: we didn't want to target elements by name, but what else can we do? */
54+
::slotted(uui-icon) {
55+
margin-left: -0.2em;
56+
margin-right: -0.2em;
57+
}
58+
59+
@keyframes --uui-badge-bounce {
60+
0% {
61+
transform: translateY(0);
62+
}
63+
20% {
64+
transform: translateY(-6px);
65+
}
66+
40% {
67+
transform: translateY(0);
68+
}
69+
55% {
70+
transform: translateY(-3px);
71+
}
72+
70% {
73+
transform: translateY(0);
74+
}
75+
100% {
76+
transform: translateY(0);
77+
}
78+
}
79+
:host([attention]) {
80+
animation-duration: 1.4s;
81+
animation-iteration-count: infinite;
82+
animation-name: --uui-badge-bounce;
83+
animation-timing-function: ease;
84+
}
85+
@media (prefers-reduced-motion) {
86+
:host([attention]) {
87+
animation: none;
88+
}
5089
}
5190
5291
:host([look='primary']) {
@@ -130,6 +169,15 @@ export class UUIBadgeElement extends LitElement {
130169
@property({ type: String, reflect: true })
131170
look: InterfaceLookType = 'danger';
132171

172+
/**
173+
* Bring attention to this badge by applying a bounce animation.
174+
* @type Boolean
175+
* @attr
176+
* @default false
177+
*/
178+
@property({ type: Boolean, reflect: true })
179+
attention = false;
180+
133181
render() {
134182
return html` <slot></slot> `;
135183
}

0 commit comments

Comments
 (0)