Skip to content

[CSS-in-JS] Convert EuiAvatar #5670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thompsongl merged 21 commits into from
Apr 5, 2022
Merged

[CSS-in-JS] Convert EuiAvatar #5670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
8765540
style with emotion
thompsongl Mar 1, 2022
fd16ab3
remove theme vars
thompsongl Mar 1, 2022
22b95b3
snapshot updates
thompsongl Mar 1, 2022
8457815
remove legacy theme styles and override (faux inner border)
thompsongl Mar 2, 2022
a6ef720
CL
thompsongl Mar 3, 2022
6ec0619
fix snapshots
thompsongl Mar 15, 2022
75fe9b4
refactor
thompsongl Mar 15, 2022
862f588
clean up
thompsongl Mar 15, 2022
3737654
WIP: relocate css array
thompsongl Mar 16, 2022
020d12a
CL
thompsongl Mar 21, 2022
ca83947
fix CL
thompsongl Mar 21, 2022
09826d7
Merge branch 'main' into css-in-js/euiavatar
thompsongl Mar 22, 2022
53c401a
Merge branch 'main' into css-in-js/euiavatar
thompsongl Mar 30, 2022
d6a6147
add renderWithStyles test; update snapshots
thompsongl Mar 30, 2022
7464aa1
wiki
thompsongl Mar 30, 2022
04a6a37
Tried: Moved sizing to an external function
Mar 30, 2022
23b7d2a
Option 2: just size
Mar 30, 2022
df12df7
Option 3: Ensure css`` is the value of the key
Mar 30, 2022
7654f01
refactor sizes
thompsongl Apr 5, 2022
f836efe
remove isPlain className
thompsongl Apr 5, 2022
861f86a
add wiki
thompsongl Apr 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions src-docs/src/views/theme/_json/eui_theme_dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,6 @@
"l": "24px",
"xl": "32px"
},
"avatarSizing": {
"s": {
"size": "24px",
"font-size": "12px"
},
"m": {
"size": "32px",
"font-size": "14.4px"
},
"l": {
"size": "40px",
"font-size": "19.200000000000003px"
},
"xl": {
"size": "64px",
"font-size": "25.6px"
}
},
"euiBadgeGroupGutterTypes": {
"gutterExtraSmall": "4px",
"gutterSmall": "8px"
Expand Down
18 changes: 0 additions & 18 deletions src-docs/src/views/theme/_json/eui_theme_light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,6 @@
"l": "24px",
"xl": "32px"
},
"avatarSizing": {
"s": {
"size": "24px",
"font-size": "12px"
},
"m": {
"size": "32px",
"font-size": "14.4px"
},
"l": {
"size": "40px",
"font-size": "19.200000000000003px"
},
"xl": {
"size": "64px",
"font-size": "25.6px"
}
},
"euiBadgeGroupGutterTypes": {
"gutterExtraSmall": "4px",
"gutterSmall": "8px"
Expand Down
81 changes: 63 additions & 18 deletions src/components/avatar/__snapshots__/avatar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
<div
aria-label="aria-label"
class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2"
class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 css-yd7f8d-euiAvatar-m-user"
data-test-subj="test subject string"
role="img"
style="background-color:#ee789d;color:#000000"
Expand All @@ -20,7 +20,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
exports[`EuiAvatar is rendered 1`] = `
<div
aria-label="aria-label"
class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2"
class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 css-yd7f8d-euiAvatar-m-user"
data-test-subj="test subject string"
role="img"
style="background-color:#e4a6c7;color:#000000"
Expand All @@ -37,7 +37,7 @@ exports[`EuiAvatar is rendered 1`] = `
exports[`EuiAvatar props color as null is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
title="name"
>
Expand All @@ -52,7 +52,7 @@ exports[`EuiAvatar props color as null is rendered 1`] = `
exports[`EuiAvatar props color as plain is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar--plain"
class="euiAvatar euiAvatar--m euiAvatar--user css-16zsvx6-euiAvatar-m-user-plain"
role="img"
title="name"
>
Expand All @@ -67,7 +67,7 @@ exports[`EuiAvatar props color as plain is rendered 1`] = `
exports[`EuiAvatar props color as string is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#000;color:#FFFFFF"
title="name"
Expand All @@ -83,7 +83,7 @@ exports[`EuiAvatar props color as string is rendered 1`] = `
exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -100,7 +100,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -118,7 +118,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -136,7 +136,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
exports[`EuiAvatar props iconType is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -154,7 +154,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
exports[`EuiAvatar props imageUrl is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000;background-image:url(image url)"
title="name"
Expand All @@ -164,7 +164,7 @@ exports[`EuiAvatar props imageUrl is rendered 1`] = `
exports[`EuiAvatar props initials is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -180,7 +180,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
exports[`EuiAvatar props initialsLength is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -195,7 +195,7 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `

exports[`EuiAvatar props isDisabled is rendered 1`] = `
<div
class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled"
class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled css-1m6lajy-euiAvatar-m-user-isDisabled"
role="presentation"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -211,7 +211,7 @@ exports[`EuiAvatar props isDisabled is rendered 1`] = `
exports[`EuiAvatar props size l is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--l euiAvatar--user"
class="euiAvatar euiAvatar--l euiAvatar--user css-d4s9pe-euiAvatar-l-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -227,7 +227,7 @@ exports[`EuiAvatar props size l is rendered 1`] = `
exports[`EuiAvatar props size m is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -243,7 +243,7 @@ exports[`EuiAvatar props size m is rendered 1`] = `
exports[`EuiAvatar props size s is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--s euiAvatar--user"
class="euiAvatar euiAvatar--s euiAvatar--user css-1e7wq2y-euiAvatar-s-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -259,7 +259,7 @@ exports[`EuiAvatar props size s is rendered 1`] = `
exports[`EuiAvatar props size xl is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--xl euiAvatar--user"
class="euiAvatar euiAvatar--xl euiAvatar--user css-tifdxf-euiAvatar-xl-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -275,7 +275,7 @@ exports[`EuiAvatar props size xl is rendered 1`] = `
exports[`EuiAvatar props type is rendered 1`] = `
<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--space"
class="euiAvatar euiAvatar--m euiAvatar--space css-1vuomnm-euiAvatar-m-space"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
Expand All @@ -289,3 +289,48 @@ exports[`EuiAvatar props type is rendered 1`] = `
`;

exports[`EuiAvatar should throw error if color is not a hex 1`] = `"EuiAvatar needs to pass a valid color. This can either be a three or six character hex value"`;

exports[`EuiAvatar should throw error if color is not a hex: renders with emotion styles 1`] = `
.css-yd7f8d-euiAvatar-m-user {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-background-size: cover;
background-size: cover;
text-align: center;
vertical-align: middle;
overflow-x: hidden;
font-weight: 500;
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * 0.9);
border-radius: 50%;
}

<div
aria-label="name"
class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
role="img"
style="background-color:#e4a6c7;color:#000000"
title="name"
>
<span
aria-hidden="true"
>
n
</span>
</div>
`;
58 changes: 0 additions & 58 deletions src/components/avatar/_avatar.scss
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/components/avatar/_index.scss
View file
Open in desktop

This file was deleted.

Loading