fix: Select placeholder and story (#179)

packages/fuselage/src/components/Modal/index.js

@@ -50,8 +50,8 @@ export const ModalClose = (props) => <Flex.Item shrink={0}>
   </Button>
 </Flex.Item>;
 
-export const ModalContent = ({ children, ...props }) =>
-  <Scrollable vertical>
+export const ModalContent = ({ children, onScrollContent, ...props }) =>
+  <Scrollable vertical onScrollContent={onScrollContent}>
     <Box componentClassName='rcx-modal__content'>
       <Margins inline='x32'>
         <Box componentClassName='rcx-modal__content-wrapper' {...props}>

packages/fuselage/src/components/Modal/styles.scss

@@ -4,7 +4,7 @@
   position: static;
 
   width: $sizes-full;
-  max-height: $sizes-sh;
+  max-height: 100%;
   margin: auto;
 
   background: none;

packages/fuselage/src/components/Select/Select.js

@@ -5,8 +5,6 @@ import { Icon } from '../Icon';
 import { InputBox } from '../InputBox';
 import { Options, useCursor } from '../Options';
 
-const Container = Box.extend('rcx-select', 'div');
-
 export const Addon = Box.extend('rcx-select__addon', 'div');
 
 const Wrapper = Box.extend('rcx-select__wrapper', 'div');
@@ -25,6 +23,7 @@ export const Select = ({
   getLabel = ([, label] = []) => label,
   placeholder = '',
   renderOptions: _Options = Options,
+  ...props
 }) => {
   const [internalValue, setInternalValue] = useState(value);
 
@@ -69,14 +68,16 @@ export const Select = ({
 
   const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel || (placeholder || typeof placeholder === 'string'));
   return (
-    <Container disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={
+    <Box componentClassName='rcx-select' disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={
       [
 
         error && 'invalid',
         disabled && 'disabled',
 
       ].filter(Boolean).join(' ')
-    }>
+    }
+    { ...props }
+    >
       <Flex.Item>
         <Flex.Container>
           <Margins inline='neg-x4'>
@@ -93,7 +94,7 @@ export const Select = ({
         </Flex.Container>
       </Flex.Item>
       <PositionAnimated visible={visible} anchor={containerRef}><_Options role='listbox' filter={filter} options={filteredOptions} onSelect={internalChanged} cursor={cursor} /></PositionAnimated>
-    </Container>);
+    </Box>);
 };
 
 export const SelectFiltered = ({
@@ -102,6 +103,6 @@ export const SelectFiltered = ({
   ...props
 }) => {
   const [filter, setFilter] = useState('');
-  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1}><InputBox.Input className='rcx-select__focus' ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item></Margins>), []);
+  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1} shrink={1}><InputBox.Input className='rcx-select__focus' ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item></Margins>), []);
   return <Select placeholder={null} filter={filter} options={options} {...props} anchor={anchor}/>;
 };

packages/fuselage/src/components/Select/stories.mdx

@@ -17,6 +17,7 @@ const options = [
   [9, 'd teste 9'],
   [10, 'd teste 10']
 ];
+const optionsEllipses = [[11, 'Very very very very very very very very very large text'], ...options];
 
 <Meta title='Forms|Inputs/Select' parameters={{ jest: ['AutoComplete/spec'] }} />
 
@@ -26,27 +27,27 @@ An input for selection of options.
 
 <Preview>
   <Story name='Default'>
-    <Select placeholder="Placeholder here..." options={options}/>
+    <Select style={{ width: '250px' }} placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
 <Preview>
   <Story name='Error'>
-    <Select error placeholder="Placeholder here..." options={options}/>
+    <Select style={{ width: '250px' }}  error placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
 <Preview>
   <Story name='Disabled'>
-    <Select disabled placeholder="Placeholder here..." options={options}/>
+    <Select style={{ width: '250px' }}  disabled placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
 #### No Placeholder
 
 <Preview>
   <Story name='No Placeholder'>
-    <Select options={options}/>
+    <Select style={{ width: '250px' }}  options={options}/>
   </Story>
 </Preview>
 
@@ -58,20 +59,27 @@ An input for selection of options.
 
 <Preview>
   <Story name='Select with filter'>
-    <SelectFiltered placeholder="Placeholder here..." options={options}/>
+    <SelectFiltered style={{ width: '250px' }} placeholder="Placeholder here..." options={options}/>
+  </Story>
+</Preview>
+
+
+<Preview>
+  <Story name='Select with filter and ellipses'>
+    <SelectFiltered style={{ width: '250px' }} value={11} placeholder="Placeholder here..." options={optionsEllipses}/>
   </Story>
 </Preview>
 
 <Preview>
   <Story name='Select with filter and error'>
-    <SelectFiltered error placeholder="Placeholder here..." options={options}/>
+    <SelectFiltered style={{ width: '250px' }} error placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
 
 <Preview>
   <Story name='Select with filter and disabled'>
-    <SelectFiltered disabled error placeholder="Placeholder here..." options={options}/>
+    <SelectFiltered style={{ width: '250px' }} disabled error placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 

packages/fuselage/src/components/Select/styles.scss

@@ -6,15 +6,15 @@
   align-items: center; // TODO move to .rcx-input-box
 
   &__item {
-    white-space: nowrap;
-
     @include use-text-ellipsis;
   }
 
   &__focus,
   &__placeholder {
     display: inline-block;
 
+    min-width: auto;
+
     user-select: none;
 
     text-align: start;
@@ -41,16 +41,20 @@
     min-width: 0;
 
     user-select: none;
+    white-space: nowrap;
 
     opacity: 1;
     flex-grow: 1;
     flex-shrink: 1;
 
     &--hidden {
-      .rcx-select__focus {
+      & > .rcx-select__focus {
+        width: 0;
+
         transition: none;
 
         opacity: 0;
+        flex-shrink: 1;
       }
     }
   }