fix: Select arrow position for empty selects (#157)

* Minor rewrite

* Fixed placeholder for selectfiltered

* Fixed text style, changed prop

* Added 'No Placeholder' to history, prop fix

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

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

@@ -9,7 +9,7 @@ const Container = Box.extend('rcx-select', 'div');
 
 export const Addon = Box.extend('rcx-select__addon', 'div');
 
-const Wrapper = Box.extend('rcx-select__wrapper', 'div'); // ({ children, ...props }) => <InnerWrapper children={React.Children.map(children, (c, i) => <Margins key={i} inline='x4'>{c}</Margins>)} {...props} />;
+const Wrapper = Box.extend('rcx-select__wrapper', 'div');
 
 export const Focus = React.forwardRef((props, ref) => <Box ref={ref} textStyle='p2' textColor='hint' componentClassName='rcx-select__focus' is='button' type='button' {...props}/>);
 
@@ -23,7 +23,7 @@ export const Select = ({
   onChange = () => {},
   getValue = ([value] = []) => value,
   getLabel = ([, label] = []) => label,
-  placeholder,
+  placeholder = '',
   renderOptions: _Options = Options,
 }) => {
   const [internalValue, setInternalValue] = useState(value);
@@ -68,7 +68,7 @@ export const Select = ({
 
   const valueLabel = getLabel(option);
 
-  const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel ? <Box textStyle='p1' textColor='default'>{valueLabel}</Box> : placeholder);
+  const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel || placeholder);
   return (
     <Container disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={
       [
@@ -82,8 +82,10 @@ export const Select = ({
         <Flex.Container>
           <Margins inline='neg-x4'>
             <Wrapper mod-hidden={!!visibleText}>
-              { visibleText && <Flex.Item grow={1}>
-                <Margins inline='x4'><Box is='span' textStyle='p2' textColor='hint' className='rcx-select__placeholder'>{visibleText}</Box></Margins>
+              { (typeof placeholder === 'string' || !!valueLabel) && <Flex.Item grow={1}>
+                <Margins inline='x4'>
+                  <Box is='span' textStyle='p2' textColor={ valueLabel ? 'default' : 'hint' }>{visibleText}</Box>
+                </Margins>
               </Flex.Item>}
               <Anchor disabled={disabled} mod-undecorated={true} filter={filter} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} />
               <Margins inline='x4'><Addon children={<Icon name={ visible === AnimatedVisibility.VISIBLE ? 'cross' : 'arrow-down'} size='20' />}/></Margins>
@@ -102,5 +104,5 @@ export const SelectFiltered = ({
 }) => {
   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>), []);
-  return <Select filter={filter} options={options} {...props} anchor={anchor}/>;
+  return <Select placeholder={null} filter={filter} options={options} {...props} anchor={anchor}/>;
 };

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

@@ -30,7 +30,6 @@ An input for selection of options.
   </Story>
 </Preview>
 
-
 <Preview>
   <Story name='Error'>
     <Select error placeholder="Placeholder here..." options={options}/>
@@ -43,6 +42,13 @@ An input for selection of options.
   </Story>
 </Preview>
 
+#### No Placeholder
+
+<Preview>
+  <Story name='No Placeholder'>
+    <Select options={options}/>
+  </Story>
+</Preview>
 
 <Props of={Select} />