diff --git a/site/docs/components/form-field/accessibility.mdx b/site/docs/components/form-field/accessibility.mdx index 61256d66631..f4d0887e2e8 100644 --- a/site/docs/components/form-field/accessibility.mdx +++ b/site/docs/components/form-field/accessibility.mdx @@ -9,4 +9,4 @@ data: ### Keyboard interactions -All keyboard interactions are supplied by the underlying wrapped components, rather than the Form Field component. \ No newline at end of file +All keyboard interactions are supplied by the underlying wrapped components, rather than the Form Field component. diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index 34c141da430..4f0e7cfe91e 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -7,67 +7,67 @@ data: $ref: ./#/data --- -All examples demonstrate Salt form controls inside the Form Field, including Input, Checkbox and Radio Button. These components are available as part of the Salt component library in addition to Form Field. +All examples demonstrate Salt form controls inside the Form Field, including Input, Checkbox and Radio Button. These components are available as part of the Salt component library in addition to Form Field. ### Default -Form Field is a wrapper for UI controls that are typically found in a form (for example, [Input](../input), [Combobox](../combo-box) or [Radio Button](../radio-button)). Form Field makes these controls accessible by providing them with a visible label, validation control, states and descriptive text elements. +Form Field is a wrapper for UI controls that are typically found in a form (for example, [Input](../input), [Combobox](../combo-box) or [Radio Button](../radio-button)). Form Field makes these controls accessible by providing them with a visible label, validation control, states and descriptive text elements. ### Disabled -Form Field can be disabled via the prop ‘disabled’. - -- The prop should be applied to the field, not the control it contains, for expected results. +Form Field can be disabled via the prop ‘disabled’. -- Fields are typically disabled if the context or required permissions prevent the user from interacting with a field. +- The prop should be applied to the field, not the control it contains, for expected results. -- Text contrast is not WCAG AA compliant; an editable field is only disabled if the field is not relevant at the current time. +- Fields are typically disabled if the context or required permissions prevent the user from interacting with a field. + +- Text contrast is not WCAG AA compliant; an editable field is only disabled if the field is not relevant at the current time. ### Helper Text -Form Field can display Helper Text using the `FormFieldHelperText` component. +Form Field can display Helper Text using the `FormFieldHelperText` component. -- Use Helper Text to provide additional guidance to users, such as an instruction (when it’s not obvious what action the user must take), or if you need to show an example of acceptable formats to increase the likelihood of successful entry. +- Use Helper Text to provide additional guidance to users, such as an instruction (when it’s not obvious what action the user must take), or if you need to show an example of acceptable formats to increase the likelihood of successful entry. -- Keep your Form Field Label short by moving guidance to the Helper Text. +- Keep your Form Field Label short by moving guidance to the Helper Text. ### Helper Text As Tooltip -Display the helper text in a Tooltip when you are low on screen real-estate. +Display the helper text in a Tooltip when you are low on screen real-estate. ### Label -Form field provides a visible label which should be used to describe the form control in the field. The label is placed above the form control by default. Display the label via the `FormFieldLabel` component. +Form field provides a visible label which should be used to describe the form control in the field. The label is placed above the form control by default. Display the label via the `FormFieldLabel` component. -- The label should be easy to scan and be no more than 3 words long. +- The label should be easy to scan and be no more than 3 words long. -- Use the label to describe the information/data the field is collecting (e.g., Name, Location, Currency). +- Use the label to describe the information/data the field is collecting (e.g., Name, Location, Currency). -- Use `FormFieldHelperText` to provide additional information and context to help the user complete the field. See the ‘Helper Text’ section below. +- Use `FormFieldHelperText` to provide additional information and context to help the user complete the field. See the ‘Helper Text’ section below. ### Label placement left -The form field label can be positioned to the left of the form control via the prop ‘labelPlacement’. +The form field label can be positioned to the left of the form control via the prop ‘labelPlacement’. -- Place your label to the left of the control if your application is limited in vertical real estate or if you have a very data heavy, dense form where it’s preferable to have as many fields visible as possible without scrolling. +- Place your label to the left of the control if your application is limited in vertical real estate or if you have a very data heavy, dense form where it’s preferable to have as many fields visible as possible without scrolling. @@ -88,81 +88,81 @@ You can display multiple controls within a single Form Field. Wrap the controls ### Necessity Label -If a field is required, it can be marked with a "Required”, “Optional”, or “*” indicator using the `necessity` prop. +If a field is required, it can be marked with a "Required”, “Optional”, or “\*” indicator using the `necessity` prop. ### Readonly -Form Field can be set as read-only via the prop ‘readOnly’. +Form Field can be set as read-only via the prop ‘readOnly’. -- The prop should be applied to the field, not the control it contains, for expected results. +- The prop should be applied to the field, not the control it contains, for expected results. -- Set the field to read-only if you’re displaying values that are predefined and not editable, e.g., entry that’s populated and fixed by template selection. +- Set the field to read-only if you’re displaying values that are predefined and not editable, e.g., entry that’s populated and fixed by template selection. -- Adheres to WCAG AA text contrast for legibility; read-only field content is always relevant to the form, but cannot be changed. +- Adheres to WCAG AA text contrast for legibility; read-only field content is always relevant to the form, but cannot be changed. ### Validation -Form Fields can show validation states (warning, success, error) with the prop `validationStatus`. +Form Fields can show validation states (warning, success, error) with the prop `validationStatus`. -- The prop should be applied to the field,not the control it contains, for expected results. +- The prop should be applied to the field,not the control it contains, for expected results. -- Use the error state to alert the user of a critical issue that’s related to the field entry. This issue, which may jeopardize completion of the task, usually requires action from the user to resolve the error. +- Use the error state to alert the user of a critical issue that’s related to the field entry. This issue, which may jeopardize completion of the task, usually requires action from the user to resolve the error. -- Display the warning state when you need to alert the user of a potential issue that won’t prevent the user from continuing with the task, but may cause errors if it’s not addressed. +- Display the warning state when you need to alert the user of a potential issue that won’t prevent the user from continuing with the task, but may cause errors if it’s not addressed. ### With Controls -Form Field can wrap any Salt UI control that is typically found in a form, such as Input, Checkbox and Radio Button components. +Form Field can wrap any Salt UI control that is typically found in a form, such as Input, Checkbox and Radio Button components. -- Form Field doesn’t have primary and secondary variants. Any variants apply to the field controls contained within Form Field and can be displayed via the components `variant` prop if supported. +- Form Field doesn’t have primary and secondary variants. Any variants apply to the field controls contained within Form Field and can be displayed via the components `variant` prop if supported. ### Grouped With Label Left -Wrap multiple Form Fields in a Stack Layout to form a group. +Wrap multiple Form Fields in a Stack Layout to form a group. - Use the same label placement on each field. - Spread grouped props on the Form Fields to reduce code repetition. - Set the `role` on the Stack layout to "group" to enhance accessibility. -This example shows a group with the fields `labelPlacement` props set to "left". +This example shows a group with the fields `labelPlacement` props set to "left". ### Grouped With Label Top - -Wrap multiple Form Fields in a Stack Layout to form a group. + +Wrap multiple Form Fields in a Stack Layout to form a group. - Use the same label placement on each field. - Spread grouped props on the Form Fields to reduce code repetition. - Set the `role` on the Stack layout to "group" to enhance accessibility. -This example shows a group with the fields `labelPlacement` props set to "top". +This example shows a group with the fields `labelPlacement` props set to "top". ### Grouped With Label Right -Wrap multiple Form Fields in a Stack Layout to form a group. +Wrap multiple Form Fields in a Stack Layout to form a group. - Use the same label placement on each field. - Spread grouped props on the Form Fields to reduce code repetition. - Set the `role` on the Stack layout to "group" to enhance accessibility. -This example shows a group with the fields `labelPlacement` props set to "right". +This example shows a group with the fields `labelPlacement` props set to "right". @@ -183,7 +183,7 @@ Use a Grid Layout within a group to create multiple columns where empty slots ma ### Grouped With Variant -Grouped Form Fields should all have the same variant. Set the `variant` prop on each field to the same. To avoid code repetition, spread the props onto the fields. +Grouped Form Fields should all have the same variant. Set the `variant` prop on each field to the same. To avoid code repetition, spread the props onto the fields. diff --git a/site/docs/components/form-field/index.mdx b/site/docs/components/form-field/index.mdx index 7027d6cc68b..bc26a7e9de5 100644 --- a/site/docs/components/form-field/index.mdx +++ b/site/docs/components/form-field/index.mdx @@ -1,7 +1,7 @@ --- title: Form Field data: - description: Form Field is a wrapper for UI controls that are typically found in a form (for example, Input, Combobox or Radio Button). It is required to make these controls accessible by providing them with a visible label, validation control and states and descriptive text elements. + description: Form Field is a wrapper for UI controls that are typically found in a form (for example, Input, Combobox or Radio Button). It is required to make these controls accessible by providing them with a visible label, validation control and states and descriptive text elements. sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/form-field/FormField.tsx" package: name: "@salt-ds/core" diff --git a/site/docs/components/form-field/usage.mdx b/site/docs/components/form-field/usage.mdx index 3d2ab12a7c7..5e73ebc932a 100644 --- a/site/docs/components/form-field/usage.mdx +++ b/site/docs/components/form-field/usage.mdx @@ -9,15 +9,15 @@ data: ### Using the Form Field component -- We highly recommend using the Form Field Label and Form Field Helper Text components within Form Field to provide your form elements with the descriptive label and validation feedback required to ensure ADA compliance. +- We highly recommend using the Form Field Label and Form Field Helper Text components within Form Field to provide your form elements with the descriptive label and validation feedback required to ensure ADA compliance. -- Align the Form Field to the correct Salt layout grid for your density and viewport size. Set the width of the form control to the number of columns that best reflects the length of the control’s expected value. The form control width can be set independently of the Label and Helper Text if required. +- Align the Form Field to the correct Salt layout grid for your density and viewport size. Set the width of the form control to the number of columns that best reflects the length of the control’s expected value. The form control width can be set independently of the Label and Helper Text if required. -- Use Form Field as a wrapper for editable components in a form layout—such as a simple form, filter panel or cash ticket. +- Use Form Field as a wrapper for editable components in a form layout—such as a simple form, filter panel or cash ticket. #### Form Pattern -Follow the Salt [Forms pattern](/salt/patterns/forms), for guidance using Form Fields in forms. +Follow the Salt [Forms pattern](/salt/patterns/forms), for guidance using Form Fields in forms. ### Import diff --git a/site/src/examples/form-field/Default.tsx b/site/src/examples/form-field/Default.tsx index 6dbdda4f12d..b059b000328 100644 --- a/site/src/examples/form-field/Default.tsx +++ b/site/src/examples/form-field/Default.tsx @@ -1,12 +1,18 @@ import { ReactElement } from "react"; -import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const Default = (): ReactElement => ( - - Form Field label - - Helper text - - + + Form Field label + + Helper text + + ); diff --git a/site/src/examples/form-field/Disabled.tsx b/site/src/examples/form-field/Disabled.tsx index 08fc8365b26..3654df48711 100644 --- a/site/src/examples/form-field/Disabled.tsx +++ b/site/src/examples/form-field/Disabled.tsx @@ -1,12 +1,18 @@ import { ReactElement } from "react"; -import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const Disabled = (): ReactElement => ( - - Form Field label - - Helper text - - + + Form Field label + + Helper text + + ); diff --git a/site/src/examples/form-field/GroupedWithEmptySlot.tsx b/site/src/examples/form-field/GroupedWithEmptySlot.tsx index c5ceec4f1ce..271d8b526a8 100644 --- a/site/src/examples/form-field/GroupedWithEmptySlot.tsx +++ b/site/src/examples/form-field/GroupedWithEmptySlot.tsx @@ -1,11 +1,19 @@ import { ReactElement } from "react"; -import { FormField,Checkbox, GridLayout, StackLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + Checkbox, + GridLayout, + StackLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; -export const GroupedWithEmptySlot = (): ReactElement => ( - ( + + > Form Field label left diff --git a/site/src/examples/form-field/GroupedWithLabelLeft.tsx b/site/src/examples/form-field/GroupedWithLabelLeft.tsx index 070e6335ef4..3276e85534a 100644 --- a/site/src/examples/form-field/GroupedWithLabelLeft.tsx +++ b/site/src/examples/form-field/GroupedWithLabelLeft.tsx @@ -1,34 +1,41 @@ import { ReactElement } from "react"; -import { FormField, FormFieldLabelPlacement, StackLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FormFieldLabelPlacement, + StackLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const GroupedWithLabelLeft = (): ReactElement => { - const groupedProps: { labelPlacement: FormFieldLabelPlacement } = { - labelPlacement: "left", - }; - - return ( - - - Form Field label left - - Helper text - - - - Form Field label that's extra long. Showing that labels wrap around to - the line. - - - - - Form Field label - - Helper text - - - Form Field label - - - - ); - }; \ No newline at end of file + const groupedProps: { labelPlacement: FormFieldLabelPlacement } = { + labelPlacement: "left", + }; + + return ( + + + Form Field label left + + Helper text + + + + Form Field label that's extra long. Showing that labels wrap around to + the line. + + + + + Form Field label + + Helper text + + + Form Field label + + + + ); +}; diff --git a/site/src/examples/form-field/GroupedWithLabelRight.tsx b/site/src/examples/form-field/GroupedWithLabelRight.tsx index dd56729ea46..9aabe37887e 100644 --- a/site/src/examples/form-field/GroupedWithLabelRight.tsx +++ b/site/src/examples/form-field/GroupedWithLabelRight.tsx @@ -1,34 +1,41 @@ import { ReactElement } from "react"; -import { FormField, FormFieldLabelPlacement, StackLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FormFieldLabelPlacement, + StackLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const GroupedWithLabelRight = (): ReactElement => { - const groupedProps: { labelPlacement: FormFieldLabelPlacement } = { - labelPlacement: "right", - }; - - return ( - - - Form Field label left - - Helper text - - - - Form Field label that's extra long. Showing that labels wrap around to - the line. - - - - - Form Field label - - Helper text - - - Form Field label - - - - ); - }; \ No newline at end of file + const groupedProps: { labelPlacement: FormFieldLabelPlacement } = { + labelPlacement: "right", + }; + + return ( + + + Form Field label left + + Helper text + + + + Form Field label that's extra long. Showing that labels wrap around to + the line. + + + + + Form Field label + + Helper text + + + Form Field label + + + + ); +}; diff --git a/site/src/examples/form-field/GroupedWithLabelTop.tsx b/site/src/examples/form-field/GroupedWithLabelTop.tsx index 4b2402b50b3..890ff0f7b19 100644 --- a/site/src/examples/form-field/GroupedWithLabelTop.tsx +++ b/site/src/examples/form-field/GroupedWithLabelTop.tsx @@ -1,34 +1,41 @@ import { ReactElement } from "react"; -import { FormField, FormFieldLabelPlacement, StackLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FormFieldLabelPlacement, + StackLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const GroupedWithLabelTop = (): ReactElement => { - const groupedProps: { labelPlacement: FormFieldLabelPlacement } = { - labelPlacement: "top", - }; - - return ( - - - Form Field label left - - Helper text - - - - Form Field label that's extra long. Showing that labels wrap around to - the line. - - - - - Form Field label - - Helper text - - - Form Field label - - - - ); - }; \ No newline at end of file + const groupedProps: { labelPlacement: FormFieldLabelPlacement } = { + labelPlacement: "top", + }; + + return ( + + + Form Field label left + + Helper text + + + + Form Field label that's extra long. Showing that labels wrap around to + the line. + + + + + Form Field label + + Helper text + + + Form Field label + + + + ); +}; diff --git a/site/src/examples/form-field/GroupedWithMultipleColumns.tsx b/site/src/examples/form-field/GroupedWithMultipleColumns.tsx index c7a12217cfb..47f60021ee0 100644 --- a/site/src/examples/form-field/GroupedWithMultipleColumns.tsx +++ b/site/src/examples/form-field/GroupedWithMultipleColumns.tsx @@ -1,50 +1,47 @@ import { CSSProperties, ReactElement } from "react"; -import { FormField, Checkbox, StackLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + Checkbox, + StackLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const GroupedWithMultipleColumns = (): ReactElement => { - return ( - + return ( + + + Form Field label left + + Helper text + + - Form Field label left + Form Field label Helper text - - - Form Field label - - Helper text - - - Form Field label - - Helper text - - - Form Field label - - - - - Form Field label that's extra long. Showing that labels wrap around to - the line. - + Form Field label + Helper text - - - Form Field label - - Helper text - - - Form Field label - - - + + Form Field label + + + + + + Form Field label that's extra long. Showing that labels wrap around to + the line. + + + + Form Field label @@ -55,5 +52,15 @@ export const GroupedWithMultipleColumns = (): ReactElement => { - ); - }; \ No newline at end of file + + Form Field label + + Helper text + + + Form Field label + + + + ); +}; diff --git a/site/src/examples/form-field/GroupedWithVariant.tsx b/site/src/examples/form-field/GroupedWithVariant.tsx index f38d79dc914..79ef538946f 100644 --- a/site/src/examples/form-field/GroupedWithVariant.tsx +++ b/site/src/examples/form-field/GroupedWithVariant.tsx @@ -1,36 +1,44 @@ import { ReactElement } from "react"; -import { FormField, Checkbox, StackLayout, FormFieldLabel, FormFieldHelperText, Input, InputProps } from "@salt-ds/core"; +import { + FormField, + Checkbox, + StackLayout, + FormFieldLabel, + FormFieldHelperText, + Input, + InputProps, +} from "@salt-ds/core"; export const GroupedWithVariant = (): ReactElement => { - const groupedControlProps = { variant: "secondary" } as Partial; + const groupedControlProps = { variant: "secondary" } as Partial; - return ( - - - Form Field label left - - Helper text - - - - Form Field label that's extra long. Showing that labels wrap around to - the line. - - - - - Form Field label - - - - Form Field label - - Helper text - - - Form Field label - - - - ); - }; \ No newline at end of file + return ( + + + Form Field label left + + Helper text + + + + Form Field label that's extra long. Showing that labels wrap around to + the line. + + + + + Form Field label + + + + Form Field label + + Helper text + + + Form Field label + + + + ); +}; diff --git a/site/src/examples/form-field/HelperText.tsx b/site/src/examples/form-field/HelperText.tsx index ff28c9df07c..73ce032802f 100644 --- a/site/src/examples/form-field/HelperText.tsx +++ b/site/src/examples/form-field/HelperText.tsx @@ -1,12 +1,18 @@ import { ReactElement } from "react"; -import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const HelperText = (): ReactElement => ( - - Form Field label - - Helper text - - + + Form Field label + + Helper text + + ); diff --git a/site/src/examples/form-field/HelperTextAsTooltip.tsx b/site/src/examples/form-field/HelperTextAsTooltip.tsx index 7708f0b5354..6e6e11b55b7 100644 --- a/site/src/examples/form-field/HelperTextAsTooltip.tsx +++ b/site/src/examples/form-field/HelperTextAsTooltip.tsx @@ -2,10 +2,10 @@ import { ReactElement } from "react"; import { FormField, FormFieldLabel, Input, Tooltip } from "@salt-ds/core"; export const HelperTextAsTooltip = (): ReactElement => ( - - Form Field label - - - - + + Form Field label + + + + ); diff --git a/site/src/examples/form-field/Label.tsx b/site/src/examples/form-field/Label.tsx index 969bb9d5ce0..2354a66c2dc 100644 --- a/site/src/examples/form-field/Label.tsx +++ b/site/src/examples/form-field/Label.tsx @@ -1,18 +1,24 @@ import { ReactElement } from "react"; -import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const Label = (): ReactElement => ( - - - Form Field label top (default) - - - - - Form Field label that's extra long. Showing that labels wrap around to - the line. - - - - + + + Form Field label top (default) + + + + + Form Field label that's extra long. Showing that labels wrap around to + the line. + + + + ); diff --git a/site/src/examples/form-field/LabelLeft.tsx b/site/src/examples/form-field/LabelLeft.tsx index 57e8ae88e79..be3475f7e71 100644 --- a/site/src/examples/form-field/LabelLeft.tsx +++ b/site/src/examples/form-field/LabelLeft.tsx @@ -1,8 +1,14 @@ import { ReactElement } from "react"; -import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const LabelLeft = (): ReactElement => ( - + Form Field label left diff --git a/site/src/examples/form-field/LabelQuestion.tsx b/site/src/examples/form-field/LabelQuestion.tsx index 50f49e6a5d7..e9c50c72ce9 100644 --- a/site/src/examples/form-field/LabelQuestion.tsx +++ b/site/src/examples/form-field/LabelQuestion.tsx @@ -1,9 +1,16 @@ import { ReactElement } from "react"; -import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input, MultilineInput } from "@salt-ds/core"; +import { + FormField, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, + MultilineInput, +} from "@salt-ds/core"; export const LabelQuestion = (): ReactElement => ( - - + + Do your current qualifications align with the role? Please describe. diff --git a/site/src/examples/form-field/MultipleChildren.tsx b/site/src/examples/form-field/MultipleChildren.tsx index f14ff7b6a2f..b2cfbd508f9 100644 --- a/site/src/examples/form-field/MultipleChildren.tsx +++ b/site/src/examples/form-field/MultipleChildren.tsx @@ -1,125 +1,134 @@ import { ChangeEvent, ReactElement, useState } from "react"; -import { StackLayout, Checkbox, FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input, MultilineInput } from "@salt-ds/core"; +import { + StackLayout, + Checkbox, + FormField, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, + MultilineInput, +} from "@salt-ds/core"; export const MultipleChildren = (): ReactElement => { - const [firstValue, setFirstValue] = useState("Five"); -const [secondValue, setSecondValue] = useState(""); + const [firstValue, setFirstValue] = useState("Five"); + const [secondValue, setSecondValue] = useState(""); -const valid = firstValue.length && secondValue.length; + const valid = firstValue.length && secondValue.length; -const [values, setValues] = useState({ - firstValue: "3", - secondValue: "4.5", -}); + const [values, setValues] = useState({ + firstValue: "3", + secondValue: "4.5", + }); -const handleUpdate = (e: ChangeEvent, index: number) => { - let update = values; - const value = e.target.value; + const handleUpdate = (e: ChangeEvent, index: number) => { + let update = values; + const value = e.target.value; - if (parseFloat(value)) { - if (index === 0) { - update = { - firstValue: value, - secondValue: (parseFloat(value) * 1.5).toString(), - }; - } else { - update = { - firstValue: ((parseFloat(value) * 2) / 3).toString(), - secondValue: value, - }; + if (parseFloat(value)) { + if (index === 0) { + update = { + firstValue: value, + secondValue: (parseFloat(value) * 1.5).toString(), + }; + } else { + update = { + firstValue: ((parseFloat(value) * 2) / 3).toString(), + secondValue: value, + }; + } + setValues(update); } - setValues(update); - } - if (value.length === 0) { - if (index === 0) { - update = { - ...values, - firstValue: value, - }; - } else { - update = { - ...values, - secondValue: value, - }; + if (value.length === 0) { + if (index === 0) { + update = { + ...values, + firstValue: value, + }; + } else { + update = { + ...values, + secondValue: value, + }; + } + setValues(update); } - setValues(update); - } -}; + }; -const [checked, setChecked] = useState(false); + const [checked, setChecked] = useState(false); -return ( - - - Multi criteria inputs - - ) => { - setFirstValue(e.target.value); - }} - /> - ) => { - setSecondValue(e.target.value); - }} - placeholder="Multiplier" - /> - - - * User must enter all values to complete the input - - - - Paired fields - - ) => handleUpdate(e, 0)} - value={values.firstValue} - /> - ) => handleUpdate(e, 1)} - value={values.secondValue} - /> - - - * User entry in either field will automatically populate the - corresponding field with the correct value - - - - Multi inputs with left label - - - - - - - - Multi inputs with secondary variant - - - - - - - Multi controls - - - setChecked(!checked)} - label="Transition impact not applicable" - /> - - - -); -}; \ No newline at end of file + return ( + + + Multi criteria inputs + + ) => { + setFirstValue(e.target.value); + }} + /> + ) => { + setSecondValue(e.target.value); + }} + placeholder="Multiplier" + /> + + + * User must enter all values to complete the input + + + + Paired fields + + ) => handleUpdate(e, 0)} + value={values.firstValue} + /> + ) => handleUpdate(e, 1)} + value={values.secondValue} + /> + + + * User entry in either field will automatically populate the + corresponding field with the correct value + + + + Multi inputs with left label + + + + + + + + Multi inputs with secondary variant + + + + + + + Multi controls + + + setChecked(!checked)} + label="Transition impact not applicable" + /> + + + + ); +}; diff --git a/site/src/examples/form-field/NecessityLabel.tsx b/site/src/examples/form-field/NecessityLabel.tsx index e8a5256154d..69539167b02 100644 --- a/site/src/examples/form-field/NecessityLabel.tsx +++ b/site/src/examples/form-field/NecessityLabel.tsx @@ -2,18 +2,18 @@ import { ReactElement } from "react"; import { FormField, FlowLayout, FormFieldLabel, Input } from "@salt-ds/core"; export const NecessityLabel = (): ReactElement => ( - - - Form Field label - - - - Form Field label - - - - Form Field label - - - + + + Form Field label + + + + Form Field label + + + + Form Field label + + + ); diff --git a/site/src/examples/form-field/Readonly.tsx b/site/src/examples/form-field/Readonly.tsx index 1d21fa2e03d..88dc520a51c 100644 --- a/site/src/examples/form-field/Readonly.tsx +++ b/site/src/examples/form-field/Readonly.tsx @@ -1,10 +1,15 @@ import { ReactElement } from "react"; -import { FormField, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const Readonly = (): ReactElement => ( - - Readonly Form Field - - This Form Field is readonly - + + Readonly Form Field + + This Form Field is readonly + ); diff --git a/site/src/examples/form-field/Validation.tsx b/site/src/examples/form-field/Validation.tsx index 802d6426a69..4138d66d3cc 100644 --- a/site/src/examples/form-field/Validation.tsx +++ b/site/src/examples/form-field/Validation.tsx @@ -1,41 +1,48 @@ import { ReactElement } from "react"; -import { FormField,Tooltip, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + Tooltip, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; export const Validation = (): ReactElement => ( - - - Error Form Field - - Helper text - - - Warning Form Field - - Helper text - - - Success Form Field - - Helper text - + + + Error Form Field + + Helper text + + + Warning Form Field + + Helper text + + + Success Form Field + + Helper text + - - Form Field label - - - - - - Form Field label - - - - - - Form Field label - - - - - + + Form Field label + + + + + + Form Field label + + + + + + Form Field label + + + + + ); diff --git a/site/src/examples/form-field/WithControls.tsx b/site/src/examples/form-field/WithControls.tsx index c605e644f67..e1755af6c4f 100644 --- a/site/src/examples/form-field/WithControls.tsx +++ b/site/src/examples/form-field/WithControls.tsx @@ -1,120 +1,126 @@ import { ChangeEventHandler, ReactElement, useState } from "react"; -import { FormField, Checkbox, CheckboxGroup, RadioButton, RadioButtonGroup, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; +import { + FormField, + Checkbox, + CheckboxGroup, + RadioButton, + RadioButtonGroup, + FlowLayout, + FormFieldLabel, + FormFieldHelperText, + Input, +} from "@salt-ds/core"; const radioData = [ - { - label: "Ultimate Parent", - value: "parent", - }, - { - label: "Subsidiary", - value: "subsidiary", - }, - ]; - - const checkboxesData = [ - { - label: "Discretionary fee", - value: "discretionary", - }, - { - label: "Retainer fee", - value: "retainer", - }, - { - disabled: true, - label: "Other fee", - value: "other", - }, - ]; - + { + label: "Ultimate Parent", + value: "parent", + }, + { + label: "Subsidiary", + value: "subsidiary", + }, +]; + +const checkboxesData = [ + { + label: "Discretionary fee", + value: "discretionary", + }, + { + label: "Retainer fee", + value: "retainer", + }, + { + disabled: true, + label: "Other fee", + value: "other", + }, +]; + export const WithControls = (): ReactElement => { - const [isRadioError, setIsRadioError] = useState(true); - - const [radioGroupValue, setRadioGroupValue] = useState(""); - const [checkboxGroupValue, setCheckboxGroupValue] = useState([]); - - const handleRadioChange: ChangeEventHandler = (event) => { - const { value } = event.target; - setRadioGroupValue(value); - isRadioError && setIsRadioError(false); - }; - - const handleCheckboxChange: ChangeEventHandler = ( - event - ) => { - const { value } = event.target; - if (checkboxGroupValue.indexOf(value) === -1) { - setCheckboxGroupValue((prevControlledValues) => [ - ...prevControlledValues, - value, - ]); - } else { - setCheckboxGroupValue((prevControlledValues) => - prevControlledValues.filter( - (controlledValue) => controlledValue !== value - ) - ); - } - }; - - const isCheckboxError = checkboxGroupValue.length === 0; - - return ( - - - Client directed request - - - - - - - Assignment - - - - - - - - Select all appropriate - - - Deal owner - - {radioData.map((radio) => { - return ( - - ); - })} - - {`${ - isRadioError ? "Must select one option. " : "" - }Is this deal for the ultimate parent or a subsidiary?`} - - ([]); + + const handleRadioChange: ChangeEventHandler = (event) => { + const { value } = event.target; + setRadioGroupValue(value); + isRadioError && setIsRadioError(false); + }; + + const handleCheckboxChange: ChangeEventHandler = ( + event + ) => { + const { value } = event.target; + if (checkboxGroupValue.indexOf(value) === -1) { + setCheckboxGroupValue((prevControlledValues) => [ + ...prevControlledValues, + value, + ]); + } else { + setCheckboxGroupValue((prevControlledValues) => + prevControlledValues.filter( + (controlledValue) => controlledValue !== value + ) + ); + } + }; + + const isCheckboxError = checkboxGroupValue.length === 0; + + return ( + + + Client directed request + + + + + + + Assignment + + + + + + + + Select all appropriate + + + Deal owner + + {radioData.map((radio) => { + return ( + + ); + })} + + {`${ + isRadioError ? "Must select one option. " : "" + }Is this deal for the ultimate parent or a subsidiary?`} + + + Fee type + - Fee type - - {checkboxesData.map((data) => ( - - ))} - - {`${ - isCheckboxError ? "Must select at least one option. " : "" - }`} - - - ); - }; \ No newline at end of file + {checkboxesData.map((data) => ( + + ))} + + {`${ + isCheckboxError ? "Must select at least one option. " : "" + }`} + + + ); +}; diff --git a/site/src/examples/form-field/index.ts b/site/src/examples/form-field/index.ts index 08c79c25ae1..bed591d1294 100644 --- a/site/src/examples/form-field/index.ts +++ b/site/src/examples/form-field/index.ts @@ -14,4 +14,4 @@ export * from "./MultipleChildren"; export * from "./NecessityLabel"; export * from "./Readonly"; export * from "./Validation"; -export * from "./WithControls"; \ No newline at end of file +export * from "./WithControls";