From 910c836c0f05ed803a25188770381cc82847af15 Mon Sep 17 00:00:00 2001 From: PixeledCode Date: Mon, 5 May 2025 20:13:18 +0530 Subject: [PATCH 1/2] fix(form): fix pattern links --- .../paste-website/src/pages/patterns/form/index.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/paste-website/src/pages/patterns/form/index.mdx b/packages/paste-website/src/pages/patterns/form/index.mdx index e7d8e0e5b1..158db15aa9 100644 --- a/packages/paste-website/src/pages/patterns/form/index.mdx +++ b/packages/paste-website/src/pages/patterns/form/index.mdx @@ -166,7 +166,7 @@ Before designing a form you should: Don't ask for the same information twice in the same session. Reference: WCAG Provide accessible error identification and messaging. Reference: WCAG - Group related fields using fieldsets and legends with `FormSection` and `FormSectionHeading` from the Form layout component, which render an HTML fieldset and legend. Reference: WebAIM + Group related fields using fieldsets and legends with `FormSection` and `FormSectionHeading` from the Form layout component, which render an HTML fieldset and legend. Reference: WebAIM The order in which form elements are presented on a webpage should be logical and meaningful. Reference: WCAG @@ -184,7 +184,7 @@ The different parts of a form are: - Form layout component: A wrapper layout component that sets layout and spacing between form elements. + Form layout component: A wrapper layout component that sets layout and spacing between form elements. Form element: Any UI component in a form. Examples: Input, Button, Callout. @@ -214,7 +214,7 @@ The different parts of a form are: - Form layout + Form layout Arranges a layout of form elements with preset spacing. @@ -382,7 +382,7 @@ Use single-step forms for: Tasks that users can complete in one go without interruptions or needing external references. - Low cognitive load forms that require a maximum of 8 fields. For longer forms, use a Multi-step form or for settings, use the Settings template and divide the fields with In Page Navigation or Tabs. + Low cognitive load forms that require a maximum of 8 fields. For longer forms, use a Multi-step form or for settings, use the Settings template and divide the fields with In Page Navigation or Tabs. @@ -659,7 +659,7 @@ Inline forms use our [Popover](/components/popover) component. Use Inline forms ## Composition Designing a good form requires making decisions about composition, sequence, form elements, copy, and feedback. -Use the [Form layout component](/components/form) to arrange a layout of form elements with preset spacing. +Use the [Form layout component](/components/form-layout) to arrange a layout of form elements with preset spacing. ### Number of form elements @@ -705,7 +705,7 @@ When ordering your form, place fields in a logical order from a user’s perspec #### Organization: When to break into sections or new pages -After determining the number of form fields, decide how to group them into sections, using `FormSection` from the [Form layout component](/components/form). If a form naturally breaks down into short sections, a [single step form](https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.3vpocpbk0gl7) is likely to be a good way to organize the form. When a form becomes long and has more than 8 questions that are only related by a few topics, [multi-step form](https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.yi4naptd6s8d) would be a better way to organize the form. +After determining the number of form fields, decide how to group them into sections, using `FormSection` from the [Form layout component](/components/form-layout). If a form naturally breaks down into short sections, a [single step form](#single-step-or-page-forms) is likely to be a good way to organize the form. When a form becomes long and has more than 8 questions that are only related by a few topics, [multi-step form](#multi-step-forms) would be a better way to organize the form. ### Form field composition From b8a21ef1c8181840da0ef44e6bfc7239ccd8b433 Mon Sep 17 00:00:00 2001 From: PixeledCode Date: Thu, 8 May 2025 19:55:36 +0530 Subject: [PATCH 2/2] fix(form): update links --- packages/paste-website/src/pages/patterns/form/index.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/paste-website/src/pages/patterns/form/index.mdx b/packages/paste-website/src/pages/patterns/form/index.mdx index 158db15aa9..3f38c64964 100644 --- a/packages/paste-website/src/pages/patterns/form/index.mdx +++ b/packages/paste-website/src/pages/patterns/form/index.mdx @@ -67,6 +67,7 @@ import { import {UnorderedList, OrderedList, ListItem} from '@twilio-paste/list' import {Table, THead, Tr, Th, TBody, Td, TFoot} from '@twilio-paste/table'; import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; +import {InlineCode} from '@twilio-paste/inline-code'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; @@ -166,7 +167,7 @@ Before designing a form you should: Don't ask for the same information twice in the same session. Reference: WCAG Provide accessible error identification and messaging. Reference: WCAG - Group related fields using fieldsets and legends with `FormSection` and `FormSectionHeading` from the Form layout component, which render an HTML fieldset and legend. Reference: WebAIM + Group related fields using fieldsets and legends with FormSection and FormSectionHeading from the Form layout component, which render an HTML fieldset and legend. Reference: WebAIM The order in which form elements are presented on a webpage should be logical and meaningful. Reference: WCAG @@ -818,10 +819,10 @@ The primary Button placement depends on the form type: - For Single Step Forms, Side Modals, Side Panels, Minimizable Dialogs and Popover forms, keep the primary button left-aligned, and placed before secondary buttons for better scannability of the content and its related actions. + For Single Step Forms, Side Modals, Side Panels, Minimizable Dialogs and Popover forms, keep the primary button left-aligned, and placed before secondary buttons for better scannability of the content and its related actions. - For Multi-step Forms and Wizards, keep the primary button right-aligned, placed after secondary buttons to indicate the direction of the form. Refer to our Wizards action footer guidelines for additional guidance. + For Multi-step Forms and Wizards, keep the primary button right-aligned, placed after secondary buttons to indicate the direction of the form. Refer to our Wizards action footer guidelines for additional guidance.