From a060cdbfe97751e522eb995b504bd00b3afea031 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 23 Mar 2020 13:03:36 -0300 Subject: [PATCH 1/7] feat(b-avatar): add `img-alt` prop for adding alt attribute to image avatars (closes #4990) --- src/components/avatar/avatar.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js index c3e3bdb86cb..0aee78b0d15 100644 --- a/src/components/avatar/avatar.js +++ b/src/components/avatar/avatar.js @@ -81,6 +81,10 @@ const props = { type: String // default: null }, + imgAlt: { + type: String, + default: 'avatar' + }, variant: { type: String, default: () => getComponentConfig(NAME, 'variant') @@ -150,7 +154,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({ attrs: { 'aria-hidden': 'true' } }) } else if (props.src) { - $content = h('img', { attrs: { src: props.src } }) + $content = h('img', { attrs: { src: props.src, alt: props.imgAlt || null } }) } else if (props.text) { const fontSize = size ? `calc(${size} * 0.4)` : null $content = h('span', { style: { fontSize } }, props.text) From 11871a4646e0f63d38addd204920c832577d89f1 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 23 Mar 2020 13:06:29 -0300 Subject: [PATCH 2/7] Update package.json --- src/components/avatar/package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/avatar/package.json b/src/components/avatar/package.json index 62ed6f7ce3d..68464c9efc0 100644 --- a/src/components/avatar/package.json +++ b/src/components/avatar/package.json @@ -18,6 +18,11 @@ "prop": "src", "description": "Image URL to use for the avatar" }, + { + "prop": "imgAlt", + "version": "2.9.0", + "description": "Value to place in the 'alt' attribute for image avatars" + }, { "prop": "icon", "description": "Icon name to use for the avatar. Must be all lowercase. Defaults to `person-fill` if `text` or `src` props not provided" From 924598ae2b3d2980dda09c681999b2e276f61003 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 23 Mar 2020 13:11:17 -0300 Subject: [PATCH 3/7] Update avatar.js --- src/components/avatar/avatar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js index 0aee78b0d15..d41c86bfcf2 100644 --- a/src/components/avatar/avatar.js +++ b/src/components/avatar/avatar.js @@ -81,7 +81,7 @@ const props = { type: String // default: null }, - imgAlt: { + alt: { type: String, default: 'avatar' }, @@ -154,12 +154,12 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({ attrs: { 'aria-hidden': 'true' } }) } else if (props.src) { - $content = h('img', { attrs: { src: props.src, alt: props.imgAlt || null } }) + $content = h('img', { attrs: { src: props.src, alt: props.alt || null } }) } else if (props.text) { const fontSize = size ? `calc(${size} * 0.4)` : null $content = h('span', { style: { fontSize } }, props.text) } else { - $content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true' } }) + $content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true', alt: props.alt || null } }) } const componentData = { From 14a3b66b0fa15b73e99f6553ffa00733f179742e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 23 Mar 2020 13:12:02 -0300 Subject: [PATCH 4/7] Update package.json --- src/components/avatar/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/avatar/package.json b/src/components/avatar/package.json index 68464c9efc0..91376c9cce1 100644 --- a/src/components/avatar/package.json +++ b/src/components/avatar/package.json @@ -18,15 +18,15 @@ "prop": "src", "description": "Image URL to use for the avatar" }, - { - "prop": "imgAlt", - "version": "2.9.0", - "description": "Value to place in the 'alt' attribute for image avatars" - }, { "prop": "icon", "description": "Icon name to use for the avatar. Must be all lowercase. Defaults to `person-fill` if `text` or `src` props not provided" }, + { + "prop": "alt", + "version": "2.9.0", + "description": "Value to place in the 'alt' attribute for image and icon avatars" + }, { "prop": "size", "description": "Size of the avatar. Refer to the documentation for details" From cf3469ecfa06b81e3223ae65e4ad547b6c4dfbba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Mon, 23 Mar 2020 20:30:57 +0100 Subject: [PATCH 5/7] Update avatar.js --- src/components/avatar/avatar.js | 35 +++++++++++++++++---------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js index d41c86bfcf2..0954a26dc4c 100644 --- a/src/components/avatar/avatar.js +++ b/src/components/avatar/avatar.js @@ -11,9 +11,12 @@ import { BIconPersonFill } from '../../icons/icons' // --- Constants --- const NAME = 'BAvatar' +const CLASS_NAME = 'b-avatar' const RX_NUMBER = /^[0-9]*\.?[0-9]+$/ +const FONT_SIZE_SCALE = 0.4 + const DEFAULT_SIZES = { sm: '1.5em', md: '2.5em', @@ -134,40 +137,38 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({ functional: true, props, render(h, { props, data, children }) { - const isButton = props.button + const { variant, disabled, square, icon, src, text, button: isButton, buttonType: type } = props const isBLink = !isButton && (props.href || props.to) const tag = isButton ? BButton : isBLink ? BLink : 'span' - const variant = props.variant - const disabled = props.disabled - const type = props.buttonType - const square = props.square const rounded = square ? false : props.rounded === '' ? true : props.rounded || 'circle' const size = computeSize(props.size) + const alt = props.alt || null + const ariaLabel = props.ariaLabel || null let $content = null if (children) { // Default slot overrides props $content = children - } else if (props.icon) { + } else if (icon) { $content = h(BIcon, { - props: { icon: props.icon }, + props: { icon: icon }, attrs: { 'aria-hidden': 'true' } }) - } else if (props.src) { - $content = h('img', { attrs: { src: props.src, alt: props.alt || null } }) - } else if (props.text) { - const fontSize = size ? `calc(${size} * 0.4)` : null - $content = h('span', { style: { fontSize } }, props.text) + } else if (src) { + $content = h('img', { attrs: { src, alt } }) + } else if (text) { + const fontSize = size ? `calc(${size} * ${FONT_SIZE_SCALE})` : null + $content = h('span', { style: { fontSize } }, text) } else { - $content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true', alt: props.alt || null } }) + $content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true', alt } }) } const componentData = { - staticClass: 'b-avatar', + staticClass: CLASS_NAME, class: { // We use badge/button styles for theme variants - [`${isButton ? 'btn' : 'badge'}-${props.variant}`]: !!props.variant, - // Rounding / Square + [`${isButton ? 'btn' : 'badge'}-${variant}`]: !!variant, + // Rounding/Square rounded: rounded === true, 'rounded-0': square, [`rounded-${rounded}`]: rounded && rounded !== true, @@ -175,7 +176,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({ disabled }, style: { width: size, height: size }, - attrs: { 'aria-label': props.ariaLabel || null }, + attrs: { 'aria-label': ariaLabel }, props: isButton ? { variant, disabled, type } : isBLink ? pluckProps(linkProps, props) : {} } From bc00865b6bcab75029d1c47cc727ab137a77322c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Mon, 23 Mar 2020 20:33:14 +0100 Subject: [PATCH 6/7] Update avatar.js --- src/components/avatar/avatar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js index 0954a26dc4c..bcc9ce85628 100644 --- a/src/components/avatar/avatar.js +++ b/src/components/avatar/avatar.js @@ -151,7 +151,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({ $content = children } else if (icon) { $content = h(BIcon, { - props: { icon: icon }, + props: { icon }, attrs: { 'aria-hidden': 'true' } }) } else if (src) { From 7bb0df2da601d8ab06d71f1043fa94981793b34e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 23 Mar 2020 16:41:45 -0300 Subject: [PATCH 7/7] Update avatar.js --- src/components/avatar/avatar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/avatar/avatar.js b/src/components/avatar/avatar.js index bcc9ce85628..6c5423536ca 100644 --- a/src/components/avatar/avatar.js +++ b/src/components/avatar/avatar.js @@ -152,7 +152,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({ } else if (icon) { $content = h(BIcon, { props: { icon }, - attrs: { 'aria-hidden': 'true' } + attrs: { 'aria-hidden': 'true', alt } }) } else if (src) { $content = h('img', { attrs: { src, alt } })