Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
R
Rocket.Chat.Fuselage
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Analytics
Analytics
Repository
Value Stream
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Commits
Open sidebar
RocketChat
Rocket.Chat.Fuselage
Commits
4218e510
Unverified
Commit
4218e510
authored
Nov 07, 2020
by
Tiago Evangelista Pinto
Committed by
GitHub
Nov 07, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: Remove Box dependence from Tag and Badge components (#315)
parent
f3127a1a
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
138 additions
and
43 deletions
+138
-43
packages/fuselage/src/components/Badge/Badge.stories.mdx
packages/fuselage/src/components/Badge/Badge.stories.mdx
+6
-6
packages/fuselage/src/components/Badge/index.js
packages/fuselage/src/components/Badge/index.js
+19
-3
packages/fuselage/src/components/Badge/styles.scss
packages/fuselage/src/components/Badge/styles.scss
+76
-0
packages/fuselage/src/components/Tag/Tag.stories.mdx
packages/fuselage/src/components/Tag/Tag.stories.mdx
+8
-8
packages/fuselage/src/components/Tag/index.js
packages/fuselage/src/components/Tag/index.js
+22
-18
packages/fuselage/src/components/Tag/styles.scss
packages/fuselage/src/components/Tag/styles.scss
+6
-8
packages/fuselage/src/components/index.scss
packages/fuselage/src/components/index.scss
+1
-0
No files found.
packages/fuselage/src/components/Badge/Badge.stories.mdx
View file @
4218e510
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'>
<B
adge>99</Badge
>
<B
ox display='inline-flex'><Badge>99</Badge></Box
>
</Story>
</Canvas>
...
...
@@ -20,7 +20,7 @@ Shows a count.
<Canvas>
<Story name='Primary'>
<B
adge variant='primary'>99</Badge
>
<B
ox display='inline-flex'><Badge variant='primary'>99</Badge></Box
>
</Story>
</Canvas>
...
...
@@ -28,7 +28,7 @@ Shows a count.
<Canvas>
<Story name='Danger'>
<B
adge variant='danger'>99</Badge
>
<B
ox display='inline-flex'><Badge variant='danger'>99</Badge></Box
>
</Story>
</Canvas>
...
...
@@ -36,7 +36,7 @@ Shows a count.
<Canvas>
<Story name='Warning'>
<B
adge variant='warning'>99</Badge
>
<B
ox display='inline-flex'><Badge variant='warning'>99</Badge></Box
>
</Story>
</Canvas>
...
...
@@ -44,6 +44,6 @@ Shows a count.
<Canvas>
<Story name='Disabled'>
<B
adge disabled>99</Badge
>
<B
ox display='inline-flex'><Badge disabled>99</Badge></Box
>
</Story>
</Canvas>
packages/fuselage/src/components/Badge/index.js
View file @
4218e510
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
=
{
...
...
packages/fuselage/src/components/Badge/styles.scss
0 → 100644
View file @
4218e510
@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
;
}
}
packages/fuselage/src/components/Tag/Tag.stories.mdx
View file @
4218e510
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>
packages/fuselage/src/components/Tag/index.js
View file @
4218e510
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
'
]),
};
packages/fuselage/src/components/Tag/styles.scss
View file @
4218e510
...
...
@@ -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
);
}
}
packages/fuselage/src/components/index.scss
View file @
4218e510
@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'
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment