Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Input): Add child component
TextArea
- Loading branch information
Showing
11 changed files
with
409 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import * as React from 'react' | ||
| import { fireEvent } from '@testing-library/react' | ||
| import { getClasses, render } from '../../test-utils' | ||
| import '@testing-library/jest-dom/extend-expect' | ||
|
|
||
| import Input from '../Input' | ||
| import { name } from '../components/TextArea' | ||
| import { styles } from '../components/TextArea.styled' | ||
| import { TextAreaClassProps } from '../components/TextArea.type' | ||
|
|
||
| const classes = getClasses<TextAreaClassProps>(styles, name) | ||
|
|
||
| describe('Input.TextArea', (): void => { | ||
| const text = 'Hint Text' | ||
|
|
||
| test('should be support ref', (): void => { | ||
| const ref = React.createRef<HTMLTextAreaElement>() | ||
| const { getByTestId } = render(<Input.TextArea ref={ref} data-testid="textarea" />) | ||
| const { current: element } = ref | ||
| expect(element).toEqual(getByTestId('textarea')) | ||
| }) | ||
|
|
||
| test('should be controlled', (): void => { | ||
| const ref = React.createRef<HTMLTextAreaElement>() | ||
| let value = '' | ||
| function handleChange(v: string): void { | ||
| value = v | ||
| } | ||
| render(<Input.TextArea ref={ref} value={value} onChange={handleChange} />) | ||
| fireEvent.change(ref.current!, { target: { value: text } }) | ||
| expect(value).toEqual(text) | ||
| expect(ref.current!).toHaveClass(classes.root) | ||
| }) | ||
|
|
||
| test('should be support placeholder', (): void => { | ||
| const ref = React.createRef<HTMLTextAreaElement>() | ||
| render(<Input.TextArea ref={ref} placeholder={text} />) | ||
| expect((ref.current as HTMLTextAreaElement).placeholder).toEqual(text) | ||
| }) | ||
|
|
||
| test('should be support disabled', (): void => { | ||
| const ref = React.createRef<HTMLTextAreaElement>() | ||
| render(<Input.TextArea ref={ref} disabled={true} />) | ||
| expect((ref.current as HTMLTextAreaElement).disabled).toEqual(true) | ||
| }) | ||
|
|
||
| test('should be support error', (): void => { | ||
| const ref = React.createRef<HTMLTextAreaElement>() | ||
| const { sheets } = render(<Input.TextArea ref={ref} error={true} />) | ||
| expect(ref.current as HTMLTextAreaElement).toHaveClass(classes.error) | ||
| expect(sheets.toString()).toMatchSnapshot() | ||
| }) | ||
|
|
||
| test('should be support ghost', (): void => { | ||
| const ref = React.createRef<HTMLTextAreaElement>() | ||
| const { sheets } = render(<Input.TextArea ref={ref} ghost={true} />) | ||
| expect(ref.current as HTMLTextAreaElement).toHaveClass(classes.ghost) | ||
| expect(sheets.toString()).toMatchSnapshot() | ||
| }) | ||
| }) |
95 changes: 95 additions & 0 deletions
95
packages/fluent-ui/src/Input/__tests__/__snapshots__/TextArea.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Input.TextArea should be support error 1`] = ` | ||
| ".FTextArea-root { | ||
| font: inherit; | ||
| border: 2px solid; | ||
| outline: none; | ||
| padding: 6px 12px; | ||
| transition: background-color 250ms cubic-bezier(0.76, 0.24, 0.23, 0.94) 0ms,color 250ms cubic-bezier(0.76, 0.24, 0.23, 0.94) 0ms,border-color 250ms cubic-bezier(0.76, 0.24, 0.23, 0.94) 0ms; | ||
| border-color: #dedede; | ||
| border-radius: 2px; | ||
| } | ||
| .FTextArea-root:hover { | ||
| border-color: #b5b5b5; | ||
| } | ||
| .FTextArea-root:active, .FTextArea-root:focus { | ||
| border-color: #0078d4; | ||
| } | ||
| .FTextArea-root:disabled { | ||
| color: #8c8c8c; | ||
| cursor: not-allowed; | ||
| pointer-events: none; | ||
| background-color: #e9e9e9; | ||
| } | ||
| .FTextArea-error { | ||
| border-color: #f44336; | ||
| } | ||
| .FTextArea-error:hover { | ||
| border-color: #f44336; | ||
| } | ||
| .FTextArea-error:active, .FTextArea-error:focus { | ||
| border-color: #f44336; | ||
| } | ||
| .FTextArea-ghost { | ||
| border-color: rgba(0, 0, 0, 0.1); | ||
| background-color: transparent; | ||
| } | ||
| .FTextArea-ghost:hover { | ||
| border-color: rgba(0, 0, 0, 0.2); | ||
| } | ||
| .FTextArea-ghost:active, .FTextArea-ghost:focus { | ||
| border-color: rgba(0, 0, 0, 0.4); | ||
| } | ||
| .FTextArea-resize {} | ||
| .FTextArea-resize-0 { | ||
| resize: both; | ||
| }" | ||
| `; | ||
|
|
||
| exports[`Input.TextArea should be support ghost 1`] = ` | ||
| ".FTextArea-root { | ||
| font: inherit; | ||
| border: 2px solid; | ||
| outline: none; | ||
| padding: 6px 12px; | ||
| transition: background-color 250ms cubic-bezier(0.76, 0.24, 0.23, 0.94) 0ms,color 250ms cubic-bezier(0.76, 0.24, 0.23, 0.94) 0ms,border-color 250ms cubic-bezier(0.76, 0.24, 0.23, 0.94) 0ms; | ||
| border-color: #dedede; | ||
| border-radius: 2px; | ||
| } | ||
| .FTextArea-root:hover { | ||
| border-color: #b5b5b5; | ||
| } | ||
| .FTextArea-root:active, .FTextArea-root:focus { | ||
| border-color: #0078d4; | ||
| } | ||
| .FTextArea-root:disabled { | ||
| color: #8c8c8c; | ||
| cursor: not-allowed; | ||
| pointer-events: none; | ||
| background-color: #e9e9e9; | ||
| } | ||
| .FTextArea-error { | ||
| border-color: #f44336; | ||
| } | ||
| .FTextArea-error:hover { | ||
| border-color: #f44336; | ||
| } | ||
| .FTextArea-error:active, .FTextArea-error:focus { | ||
| border-color: #f44336; | ||
| } | ||
| .FTextArea-ghost { | ||
| border-color: rgba(0, 0, 0, 0.1); | ||
| background-color: transparent; | ||
| } | ||
| .FTextArea-ghost:hover { | ||
| border-color: rgba(0, 0, 0, 0.2); | ||
| } | ||
| .FTextArea-ghost:active, .FTextArea-ghost:focus { | ||
| border-color: rgba(0, 0, 0, 0.4); | ||
| } | ||
| .FTextArea-resize {} | ||
| .FTextArea-resize-0 { | ||
| resize: both; | ||
| }" | ||
| `; |
57 changes: 57 additions & 0 deletions
57
packages/fluent-ui/src/Input/components/TextArea.styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { Style, Styles } from 'jss' | ||
| import { Theme } from '../../styles' | ||
| import { TextAreaClassProps, TextAreaProps } from './TextArea.type' | ||
|
|
||
| const root = (theme: Theme): Style => ({ | ||
| outline: 'none', | ||
| font: 'inherit', | ||
| borderRadius: 2, | ||
| border: '2px solid', | ||
| borderColor: theme.colors!.standard!.default, | ||
| transition: theme.transitions!.input, | ||
| '&:hover': { | ||
| borderColor: theme.colors!.standard!.dark1 | ||
| }, | ||
| '&:active, &:focus': { | ||
| borderColor: theme.colors!.primary!.default | ||
| }, | ||
| '&:disabled': { | ||
| color: theme.colors!.standard!.dark2, | ||
| backgroundColor: theme.colors!.standard!.light1, | ||
| cursor: 'not-allowed', | ||
| pointerEvents: 'none' | ||
| }, | ||
| ...theme.sizes!.medium!.input | ||
| }) | ||
|
|
||
| const error = (theme: Theme): Style => ({ | ||
| borderColor: theme.colors!.error!.default, | ||
| '&:hover': { | ||
| borderColor: theme.colors!.error!.default | ||
| }, | ||
| '&:active, &:focus': { | ||
| borderColor: theme.colors!.error!.default | ||
| } | ||
| }) | ||
|
|
||
| const ghost = (theme: Theme): Style => ({ | ||
| backgroundColor: 'transparent', | ||
| borderColor: theme.colors!.standard!.transparent1, | ||
| '&:hover': { | ||
| borderColor: theme.colors!.standard!.transparent2 | ||
| }, | ||
| '&:active, &:focus': { | ||
| borderColor: theme.colors!.standard!.transparent3 | ||
| } | ||
| }) | ||
|
|
||
| const resize = ({ resize }: TextAreaProps): Style => ({ | ||
| resize | ||
| }) | ||
|
|
||
| export const styles = (theme: Theme): Styles<TextAreaClassProps> => ({ | ||
| root: root(theme), | ||
| error: error(theme), | ||
| ghost: ghost(theme), | ||
| resize | ||
| }) |
Oops, something went wrong.