From 93f9954b3b6b19193f4b988817ff198244e38dfe Mon Sep 17 00:00:00 2001 From: GerardoPM Date: Tue, 1 Mar 2022 16:13:28 -0600 Subject: [PATCH 1/4] euiAvatar_41.4.0 --- package.json | 3 +- .../addon/components/eui-avatar/index.hbs | 6 +- .../core/docs/display/avatar-demo/demo1.md | 185 +++++++++++++----- 3 files changed, 147 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 49bf413fd..7b560e5e0 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@embroider/util": "^1.0.0" }, "volta": { - "node": "16.14.0" + "node": "16.14.0", + "yarn": "1.22.17" } } diff --git a/packages/core/addon/components/eui-avatar/index.hbs b/packages/core/addon/components/eui-avatar/index.hbs index bc4ca22c4..812588069 100644 --- a/packages/core/addon/components/eui-avatar/index.hbs +++ b/packages/core/addon/components/eui-avatar/index.hbs @@ -19,8 +19,9 @@ size=(arg-or-default @size "m") type=(arg-or-default @type "user") }} - aria-label={{@name}} + aria-label={{if @isDisabled undefined @name}} title={{@name}} + role={{if @isDisabled 'presentation''img'}} ...attributes {{simple-style inlineStyles}} > @@ -33,7 +34,8 @@ class="euiAvatar__icon" @size={{or @iconSize @size}} @type={{@iconType}} - aria-label={{@name}} + aria-label={{if @isDisabled undefined @name}} + role={{if @isDisabled 'presentation''img'}} @color={{or @iconColor (if (eq @iconColor null) @iconColor inlineStyles.color) diff --git a/packages/core/docs/display/avatar-demo/demo1.md b/packages/core/docs/display/avatar-demo/demo1.md index 4db68bb57..f9ac868cb 100644 --- a/packages/core/docs/display/avatar-demo/demo1.md +++ b/packages/core/docs/display/avatar-demo/demo1.md @@ -1,54 +1,151 @@ # Demo ```hbs template - - - - - - - - - - - - - - - - -

- Custom & Spaces type -

+ + + + + + + + With image + + + + + + + + + + Initials - - - - - - - -

- Icons -

+ + + Single vs multi-word + + + + + + + + + Custom + + + + + + + + + + Types - - - - - - -

- Colors and Sizes -

