Skip to content

Commit 66700cc

Browse files
joebuonoJoe Buono
joebuono
and
Joe Buono
authored
docs(fix): Update TextField docs (#2295)
* add TextFieldPropControls * refactored useTextFieldProps * update main demo * ironed out demo * added event handlers example * add theme source link * update size example * updated validation error example * update textarea size example * fix overflow bug Co-authored-by: Joe Buono <[email protected]>
1 parent 8659e2f commit 66700cc

12 files changed

+382
-369
lines changed

‎docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import {
2+
TextFieldProps,
3+
TextField,
4+
SelectField,
5+
SwitchField,
6+
Flex,
7+
} from '@aws-amplify/ui-react';
8+
import * as React from 'react';
9+
10+
export interface TextFieldPropControlsProps extends TextFieldProps {
11+
setVariation: (
12+
value: React.SetStateAction<TextFieldProps['variation']>
13+
) => void;
14+
setSize: (value: React.SetStateAction<TextFieldProps['size']>) => void;
15+
setDescriptiveText: (
16+
value: React.SetStateAction<TextFieldProps['descriptiveText']>
17+
) => void;
18+
setPlaceholder: (
19+
value: React.SetStateAction<TextFieldProps['placeholder']>
20+
) => void;
21+
setLabel: (value: React.SetStateAction<TextFieldProps['label']>) => void;
22+
setLabelHidden: (
23+
value: React.SetStateAction<TextFieldProps['labelHidden']>
24+
) => void;
25+
setErrorMessage: (
26+
value: React.SetStateAction<TextFieldProps['errorMessage']>
27+
) => void;
28+
setHasError: (
29+
value: React.SetStateAction<TextFieldProps['hasError']>
30+
) => void;
31+
setIsDisabled: (
32+
value: React.SetStateAction<TextFieldProps['isDisabled']>
33+
) => void;
34+
}
35+
36+
interface TextFieldPropControlsInterface {
37+
(props: TextFieldPropControlsProps): JSX.Element;
38+
}
39+
40+
export const TextFieldPropControls: TextFieldPropControlsInterface = ({
41+
variation,
42+
setVariation,
43+
size,
44+
setSize,
45+
descriptiveText,
46+
setDescriptiveText,
47+
placeholder,
48+
setPlaceholder,
49+
label,
50+
setLabel,
51+
labelHidden,
52+
setLabelHidden,
53+
errorMessage,
54+
setErrorMessage,
55+
hasError,
56+
setHasError,
57+
isDisabled,
58+
setIsDisabled,
59+
}) => {
60+
return (
61+
<Flex direction="column">
62+
<SelectField
63+
label="variation"
64+
value={variation}
65+
onChange={(event) =>
66+
setVariation(event.target.value as TextFieldProps['variation'])
67+
}
68+
>
69+
<option value="">default</option>
70+
<option value="quiet">quiet</option>
71+
</SelectField>
72+
73+
<SelectField
74+
label="size"
75+
value={size}
76+
defaultValue="default"
77+
onChange={(event) =>
78+
setSize(event.target.value as TextFieldProps['size'])
79+
}
80+
>
81+
<option value="small">small</option>
82+
<option value="default">default</option>
83+
<option value="large">large</option>
84+
</SelectField>
85+
86+
<TextField
87+
label="descriptiveText"
88+
value={descriptiveText as string}
89+
onChange={(event) =>
90+
setDescriptiveText(
91+
event.target.value as TextFieldProps['descriptiveText']
92+
)
93+
}
94+
/>
95+
96+
<TextField
97+
label="placeholder"
98+
value={placeholder as string}
99+
onChange={(event) =>
100+
setPlaceholder(event.target.value as TextFieldProps['placeholder'])
101+
}
102+
/>
103+
104+
<TextField
105+
label="label"
106+
value={label as string}
107+
onChange={(event) =>
108+
setLabel(event.target.value as TextFieldProps['label'])
109+
}
110+
/>
111+
112+
<SwitchField
113+
label="labelHidden"
114+
defaultChecked={labelHidden}
115+
labelPosition="end"
116+
onChange={(event) => {
117+
setLabelHidden(event.target.checked as TextFieldProps['labelHidden']);
118+
}}
119+
/>
120+
121+
<TextField
122+
label="errorMessage"
123+
value={errorMessage as string}
124+
onChange={(event) =>
125+
setErrorMessage(event.target.value as TextFieldProps['errorMessage'])
126+
}
127+
/>
128+
129+
<SwitchField
130+
label="hasError"
131+
defaultChecked={hasError}
132+
labelPosition="end"
133+
onChange={(event) => {
134+
setHasError(event.target.checked as TextFieldProps['hasError']);
135+
}}
136+
/>
137+
138+
<SwitchField
139+
label="isDisabled"
140+
defaultChecked={isDisabled}
141+
labelPosition="end"
142+
onChange={(event) => {
143+
setIsDisabled(event.target.checked as TextFieldProps['isDisabled']);
144+
}}
145+
/>
146+
</Flex>
147+
);
148+
};

‎docs/src/pages/[platform]/components/textfield/demo.tsx‎

Lines changed: 41 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -1,207 +1,54 @@
11
import * as React from 'react';
2-
3-
import {
4-
TextField,
5-
Flex,
6-
FlexContainerStyleProps,
7-
TextFieldProps,
8-
} from '@aws-amplify/ui-react';
9-
2+
import { TextField, TextFieldProps } from '@aws-amplify/ui-react';
103
import { Demo } from '@/components/Demo';
4+
import { TextFieldPropControls } from './TextFieldPropControls';
115
import { useTextFieldProps } from './useTextFieldProps';
12-
import { GetFieldControls } from '../shared/GetFieldControls';
13-
import { useFlexContainerStyleProps } from '../shared/useFlexContainerStyleProps';
14-
15-
export const TextFieldDemo = () => {
16-
const flexStyleProps = useFlexContainerStyleProps({
17-
alignItems: '',
18-
alignContent: '',
19-
direction: 'column',
20-
gap: '',
21-
justifyContent: '',
22-
wrap: 'nowrap',
23-
});
24-
const textFieldProps = useTextFieldProps({
25-
autoComplete: 'off',
26-
defaultValue: null,
27-
descriptiveText: 'Enter a valid last name',
28-
errorMessage: '',
29-
hasError: false,
30-
inputMode: 'text',
31-
isDisabled: false,
32-
isReadOnly: false,
33-
isRequired: false,
34-
label: 'Last name',
35-
labelHidden: false,
36-
name: 'last_name',
37-
placeholder: 'Baggins',
38-
size: '',
39-
type: 'text',
40-
value: null,
41-
variation: '',
42-
});
43-
const FlexPropControls = GetFieldControls({
44-
typeName: 'Flex',
45-
fields: flexStyleProps,
46-
});
47-
const TextFieldPropControls = GetFieldControls({
48-
typeName: 'TextField',
49-
fields: textFieldProps,
50-
});
51-
const [
52-
[alignItems],
53-
[alignContent],
54-
[direction],
55-
[gap],
56-
[justifyContent],
57-
[wrap],
58-
] = flexStyleProps;
59-
const [
60-
[autoComplete],
61-
[defaultValue], // leave unused `defaultValue` since destructuring order is important
62-
[descriptiveText],
63-
[errorMessage],
64-
[hasError],
65-
[inputMode],
66-
[isDisabled],
67-
[isReadOnly],
68-
[isRequired],
69-
[label],
70-
[labelHidden],
71-
[name],
72-
[placeholder],
73-
[size],
74-
[type],
75-
[value],
76-
[variation],
77-
] = textFieldProps;
6+
import { demoState } from '@/utils/demoState';
7+
import { getPropString } from '../utils/getPropString';
788

79-
const code =
9+
const propsToCode = (props) => {
10+
return (
8011
`<TextField` +
81-
(alignContent
82-
? `
83-
alignContent={${alignContent}}`
84-
: '') +
85-
(alignItems
86-
? `
87-
alignItems={${alignItems}}`
88-
: '') +
89-
`
90-
autoComplete="${autoComplete}"
91-
descriptiveText="${descriptiveText}"` +
92-
(defaultValue
93-
? `
94-
defaultValue="${defaultValue}"`
95-
: '') +
96-
`
97-
direction="${direction}"` +
98-
(errorMessage
99-
? `
100-
errorMessage="${errorMessage}"`
101-
: '') +
102-
(gap
103-
? `
104-
gap="${gap}"`
105-
: '') +
106-
`
107-
hasError={${hasError}}
108-
inputMode="${inputMode}"
109-
isDisabled={${isDisabled}}
110-
isReadOnly={${isReadOnly}}
111-
isRequired={${isRequired}}` +
112-
(justifyContent
113-
? `
114-
justifyContent={${justifyContent}}`
115-
: '') +
116-
`
117-
label="${label}"
118-
labelHidden={${labelHidden}}
119-
name="${name}"
120-
placeholder="${placeholder}"` +
121-
(size
122-
? `
123-
size="${size}"`
124-
: '') +
125-
`
126-
type="${type}"` +
127-
(value
128-
? `
129-
value="${value}"`
130-
: '') +
131-
(variation
132-
? `
133-
variation="${variation}"`
134-
: '') +
135-
`
136-
wrap="${wrap}"
137-
onChange={(e) => console.info(e.currentTarget.value)}
138-
onInput={(e) => console.info('input fired:', e.currentTarget.value)}
139-
onCopy={(e) => console.info('onCopy fired:', e.currentTarget.value)}
140-
onCut={(e) => console.info('onCut fired:', e.currentTarget.value)}
141-
onPaste={(e) => console.info('onPaste fired:', e.currentTarget.value)}
142-
onSelect={(e) =>
143-
console.info(
144-
'onSelect fired:',
145-
e.currentTarget.value.substring(
146-
e.currentTarget.selectionStart,
147-
e.currentTarget.selectionEnd
148-
)
149-
)
150-
}
151-
/>`;
12+
getPropString(props.variation, 'variation') +
13+
getPropString(props.size, 'size') +
14+
getPropString(props.descriptiveText, 'descriptiveText') +
15+
getPropString(props.placeholder, 'placeholder') +
16+
getPropString(props.label, 'label') +
17+
(props.labelHidden ? '\n labelHidden' : '') +
18+
getPropString(props.errorMessage, 'errorMessage') +
19+
(props.hasError ? '\n hasError' : '') +
20+
(props.isDisabled ? '\n isDisabled' : '') +
21+
`\n/>`
22+
);
23+
};
24+
25+
const defaultTextFieldProps: TextFieldProps = {
26+
descriptiveText: 'Enter a valid last name',
27+
placeholder: 'Baggins',
28+
label: 'Last name',
29+
errorMessage: 'There is an error',
30+
};
31+
32+
export const TextFieldDemo = () => {
33+
const textFieldProps = useTextFieldProps(
34+
(demoState.get('TextField') as TextFieldProps) || defaultTextFieldProps
35+
);
15236

15337
return (
15438
<Demo
155-
code={code}
156-
propControls={
157-
<Flex direction="column">
158-
{TextFieldPropControls}
159-
{FlexPropControls}
160-
</Flex>
161-
}
39+
code={propsToCode(textFieldProps)}
40+
propControls={<TextFieldPropControls {...textFieldProps} />}
16241
>
16342
<TextField
164-
alignContent={alignContent as FlexContainerStyleProps['alignContent']}
165-
alignItems={alignItems as FlexContainerStyleProps['alignItems']}
166-
autoComplete={autoComplete as TextFieldProps<false>['autoComplete']}
167-
descriptiveText={
168-
descriptiveText as TextFieldProps<false>['descriptiveText']
169-
}
170-
defaultValue={defaultValue as TextFieldProps<false>['defaultValue']}
171-
direction={direction as FlexContainerStyleProps['direction']}
172-
errorMessage={errorMessage as TextFieldProps<false>['errorMessage']}
173-
gap={gap as FlexContainerStyleProps['gap']}
174-
hasError={hasError as unknown as boolean}
175-
inputMode={inputMode as TextFieldProps<false>['inputMode']}
176-
isDisabled={isDisabled as unknown as boolean}
177-
isReadOnly={isReadOnly as unknown as boolean}
178-
isRequired={isRequired as unknown as boolean}
179-
justifyContent={
180-
justifyContent as FlexContainerStyleProps['justifyContent']
181-
}
182-
label={label as TextFieldProps<false>['label']}
183-
labelHidden={labelHidden as unknown as boolean}
184-
name={name as TextFieldProps<false>['name']}
185-
placeholder={placeholder as TextFieldProps<false>['placeholder']}
186-
size={size as TextFieldProps<false>['size']}
187-
type={type as TextFieldProps<false>['type']}
188-
value={value as TextFieldProps<false>['value']}
189-
variation={variation as TextFieldProps<false>['variation']}
190-
wrap={wrap as FlexContainerStyleProps['wrap']}
191-
onChange={(e) => console.info(e.currentTarget.value)}
192-
onInput={(e) => console.info('input fired:', e.currentTarget.value)}
193-
onCopy={(e) => console.info('onCopy fired:', e.currentTarget.value)}
194-
onCut={(e) => console.info('onCut fired:', e.currentTarget.value)}
195-
onPaste={(e) => console.info('onPaste fired:', e.currentTarget.value)}
196-
onSelect={(e) =>
197-
console.info(
198-
'onSelect fired:',
199-
e.currentTarget.value.substring(
200-
e.currentTarget.selectionStart,
201-
e.currentTarget.selectionEnd
202-
)
203-
)
204-
}
43+
variation={textFieldProps.variation}
44+
size={textFieldProps.size}
45+
descriptiveText={textFieldProps.descriptiveText}
46+
placeholder={textFieldProps.placeholder}
47+
label={textFieldProps.label}
48+
labelHidden={textFieldProps.labelHidden}
49+
errorMessage={textFieldProps.errorMessage}
50+
hasError={textFieldProps.hasError}
51+
isDisabled={textFieldProps.isDisabled}
20552
/>
20653
</Demo>
20754
);

0 commit comments

Comments
 (0)