fix(Input): Extended input html props and docs

fluent-org · Jul 9, 2019 · 5239223 · 5239223
1 parent f6ef8a9
commit 5239223
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 52 deletions.
diff --git a/packages/fluent-ui.com/src/docs/components/Input/README.md b/packages/fluent-ui.com/src/docs/components/Input/README.md
@@ -16,8 +16,8 @@ components: Input
 ```jsx
 () => {
   const [value, setValue] = React.useState('')
-  function handleChange(e) {
-    setValue(e)
+  function handleChange(v) {
+    setValue(v)
   }
   return (
     <Input value={value} onChange={handleChange} />
@@ -36,8 +36,8 @@ components: Input
 ```jsx
 () => {
   const [value, setValue] = React.useState('')
-  function handleChange(e) {
-    setValue(e)
+  function handleChange(v) {
+    setValue(v)
   }
   return (
     <Input value={value} onChange={handleChange} cleared />
@@ -50,8 +50,8 @@ components: Input
 ```jsx
 () => {
   const [value, setValue] = React.useState('')
-  function handleChange(e) {
-    setValue(e)
+  function handleChange(v) {
+    setValue(v)
   }
   return (
     <Input value={value} onChange={handleChange} password />

diff --git a/packages/fluent-ui/src/Input/Input.tsx b/packages/fluent-ui/src/Input/Input.tsx
@@ -3,7 +3,11 @@ import { forwardRef, ReactElement } from 'react'
 import { StyledWrapper, StyledInput, StyledIcon } from './Input.styled'
 import { ChromeClose as ChromeCloseIcon } from '@fluent-ui/icons'
 
-export interface InputProps {
+export interface InputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'value' | 'onChange'
+  > {
   value?: string
   onChange?: (value: string) => void
   placeholder?: string

diff --git a/packages/fluent-ui/src/Input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/fluent-ui/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -10,51 +10,7 @@ exports[`Input basic 1`] = `
   outline: none;
   width: 296px;
   height: 32px;
-  font-size: 14px;
-  padding: 6px 12px;
-  font-family: PingFangSC-Regular,sans-serif,Arial,Helvetica,Roboto;
-  border: 2px solid #cccccc;
-  -webkit-transition: all 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
-  transition: all 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
-}
-
-.c1:hover {
-  border-color: #7a7a7a;
-}
-
-.c1:active,
-.c1:focus {
-  border-color: #0078d7;
-}
-
-.c1:disabled {
-  background-color: #cccccc;
-  color: #7a7a7a;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-<span
-  className="c0"
->
-  <input
-    className="c1"
-    onChange={[Function]}
-    type="text"
-  />
-</span>
-`;
-
-exports[`Input prop cleared 1`] = `
-.c0 {
-  display: inline-block;
-  position: relative;
-}
-
-.c1 {
-  outline: none;
-  width: 296px;
-  height: 32px;
+  line-height: 32px;
   font-size: 14px;
   padding: 6px 12px;
   font-family: PingFangSC-Regular,sans-serif,Arial,Helvetica,Roboto;