Unverified Commit 0bc99a32 authored by Tiago Evangelista Pinto's avatar Tiago Evangelista Pinto Committed by GitHub
Browse files

feat: Remove Box from Avatar component (#326)


Co-authored-by: default avatarGuilherme Gazzo <guilherme@gazzo.xyz>
parent 713009bf
import PropTypes from 'prop-types';
import React, { useContext, createContext } from 'react';
import React from 'react';
import flattenChildren from 'react-keyed-flatten-children';
import { createPropType } from '../../helpers/createPropType';
import { size } from '../../styleTokens';
import { Box } from '../Box';
const AvatarContext = createContext({
baseUrl: '',
});
import { prependClassName } from '../../helpers/prependClassName';
export function Avatar({
title,
size = 'x36',
rounded = false,
url,
size = 'x36',
...props
}) {
const { baseUrl } = useContext(AvatarContext);
props.className = prependClassName(
props.className,
['rcx-box rcx-box--full rcx-avatar', size && `rcx-avatar--${size}`]
.filter(Boolean)
.join(' ')
);
const innerClass = [
'rcx-avatar__element',
rounded && 'rcx-avatar__element--rounded',
size && `rcx-avatar--${size}`,
]
.filter(Boolean)
.join(' ');
return (
<Box
is='figure'
rcx-avatar
aria-label={title}
{...props}
width={size}
height={size}
verticalAlign='middle'
>
<Box
is='img'
{...props}
rcx-avatar__element
rcx-avatar__element--rounded={rounded}
src={`${baseUrl}${url}`}
width={size}
height={size}
/>
</Box>
<figure aria-label={title} {...props}>
<img src={`${url}`} className={`${innerClass}`} />
</figure>
);
}
Avatar.Context = AvatarContext;
Avatar.propTypes = {
rounded: PropTypes.bool,
size: createPropType(size),
size: PropTypes.oneOf([
'x16',
'x18',
'x20',
'x24',
'x28',
'x32',
'x36',
'x48',
'x124',
'x200',
'x332',
]),
title: PropTypes.string,
url: PropTypes.string.isRequired,
};
const AvatarStack = ({ children, ...props }) => (
<Box rcx-avatar-stack {...props}>
const AvatarStack = ({ children, className, ...props }) => (
<div className={prependClassName('rcx-avatar-stack', className)} {...props}>
{flattenChildren(children).reverse()}
</Box>
</div>
);
Avatar.Stack = AvatarStack;
@use '../../styles/colors.scss';
@use '../../styles/lengths.scss';
@use '../../styles/functions.scss';
$avatar-stack-background-color: theme('avatar-background-color', colors.surface());
$sizes: 16, 18, 20, 24, 28, 32, 36, 48, 124, 200, 332;
.rcx-avatar {
display: inline-flex;
vertical-align: middle;
&__element {
position: relative;
......@@ -33,4 +38,10 @@ $avatar-stack-background-color: theme('avatar-background-color', colors.surface(
}
}
}
@each $size in $sizes {
&--x#{$size} {
@include square(functions.to-rem($size));
}
}
}
import PropTypes from 'prop-types';
import React from 'react';
import { Avatar, Box } from '..';
import { prependClassName } from '../../helpers/prependClassName';
import { Avatar } from '../Avatar';
import { withBoxStyling } from '../Box/withBoxStyling';
import { Icon } from '../Icon';
import Margins from '../Margins';
const defaultRenderThumb = ({ url }) => <Avatar size='x20' url={url} />;
const defaultRenderThumb = ({ url }) => (
<Box rcx-avatar>
<Avatar size='x20' url={url} />
</Box>
);
const defaultRenderDismissSymbol = () => <Icon name='cross' size='x16' />;
const Chip = ({
......
......@@ -47,7 +47,11 @@ export const ModalHeader = ({ children, ...props }) => (
</Margins>
);
export const ModalThumb = (props) => <Avatar size='x32' {...props} />;
export const ModalThumb = (props) => (
<Box>
<Avatar size='x32' {...props} />
</Box>
);
export const ModalTitle = ({ children, ...props }) => (
<Flex.Item grow={1} shrink={1}>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment