Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: refactor input group #767

Merged
merged 25 commits into from Oct 17, 2019
Merged

feat: refactor input group #767

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
5e3e556
initial refactor
hertweckhr1 Oct 11, 2019
80a2e87
InputGroup.Addon and InputGroup.Input
hertweckhr1 Oct 14, 2019
2aeb2fc
tests and storybook examples
hertweckhr1 Oct 14, 2019
fad770e
round 1 changes
hertweckhr1 Oct 14, 2019
ca06ff9
round 2 no actions, added isButton
hertweckhr1 Oct 14, 2019
bdb1021
clean up children
hertweckhr1 Oct 14, 2019
86cd014
iteration on storybook
hertweckhr1 Oct 15, 2019
3fa0287
no isbutton bool in stories
hertweckhr1 Oct 15, 2019
fa478fa
quick nit fix
hertweckhr1 Oct 15, 2019
be61c76
get rid of inputgroup.input
hertweckhr1 Oct 15, 2019
c5f5971
delete custom and disable style reference
hertweckhr1 Oct 15, 2019
ea6d442
displayname, fix children on test, edit component page
hertweckhr1 Oct 15, 2019
b7d5fb9
added test
hertweckhr1 Oct 15, 2019
01a2fff
pass fd-input-group__button to button children
hertweckhr1 Oct 15, 2019
fd6f3f1
round 4 delete unneeded --compact classnames
hertweckhr1 Oct 15, 2019
00d78b3
merge with master
hertweckhr1 Oct 16, 2019
4e43379
round 5, no compact in button, correct matching for child.type.displa…
hertweckhr1 Oct 16, 2019
e7604cd
remove hardcoded displayName
hertweckhr1 Oct 16, 2019
827119a
added test for isButton
hertweckhr1 Oct 16, 2019
67df3b7
compact inputaddon snapshot added
hertweckhr1 Oct 17, 2019
6346ab4
fixed snapshot for addon with button
hertweckhr1 Oct 17, 2019
8ad745c
spelling nit
hertweckhr1 Oct 17, 2019
d4e291c
edit tests
hertweckhr1 Oct 17, 2019
25c16d1
delete child.type throw error test
hertweckhr1 Oct 17, 2019
0a8b751
nit on test
hertweckhr1 Oct 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
165 changes: 74 additions & 91 deletions src/InputGroup/InputGroup.Component.js
View file
Open in desktop
@@ -1,6 +1,6 @@
import path from 'path';
import React from 'react';
import { Button, FormGroup, FormItem, FormLabel, InputGroup } from '../';
import { Button, FormGroup, FormInput, FormItem, FormLabel, Icon, InputGroup } from '../';
import { ComponentPage, Example } from '../_playground';

