fix: outline input and Select text wrapping (#177)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

Author: gabriellsh

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States.png

@@ -81,9 +81,9 @@ export const Select = ({
         <Flex.Container>
           <Margins inline='neg-x4'>
             <Wrapper mod-hidden={!!visibleText}>
-              { visibleText && <Flex.Item grow={1}>
+              { visibleText && <Flex.Item grow={1} shrink={1}>
                 <Margins inline='x4'>
-                  <Box is='span' textStyle='p2' textColor={ valueLabel ? 'default' : 'hint' }>{visibleText}</Box>
+                  <Box is='span' componentClassName='rcx-select__item' 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} />

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png

@@ -5,6 +5,12 @@
 
   align-items: center; // TODO move to .rcx-input-box
 
+  &__item {
+    white-space: nowrap;
+
+    @include use-text-ellipsis;
+  }
+
   &__focus,
   &__placeholder {
     display: inline-block;
@@ -31,10 +37,14 @@
   }
 
   &__wrapper {
+
+    min-width: 0;
+
     user-select: none;
 
     opacity: 1;
     flex-grow: 1;
+    flex-shrink: 1;
 
     &--hidden {
       .rcx-select__focus {

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Variant.png

@@ -3,5 +3,5 @@
 }
 
 @mixin use-focus-shadow($outer-color) {
-  box-shadow: 0 0 0 #{ to-rem(6) } #{ $outer-color };
+  box-shadow: 0 0 0 #{ to-rem($spaces-x4) } #{ $outer-color };
 }