Unverified Commit 175cb7b4 authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

fix: Sidebar (#288)

parent 32e8f9f3
This diff is collapsed.
......@@ -32,6 +32,14 @@ Shows a count.
</Story>
</Canvas>
### Warning
<Canvas>
<Story name='Warning'>
<Badge variant='warning'>99</Badge>
</Story>
</Canvas>
### Disabled
<Canvas>
......
......@@ -9,5 +9,5 @@ export function Badge(props) {
Badge.propTypes = {
disabled: PropTypes.bool,
variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
variant: PropTypes.oneOf(['secondary', 'primary', 'danger', 'warning', 'ghost']),
};
......@@ -2,20 +2,25 @@ import React from 'react';
import { Icon as FuselageIcon, ButtonGroup } from '../..';
const Item = ({ selected, highlighted, clickable, ...props }) => <div className={[
'rc-box rcx-box--full rcx-sidebar-item',
highlighted && 'rcx-sidebar-item--highlighted',
clickable && 'rcx-sidebar-item--clickable',
selected && 'rcx-sidebar-item--selected',
].filter(Boolean).join(' ')} {...props} />;
const Item = ({ selected, highlighted, clickable, is: Tag = 'div', ...props }) => <Tag
className={[
'rc-box rcx-box--full rcx-sidebar-item',
highlighted && 'rcx-sidebar-item--highlighted',
clickable && 'rcx-sidebar-item--clickable',
selected && 'rcx-sidebar-item--selected',
].filter(Boolean).join(' ')} {...props}/>;
const Container = ({ is: Tag = 'div', ...props }) => <Tag className='rc-box rcx-box--full rcx-sidebar-item__container' {...props}/>;
const Container = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container' {...props}/>;
const Menu = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__menu-wraper ' {...props}/>;
const Content = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__container rcx-sidebar-item__content ${ className }`} {...props}/>;
const Title = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__title ${ className }`} {...props}/>;
const Subtitle = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__subtitle' {...props}/>;
const Time = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__time ${ className }`} {...props}/>;
const Subtitle = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__subtitle ${ className }`} {...props}/>;
const Wrapper = ({ className, ...props }) => <div className={`rc-box rcx-box--full rcx-sidebar-item__wrapper ${ className }`} {...props}/>;
......@@ -26,10 +31,12 @@ const Avatar = (props) => <Container><div className='rc-box rcx-box--full rcx-si
const Actions = (props) => <ButtonGroup small {...props}/>;
Object.assign(Item, {
Menu,
Container,
Content,
Title,
Subtitle,
Time,
Wrapper,
Icon,
Avatar,
......
......@@ -26,6 +26,6 @@ TopBar.Avatar = Avatar;
TopBar.Actions = Actions;
TopBar.Action = (props) => <ActionButton ghost {...props}/>;
TopBar.Divider = () => <Divider mbs='neg-x2' mbe={0} />;
TopBar.Title = (props) => <Box fontScale='p2' color='default' withTruncatedText {...props} />;
TopBar.Title = (props) => <Box rcx-sidebar-top-bar__title fontScale='p2' color='neutral-900' withTruncatedText {...props} />;
export default TopBar;
......@@ -8,6 +8,7 @@ $sidebar-item-color: theme('sidebar-item-color', colors.foreground('hint'));
$sidebar-item-color-highlighted: theme('sidebar-item-color-highlighted', colors.foreground('alternative'));
$sidebar-item-background-color-hover: theme('sidebar-item-background-color-hover', colors.neutral(800));
$sidebar-item-color-hover: theme('sidebar-item-color-hover', colors.foreground('hint'));
$sidebar-item-color-focus: theme('sidebar-item-color-focus', colors.neutral(900));
$sidebar-item-background-color-selected: theme('sidebar-item-background-color-selected', colors.neutral(200));
$sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foreground('hint'));
......@@ -57,23 +58,42 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
@include highlighted;
&--selected {
color: $sidebar-item-color-selected;
background-color: $sidebar-item-background-color-selected;
&__inner {
@extend %sidebar-base;
margin-inline: lengths.margin(-4);
}
&--clickable {
@include clickable;
@include on-focus-visible {
color: $sidebar-item-color-hover;
background-color: $sidebar-item-background-color-hover;
}
@include on-hover {
@include use-no-shadow;
color: $sidebar-item-color-hover;
background-color: $sidebar-item-background-color-hover;
}
@include on-focus-visible {
@include use-focus-shadow-inset($sidebar-item-color-focus);
}
}
&:active,
&--selected {
color: $sidebar-item-color-selected;
background-color: $sidebar-item-background-color-selected;
}
&__avatar {
@include typography.use-with-truncated-text();
flex: 0 0 auto;
margin-block: lengths.padding(4);
@include typography.use-with-truncated-text();
}
&__container {
......@@ -102,11 +122,39 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
margin-inline: lengths.padding(8);
}
&__time {
@include typography.use-font-scale(micro);
margin-inline: lengths.padding(8);
}
&__wrapper {
@extend %sidebar-base;
@include typography.use-with-truncated-text();
display: flex;
}
&:hover &__menu-wraper,
&:focus-within &__menu-wraper {
padding-inline: lengths.padding(16);
opacity: 1;
}
&__menu {
position: absolute;
right: 0;
margin-block: lengths.margin(4);
}
&__menu-wraper {
position: relative;
height: 100%;
padding-inline: 0;
opacity: 0;
}
}
&-title {
......
......@@ -40,6 +40,14 @@ Used for mentions.
</Story>
</Canvas>
### Warning
<Canvas>
<Story name='Warning'>
<Tag variant='warning'>john.doe</Tag>
</Story>
</Canvas>
### Ghost
<Canvas>
......
......@@ -13,6 +13,7 @@ export function Tag({
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'}
......@@ -28,5 +29,5 @@ export function Tag({
Tag.propTypes = {
disabled: PropTypes.bool,
round: PropTypes.bool,
variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
variant: PropTypes.oneOf(['secondary', 'primary', 'danger', 'warning', 'ghost']),
};
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