Merge pull request #214 from unix/input

fix(input): fix default width of Input cannot shrink under flex

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;
           }
 

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;
           }
 

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;
           }
 

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;
           }
 

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" />
 </>
 `} />
 

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 地址" />
 </>
 `} />