-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Federico Zivolo
committed
Jan 2, 2019
1 parent
353f254
commit ccf13be
Showing
10 changed files
with
245 additions
and
7 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| The `InputGroup` component takes N children elements and adjusts their | ||
| `border-radius` CSS property according to their order in the parent. | ||
|
|
||
| The first element will lose any eventual rigth `border-radius`, any element | ||
| in the middle will lose `border-radius` on both sides, and the last element | ||
| will lose `border-radius` on its left. | ||
|
|
||
| ```js | ||
| <InputGroup> | ||
| <InputText placeholder="InputText" /> | ||
| <Button importance="secondary">Button</Button> | ||
| </InputGroup> | ||
| ``` | ||
|
|
||
| The above method will automatically inject the `className`, if this behavior is | ||
| not desired, a render-prop can be passed, with the `className` as first argument. | ||
|
|
||
| ```js | ||
| <InputGroup> | ||
| {className => <InputText className={className} placeholder="InputText" />} | ||
| {className => ( | ||
| <Button importance="secondary" className={className}> | ||
| Button | ||
| </Button> | ||
| )} | ||
| </InputGroup> | ||
| ``` | ||
|
|
||
| You can combine any of the components exported by `@quid/react-forms`: | ||
|
|
||
| ```js | ||
| <InputGroup> | ||
| <Button>Btn</Button> | ||
| <InputNumber /> | ||
| </InputGroup> | ||
| ``` |
54 changes: 54 additions & 0 deletions
54
packages/react-forms/src/InputGroup/__snapshots__/index.test.js.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,54 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`applies the expected class names 1`] = ` | ||
| .emotion-3 { | ||
| display: inline-block; | ||
| border-radius: 2px; | ||
| -webkit-transition: 0.2s ease-in-out border-color; | ||
| transition: 0.2s ease-in-out border-color; | ||
| border: 1px solid #8F9BA3; | ||
| } | ||
| .emotion-3:focus-within { | ||
| border-color: #00c1bb; | ||
| } | ||
| .emotion-0 { | ||
| border-radius: 1px 0 0 1px; | ||
| border-left: 0; | ||
| border-top: 0; | ||
| border-bottom: 0; | ||
| } | ||
| .emotion-1 { | ||
| border-radius: 0; | ||
| border-top: 0; | ||
| border-bottom: 0; | ||
| } | ||
| .emotion-2 { | ||
| border-radius: 0 1px 1px 0; | ||
| border-right: 0; | ||
| border-top: 0; | ||
| border-bottom: 0; | ||
| } | ||
| <InputGroup> | ||
| <div | ||
| className="emotion-3 emotion-4" | ||
| > | ||
| <span | ||
| className="emotion-0" | ||
| key=".$.0" | ||
| /> | ||
| <span | ||
| className="emotion-1" | ||
| key=".$.1" | ||
| /> | ||
| <span | ||
| className="emotion-2" | ||
| key=".$.2" | ||
| /> | ||
| </div> | ||
| </InputGroup> | ||
| `; |
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,61 @@ | ||
| // @flow | ||
| import * as React from 'react'; | ||
| import { css } from 'emotion'; | ||
| import styled from '@emotion/styled/macro'; | ||
| import { withFallback as wf } from '@quid/theme'; | ||
|
|
||
| const toArray = (children): Array<React.Element<any> | Function> => | ||
| React.Children.toArray(children).length | ||
| ? React.Children.toArray(children) | ||
| : Array.isArray(children) | ||
| ? children | ||
| : []; | ||
|
|
||
| type Props = { | ||
| children: React.Node, | ||
| className?: ?string, | ||
| }; | ||
|
|
||
| const InputGroup = styled(({ children, className, ...props }: Props) => ( | ||
| <div className={className}> | ||
| {React.Children.toArray( | ||
| toArray(children).map((child, i) => { | ||
| const className = | ||
| i === 0 | ||
| ? css` | ||
| border-radius: 1px 0 0 1px; | ||
| border-left: 0; | ||
| border-top: 0; | ||
| border-bottom: 0; | ||
| ` | ||
| : i === toArray(children).length - 1 | ||
| ? css` | ||
| border-radius: 0 1px 1px 0; | ||
| border-right: 0; | ||
| border-top: 0; | ||
| border-bottom: 0; | ||
| ` | ||
| : css` | ||
| border-radius: 0; | ||
| border-top: 0; | ||
| border-bottom: 0; | ||
| `; | ||
|
|
||
| return typeof child === 'function' | ||
| ? child(className) | ||
| : React.cloneElement(child, { className }); | ||
| }) | ||
| )} | ||
| </div> | ||
| ))` | ||
| display: inline-block; | ||
| border-radius: 2px; | ||
| transition: 0.2s ease-in-out border-color; | ||
| border: 1px solid ${wf(props => props.theme.colors.gray3)}; | ||
| &:focus-within { | ||
| border-color: ${wf(props => props.theme.colors.selected)}; | ||
| } | ||
| `; | ||
|
|
||
| // @component | ||
| export default InputGroup; |
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,30 @@ | ||
| // @flow | ||
| import * as React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
| import InputGroup from '.'; | ||
|
|
||
| it('provides the expected class names', () => { | ||
| mount( | ||
| <InputGroup> | ||
| {cn => expect(cn).toMatchInlineSnapshot(`"css-eklp95"`)} | ||
| {cn => expect(cn).toMatchInlineSnapshot(`"css-1ts4n50"`)} | ||
| {cn => expect(cn).toMatchInlineSnapshot(`"css-cesvsp"`)} | ||
| </InputGroup> | ||
| ); | ||
| }); | ||
|
|
||
| it('applies the expected class names', () => { | ||
| expect( | ||
| mount( | ||
| <InputGroup> | ||
| <span /> | ||
| <span /> | ||
| <span /> | ||
| </InputGroup> | ||
| ) | ||
| ).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("doesn't explodes on unexpected children", () => { | ||
| mount(<InputGroup />); | ||
| }); |
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