Skip to content

Commit

Permalink
refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@thompsongl
thompsongl committed Mar 15, 2022
1 parent 9af6960 commit 7d3f7e9
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 111 deletions.
42 changes: 21 additions & 21 deletions src/components/avatar/__snapshots__/avatar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand Down Expand Up @@ -72,7 +72,7 @@ exports[`EuiAvatar is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand Down Expand Up @@ -118,7 +118,7 @@ exports[`EuiAvatar props color as null is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand Down Expand Up @@ -162,7 +162,7 @@ exports[`EuiAvatar props color as plain is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
background-color: #FFF;
}
Expand Down Expand Up @@ -207,7 +207,7 @@ exports[`EuiAvatar props color as string is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand Down Expand Up @@ -252,7 +252,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand All @@ -264,7 +264,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
title="name"
>
<span
class="euiAvatar__icon emotion-1"
class="euiAvatar__icon"
data-euiicon-type="bolt"
>
name
Expand Down Expand Up @@ -298,7 +298,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand All @@ -310,7 +310,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
title="name"
>
<span
class="euiAvatar__icon emotion-1"
class="euiAvatar__icon"
color="primary"
data-euiicon-type="bolt"
>
Expand Down Expand Up @@ -345,7 +345,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand All @@ -357,7 +357,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
title="name"
>
<span
class="euiAvatar__icon emotion-1"
class="euiAvatar__icon"
color="#000000"
data-euiicon-type="bolt"
>
Expand Down Expand Up @@ -392,7 +392,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand All @@ -404,7 +404,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
title="name"
>
<span
class="euiAvatar__icon emotion-1"
class="euiAvatar__icon"
color="#000000"
data-euiicon-type="bolt"
>
Expand Down Expand Up @@ -439,7 +439,7 @@ exports[`EuiAvatar props imageUrl is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand Down Expand Up @@ -478,7 +478,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand Down Expand Up @@ -523,7 +523,7 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand Down Expand Up @@ -568,7 +568,7 @@ exports[`EuiAvatar props isDisabled is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
cursor: not-allowed;
-webkit-filter: grayscale(100%);
Expand Down Expand Up @@ -615,7 +615,7 @@ exports[`EuiAvatar props size l is rendered 1`] = `
width: 40px;
height: 40px;
line-height: 40px;
font-size: calc(24px * .8);
font-size: calc(24px * 0.8);
border-radius: 50%;
}
Expand Down Expand Up @@ -660,7 +660,7 @@ exports[`EuiAvatar props size m is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 50%;
}
Expand Down Expand Up @@ -750,7 +750,7 @@ exports[`EuiAvatar props size xl is rendered 1`] = `
width: calc(16px * 4);
height: calc(16px * 4);
line-height: calc(16px * 4);
font-size: calc(32px * .8);
font-size: calc(32px * 0.8);
border-radius: 50%;
}
Expand Down Expand Up @@ -795,7 +795,7 @@ exports[`EuiAvatar props type is rendered 1`] = `
width: 32px;
height: 32px;
line-height: 32px;
font-size: calc(16px * .9);
font-size: calc(16px * 0.9);
border-radius: 6px;
}
Expand Down
130 changes: 55 additions & 75 deletions src/components/avatar/avatar.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,79 +8,59 @@

import { css } from '@emotion/react';
import { UseEuiTheme } from '../../services';
import { size } from '../../global_styling/mixins/_size';

export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => {
const avatarSizing = {
s: {
size: euiTheme.size.l,
fontSize: euiTheme.size.m,
},
m: {
size: euiTheme.size.xl,
fontSize: `calc(${euiTheme.size.base} * .9)`,
},
l: {
size: euiTheme.size.xxl,
fontSize: `calc(${euiTheme.size.l} * .8)`,
},
xl: {
size: `calc(${euiTheme.size.base} * 4)`,
fontSize: `calc(${euiTheme.size.xl} * .8)`,
},
};

return {
// Block
euiAvatar: css`
flex-shrink: 0; // Ensures it never scales down below its intended size
display: inline-flex;
justify-content: center;
align-items: center;
background-size: cover;
text-align: center;
vertical-align: middle;
overflow-x: hidden;
font-weight: ${euiTheme.font.weight
.medium}; // Explicitly state so it doesn't get overridden by inheritance
`,
// Variants
plain: css`
background-color: ${euiTheme.colors.emptyShade};
`,
user: css`
border-radius: 50%;
`,
space: css`
border-radius: ${euiTheme.border.radius.medium};
`,
// States
isDisabled: css`
cursor: not-allowed;
filter: grayscale(100%);
`,
// Sizes
s: css`
${size(avatarSizing.s.size)}
line-height: ${avatarSizing.s.size};
font-size: ${avatarSizing.s.fontSize};
`,
m: css`
${size(avatarSizing.m.size)}
line-height: ${avatarSizing.m.size};
font-size: ${avatarSizing.m.fontSize};
`,
l: css`
${size(avatarSizing.l.size)}
line-height: ${avatarSizing.l.size};
font-size: ${avatarSizing.l.fontSize};
`,
xl: css`
${size(avatarSizing.xl.size)}
line-height: ${avatarSizing.xl.size};
font-size: ${avatarSizing.xl.fontSize};
`,
// Elements
euiAvatarIcon: css``,
};
};
export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
// Base
euiAvatar: css`
flex-shrink: 0; // Ensures it never scales down below its intended size
display: inline-flex;
justify-content: center;
align-items: center;
background-size: cover;
text-align: center;
vertical-align: middle;
overflow-x: hidden;
font-weight: ${euiTheme.font.weight
.medium}; // Explicitly state so it doesn't get overridden by inheritance
`,
// Variants
plain: css`
background-color: ${euiTheme.colors.emptyShade};
`,
user: css`
border-radius: 50%;
`,
space: css`
border-radius: ${euiTheme.border.radius.medium};
`,
// States
isDisabled: css`
cursor: not-allowed;
filter: grayscale(100%);
`,
// Sizes
s: css`
width: ${euiTheme.size.l};
height: ${euiTheme.size.l};
line-height: ${euiTheme.size.l};
font-size: ${euiTheme.size.m};
`,
m: css`
width: ${euiTheme.size.xl};
height: ${euiTheme.size.xl};
line-height: ${euiTheme.size.xl};
font-size: calc(${euiTheme.size.base} * 0.9);
`,
l: css`
width: ${euiTheme.size.xxl};
height: ${euiTheme.size.xxl};
line-height: ${euiTheme.size.xxl};
font-size: calc(${euiTheme.size.l} * 0.8);
`,
xl: css`
width: calc(${euiTheme.size.base} * 4);
height: calc(${euiTheme.size.base} * 4);
line-height: calc(${euiTheme.size.base} * 4);
font-size: calc(${euiTheme.size.xl} * 0.8);
`,
});
1 change: 0 additions & 1 deletion src/components/avatar/avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,6 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
} else if (iconType) {
content = (
<EuiIcon
css={[styles.euiAvatarIcon]}
className="euiAvatar__icon"
size={iconSize || size}
type={iconType}
Expand Down
2 changes: 1 addition & 1 deletion src/components/comment_list/__snapshots__/comment.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
width: 40px;
height: 40px;
line-height: 40px;
font-size: calc(24px * .8);
font-size: calc(24px * 0.8);
border-radius: 50%;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`EuiCommentTimeline props timelineIcon is rendered 1`] = `
width: 40px;
height: 40px;
line-height: 40px;
font-size: calc(24px * .8);
font-size: calc(24px * 0.8);
border-radius: 50%;
}
Expand Down
12 changes: 0 additions & 12 deletions src/global_styling/mixins/_size.ts
View file

This file was deleted.

0 comments on commit 7d3f7e9

Please sign in to comment.