Skip to content

Commit cc17bfd

Browse files
hertweckhr1hertweckhr1
authored
feat: refactor input group (#767)
* initial refactor * InputGroup.Addon and InputGroup.Input * tests and storybook examples * round 1 changes * round 2 no actions, added isButton * clean up children * iteration on storybook * no isbutton bool in stories * quick nit fix * get rid of inputgroup.input * delete custom and disable style reference * displayname, fix children on test, edit component page * added test * pass fd-input-group__button to button children * round 4 delete unneeded --compact classnames * round 5, no compact in button, correct matching for child.type.displayName * remove hardcoded displayName * added test for isButton * compact inputaddon snapshot added * fixed snapshot for addon with button * spelling nit * edit tests * delete child.type throw error test * nit on test
1 parent aa7f1f4 commit cc17bfd

File tree

10 files changed

+433
-730
lines changed

10 files changed

+433
-730
lines changed

‎src/InputGroup/InputGroup.Component.js‎

Lines changed: 74 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import path from 'path';
22
import React from 'react';
3-
import { Button, FormGroup, FormItem, FormLabel, InputGroup } from '../';
3+
import { Button, FormGroup, FormInput, FormItem, FormLabel, Icon, InputGroup } from '../';
44
import { ComponentPage, Example } from '../_playground';
55

66
export const InputGroupComponent = () => {
@@ -20,156 +20,133 @@ export const InputGroupComponent = () => {
2020
<FormGroup>
2121
<FormLabel>Left Aligned Text Addon</FormLabel>
2222
<FormItem>
23-
<InputGroup
24-
addon='$'
25-
addonPos='before'
26-
inputValue='1234567890' />
23+
<InputGroup>
24+
<InputGroup.Addon>$</InputGroup.Addon>
25+
<FormInput
26+
placeholder='Type text here' />
27+
</InputGroup>
2728
</FormItem>
2829
</FormGroup>
2930
<br />
3031
<FormGroup>
3132
<FormLabel>Right Aligned Text Addon</FormLabel>
3233
<FormItem>
33-
<InputGroup
34-
addon='€'
35-
addonPos='after'
36-
inputValue='1234567890' />
34+
<InputGroup>
35+
<FormInput placeholder='Type text here' />
36+
<InputGroup.Addon>€</InputGroup.Addon>
37+
</InputGroup>
3738
</FormItem>
3839
</FormGroup>
39-
4040
<br />
4141
<p>Compact mode</p>
42-
4342
<FormGroup>
4443
<FormLabel>Left Aligned Text Addon</FormLabel>
4544
<FormItem>
46-
<InputGroup
47-
addon='$'
48-
addonPos='before'
49-
compact
50-
inputValue='1234567890' />
45+
<InputGroup compact>
46+
<InputGroup.Addon>$</InputGroup.Addon>
47+
<FormInput placeholder='Type text here' />
48+
</InputGroup>
5149
</FormItem>
5250
</FormGroup>
5351
<br />
5452
<FormGroup>
5553
<FormLabel>Right Aligned Text Addon</FormLabel>
5654
<FormItem>
57-
<InputGroup
58-
addon='€'
59-
addonPos='after'
60-
compact
61-
inputValue='1234567890' />
55+
<InputGroup compact>
56+
<FormInput
57+
placeholder='Type text here' />
58+
<InputGroup.Addon>€</InputGroup.Addon>
59+
</InputGroup>
6260
</FormItem>
6361
</FormGroup>
6462
</div>
6563
</Example>
6664

6765
<Example
68-
description={`For an integer value input, a spinner can be added allowing the user to
69-
increase or decrease the value.`}
70-
title='Number input'>
71-
<div>
72-
<FormGroup>
73-
<FormLabel>Right Aligned Text Addon</FormLabel>
74-
<FormItem>
75-
<InputGroup inputType='number' inputValue={100} />
76-
</FormItem>
77-
</FormGroup>
78-
79-
<br />
80-
<p>Compact mode</p>
8166

82-
<FormGroup>
83-
<FormLabel>Right Aligned Text Addon</FormLabel>
84-
<FormItem>
85-
<InputGroup compact inputType='number'
86-
inputValue={100} />
87-
</FormItem>
88-
</FormGroup>
89-
</div>
90-
</Example>
91-
92-
<Example
93-
description='The Input with add-on supports icons.'
67+
description='The consumer can add an Icon as a child of InputGroup.Addon.'
9468
title='Input with icons'>
9569
<div>
9670
<FormGroup>
9771
<FormLabel>Input with icon on the left</FormLabel>
9872
<FormItem>
99-
<InputGroup
100-
addonPos='before'
101-
glyph='globe'
102-
inputValue='1234567890' />
73+
<InputGroup>
74+
<InputGroup.Addon>
75+
<Icon glyph='globe' />
76+
</InputGroup.Addon>
77+
<FormInput placeholder='Type text here' />
78+
</InputGroup>
10379
</FormItem>
10480
</FormGroup>
81+
10582
<br />
10683
<p>Compact mode</p>
10784
<FormGroup>
10885
<FormLabel>Input with icon on the left</FormLabel>
10986
<FormItem>
110-
<InputGroup
111-
addonPos='before'
112-
compact
113-
glyph='globe'
114-
inputValue='1234567890' />
87+
<InputGroup compact>
88+
<InputGroup.Addon>
89+
<Icon glyph='globe' />
90+
</InputGroup.Addon>
91+
<FormInput placeholder='Type text here' />
92+
</InputGroup>
11593
</FormItem>
11694
</FormGroup>
11795
<br />
11896
<br />
11997
<FormGroup>
12098
<FormLabel>Input with icon on the right</FormLabel>
12199
<FormItem>
122-
<InputGroup
123-
addonPos='after'
124-
glyph='hide'
125-
inputType='text'
126-
inputValue='1234567890' />
100+
<InputGroup>
101+
<FormInput placeholder='Type text here' />
102+
<InputGroup.Addon>
103+
<Icon glyph='hide' />
104+
</InputGroup.Addon>
105+
</InputGroup>
127106
</FormItem>
128107
</FormGroup>
129108
<br />
130109
<p>Compact mode</p>
131110
<FormGroup>
132111
<FormLabel>Input with icon on the right</FormLabel>
133112
<FormItem>
134-
<InputGroup
135-
addonPos='after'
136-
compact
137-
glyph='hide'
138-
inputValue='1234567890' />
113+
<InputGroup compact>
114+
<FormInput placeholder='Type text here' />
115+
<InputGroup.Addon>
116+
<Icon glyph='hide' />
117+
</InputGroup.Addon>
118+
</InputGroup>
139119
</FormItem>
140120
</FormGroup>
141121
</div>
142122
</Example>
143123

144124
<Example
145-
description={`The Input with add-on supports actions. Actions can be shown with a text
146-
label or icon.`}
147-
title='Input with actions'>
125+
description={`The InputGroup.Addon isButton supports buttons by providing the correct styling. Buttons can be shown with a text
126+
label or icon.`}
127+
title='Input with Buttons'>
148128
<div>
149129
<FormGroup>
150-
<FormLabel>Input with text action</FormLabel>
130+
<FormLabel>Input text with action</FormLabel>
151131
<FormItem>
152-
<InputGroup
153-
actions
154-
addonPos='after'
155-
inputValue='1234567890'>
156-
<Button option='light'>Button</Button>
132+
<InputGroup >
133+
<FormInput placeholder='Type text here' />
134+
<InputGroup.Addon isButton>
135+
<Button option='light'>Button</Button>
136+
</InputGroup.Addon>
157137
</InputGroup>
158138
</FormItem>
159139
</FormGroup>
160140
<br />
161141
<p>Compact mode</p>
162142
<FormGroup>
163-
<FormLabel>Input with text action</FormLabel>
143+
<FormLabel>Input text with action</FormLabel>
164144
<FormItem>
165-
<InputGroup
166-
actions
167-
addonPos='after'
168-
compact
169-
inputValue='1234567890'>
170-
<Button
171-
compact
172-
option='light'>Button</Button>
145+
<InputGroup compact>
146+
<FormInput placeholder='Type text here' />
147+
<InputGroup.Addon isButton>
148+
<Button option='light'>Button</Button>
149+
</InputGroup.Addon>
173150
</InputGroup>
174151
</FormItem>
175152
</FormGroup>
@@ -178,8 +155,13 @@ export const InputGroupComponent = () => {
178155
<FormGroup>
179156
<FormLabel>Input with icon text action</FormLabel>
180157
<FormItem>
181-
<InputGroup actions addonPos='after'>
182-
<Button glyph='navigation-down-arrow' option='light' />
158+
<InputGroup>
159+
<FormInput />
160+
<InputGroup.Addon isButton>
161+
<Button
162+
glyph='navigation-down-arrow'
163+
option='light' />
164+
</InputGroup.Addon>
183165
</InputGroup>
184166
</FormItem>
185167
</FormGroup>
@@ -188,12 +170,13 @@ export const InputGroupComponent = () => {
188170
<FormGroup>
189171
<FormLabel>Input with icon text action</FormLabel>
190172
<FormItem>
191-
<InputGroup actions addonPos='after'
192-
compact>
193-
<Button
194-
compact
195-
glyph='navigation-down-arrow'
196-
option='light' />
173+
<InputGroup compact>
174+
<FormInput placeholder='Type text here' />
175+
<InputGroup.Addon isButton>
176+
<Button
177+
glyph='navigation-down-arrow'
178+
option='light' />
179+
</InputGroup.Addon>
197180
</InputGroup>
198181
</FormItem>
199182
</FormGroup>

0 commit comments

Comments
 (0)