+ + + + + + + + + Icons + + + Icon colors and sizes + + + + + - - - - - -``` \ No newline at end of file + + Icon colors and sizes + + + + + + + + + + Disabled + + + + + + + + +``` From b28e2cc32130d9de70fc78c132659cb7162e88af Mon Sep 17 00:00:00 2001 From: GerardoPM Date: Mon, 14 Mar 2022 13:55:30 -0600 Subject: [PATCH 2/4] fix format --- packages/core/addon/components/eui-avatar/index.hbs | 2 +- packages/core/docs/display/avatar.md | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/addon/components/eui-avatar/index.hbs b/packages/core/addon/components/eui-avatar/index.hbs index 812588069..d69468a92 100644 --- a/packages/core/addon/components/eui-avatar/index.hbs +++ b/packages/core/addon/components/eui-avatar/index.hbs @@ -35,7 +35,7 @@ @size={{or @iconSize @size}} @type={{@iconType}} aria-label={{if @isDisabled undefined @name}} - role={{if @isDisabled 'presentation''img'}} + role={{if @isDisabled 'presentation' 'img'}} @color={{or @iconColor (if (eq @iconColor null) @iconColor inlineStyles.color) diff --git a/packages/core/docs/display/avatar.md b/packages/core/docs/display/avatar.md index 588a86648..02a7d4ecb 100644 --- a/packages/core/docs/display/avatar.md +++ b/packages/core/docs/display/avatar.md @@ -1 +1,3 @@ -# Avatar \ No newline at end of file + +Avatar + From 324fb05334aab1f43c316086fb4163cecb374006 Mon Sep 17 00:00:00 2001 From: GerardoPM Date: Mon, 14 Mar 2022 13:58:54 -0600 Subject: [PATCH 3/4] space formating --- packages/core/addon/components/eui-avatar/index.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/addon/components/eui-avatar/index.hbs b/packages/core/addon/components/eui-avatar/index.hbs index 2d7b6b76f..9f2bc1587 100644 --- a/packages/core/addon/components/eui-avatar/index.hbs +++ b/packages/core/addon/components/eui-avatar/index.hbs @@ -21,7 +21,7 @@ }} aria-label={{if @isDisabled undefined @name}} title={{@name}} - role={{if @isDisabled 'presentation''img'}} + role={{if @isDisabled 'presentation' 'img'}} ...attributes {{simple-style inlineStyles}} > From e8aed4eb0ddee9cb16f94234f310910a361d07c5 Mon Sep 17 00:00:00 2001 From: betocantu93 Date: Mon, 14 Mar 2022 16:59:09 -0600 Subject: [PATCH 4/4] fixes --- .../addon/components/eui-avatar/index.hbs | 14 +++-- .../addon/utils/css-mappings/eui-avatar.ts | 60 ++++++++++++++++--- 2 files changed, 59 insertions(+), 15 deletions(-) diff --git a/packages/core/addon/components/eui-avatar/index.hbs b/packages/core/addon/components/eui-avatar/index.hbs index 9f2bc1587..43da7a637 100644 --- a/packages/core/addon/components/eui-avatar/index.hbs +++ b/packages/core/addon/components/eui-avatar/index.hbs @@ -7,9 +7,11 @@ iconColor=@iconColor iconSize=@iconSize iconType=@iconType + imageUrl=@imageUrl + initials=@initials ) - background-image=(if @imageUrl @imageUrl "none") - ) as |inlineStyles| + ) + as |inlineStyles| }}
@@ -34,8 +36,8 @@ @iconClasses="euiAvatar__icon" @size={{or @iconSize @size}} @type={{@iconType}} - aria-label={{if @isDisabled undefined @name}} - role={{if @isDisabled 'presentation' 'img'}} + aria-label={{@name}} + role={{if @isDisabled "presentation" "img"}} @color={{or @iconColor (if (eq @iconColor null) @iconColor inlineStyles.color) diff --git a/packages/core/addon/utils/css-mappings/eui-avatar.ts b/packages/core/addon/utils/css-mappings/eui-avatar.ts index 73181617a..fea818369 100644 --- a/packages/core/addon/utils/css-mappings/eui-avatar.ts +++ b/packages/core/addon/utils/css-mappings/eui-avatar.ts @@ -1,6 +1,8 @@ import { isColorDark } from '../../helpers/is-color-dark'; import { hexToRgb } from '../../helpers/hex-to-rgb'; import { euiPaletteColorBlindBehindText } from '../../utils/color/eui_palettes'; +import { isValidHex } from '../../helpers/is-valid-hex'; +import { assert, warn } from '@ember/debug'; export const baseClass = 'euiAvatar'; export const VIS_COLORS = euiPaletteColorBlindBehindText(); @@ -19,30 +21,70 @@ export const typeMapping = { export function inlineStyles({ name, - color + color, + imageUrl, + initials }: { name: string; color: string; iconColor: string; + imageUrl?: string; + initials?: string; }): Styling { let assignedColor = color; + // let iconCustomColor = iconColor; + let avatarStyle: { + backgroundColor?: string; + color?: string; + backgroundImage?: string; + } = {}; + + checkValidInitials(initials); const isNamedColor = color === 'plain' || color === null; + if (imageUrl) { + avatarStyle.backgroundImage = `url(${imageUrl})`; + } + if (!isNamedColor) { - if (name && !assignedColor) { - assignedColor = VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)]; - } + checkValidColor(color); + + assignedColor = + color || VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)]; + const textColor = isColorDark(...hexToRgb(assignedColor || 'base')) ? '#FFFFFF' : '#000000'; - return { - 'background-color': assignedColor, - color: textColor - }; + + avatarStyle.backgroundColor = assignedColor; + avatarStyle.color = textColor; + return avatarStyle; } - return {}; + return avatarStyle; +} + +export const checkValidColor = (color: string | 'plain' | null) => { + const validHex = (color && isValidHex(color)) || color === 'plain'; + if (color && !validHex) { + assert( + 'EuiAvatar needs to pass a valid color. This can either be a three or six character hex value', + true + ); + } +}; + +function checkValidInitials(initials?: string) { + // Must be a string of 1 or 2 characters + if (initials && initials.length > 2) { + warn( + 'EuiAvatar only accepts a max of 2 characters for the initials as a string. It is displaying only the first 2 characters.', + { + id: 'EuiAvatar-initials-excedeed' + } + ); + } } const mapping: ComponentMapping = {