Repository: zeit-ui/react (ts)

Issue:
Input iconRight bug
# Bug report 🐞

## Version & Environment
@zeit-ui/^1.5.0-rc.2

Browser: Firefox (works fine on chrome)

## Expection
expecting icon to be inside of input when setting width, but it is not.

## Actual results (or Errors)
default width;
![image](https://user-images.githubusercontent.com/50958739/82119451-56270b80-9787-11ea-8cb1-dcd25e5f094d.png)

width set to 200px;
![image](https://user-images.githubusercontent.com/50958739/82119427-2972f400-9787-11ea-9905-f7d58632866a.png)

Pull request:
fix(input): fix default width of Input cannot shrink under flex
## PR Checklist

- [x] Fix linting errors
- [x] Label has been added


## Change information

fixed #213 


Patch:
diff --git a/components/input/input.tsx b/components/input/input.tsx
index 651b5b7..61d2716 100644
--- a/components/input/input.tsx
+++ b/components/input/input.tsx
@@ -227,6 +227,7 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
diff --git a/pages/en-us/components/input.mdx b/pages/en-us/components/input.mdx
index 9cd494b..e87f846 100644
--- a/pages/en-us/components/input.mdx
+++ b/pages/en-us/components/input.mdx
@@ -105,10 +105,12 @@ Retrieve text input from a user.
 <Playground
   title="Icon"
   desc="Specify an icon component."
-  scope={{ Input, GitIcon }}
+  scope={{ Input, GitIcon, Spacer }}
   code={`
 <>
-  <Input icon={<GitIcon />} placeholder="The Evil Rabbit" />
+  <Input icon={<GitIcon />} placeholder="GitHub" />
+  <Spacer y={.5} />
+  <Input iconRight={<GitIcon />} placeholder="GitHub" />
 </>
 `} />
 
diff --git a/pages/zh-cn/components/input.mdx b/pages/zh-cn/components/input.mdx
index 88c2b16..89835cb 100644
--- a/pages/zh-cn/components/input.mdx
+++ b/pages/zh-cn/components/input.mdx
@@ -105,10 +105,12 @@ export const meta = {
 <Playground
   title="图标"
   desc="指定一个图标组件。"
-  scope={{ Input, GitIcon }}
+  scope={{ Input, GitIcon, Spacer }}
   code={`
 <>
   <Input icon={<GitIcon />} placeholder="输入 Git 地址" />
+  <Spacer y={.5} />
+  <Input iconRight={<GitIcon />} placeholder="输入 Git 地址" />
 </>
 `} />
 


Test patch:
diff --git a/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap b/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap
index 71c9587..d31c075 100644
--- a/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap
+++ b/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap
@@ -135,6 +135,7 @@ initialize {
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -252,6 +253,7 @@ initialize {
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -556,6 +558,7 @@ initialize {
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -673,6 +676,7 @@ initialize {
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -973,6 +977,7 @@ initialize {
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -1090,6 +1095,7 @@ initialize {
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -1394,6 +1400,7 @@ initialize {
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -1511,6 +1518,7 @@ initialize {
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
diff --git a/components/input/__tests__/__snapshots__/index.test.tsx.snap b/components/input/__tests__/__snapshots__/index.test.tsx.snap
index 32a888b..3567ca6 100644
--- a/components/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -78,6 +78,7 @@ exports[`Input should be work with icon 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -180,6 +181,7 @@ exports[`Input should be work with icon 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -299,6 +301,7 @@ exports[`Input should be work with label 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -414,6 +417,7 @@ exports[`Input should be work with label 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -519,6 +523,7 @@ exports[`Input should be work with label 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -610,6 +615,7 @@ exports[`Input should work with different sizes 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -697,6 +703,7 @@ exports[`Input should work with different sizes 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -784,6 +791,7 @@ exports[`Input should work with different sizes 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -871,6 +879,7 @@ exports[`Input should work with different sizes 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -962,6 +971,7 @@ exports[`Input should work with different status 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -1049,6 +1059,7 @@ exports[`Input should work with different status 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
@@ -1136,6 +1147,7 @@ exports[`Input should work with different status 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }
 
diff --git a/components/input/__tests__/__snapshots__/password.test.tsx.snap b/components/input/__tests__/__snapshots__/password.test.tsx.snap
index 23dacee..e0aca24 100644
--- a/components/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -78,6 +78,7 @@ exports[`InputPassword should render correctly 1`] = `
             outline: none;
             border-radius: 0;
             width: 100%;
+            min-width: 0;
             -webkit-appearance: none;
           }