feat: Tiny and Mini Button variations (#298)

Author: ggazzo

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Mini_Variant.png

@@ -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>);

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Small_Variant.png

@@ -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'>

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Tiny_Variant.png

@@ -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}

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Menu_Default.png

@@ -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 {

packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Default.png

@@ -1,10 +1,9 @@
 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}

packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_Item_Default.png

@@ -1,6 +1,6 @@
 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;

packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_SidebarItem_Default.png

@@ -1,6 +1,6 @@
 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>

packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Containers_Sidebar_TopBar_Default.png

@@ -1,7 +1,7 @@
 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>

packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png

@@ -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} />;
 

packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Item_Default.png

@@ -144,23 +144,21 @@ $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);
 
       opacity: 1;
     }
 
     &__menu {
-      position: absolute;
-
-      top: 50%;
+      position: fixed;
 
       transform: translateY(-50%);
     }
 
     &__menu-wraper {
-      position: relative;
+      position: static;
 
       flex-shrink: 0;