Skip to content

Commit ce7a091

Browse files
PixeledCodePixeledCode
committed
feat(pattern): resolve comments
1 parent 01e1172 commit ce7a091

File tree

3 files changed

+38
-36
lines changed

3 files changed

+38
-36
lines changed

Diff for: ‎packages/paste-website/src/component-examples/FormExamples.ts

+18-19
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ const FormExample = () => {
442442
const phone = useUID();
443443
const birthday = useUID();
444444
return (
445-
<Box display="flex" alignItems="center" justifyContent="center" height="300px">
445+
<Box>
446446
<Button variant="primary" onClick={handleOpen}>
447447
Add new contact
448448
</Button>
@@ -503,7 +503,7 @@ const FormExample = () => {
503503
const phone = useUID();
504504
const country = useUID();
505505
return (
506-
<Box display="flex" alignItems="center" justifyContent="center" height="300px">
506+
<Box>
507507
<PopoverContainer baseId={popoverID}>
508508
<PopoverButton variant="primary">Edit phone number</PopoverButton>
509509
<Popover aria-label="Popover" width="size40">
@@ -556,7 +556,7 @@ const FormExample = () => {
556556
const [selectedValue, setSelectedValue] = React.useState<string | undefined>(undefined);
557557
const tax = useUID();
558558
return (
559-
<Box display="flex" justifyContent="center" marginTop="space130">
559+
<Box display="flex" justifyContent="center">
560560
<Box maxWidth="712px">
561561
<Heading as="h1" variant="heading10">
562562
Tax information
@@ -612,7 +612,7 @@ const FormExample = () => {
612612
const hasNumber = /\d/.test(selectedValue || "");
613613
const hasUppercase = /[A-Z]/.test(selectedValue || "");
614614
return (
615-
<Box maxWidth="size30" margin="auto" marginTop="space130">
615+
<Box maxWidth="size30">
616616
<Box>
617617
<Label htmlFor={password}>Password</Label>
618618
<Input
@@ -646,7 +646,6 @@ const InputWithError = React.memo(
646646
({
647647
id,
648648
label,
649-
placeholder,
650649
registerName,
651650
registerOptions,
652651
insertAfter,
@@ -655,7 +654,6 @@ const InputWithError = React.memo(
655654
}: {
656655
id: string;
657656
label: string;
658-
placeholder: string;
659657
registerName: keyof FormValues;
660658
registerOptions: any;
661659
insertAfter?: React.ReactNode;
@@ -668,7 +666,6 @@ const InputWithError = React.memo(
668666
<Input
669667
id={id}
670668
type="text"
671-
placeholder={placeholder}
672669
{...register(registerName, registerOptions)}
673670
insertAfter={insertAfter ? insertAfter : undefined}
674671
hasError={!!errors[registerName]}
@@ -698,8 +695,15 @@ const { control, handleSubmit, register, setFocus } = useForm<FormValues>({
698695
});
699696
const { errors } = useFormState({ control });
700697
const seed = useUIDSeed();
698+
const fieldList = {
699+
country: "Country",
700+
address: "Address line 1",
701+
city: "City",
702+
state: "State",
703+
zip: "Zip code",
704+
};
701705
return (
702-
<Box maxWidth="608px" margin="auto" marginTop="space140">
706+
<Box maxWidth="608px">
703707
<Heading as="h1" variant="heading10">
704708
Main address
705709
</Heading>
@@ -721,7 +725,7 @@ const { control, handleSubmit, register, setFocus } = useForm<FormValues>({
721725
}}
722726
>
723727
<Text as="span" fontWeight="fontWeightNormal" color="colorTextLink">
724-
{errorKey}
728+
{fieldList[errorKey as keyof FormValues]}
725729
</Text>
726730
</Button>
727731
</CalloutListItem>
@@ -734,7 +738,6 @@ const { control, handleSubmit, register, setFocus } = useForm<FormValues>({
734738
<InputWithError
735739
id={seed("country")}
736740
label="Country"
737-
placeholder="Enter country"
738741
registerName="country"
739742
registerOptions={{
740743
required: "Country is required",
@@ -746,7 +749,6 @@ const { control, handleSubmit, register, setFocus } = useForm<FormValues>({
746749
<InputWithError
747750
id={seed("address")}
748751
label="Address line 1"
749-
placeholder="Enter address"
750752
registerName="address"
751753
registerOptions={{
752754
required: "Address is required",
@@ -757,7 +759,6 @@ const { control, handleSubmit, register, setFocus } = useForm<FormValues>({
757759
<InputWithError
758760
id={seed("city")}
759761
label="City"
760-
placeholder="Enter city"
761762
registerName="city"
762763
registerOptions={{
763764
required: "City is required",
@@ -768,7 +769,6 @@ const { control, handleSubmit, register, setFocus } = useForm<FormValues>({
768769
<InputWithError
769770
id={seed("state")}
770771
label="State"
771-
placeholder="Enter state"
772772
registerName="state"
773773
registerOptions={{
774774
required: "State is required",
@@ -779,7 +779,6 @@ const { control, handleSubmit, register, setFocus } = useForm<FormValues>({
779779
<InputWithError
780780
id={seed("zip")}
781781
label="Zip code"
782-
placeholder="Enter zip code"
783782
registerName="zip"
784783
registerOptions={{
785784
required: "Zip code is required",
@@ -838,7 +837,7 @@ const FormExample = () => {
838837
success: "VAT number validated",
839838
};
840839
return (
841-
<Box maxWidth="size30" margin="auto" marginTop="space130">
840+
<Box maxWidth="size30">
842841
<Form>
843842
<FormControl>
844843
<Box>
@@ -886,28 +885,28 @@ const FormExample = () => {
886885
<DataGridCell>Content</DataGridCell>
887886
<DataGridCell>Content</DataGridCell>
888887
<DataGridCell textAlign="right">
889-
<Button variant="link">Change</Button>
888+
<Anchor href="#confirmation-and-deletion">Change</Anchor>
890889
</DataGridCell>
891890
</DataGridRow>
892891
<DataGridRow>
893892
<DataGridCell>Content</DataGridCell>
894893
<DataGridCell>Content</DataGridCell>
895894
<DataGridCell textAlign="right">
896-
<Button variant="link">Change</Button>
895+
<Anchor href="#confirmation-and-deletion">Change</Anchor>
897896
</DataGridCell>
898897
</DataGridRow>
899898
<DataGridRow>
900899
<DataGridCell>Content</DataGridCell>
901900
<DataGridCell>Content</DataGridCell>
902901
<DataGridCell textAlign="right">
903-
<Button variant="link">Change</Button>
902+
<Anchor href="#confirmation-and-deletion">Change</Anchor>
904903
</DataGridCell>
905904
</DataGridRow>
906905
<DataGridRow>
907906
<DataGridCell>Content</DataGridCell>
908907
<DataGridCell>Content</DataGridCell>
909908
<DataGridCell textAlign="right">
910-
<Button variant="link">Change</Button>
909+
<Anchor href="#confirmation-and-deletion">Change</Anchor>
911910
</DataGridCell>
912911
</DataGridRow>
913912
</DataGridBody>

Diff for: ‎packages/paste-website/src/pages/patterns/form/index.mdx

+6-4
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ Before designing a form you should:
172172

173173
<Callout variant="neutral" marginY="space70">
174174
<CalloutText>
175-
Check accessibility for each form element component—for example, follow Time Picker accessibility guidelines. You can also refer to the WCAG Forms Tutorial for more details.
175+
Check accessibility for each form element component—for example, follow <Anchor href="/components/time-picker#accessibility">Time Picker accessibility guidelines</Anchor>. You can also refer to the <Anchor href="https://www.w3.org/WAI/tutorials/forms/">WCAG Forms Tutorial</Anchor> for more details.
176176
</CalloutText>
177177
</Callout>
178178

@@ -187,13 +187,14 @@ The different parts of a form are:
187187
<strong><Anchor href="/components/form">Form layout component</Anchor></strong>: A wrapper layout component that sets layout and spacing between form elements.
188188
</ListItem>
189189
<ListItem>
190-
<strong>Form element</strong>: Any UI component in a form. Examples: Input, Button, Callout.
190+
<strong>Form element</strong>: Any UI component in a form. Examples: <Anchor href="/components/input">Input</Anchor>, <Anchor href="/components/button">Button</Anchor>, <Anchor href="/components/callout">Callout</Anchor>.
191191
</ListItem>
192192
<ListItem>
193193
<strong>Form header</strong>: Includes form elements like <Anchor href="/components/heading">Heading</Anchor> and <Anchor href="/components/paragraph">Paragraph</Anchor> that describe the purpose of the form.
194194
</ListItem>
195195
<ListItem>
196-
<strong>Form field</strong>: A UI component in a form where users enter information, including their associated Label and Help Text. Examples: Checkbox, Input, Time Picker—with their Label and Help Text.
196+
<strong>Form field</strong>: A UI component in a form where users enter information, including their associated Label and Help Text.
197+
Examples: <Anchor href="/components/checkbox">Checkbox</Anchor>, <Anchor href="/components/input">Input</Anchor>, <Anchor href="/components/time-picker">Time Picker</Anchor>—with their <Anchor href="/components/label">Label</Anchor> and <Anchor href="/components/help-text">Help Text</Anchor>.
197198
</ListItem>
198199
<ListItem>
199200
<strong>Form actions</strong>: Includes form elements like <Anchor href="/components/button">Button</Anchor> or <Anchor href="/components/button-group">Button Group</Anchor> for submitting or navigating a form.
@@ -260,7 +261,7 @@ The different parts of a form are:
260261
<Td>Use a Checkbox to enable binary choices that require a submit action. <br/ ><br/ > Use a Switch for immediate binary on/off choices that don’t require a submit action and applies the user's choice instantly.</Td>
261262
</Tr>
262263
<Tr verticalAlign="top">
263-
<Td><Anchor href="/components/file-picker#file-uploader-vs-file-picker">File Picker</Anchor></Td>
264+
<Td><Anchor href="/components/file-picker">File Picker</Anchor></Td>
264265
<Td>Allows the user to upload only one file at a time.</Td>
265266
</Tr>
266267
<Tr verticalAlign="top">
@@ -969,6 +970,7 @@ Use an [error Callout](/components/callout#error-callout) to communicate errors
969970
PageHeaderKeyword,
970971
PageHeaderHeading,
971972
PageHeaderParagraph,
973+
Anchor
972974
}}
973975
language="jsx"
974976
noInline

Diff for: ‎packages/paste-website/stories/Form.stories.tsx

+14-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ErrorMessage } from "@hookform/error-message";
2+
import { Anchor } from "@twilio-paste/anchor";
23
import { Box } from "@twilio-paste/box";
34
import { Button } from "@twilio-paste/button";
45
import { ButtonGroup } from "@twilio-paste/button-group";
@@ -262,7 +263,6 @@ const InputWithError = React.memo(
262263
({
263264
id,
264265
label,
265-
placeholder,
266266
registerName,
267267
registerOptions,
268268
insertAfter,
@@ -271,7 +271,6 @@ const InputWithError = React.memo(
271271
}: {
272272
id: string;
273273
label: string;
274-
placeholder: string;
275274
registerName: keyof FormValues;
276275
registerOptions: any;
277276
insertAfter?: React.ReactNode;
@@ -284,7 +283,6 @@ const InputWithError = React.memo(
284283
<Input
285284
id={id}
286285
type="text"
287-
placeholder={placeholder}
288286
{...register(registerName, registerOptions)}
289287
insertAfter={insertAfter ? insertAfter : undefined}
290288
hasError={Boolean(errors[registerName])}
@@ -316,6 +314,14 @@ export const ErrorState = (): JSX.Element => {
316314
const { errors } = useFormState({ control });
317315
const seed = useUIDSeed();
318316

317+
const fieldList = {
318+
country: "Country",
319+
address: "Address line 1",
320+
city: "City",
321+
state: "State",
322+
zip: "Zip code",
323+
};
324+
319325
return (
320326
<Box maxWidth="608px" margin="auto" marginTop="space140">
321327
<Heading as="h1" variant="heading10">
@@ -339,7 +345,7 @@ export const ErrorState = (): JSX.Element => {
339345
}}
340346
>
341347
<Text as="span" fontWeight="fontWeightNormal" color="colorTextLink">
342-
{errorKey}
348+
{fieldList[errorKey as keyof FormValues]}
343349
</Text>
344350
</Button>
345351
</CalloutListItem>
@@ -352,7 +358,6 @@ export const ErrorState = (): JSX.Element => {
352358
<InputWithError
353359
id={seed("country")}
354360
label="Country"
355-
placeholder="Enter country"
356361
registerName="country"
357362
registerOptions={{
358363
required: "Country is required",
@@ -364,7 +369,6 @@ export const ErrorState = (): JSX.Element => {
364369
<InputWithError
365370
id={seed("address")}
366371
label="Address line 1"
367-
placeholder="Enter address"
368372
registerName="address"
369373
registerOptions={{
370374
required: "Address is required",
@@ -375,7 +379,6 @@ export const ErrorState = (): JSX.Element => {
375379
<InputWithError
376380
id={seed("city")}
377381
label="City"
378-
placeholder="Enter city"
379382
registerName="city"
380383
registerOptions={{
381384
required: "City is required",
@@ -386,7 +389,6 @@ export const ErrorState = (): JSX.Element => {
386389
<InputWithError
387390
id={seed("state")}
388391
label="State"
389-
placeholder="Enter state"
390392
registerName="state"
391393
registerOptions={{
392394
required: "State is required",
@@ -397,7 +399,6 @@ export const ErrorState = (): JSX.Element => {
397399
<InputWithError
398400
id={seed("zip")}
399401
label="Zip code"
400-
placeholder="Enter zip code"
401402
registerName="zip"
402403
registerOptions={{
403404
required: "Zip code is required",
@@ -507,28 +508,28 @@ export const ConfirmationForm = (): JSX.Element => {
507508
<DataGridCell>Content</DataGridCell>
508509
<DataGridCell>Content</DataGridCell>
509510
<DataGridCell textAlign="right">
510-
<Button variant="link">Change</Button>
511+
<Anchor href="#">Change</Anchor>
511512
</DataGridCell>
512513
</DataGridRow>
513514
<DataGridRow>
514515
<DataGridCell>Content</DataGridCell>
515516
<DataGridCell>Content</DataGridCell>
516517
<DataGridCell textAlign="right">
517-
<Button variant="link">Change</Button>
518+
<Anchor href="#">Change</Anchor>
518519
</DataGridCell>
519520
</DataGridRow>
520521
<DataGridRow>
521522
<DataGridCell>Content</DataGridCell>
522523
<DataGridCell>Content</DataGridCell>
523524
<DataGridCell textAlign="right">
524-
<Button variant="link">Change</Button>
525+
<Anchor href="#">Change</Anchor>
525526
</DataGridCell>
526527
</DataGridRow>
527528
<DataGridRow>
528529
<DataGridCell>Content</DataGridCell>
529530
<DataGridCell>Content</DataGridCell>
530531
<DataGridCell textAlign="right">
531-
<Button variant="link">Change</Button>
532+
<Anchor href="#">Change</Anchor>
532533
</DataGridCell>
533534
</DataGridRow>
534535
</DataGridBody>

0 commit comments

Comments
 (0)