Skip to content

feat(b-avatar): add alt prop for adding alt attribute to image and icon avatars (closes #4990) #4991

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
merged 7 commits into from
Mar 23, 2020
Merged

feat(b-avatar): add alt prop for adding alt attribute to image and icon avatars (closes #4990) #4991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a060cdb
feat(b-avatar): add `img-alt` prop for adding alt attribute to image …
tmorehouse Mar 23, 2020
11871a4
Update package.json
tmorehouse Mar 23, 2020
924598a
Update avatar.js
tmorehouse Mar 23, 2020
14a3b66
Update package.json
tmorehouse Mar 23, 2020
cf3469e
Update avatar.js
jacobmllr95 Mar 23, 2020
bc00865
Update avatar.js
jacobmllr95 Mar 23, 2020
7bb0df2
Update avatar.js
tmorehouse Mar 23, 2020
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
41 changes: 23 additions & 18 deletions src/components/avatar/avatar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -81,6 +84,10 @@ const props = {
type: String
// default: null
},
alt: {
type: String,
default: 'avatar'
},
variant: {
type: String,
default: () => getComponentConfig(NAME, 'variant')
Expand Down Expand Up @@ -130,48 +137,46 @@ 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 },
attrs: { 'aria-hidden': 'true' }
props: { icon },
attrs: { 'aria-hidden': 'true', alt }
})
} else if (props.src) {
$content = h('img', { attrs: { src: props.src } })
} 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' } })
$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,
// Other classes
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) : {}
}

Expand Down
5 changes: 5 additions & 0 deletions src/components/avatar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@
"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"
Expand Down