export const InputGroupComponent = () => {
Expand All @@ -20,156 +20,133 @@ export const InputGroupComponent = () => {
<FormGroup>
<FormLabel>Left Aligned Text Addon</FormLabel>
<FormItem>
<InputGroup
addon='$'
addonPos='before'
inputValue='1234567890' />
<InputGroup>
<InputGroup.Addon>$</InputGroup.Addon>
<FormInput
placeholder='Type text here' />
</InputGroup>
</FormItem>
</FormGroup>
<br />
<FormGroup>
<FormLabel>Right Aligned Text Addon</FormLabel>
<FormItem>
<InputGroup
addon='€'
addonPos='after'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate weird abbreviations anyway! 🎉

inputValue='1234567890' />
<InputGroup>
<FormInput placeholder='Type text here' />
<InputGroup.Addon>€</InputGroup.Addon>
</InputGroup>
</FormItem>
</FormGroup>

<br />
<p>Compact mode</p>

<FormGroup>
<FormLabel>Left Aligned Text Addon</FormLabel>
<FormItem>
<InputGroup
addon='$'
addonPos='before'
compact
inputValue='1234567890' />
<InputGroup compact>
<InputGroup.Addon>$</InputGroup.Addon>
<FormInput placeholder='Type text here' />
</InputGroup>
</FormItem>
</FormGroup>
<br />
<FormGroup>
<FormLabel>Right Aligned Text Addon</FormLabel>
<FormItem>
<InputGroup
addon='€'
addonPos='after'
compact
inputValue='1234567890' />
<InputGroup compact>
<FormInput
placeholder='Type text here' />
<InputGroup.Addon>€</InputGroup.Addon>
</InputGroup>
</FormItem>
</FormGroup>
</div>
</Example>

<Example
description={`For an integer value input, a spinner can be added allowing the user to
increase or decrease the value.`}
title='Number input'>
<div>
<FormGroup>
<FormLabel>Right Aligned Text Addon</FormLabel>
<FormItem>
<InputGroup inputType='number' inputValue={100} />
</FormItem>
</FormGroup>

<br />
<p>Compact mode</p>

<FormGroup>
<FormLabel>Right Aligned Text Addon</FormLabel>
<FormItem>
<InputGroup compact inputType='number'
inputValue={100} />
</FormItem>
</FormGroup>
</div>
</Example>

<Example
description='The Input with add-on supports icons.'
description='The consumer can add an Icon as a child of InputGroup.Addon.'
title='Input with icons'>
<div>
<FormGroup>
<FormLabel>Input with icon on the left</FormLabel>
<FormItem>
<InputGroup
addonPos='before'
glyph='globe'
inputValue='1234567890' />
<InputGroup>
<InputGroup.Addon>
<Icon glyph='globe' />
</InputGroup.Addon>
<FormInput placeholder='Type text here' />
</InputGroup>
</FormItem>
</FormGroup>

<br />
<p>Compact mode</p>
<FormGroup>
<FormLabel>Input with icon on the left</FormLabel>
<FormItem>
<InputGroup
addonPos='before'
compact
glyph='globe'
inputValue='1234567890' />
<InputGroup compact>
<InputGroup.Addon>
<Icon glyph='globe' />
</InputGroup.Addon>
<FormInput placeholder='Type text here' />
</InputGroup>
</FormItem>
</FormGroup>
<br />
<br />
<FormGroup>
<FormLabel>Input with icon on the right</FormLabel>
<FormItem>
<InputGroup
addonPos='after'
glyph='hide'
inputType='text'
inputValue='1234567890' />
<InputGroup>
<FormInput placeholder='Type text here' />
<InputGroup.Addon>
<Icon glyph='hide' />
</InputGroup.Addon>
</InputGroup>
</FormItem>
</FormGroup>
<br />
<p>Compact mode</p>
<FormGroup>
<FormLabel>Input with icon on the right</FormLabel>
<FormItem>
<InputGroup
addonPos='after'
compact
glyph='hide'
inputValue='1234567890' />
<InputGroup compact>
<FormInput placeholder='Type text here' />
<InputGroup.Addon>
<Icon glyph='hide' />
</InputGroup.Addon>
</InputGroup>
</FormItem>
</FormGroup>
</div>
</Example>

<Example
description={`The Input with add-on supports actions. Actions can be shown with a text
label or icon.`}
title='Input with actions'>
description={`The InputGroup.Addon isButton supports buttons by providing the correct styling. Buttons can be shown with a text
label or icon.`}
title='Input with Buttons'>
<div>
<FormGroup>
<FormLabel>Input with text action</FormLabel>
<FormLabel>Input text with action</FormLabel>
<FormItem>
<InputGroup
actions
addonPos='after'
inputValue='1234567890'>
<Button option='light'>Button</Button>
<InputGroup >
<FormInput placeholder='Type text here' />
<InputGroup.Addon isButton>
<Button option='light'>Button</Button>
</InputGroup.Addon>
</InputGroup>
</FormItem>
</FormGroup>
<br />
<p>Compact mode</p>
<FormGroup>
<FormLabel>Input with text action</FormLabel>
<FormLabel>Input text with action</FormLabel>
<FormItem>
<InputGroup
actions
addonPos='after'
compact
inputValue='1234567890'>
<Button
compact
option='light'>Button</Button>
<InputGroup compact>
<FormInput placeholder='Type text here' />
<InputGroup.Addon isButton>
<Button option='light'>Button</Button>
</InputGroup.Addon>
</InputGroup>
</FormItem>
</FormGroup>
Expand All @@ -178,8 +155,13 @@ export const InputGroupComponent = () => {
<FormGroup>
<FormLabel>Input with icon text action</FormLabel>
<FormItem>
<InputGroup actions addonPos='after'>
<Button glyph='navigation-down-arrow' option='light' />
<InputGroup>
<FormInput />
<InputGroup.Addon isButton>
<Button
glyph='navigation-down-arrow'
option='light' />
</InputGroup.Addon>
</InputGroup>
</FormItem>
</FormGroup>
Expand All @@ -188,12 +170,13 @@ export const InputGroupComponent = () => {
<FormGroup>
<FormLabel>Input with icon text action</FormLabel>
<FormItem>
<InputGroup actions addonPos='after'
compact>
<Button
compact
glyph='navigation-down-arrow'
option='light' />
<InputGroup compact>
<FormInput placeholder='Type text here' />
<InputGroup.Addon isButton>
<Button
glyph='navigation-down-arrow'
option='light' />
</InputGroup.Addon>
</InputGroup>
</FormItem>
</FormGroup>
Expand Down