Skip to content

Commit 4218e51

Browse files
tiagoevanptiagoevanp
authored
feat: Remove Box dependence from Tag and Badge components (#315)
1 parent f3127a1 commit 4218e51

File tree

7 files changed

+138
-43
lines changed

7 files changed

+138
-43
lines changed

‎packages/fuselage/src/components/Badge/Badge.stories.mdx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
22

3-
import { Badge } from '../..';
3+
import { Badge, Box } from '../..';
44

55
<Meta title='Data Display/Badge' parameters={{ jest: ['Badge/spec'] }} />
66

@@ -10,7 +10,7 @@ Shows a count.
1010

1111
<Canvas>
1212
<Story name='Default'>
13-
<Badge>99</Badge>
13+
<Box display='inline-flex'><Badge>99</Badge></Box>
1414
</Story>
1515
</Canvas>
1616

@@ -20,30 +20,30 @@ Shows a count.
2020

2121
<Canvas>
2222
<Story name='Primary'>
23-
<Badge variant='primary'>99</Badge>
23+
<Box display='inline-flex'><Badge variant='primary'>99</Badge></Box>
2424
</Story>
2525
</Canvas>
2626

2727
### Danger
2828

2929
<Canvas>
3030
<Story name='Danger'>
31-
<Badge variant='danger'>99</Badge>
31+
<Box display='inline-flex'><Badge variant='danger'>99</Badge></Box>
3232
</Story>
3333
</Canvas>
3434

3535
### Warning
3636

3737
<Canvas>
3838
<Story name='Warning'>
39-
<Badge variant='warning'>99</Badge>
39+
<Box display='inline-flex'><Badge variant='warning'>99</Badge></Box>
4040
</Story>
4141
</Canvas>
4242

4343
### Disabled
4444

4545
<Canvas>
4646
<Story name='Disabled'>
47-
<Badge disabled>99</Badge>
47+
<Box display='inline-flex'><Badge disabled>99</Badge></Box>
4848
</Story>
4949
</Canvas>

‎packages/fuselage/src/components/Badge/index.js

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33

4-
import { Tag } from '../Tag';
4+
import { prependClassName } from '../../helpers/prependClassName';
55

6-
export function Badge(props) {
7-
return <Tag {...props} round />;
6+
export function Badge({
7+
is: Tag = 'span',
8+
variant = 'secondary',
9+
className,
10+
disabled,
11+
...props
12+
}) {
13+
return (
14+
<Tag
15+
className={
16+
prependClassName(
17+
className,
18+
`rcx-box rcx-box--full rcx-badge ${ disabled ? 'rcx-badge--disabled' : '' } rcx-badge--${ variant }`,
19+
)
20+
}
21+
{...props}
22+
/>
23+
);
824
}
925

1026
Badge.propTypes = {

‎packages/fuselage/src/components/Badge/styles.scss

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
@use '../../styles/colors.scss';
2+
@use '../../styles/lengths.scss';
3+
@use '../../styles/typography.scss';
4+
5+
$badge-colors-secondary-color: theme('badge-colors-secondary-color', colors.foreground(primary));
6+
$badge-colors-secondary-background-color: theme('badge-colors-secondary-background-color', colors.primary(100));
7+
8+
$badge-colors-primary-color: theme('badge-colors-primary-color', colors.foreground(alternative));
9+
$badge-colors-primary-background-color: theme('badge-colors-primary-background-color', colors.primary(500));
10+
11+
$badge-colors-danger-color: theme('badge-colors-danger-color', colors.foreground(alternative));
12+
$badge-colors-danger-background-color: theme('badge-colors-danger-background-color', colors.danger(500));
13+
14+
$badge-colors-ghost-color: theme('badge-colors-ghost-color', colors.foreground(alternative));
15+
$badge-colors-ghost-background-color: theme('badge-colors-ghost-background-color', colors.neutral(700));
16+
17+
$badge-colors-warning-color: theme('badge-colors-warning-color', colors.foreground(alternative));
18+
$badge-colors-warning-background-color: theme('badge-colors-warning-background-color', colors.warning-alternative(500));
19+
20+
$badge-colors-disabled-color: theme('badge-colors-disabled-color', colors.foreground(hint));
21+
$badge-colors-disabled-background-color: theme('badge-colors-disabled-background-color', colors.neutral(400));
22+
23+
.rcx-badge {
24+
display: flex;
25+
overflow: hidden;
26+
27+
width: fit-content;
28+
min-width: lengths.size(16);
29+
30+
padding:
31+
lengths.padding(2)
32+
lengths.padding(4);
33+
34+
text-align: center;
35+
36+
white-space: nowrap;
37+
38+
text-decoration: none;
39+
text-overflow: ellipsis;
40+
41+
word-break: keep-all;
42+
43+
border-radius: lengths.border-radius(full);
44+
45+
@include typography.use-font-scale(micro);
46+
47+
&--secondary {
48+
color: $badge-colors-secondary-color;
49+
background-color: $badge-colors-secondary-background-color;
50+
}
51+
52+
&--primary {
53+
color: $badge-colors-primary-color;
54+
background-color: $badge-colors-primary-background-color;
55+
}
56+
57+
&--danger {
58+
color: $badge-colors-danger-color;
59+
background-color: $badge-colors-danger-background-color;
60+
}
61+
62+
&--warning {
63+
color: $badge-colors-warning-color;
64+
background-color: $badge-colors-warning-background-color;
65+
}
66+
67+
&--ghost {
68+
color: $badge-colors-ghost-color;
69+
background-color: $badge-colors-ghost-background-color;
70+
}
71+
72+
&--disabled {
73+
color: $badge-colors-disabled-color;
74+
background-color: $badge-colors-disabled-background-color;
75+
}
76+
}

‎packages/fuselage/src/components/Tag/Tag.stories.mdx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
22

3-
import { Tag } from '../..';
3+
import { Tag, Box } from '../..';
44

55
<Meta title='Data Display/Tag' parameters={{ jest: ['Tag/spec'] }} />
66

@@ -10,7 +10,7 @@ Used for mentions.
1010

1111
<Canvas>
1212
<Story name='Default'>
13-
<Tag>john.doe</Tag>
13+
<Box display='inline-flex'><Tag>john.doe</Tag></Box>
1414
</Story>
1515
</Canvas>
1616

@@ -20,46 +20,46 @@ Used for mentions.
2020

2121
<Canvas>
2222
<Story name='Pointer'>
23-
<Tag onClick={() => {}}>john.doe</Tag>
23+
<Box display='inline-flex'><Tag onClick={() => {}}>john.doe</Tag></Box>
2424
</Story>
2525
</Canvas>
2626

2727
### Primary
2828

2929
<Canvas>
3030
<Story name='Primary'>
31-
<Tag variant='primary'>john.doe</Tag>
31+
<Box display='inline-flex'><Tag variant='primary'>john.doe</Tag></Box>
3232
</Story>
3333
</Canvas>
3434

3535
### Danger
3636

3737
<Canvas>
3838
<Story name='Danger'>
39-
<Tag variant='danger'>john.doe</Tag>
39+
<Box display='inline-flex'><Tag variant='danger'>john.doe</Tag></Box>
4040
</Story>
4141
</Canvas>
4242

4343
### Warning
4444

4545
<Canvas>
4646
<Story name='Warning'>
47-
<Tag variant='warning'>john.doe</Tag>
47+
<Box display='inline-flex'><Tag variant='warning'>john.doe</Tag></Box>
4848
</Story>
4949
</Canvas>
5050

5151
### Ghost
5252

5353
<Canvas>
5454
<Story name='Ghost'>
55-
<Tag variant='ghost'>john.doe</Tag>
55+
<Box display='inline-flex'><Tag variant='ghost'>john.doe</Tag></Box>
5656
</Story>
5757
</Canvas>
5858

5959
### Disabled
6060

6161
<Canvas>
6262
<Story name='Disabled'>
63-
<Tag disabled>john.doe</Tag>
63+
<Box display='inline-flex'><Tag disabled>john.doe</Tag></Box>
6464
</Story>
6565
</Canvas>

‎packages/fuselage/src/components/Tag/index.js

+22-18
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,37 @@
1+
12
import PropTypes from 'prop-types';
23
import React from 'react';
34

4-
import { Box } from '../..';
5+
import { prependClassName } from '../../helpers/prependClassName';
56

67
export function Tag({
8+
is: TagName = 'span',
9+
small,
10+
medium,
11+
className,
712
disabled,
8-
round,
9-
variant = 'secondary',
1013
onClick,
14+
variant = 'secondary',
1115
...props
1216
}) {
13-
return <Box
14-
is='span'
15-
rcx-tag
16-
rcx-tag--warning={variant === 'warning'}
17-
rcx-tag--secondary={variant === 'secondary'}
18-
rcx-tag--primary={variant === 'primary'}
19-
rcx-tag--danger={variant === 'danger'}
20-
rcx-tag--ghost={variant === 'ghost'}
21-
rcx-tag--disabled={!!disabled}
22-
rcx-tag--round={!!round}
23-
rcx-tag--clickable={!!onClick}
24-
onClick={onClick}
25-
{...props}
26-
/>;
17+
const modifiers = [
18+
variant,
19+
small && 'small',
20+
medium && 'medium',
21+
disabled && 'disabled',
22+
onClick && 'clickable',
23+
]
24+
.map((modifier) => `rcx-tag--${ modifier }`)
25+
.filter(Boolean)
26+
.join(' ');
27+
28+
return <TagName className={prependClassName(className, `rcx-tag ${ modifiers }`)} {...props} />;
2729
}
2830

2931
Tag.propTypes = {
32+
small: PropTypes.bool,
33+
medium: PropTypes.bool,
3034
disabled: PropTypes.bool,
31-
round: PropTypes.bool,
35+
onClick: PropTypes.func,
3236
variant: PropTypes.oneOf(['secondary', 'primary', 'danger', 'warning', 'ghost']),
3337
};

‎packages/fuselage/src/components/Tag/styles.scss

+6-8
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,13 @@ $tag-colors-disabled-background-color: theme('tag-colors-disabled-background-col
7171
background-color: $tag-colors-disabled-background-color;
7272
}
7373

74-
&--round {
75-
overflow: hidden;
76-
77-
text-align: center;
78-
79-
border-radius: lengths.border-radius(full);
74+
&--small {
75+
@include typography.use-font-scale(c2);
8076
}
8177

82-
&--clickable {
83-
@include clickable();
78+
@include clickable();
79+
80+
&--medium {
81+
@include typography.use-font-scale(p2);
8482
}
8583
}

‎packages/fuselage/src/components/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import './Accordion/styles.scss';
22
@import './AutoComplete/styles.scss';
33
@import './Avatar/styles.scss';
4+
@import './Badge/styles.scss';
45
@import './Box/styles.scss';
56
@import './Button/styles.scss';
67
@import './ButtonGroup/styles.scss';

0 commit comments

Comments
 (0)