From 4ef17e0599aa4afc6219215321609fb837fb1f4b Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Mon, 16 Mar 2020 19:51:18 -0300
Subject: [PATCH] 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>
---
 ...phone7_Forms_Inputs_Select_No_Placeholder.png | Bin 0 -> 1016 bytes
 ...laptop_Forms_Inputs_Select_No_Placeholder.png | Bin 0 -> 492 bytes
 .../fuselage/src/components/Select/Select.js     |  14 ++++++++------
 .../fuselage/src/components/Select/stories.mdx   |   8 +++++++-
 4 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_No_Placeholder.png
 create mode 100644 packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_No_Placeholder.png

diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_No_Placeholder.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_No_Placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8dfc8dba2deb258123cb525fc68129e1cf2dd63
GIT binary patch
literal 1016
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K50yx-!<hSnCsz8ddILO_JVcj{Imp~3nv6E*A
z2N2Y7q;xPaFfa0SaSW-L^Y+$Rza(~vV;_$nJ~GjD?hn>Shpx=}rJG=sSliQCz%I4@
z-lXpdCLj5p$e3xVO*YF-TmFb$&CQH&MXTNfy=A5sUu{|ZpmX2<`(3>1=b!y$=FIJN
zTO6ntUQ!kpv^6UD?=v@sd&?#~){uF3!J$56?p*s7Z%<DzN?u<e@<oq9|IPFHbyJGV
z;<&2V8yM!yo&Mxc;9Azb%nl5zw%UJv_v~K&zkcJ74bK=dw)*e?SND5Y-1^g;1>6k{
zf(!=?m>4A77#I$7FeFGYGVmxfG$gVx81yhOv{6s8p>k=EXLfe>t{povPJQm{>)Wz#
z-@2@=x28PbD#X}OSzKHk6%!MpHTBZVmoGQZ+q!%A>J+1ut*xxO`ugUXiLV71W|Y^~
z>U!R~e}DSxUH*LzcJr_Q`LpNL(@iQX!&aN-Ca(sn*uHV&!gcHPJTDzQ*cfv?bYsMy
zb?Hw&S1!Gr8LB1fdFjN7j<B$>S^Ku$<X|{6d*;kQv)Q5L<=dCM?>}(v+_|}r<z;0<
z^`>7waKPcTnK?Hj!xvMg*|TSF7t|2pDvAwPS69DZbKm*+```PLHb$H_H)m#K_*eFS
zw!^}J3vb@MSuA+t-n}rZx!0aPU8<6qljE~9=G|49{Vog*){{;y*>rPFRaKRW?LXgy
z>}>CuKF_}WIDY*2)8G4k{r(+a^SM}n;laG$f)+M5Q(o_~va_4^<^ALNGiFpwJ+3dv
z@W8Rt<<UWoHS5-CO+NYJ)hn+_CYF|(_rHtwx;4-Fox;LU;i5Eg!t=^kZ{JS+@>Rah
z+uOUm@BU{SSEY#x>2^SW>{FEM*Pea$p4$WY;Naj-wf{rqLGJo5(trGE<vccac2&=n
zAzt&IuUx-g|3T{c?|Ls74`dtI+OFNZ*H*OKm6w<IWZ}JI>FPlLF8}tejF+FE-FETH
zdv3=VY&dC^Tp+11cmJPnI|J8WZ@$O)ptaRW(eh#6cgOb(0u2Snt1UNXsJxJ6U=rwd
zyK*hVMCxggYx;B5(AB0_^YfbSu`Y0R>RVi}!+B$di@aUQD}B*gwtd<E&T9d4FN3G6
KpUXO@geCw?0;h@q

literal 0
HcmV?d00001

diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_No_Placeholder.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_No_Placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..0eaa33345654b51194524b77a63c2c1667def8bc
GIT binary patch
literal 492
zcmeAS@N?(olHy`uVBq!ia0vp^4M42H!3HGF3O{)ODaPU;cPEB*=VV?2IV{Cao*^7S
zP{WbZ0hF8O>EaktG3V`_jai2RB#wSe7R-C_iy><ML8pyPvv+9Rade-5h`pfnvuX{4
z`1A}1ae0LRpM@gdr}^bxRGs-|ij%jdNRQyTpKCdP>ec*LboO}o_V42#e?E0tcq-V~
zBnRx(Tm0d}kCL8b-T4!rONv~6djIadCp9vb%RksT$*Au*^;=<*KC6Qt<Ah*_Cn5}%
zxS3CKOr#Pw-~3Z~{$as^0*fPg+pT}ruuj-)!1Hj<;i|p=zW%D)@4o%^(Gn}yNe9ED
zxfIer|CIS!CA&9{fA!T@x3`x3y!}>e-}}X3tLN72V>%JJGQ>%MCBsDO#rNOwf=f>K
zFX8}7-pxxlif4>zm@jxH&A7x$)+MmzXwt-+pBNX+xH<W0{F<#CO$_HOdDxgEvNy))
zUCi2QG<P+Fp2w~)CsUZ7%gj2P_RLuHK<mb9Nj7rxbLZV-JfX=@#MLl|Nntqy4(3bs
wz#}&2AFPVfJZ!A?e)EZ$mB$uDX+9R_np?13U!G$EFvb`>UHx3vIVCg!0Dqj%zyJUM

literal 0
HcmV?d00001

diff --git a/packages/fuselage/src/components/Select/Select.js b/packages/fuselage/src/components/Select/Select.js
index bbaf6722ae..ddc44075c6 100644
--- a/packages/fuselage/src/components/Select/Select.js
+++ b/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}/>;
 };
diff --git a/packages/fuselage/src/components/Select/stories.mdx b/packages/fuselage/src/components/Select/stories.mdx
index 74b687b03e..8654c7df3f 100644
--- a/packages/fuselage/src/components/Select/stories.mdx
+++ b/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} />