Unverified Commit 61aca914 authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub

feat: Tiny and Mini Button variations (#298)

parent 074d7d70
......@@ -3,4 +3,20 @@ import React from 'react';
import { Button } from '.';
import { Icon } from '../Icon';
export const ActionButton = ({ icon, ...props }) => <Button {...props} square small flexShrink={0}><Icon name={icon} size='x20'/></Button>;
const getSize = ({ tiny, mini, small }) => {
if (mini) {
return 'x16';
}
if (tiny) {
return 'x20';
}
if (small) {
return 'x24';
}
return 'x20';
};
export const ActionButton = React.forwardRef(({ icon, ...props }, ref) => <Button ref={ref} square flexShrink={0} {...props}><Icon name={icon} size={getSize(props)}/></Button>);
......@@ -121,7 +121,7 @@ Indicates an actionable user action.
common={{ small: true, onClick: action('click') }}
xAxis={{
text: { children: 'Button' },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x16' /> },
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x20' /> },
'text + icon': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</> },
'text + icon + danger': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, danger: true },
'text + icon + success': { children: <><Icon name='circled-arrow-down' size='x12' /> Button</>, success: true },
......@@ -136,6 +136,44 @@ Indicates an actionable user action.
/>
</Story>
#### Tiny
<Story name='States of Tiny Variant'>
<PropsVariationSection
component={Button}
common={{ tiny: true, onClick: action('click') }}
xAxis={{
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x20' /> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
#### Tiny
<Story name='States of Mini Variant'>
<PropsVariationSection
component={Button}
common={{ mini: true, onClick: action('click') }}
xAxis={{
'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x16' /> },
}}
yAxis={{
default: {},
hover: { className: 'hover' },
active: { className: 'active' },
focus: { className: 'focus focus-visible' },
disabled: { disabled: true },
}}
/>
</Story>
### Primary
<Story name='States Of Primary Variant'>
......
......@@ -12,6 +12,8 @@ export const Button = forwardRef(function Button({
primary,
rel,
small,
tiny,
mini,
square,
...props
}, ref) {
......@@ -38,6 +40,8 @@ export const Button = forwardRef(function Button({
rcx-button--small={small}
rcx-button--square={square}
rcx-button--small-square={small && square}
rcx-button--tiny-square={tiny && square}
rcx-button--mini-square={mini && square}
ref={ref}
{...extraProps}
{...props}
......
......@@ -78,6 +78,21 @@
@include with-squared-size(
$size: lengths.size(40),
);
display: flex;
justify-content: center;
align-items: center;
}
&--tiny-square {
@include with-squared-size(
$size: lengths.size(24),
);
}
&--mini-square {
@include with-squared-size(
$size: lengths.size(20),
);
}
&--small-square {
......
import React, { useRef, useCallback } from 'react';
import {
Button,
ActionButton,
PositionAnimated,
Options,
Icon,
useCursor,
} from '..';
......@@ -15,6 +14,9 @@ const menuAction = ([selected], options) => {
const mapOptions = (options) => Object.entries(options).map(([value, { label }]) => [value, label]);
export const Menu = ({
tiny,
mini,
small = tiny || mini ? null : true,
options,
optionWidth,
placement = 'bottom-start',
......@@ -41,18 +43,19 @@ export const Menu = ({
return (
<>
<Button
<ActionButton
ref={ref}
small
ghost
small={small}
tiny={tiny}
mini={mini}
onClick={onClick}
onBlur={hide}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
icon='kebab'
{...props}
>
<Icon name='kebab' size={20} />
</Button>
/>
<PositionAnimated
width='auto'
visible={visible}
......
import React from 'react';
import { Icon as FuselageIcon, ButtonGroup } from '../..';
import { Icon as FuselageIcon, ButtonGroup, ActionButton } from '../..';
const Item = ({ selected, highlighted, clickable, is: Tag = 'div', ...props }) => <Tag
className={[
......@@ -30,6 +30,8 @@ const Avatar = (props) => <Container><div className='rc-box rcx-box--full rcx-si
const Actions = (props) => <ButtonGroup small {...props}/>;
const Action = (props) => <ActionButton small {...props}/>;
Object.assign(Item, {
Menu,
Container,
......@@ -41,6 +43,7 @@ Object.assign(Item, {
Icon,
Avatar,
Actions,
Action,
});
export default Item;
import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
import { ActionButton, Avatar } from '../..';
import { Avatar } from '../..';
import Item from './Item';
<Meta title='Sidebar/Item' parameters={{ jest: ['Sidebar/spec'] }} />
......@@ -19,10 +19,10 @@ Item component to be used inside Sidebar.
</Item.Content>
<Item.Container>
<Item.Actions>
<ActionButton primary success icon='phone'/>
<ActionButton primary danger icon='circle-cross'/>
<ActionButton primary icon='trash'/>
<ActionButton icon='phone'/>
<Item.Action primary success icon='phone'/>
<Item.Action primary danger icon='circle-cross'/>
<Item.Action primary icon='trash'/>
<Item.Action icon='phone'/>
</Item.Actions>
</Item.Container>
</Item>
......@@ -34,10 +34,10 @@ Item component to be used inside Sidebar.
</Item.Content>
<Item.Container>
<Item.Actions>
<ActionButton primary success icon='phone'/>
<ActionButton primary danger icon='circle-cross'/>
<ActionButton primary icon='trash'/>
<ActionButton icon='phone'/>
<Item.Action primary success icon='phone'/>
<Item.Action primary danger icon='circle-cross'/>
<Item.Action primary icon='trash'/>
<Item.Action icon='phone'/>
</Item.Actions>
</Item.Container>
</Item>
......@@ -54,10 +54,10 @@ Item component to be used inside Sidebar.
</Item.Content>
<Item.Container>
<Item.Actions>
<ActionButton primary success icon='phone'/>
<ActionButton primary danger icon='circle-cross'/>
<ActionButton primary icon='trash'/>
<ActionButton icon='phone'/>
<Item.Action primary success icon='phone'/>
<Item.Action primary danger icon='circle-cross'/>
<Item.Action primary icon='trash'/>
<Item.Action icon='phone'/>
</Item.Actions>
</Item.Container>
</Item>
......
import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
import Sidebar from '.';
import { ActionButton, Avatar } from '../..';
import { Avatar } from '../..';
<Meta title='Sidebar' parameters={{ jest: ['Sidebar/spec'] }} />
......@@ -35,10 +35,10 @@ import { ActionButton, Avatar } from '../..';
</Sidebar.Item.Content>
<Sidebar.Item.Container>
<Sidebar.Item.Actions>
<ActionButton primary success icon='phone'/>
<ActionButton primary danger icon='circle-cross'/>
<ActionButton primary icon='trash'/>
<ActionButton icon='phone'/>
<Sidebar.Item.Action primary success icon='phone'/>
<Sidebar.Item.Action primary danger icon='circle-cross'/>
<Sidebar.Item.Action primary icon='trash'/>
<Sidebar.Item.Action icon='phone'/>
</Sidebar.Item.Actions>
</Sidebar.Item.Container>
</Sidebar.Item>
......@@ -50,10 +50,10 @@ import { ActionButton, Avatar } from '../..';
</Sidebar.Item.Content>
<Sidebar.Item.Container>
<Sidebar.Item.Actions>
<ActionButton primary success icon='phone'/>
<ActionButton primary danger icon='circle-cross'/>
<ActionButton primary icon='trash'/>
<ActionButton icon='phone'/>
<Sidebar.Item.Action primary success icon='phone'/>
<Sidebar.Item.Action primary danger icon='circle-cross'/>
<Sidebar.Item.Action primary icon='trash'/>
<Sidebar.Item.Action icon='phone'/>
</Sidebar.Item.Actions>
</Sidebar.Item.Container>
</Sidebar.Item>
......@@ -70,10 +70,10 @@ import { ActionButton, Avatar } from '../..';
</Sidebar.Item.Content>
<Sidebar.Item.Container>
<Sidebar.Item.Actions>
<ActionButton primary success icon='phone'/>
<ActionButton primary danger icon='circle-cross'/>
<ActionButton primary icon='trash'/>
<ActionButton icon='phone'/>
<Sidebar.Item.Action primary success icon='phone'/>
<Sidebar.Item.Action primary danger icon='circle-cross'/>
<Sidebar.Item.Action primary icon='trash'/>
<Sidebar.Item.Action icon='phone'/>
</Sidebar.Item.Actions>
</Sidebar.Item.Container>
</Sidebar.Item>
......
......@@ -24,7 +24,7 @@ TopBar.Section = ({ children, ...props }) =>
TopBar.Wrapper = Wrapper;
TopBar.Avatar = Avatar;
TopBar.Actions = Actions;
TopBar.Action = (props) => <ActionButton ghost {...props}/>;
TopBar.Action = (props) => <ActionButton small ghost {...props}/>;
TopBar.Divider = () => <Divider mbs='neg-x2' mbe={0} />;
TopBar.Title = (props) => <Box rcx-sidebar-top-bar__title fontScale='p2' color='neutral-900' withTruncatedText {...props} />;
......
......@@ -144,7 +144,7 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
&:hover &__menu-wraper,
&:focus-within &__menu-wraper {
width: lengths.size(28);
width: lengths.size(20);
margin-inline: lengths.margin(4);
......@@ -152,15 +152,13 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
}
&__menu {
position: absolute;
top: 50%;
position: fixed;
transform: translateY(-50%);
}
&__menu-wraper {
position: relative;
position: static;
flex-shrink: 0;
......
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