Unverified Commit 4218e510 authored by Tiago Evangelista Pinto's avatar Tiago Evangelista Pinto Committed by GitHub
Browse files

feat: Remove Box dependence from Tag and Badge components (#315)

parent f3127a1a
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
import { Badge } from '../..';
import { Badge, Box } from '../..';
<Meta title='Data Display/Badge' parameters={{ jest: ['Badge/spec'] }} />
......@@ -10,7 +10,7 @@ Shows a count.
<Canvas>
<Story name='Default'>
<Badge>99</Badge>
<Box display='inline-flex'><Badge>99</Badge></Box>
</Story>
</Canvas>
......@@ -20,7 +20,7 @@ Shows a count.
<Canvas>
<Story name='Primary'>
<Badge variant='primary'>99</Badge>
<Box display='inline-flex'><Badge variant='primary'>99</Badge></Box>
</Story>
</Canvas>
......@@ -28,7 +28,7 @@ Shows a count.
<Canvas>
<Story name='Danger'>
<Badge variant='danger'>99</Badge>
<Box display='inline-flex'><Badge variant='danger'>99</Badge></Box>
</Story>
</Canvas>
......@@ -36,7 +36,7 @@ Shows a count.
<Canvas>
<Story name='Warning'>
<Badge variant='warning'>99</Badge>
<Box display='inline-flex'><Badge variant='warning'>99</Badge></Box>
</Story>
</Canvas>
......@@ -44,6 +44,6 @@ Shows a count.
<Canvas>
<Story name='Disabled'>
<Badge disabled>99</Badge>
<Box display='inline-flex'><Badge disabled>99</Badge></Box>
</Story>
</Canvas>
import PropTypes from 'prop-types';
import React from 'react';
import { Tag } from '../Tag';
import { prependClassName } from '../../helpers/prependClassName';
export function Badge(props) {
return <Tag {...props} round />;
export function Badge({
is: Tag = 'span',
variant = 'secondary',
className,
disabled,
...props
}) {
return (
<Tag
className={
prependClassName(
className,
`rcx-box rcx-box--full rcx-badge ${ disabled ? 'rcx-badge--disabled' : '' } rcx-badge--${ variant }`,
)
}
{...props}
/>
);
}
Badge.propTypes = {
......
@use '../../styles/colors.scss';
@use '../../styles/lengths.scss';
@use '../../styles/typography.scss';
$badge-colors-secondary-color: theme('badge-colors-secondary-color', colors.foreground(primary));
$badge-colors-secondary-background-color: theme('badge-colors-secondary-background-color', colors.primary(100));
$badge-colors-primary-color: theme('badge-colors-primary-color', colors.foreground(alternative));
$badge-colors-primary-background-color: theme('badge-colors-primary-background-color', colors.primary(500));
$badge-colors-danger-color: theme('badge-colors-danger-color', colors.foreground(alternative));
$badge-colors-danger-background-color: theme('badge-colors-danger-background-color', colors.danger(500));
$badge-colors-ghost-color: theme('badge-colors-ghost-color', colors.foreground(alternative));
$badge-colors-ghost-background-color: theme('badge-colors-ghost-background-color', colors.neutral(700));
$badge-colors-warning-color: theme('badge-colors-warning-color', colors.foreground(alternative));
$badge-colors-warning-background-color: theme('badge-colors-warning-background-color', colors.warning-alternative(500));
$badge-colors-disabled-color: theme('badge-colors-disabled-color', colors.foreground(hint));
$badge-colors-disabled-background-color: theme('badge-colors-disabled-background-color', colors.neutral(400));
.rcx-badge {
display: flex;
overflow: hidden;
width: fit-content;
min-width: lengths.size(16);
padding:
lengths.padding(2)
lengths.padding(4);
text-align: center;
white-space: nowrap;
text-decoration: none;
text-overflow: ellipsis;
word-break: keep-all;
border-radius: lengths.border-radius(full);
@include typography.use-font-scale(micro);
&--secondary {
color: $badge-colors-secondary-color;
background-color: $badge-colors-secondary-background-color;
}
&--primary {
color: $badge-colors-primary-color;
background-color: $badge-colors-primary-background-color;
}
&--danger {
color: $badge-colors-danger-color;
background-color: $badge-colors-danger-background-color;
}
&--warning {
color: $badge-colors-warning-color;
background-color: $badge-colors-warning-background-color;
}
&--ghost {
color: $badge-colors-ghost-color;
background-color: $badge-colors-ghost-background-color;
}
&--disabled {
color: $badge-colors-disabled-color;
background-color: $badge-colors-disabled-background-color;
}
}
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
import { Tag } from '../..';
import { Tag, Box } from '../..';
<Meta title='Data Display/Tag' parameters={{ jest: ['Tag/spec'] }} />
......@@ -10,7 +10,7 @@ Used for mentions.
<Canvas>
<Story name='Default'>
<Tag>john.doe</Tag>
<Box display='inline-flex'><Tag>john.doe</Tag></Box>
</Story>
</Canvas>
......@@ -20,7 +20,7 @@ Used for mentions.
<Canvas>
<Story name='Pointer'>
<Tag onClick={() => {}}>john.doe</Tag>
<Box display='inline-flex'><Tag onClick={() => {}}>john.doe</Tag></Box>
</Story>
</Canvas>
......@@ -28,7 +28,7 @@ Used for mentions.
<Canvas>
<Story name='Primary'>
<Tag variant='primary'>john.doe</Tag>
<Box display='inline-flex'><Tag variant='primary'>john.doe</Tag></Box>
</Story>
</Canvas>
......@@ -36,7 +36,7 @@ Used for mentions.
<Canvas>
<Story name='Danger'>
<Tag variant='danger'>john.doe</Tag>
<Box display='inline-flex'><Tag variant='danger'>john.doe</Tag></Box>
</Story>
</Canvas>
......@@ -44,7 +44,7 @@ Used for mentions.
<Canvas>
<Story name='Warning'>
<Tag variant='warning'>john.doe</Tag>
<Box display='inline-flex'><Tag variant='warning'>john.doe</Tag></Box>
</Story>
</Canvas>
......@@ -52,7 +52,7 @@ Used for mentions.
<Canvas>
<Story name='Ghost'>
<Tag variant='ghost'>john.doe</Tag>
<Box display='inline-flex'><Tag variant='ghost'>john.doe</Tag></Box>
</Story>
</Canvas>
......@@ -60,6 +60,6 @@ Used for mentions.
<Canvas>
<Story name='Disabled'>
<Tag disabled>john.doe</Tag>
<Box display='inline-flex'><Tag disabled>john.doe</Tag></Box>
</Story>
</Canvas>
import PropTypes from 'prop-types';
import React from 'react';
import { Box } from '../..';
import { prependClassName } from '../../helpers/prependClassName';
export function Tag({
is: TagName = 'span',
small,
medium,
className,
disabled,
round,
variant = 'secondary',
onClick,
variant = 'secondary',
...props
}) {
return <Box
is='span'
rcx-tag
rcx-tag--warning={variant === 'warning'}
rcx-tag--secondary={variant === 'secondary'}
rcx-tag--primary={variant === 'primary'}
rcx-tag--danger={variant === 'danger'}
rcx-tag--ghost={variant === 'ghost'}
rcx-tag--disabled={!!disabled}
rcx-tag--round={!!round}
rcx-tag--clickable={!!onClick}
onClick={onClick}
{...props}
/>;
const modifiers = [
variant,
small && 'small',
medium && 'medium',
disabled && 'disabled',
onClick && 'clickable',
]
.map((modifier) => `rcx-tag--${ modifier }`)
.filter(Boolean)
.join(' ');
return <TagName className={prependClassName(className, `rcx-tag ${ modifiers }`)} {...props} />;
}
Tag.propTypes = {
small: PropTypes.bool,
medium: PropTypes.bool,
disabled: PropTypes.bool,
round: PropTypes.bool,
onClick: PropTypes.func,
variant: PropTypes.oneOf(['secondary', 'primary', 'danger', 'warning', 'ghost']),
};
......@@ -71,15 +71,13 @@ $tag-colors-disabled-background-color: theme('tag-colors-disabled-background-col
background-color: $tag-colors-disabled-background-color;
}
&--round {
overflow: hidden;
text-align: center;
border-radius: lengths.border-radius(full);
&--small {
@include typography.use-font-scale(c2);
}
&--clickable {
@include clickable();
@include clickable();
&--medium {
@include typography.use-font-scale(p2);
}
}
@import './Accordion/styles.scss';
@import './AutoComplete/styles.scss';
@import './Avatar/styles.scss';
@import './Badge/styles.scss';
@import './Box/styles.scss';
@import './Button/styles.scss';
@import './ButtonGroup/styles.scss';
......
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