fix: InputControl width (#75)

* Update dependencies

* Force a sane minimum width for InputControl

Author: tassoevan

packages/fuselage/.storybook/jest-results.json

@@ -35,7 +35,7 @@
     "update-storybook": "run-s test:results build-storybook loki:update"
   },
   "peerDependencies": {
-    "@rocket.chat/fuselage-hooks": "^0.2.0-alpha.6",
+    "@rocket.chat/fuselage-hooks": "^0.2.0-alpha.9",
     "react": "^16.8.6",
     "styled-components": "^4.4.0"
   },

packages/fuselage/package.json

@@ -96,8 +96,6 @@ const withIconAddonColors = ({
 export const Input = styled(InputControl)`
   flex: 1 0 auto;
 
-  width: 0;
-
   ${ ({ theme }) => withIconAddonColors(theme.inputColors.normal) }
 
   &:invalid,
@@ -110,6 +108,11 @@ export const Input = styled(InputControl)`
   &.disabled + ${ Addon } {
     pointer-events: none;
   }
+
+  ${ Wrapper } > & {
+    min-width: 0;
+    width: 0;
+  }
 `;
 
 export const StyledInputBoxSkeleton = styled.span`

packages/fuselage/src/components/InputBox/styles.js

@@ -30,7 +30,15 @@ export const InputControl = React.forwardRef(function InputControl({
     || (type === 'select' && 'select')
     || 'input'}
     className={compoundClassName}
+    cols={
+      (type === 'textarea' && 1)
+    || (type === 'select' && 0)
+    || 0}
     ref={mergedRef}
+    size={
+      (type === 'textarea' && undefined)
+    || (type === 'select' && 1)
+    || 1}
     theme={theme}
     type={type === 'textarea' || type === 'select' ? undefined : type}
     htmlType={type}

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

@@ -89,8 +89,7 @@ export const StyledInputControl = styled.input`
 
   flex: 0 0 auto;
 
-  width: 8rem;
-  min-width: 0;
+  min-width: 8rem;
 
   background-color: transparent;