fix: Options Styles (#260)

Author: ggazzo

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_CheckOption.png

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Box, PositionAnimated } from '../Box';
 import { Chip } from '../Chip';
 import { Icon } from '../Icon';
-import { useCursor, Options, OptionAvatar } from '../Options';
+import { useCursor, Options } from '../Options';
 import { InputBox } from '../InputBox';
 
 const Item = (props) => <Box is='div' marginInline='x4' {...props} />;
@@ -53,7 +53,7 @@ export function AutoComplete({
     onChange(currentValue);
   }, [currentValue, onChange]);
 
-  const [cursor, handleKeyDown, setCursor, reset, [visible, hide, show]] = useCursor(value, options, onChange);
+  const [cursor, handleKeyDown, , reset, [visible, hide, show]] = useCursor(value, options, onChange);
 
   useEffect(reset, [filter]);
 
@@ -65,7 +65,7 @@ export function AutoComplete({
       </Chip.Wrapper>
       <Addon children={<Icon name='magnifier' size='x20' />}/>
       <PositionAnimated visible={visible} anchor={containerRef}>
-        <Options role='option' renderEmpty={renderEmpty} renderItem={OptionAvatar} setCursor={setCursor} cursor={cursor} value={value} options={options.map(({ label, value }) => [value, label])} />
+        <Options role='option' renderEmpty={renderEmpty} cursor={cursor} value={value} options={options.map(({ label, value }) => [value, label])} />
       </PositionAnimated>
     </Container>
   );

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Default.png

@@ -1,7 +1,8 @@
 import React, { useCallback, useLayoutEffect, useState, forwardRef, useMemo } from 'react';
 
 
-import { AnimatedVisibility, Box, Flex, Margins, Scrollable } from '../Box';
+import { AnimatedVisibility, Box, Margins, Scrollable } from '../Box';
+import { Icon } from '../Icon';
 import { Avatar } from '../Avatar';
 import { CheckBox } from '../CheckBox';
 import { Tile } from '../Tile';
@@ -21,24 +22,15 @@ const prevent = (e) => {
   e.stopPropagation();
 };
 
-const Li = forwardRef(function Li(props, ref) {
-  return <Box is='li' rcx-option ref={ref} {...props} />;
+const Li = forwardRef(function Li({ children, ...props }, ref) {
+  return <Box rcx-option withTruncatedText display='flex' alignItems='center' is='li' ref={ref} {...props}><Margins inline='x4'>{children}</Margins></Box>;
 });
 
-export const Empty = React.memo(() => <Box is='span' fontScale='p1' color='hint'>Empty</Box>);
+export const Option = React.memo(({ id, avatar, children, label = children, focus, selected, icon, ...options }) => <Li key={id} rcx-option--focus={focus} id={id} rcx-option--selected={selected} aria-selected={selected} {...options}>{avatar && <Avatar size='x28' url={avatar} tile={label}/>}{icon && <Icon size='x16' name={icon}/>} <Box is='span' withTruncatedText flexGrow={1} fontScale='p1' color='default'>{label}</Box>{label !== children && children}</Li>);
 
-export const Option = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} rcx-option--focus={focus} id={id} rcx-option--selected={selected} aria-selected={selected} {...options}>{label}</Li>);
+export const Empty = React.memo(() => <Option is='span' fontScale='p1' color='hint'>Empty</Option>);
 
-export const CheckOption = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} rcx-option--focus={focus} id={id} aria-selected={selected} {...options}><Margins inline='x4'><CheckBox checked={selected} /></Margins><Margins inline='x4'><Box is='span' fontScale='p1' color='default'>{label}</Box></Margins></Li>);
-
-export const OptionAvatar = React.memo(({ id, value, children: label, focus, selected, ...options }) => (
-  <Flex.Container>
-    <Li key={id} rcx-option--focus={focus} id={id} rcx-option--selected={selected} aria-selected={selected} {...options}>
-      <Margins inline='x4'><Avatar size='x20' url={value} tile={label}/></Margins>
-      <Margins inline='x4'><Box is='span' fontScale='p1' color='default'>{label}</Box></Margins>
-    </Li>
-  </Flex.Container>
-));
+export const CheckOption = React.memo(({ selected, children: label, ...options }) => <Option label={label} selected={selected} {...options}><CheckBox checked={selected} /></Option>);
 
 export const Options = React.forwardRef(({
   maxHeight = '144px',
@@ -63,14 +55,12 @@ export const Options = React.forwardRef(({
 
   const optionsMemoized = useMemo(() => options.map(([value, label, selected], i) => <OptionComponent role='option' onMouseDown={(e) => prevent(e) & onSelect([value, label]) && false} key={value} value={value} selected={selected || (multiple !== true && null)} focus={cursor === i || null}>{label}</OptionComponent>), [options, multiple, cursor, onSelect]);
   return <Box rcx-options is='div' {...props}>
-    <Tile padding='x8' elevation='2'>
+    <Tile padding={0} paddingBlock={'x12'} paddingInline={0} elevation='2'>
       <Scrollable vertical smooth>
-        <Margins blockStart='x4'>
-          <Tile ref={ref} elevation='0' padding='none' maxHeight={maxHeight} onMouseDown={prevent} onClick={prevent} is='ol' aria-multiselectable={multiple} role='listbox' aria-multiselectable='true' aria-activedescendant={options && options[cursor] && options[cursor][0]}>
-            {!options.length && <EmptyComponent/>}
-            {optionsMemoized}
-          </Tile>
-        </Margins>
+        <Tile ref={ref} elevation='0' padding='none' maxHeight={maxHeight} onMouseDown={prevent} onClick={prevent} is='ol' aria-multiselectable={multiple} role='listbox' aria-multiselectable='true' aria-activedescendant={options && options[cursor] && options[cursor][0]}>
+          {!options.length && <EmptyComponent/>}
+          {optionsMemoized}
+        </Tile>
       </Scrollable>
     </Tile>
   </Box>;

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_Option.png

@@ -3,13 +3,13 @@ import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
 import LinkTo from '@storybook/addon-links/react';
 import { PropsVariationSection } from '../../../.storybook/helpers';
 import { Box } from '../'
-import { Options, CheckOption, OptionAvatar } from './';
+import { Options, CheckOption, Option } from './';
 const thumb = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
 const options = [
   [1, 'a teste 1'],
   [2, 'b teste 2'],
   [3, 'c teste 3', true],
-  [4, 'd teste 4'],
+  [4, 'd testeadsasdasdasdasdjhasjfhasdkjfhaskdfjhkasjdfhkasjdhfkasjdhfkasjdhfkasjdhfkasdjhfkasdjhfaksjdfhkasjdh 4'],
 ];
 
 <Meta title='Misc/Options' parameters={{ jest: ['Options/spec'] }} />
@@ -26,6 +26,15 @@ An input for selection of options.
   </Story>
 </Preview>
 
+
+<Preview>
+  <Story name='Option'>
+    <Box position='relative' maxWidth={250}>
+      <Options ref={React.createRef()} options={options} renderItem={Option}  cursor={1} />
+    </Box>
+  </Story>
+</Preview>
+
 <Props of={Options} />
 
 <Preview>
@@ -39,7 +48,7 @@ An input for selection of options.
 <Preview>
   <Story name='OptionAvatar'>
     <Box position='relative' maxWidth={250}>
-      <Options ref={React.createRef()} renderItem={(props) => <OptionAvatar {...props} value={thumb}/>}  options={options} />
+      <Options ref={React.createRef()} renderItem={(props) => <Option {...props} avatar={thumb}/>}  options={options} />
     </Box>
   </Story>
 </Preview>

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Options_OptionAvatar.png

@@ -7,7 +7,7 @@
   @include typography.use-font-scale(p2);
   @include typography.use-text-ellipsis;
 
-  padding: lengths.padding(8);
+  padding: lengths.padding(4) lengths.padding(16);
 
   list-style: none;