Unverified Commit 056c1809 authored by gabriellsh's avatar gabriellsh Committed by GitHub
Browse files

chore: Tabs Layout (#125)

parent 8d4e9df8
......@@ -4,6 +4,7 @@ import { Box } from '../Box';
const Container = Box.extend('rcx-tabs');
const ItemsWrapper = Box.extend('rcx-tabs__wrapper');
const ScrollBox = Box.extend('rcx-tabs__scroll-box');
const ItemContainer = Box.extend('rcx-tabs__item', 'button');
export function Tabs({
......@@ -11,19 +12,21 @@ export function Tabs({
...props
}) {
return <Container {...props}>
<ItemsWrapper children={children} role='tablist' />
<ScrollBox>
<ItemsWrapper children={children} role='tablist'/>
</ScrollBox>
</Container>;
}
Tabs.displayName = 'Tabs';
export const TabsItem = forwardRef(function TabsItem({
active,
selected,
...props
}, ref) {
return <ItemContainer
aria-selected={active ? 'true' : 'false'}
mod-active={active}
aria-selected={selected ? 'true' : 'false'}
mod-selected={selected}
ref={ref}
role='tab'
{...props}
......
......@@ -8,18 +8,19 @@ import { Tabs } from '../..';
<Preview>
<Story name='Default'>
<Tabs>
<Tabs.Item active>Tab text 1</Tabs.Item>
<Tabs.Item>Tab text 2</Tabs.Item>
<Tabs.Item>Tab text 3</Tabs.Item>
</Tabs>
<>
<style>
{`body{
padding: 0;
}`}
</style>
<Tabs>
<Tabs.Item selected>Tab text 1</Tabs.Item>
<Tabs.Item>Tab text 2</Tabs.Item>
<Tabs.Item>Tab text 3</Tabs.Item>
<Tabs.Item>Tab text 4</Tabs.Item>
<Tabs.Item>Tab text 5</Tabs.Item>
</Tabs>
</>
</Story>
</Preview>
### Tabs
<Props of={Tabs} />
### Tabs.Item
<Props of={Tabs.Item} />
// TODO: Indication that there are more tab__items left to scroll (some sort of shadow maybe)
.rcx-tabs {
display: flex;
width: 100%;
margin-block-end: $spaces-x8;
border-block-end: #{ $borders-width-x1 } solid #{ $colors-n400 };
border-block-end: #{ $borders-width-x2 } solid #{ $tabs-delimiter-color };
}
.rcx-tabs__scroll-box {
position: relative;
bottom: calc(-1 * #{ $spaces-x8 });
overflow: auto;
width: 100%;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.rcx-tabs__wrapper {
display: flex;
flex: 1 1 0;
width: 100%;
margin-inline: calc(-1 * #{ $spaces-x8 });
margin-block-end: calc(-1 * #{ $borders-width-x1 });
margin-block: calc(#{ $spaces-x4 } + #{ $spaces-x2 });
flex-wrap: nowrap;
}
.rcx-tabs__item {
position: relative;
flex: 0 0 auto;
padding-block: calc(#{ $spaces-x8 } + #{ $spaces-x1 });
padding-inline: $spaces-x32;
min-height: $spaces-x40;
padding-block: calc(#{ $spaces-x2 } + #{ $spaces-x4 });
padding-inline: $spaces-x16;
color: $tabs-color;
border-width: $spaces-x2;
color: $colors-n600;
border-style: solid;
border-color: transparent;
background-color: transparent;
border-block-end-width: $borders-width-x4;
align-items: center;
@include clickable;
@include use-text-style(s2);
&--active {
color: $colors-b500;
border-block-end-color: $colors-b500;
&--selected {
padding-block: $spaces-x4;
padding-inline: calc(#{ $spaces-x16 } + #{ $spaces-x2 });
color: $tabs-selected-color;
border-block-end-color: $tabs-selected-border-color;
border-block-end-width: $borders-width-x4;
border-inline-width: 0;
}
&.hover,
&:hover {
color: $tabs-hover-color;
}
&.active,
&:active {
color: $tabs-active-color;
}
&--disabled {
color: $tabs-disabled-color;
}
&.focus,
&:focus {
padding-inline: $spaces-x16;
border-color: $tabs-focus-border-color;
border-radius: $spaces-x2;
border-block-start-width: $spaces-x2;
border-inline-width: $spaces-x2;
@include use-focus-shadow($tabs-focus-shadow-color);
}
}
@include on-breakpoint('md') {
.rcx-tabs__wrapper {
margin-inline: $spaces-x24;
}
}
......@@ -7,3 +7,4 @@
@import './text-colors.scss';
@import './text-styles.scss';
@import './transitions.scss';
@import './tabs-colors.scss';
$tabs-background-color: theme('tabs-background-color', transparent);
$tabs-border-color: theme('tabs-border-color', transparent);
$tabs-color: theme('tabs-color', $colors-n600);
$tabs-delimiter-color: theme('tabs-color', $colors-n400);
$tabs-selected-color: theme('tabs-selected-color', $colors-b500);
$tabs-selected-border-color: theme('tabs-selected-border-color', $colors-b500);
$tabs-hover-color: theme('tabs-hover-border-color', $colors-n700);
$tabs-active-color: theme('tabs-active-color', $colors-n800);
$tabs-focus-border-color: theme('tabs-focus-border-color', $colors-b500);
$tabs-focus-shadow-color: theme('tabs-focus-shadow-color', $colors-b200);
$tabs-disabled-color: theme('tabs-disabled-color', $colors-n500);
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