From 969aca7f04a2262fe05ee0389887307fb16569a9 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 24 Aug 2023 22:05:11 +0100 Subject: [PATCH 01/16] initial ff --- .../components/form-field/accessibility.mdx | 12 ++ site/docs/components/form-field/examples.mdx | 159 ++++++++++++++++++ site/docs/components/form-field/index.mdx | 12 ++ site/docs/components/form-field/usage.mdx | 32 ++++ site/src/examples/form-field/Default.tsx | 12 ++ site/src/examples/form-field/Disabled.tsx | 12 ++ .../form-field/GroupedWithEmptySlot.tsx | 66 ++++++++ .../form-field/GroupedWithLabelLeft.tsx | 34 ++++ .../form-field/GroupedWithLabelRight.tsx | 34 ++++ .../form-field/GroupedWithLabelTop.tsx | 34 ++++ .../form-field/GroupedWithMultipleColumns.tsx | 59 +++++++ .../form-field/GroupedWithVariant.tsx | 36 ++++ site/src/examples/form-field/HelperText.tsx | 12 ++ .../form-field/HelperTextAsTooltip.tsx | 11 ++ site/src/examples/form-field/Label.tsx | 18 ++ site/src/examples/form-field/LabelLeft.tsx | 18 ++ .../src/examples/form-field/LabelQuestion.tsx | 13 ++ .../examples/form-field/MultipleChildren.tsx | 125 ++++++++++++++ .../examples/form-field/NecessityLabel.tsx | 19 +++ site/src/examples/form-field/Readonly.tsx | 10 ++ site/src/examples/form-field/Validation.tsx | 41 +++++ site/src/examples/form-field/WithControls.tsx | 120 +++++++++++++ site/src/examples/form-field/index.ts | 17 ++ 23 files changed, 906 insertions(+) create mode 100644 site/docs/components/form-field/accessibility.mdx create mode 100644 site/docs/components/form-field/examples.mdx create mode 100644 site/docs/components/form-field/index.mdx create mode 100644 site/docs/components/form-field/usage.mdx create mode 100644 site/src/examples/form-field/Default.tsx create mode 100644 site/src/examples/form-field/Disabled.tsx create mode 100644 site/src/examples/form-field/GroupedWithEmptySlot.tsx create mode 100644 site/src/examples/form-field/GroupedWithLabelLeft.tsx create mode 100644 site/src/examples/form-field/GroupedWithLabelRight.tsx create mode 100644 site/src/examples/form-field/GroupedWithLabelTop.tsx create mode 100644 site/src/examples/form-field/GroupedWithMultipleColumns.tsx create mode 100644 site/src/examples/form-field/GroupedWithVariant.tsx create mode 100644 site/src/examples/form-field/HelperText.tsx create mode 100644 site/src/examples/form-field/HelperTextAsTooltip.tsx create mode 100644 site/src/examples/form-field/Label.tsx create mode 100644 site/src/examples/form-field/LabelLeft.tsx create mode 100644 site/src/examples/form-field/LabelQuestion.tsx create mode 100644 site/src/examples/form-field/MultipleChildren.tsx create mode 100644 site/src/examples/form-field/NecessityLabel.tsx create mode 100644 site/src/examples/form-field/Readonly.tsx create mode 100644 site/src/examples/form-field/Validation.tsx create mode 100644 site/src/examples/form-field/WithControls.tsx create mode 100644 site/src/examples/form-field/index.ts diff --git a/site/docs/components/form-field/accessibility.mdx b/site/docs/components/form-field/accessibility.mdx new file mode 100644 index 00000000000..61256d66631 --- /dev/null +++ b/site/docs/components/form-field/accessibility.mdx @@ -0,0 +1,12 @@ +--- +title: Form Field +layout: DetailComponent +sidebar: + label: Accessibility +data: + $ref: ./#/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 diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx new file mode 100644 index 00000000000..f2f5f1e87af --- /dev/null +++ b/site/docs/components/form-field/examples.mdx @@ -0,0 +1,159 @@ +--- +title: Form Field +layout: DetailComponent +sidebar: + label: Examples +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. + + + + +### Default + +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. + + + + +### 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. + +- 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. + +- 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. + + + + +### Helper Text As Tooltip + + + + + + +### 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. + +- 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 `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’. + +- 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. + + + + +### Label as Question + + + + + + +### Multiple Children + + + + + + +### Necessity Label + + + + + + +### Readonly + + + + + + +### Validation + + + + + + +### 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 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 + + + + + + +### Grouped With Label Top + + + + + + +### Grouped With Label Right + + + + + + +### Grouped With Multiple Columns + + + + + + +### Grouped With Empty Slot + + + + + + +### Grouped With Variant + + + + + diff --git a/site/docs/components/form-field/index.mdx b/site/docs/components/form-field/index.mdx new file mode 100644 index 00000000000..7027d6cc68b --- /dev/null +++ b/site/docs/components/form-field/index.mdx @@ -0,0 +1,12 @@ +--- +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. + sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/form-field/FormField.tsx" + package: + name: "@salt-ds/core" + initialVersion: "1.0.0" + alsoKnownAs: ["Form Input", "Input Control", "Form Element"] + stickerSheet: "" +layout: DetailComponent +--- diff --git a/site/docs/components/form-field/usage.mdx b/site/docs/components/form-field/usage.mdx new file mode 100644 index 00000000000..3d2ab12a7c7 --- /dev/null +++ b/site/docs/components/form-field/usage.mdx @@ -0,0 +1,32 @@ +--- +title: Form Field +layout: DetailComponent +sidebar: + label: How to use +data: + $ref: ./#/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. + +- 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. + +#### Form Pattern + +Follow the Salt [Forms pattern](/salt/patterns/forms), for guidance using Form Fields in forms. + +### Import + +To import Form Field from the core Salt package, use: + +```js +import { FormField, FormFieldHelperText, FormFieldLabel } from "@salt-ds/core"; +``` + +### Props + + diff --git a/site/src/examples/form-field/Default.tsx b/site/src/examples/form-field/Default.tsx new file mode 100644 index 00000000000..6dbdda4f12d --- /dev/null +++ b/site/src/examples/form-field/Default.tsx @@ -0,0 +1,12 @@ +import { ReactElement } from "react"; +import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; + +export const Default = (): ReactElement => ( + + + Form Field label + + Helper text + + +); diff --git a/site/src/examples/form-field/Disabled.tsx b/site/src/examples/form-field/Disabled.tsx new file mode 100644 index 00000000000..08fc8365b26 --- /dev/null +++ b/site/src/examples/form-field/Disabled.tsx @@ -0,0 +1,12 @@ +import { ReactElement } from "react"; +import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; + +export const Disabled = (): ReactElement => ( + + + Form Field label + + Helper text + + +); diff --git a/site/src/examples/form-field/GroupedWithEmptySlot.tsx b/site/src/examples/form-field/GroupedWithEmptySlot.tsx new file mode 100644 index 00000000000..c5ceec4f1ce --- /dev/null +++ b/site/src/examples/form-field/GroupedWithEmptySlot.tsx @@ -0,0 +1,66 @@ +import { ReactElement } from "react"; +import { FormField,Checkbox, GridLayout, StackLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; + +export const GroupedWithEmptySlot = (): ReactElement => ( + + + Form Field label left + + 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 + + Helper text + + + + Form Field label + + Helper text + + + Form Field label + + + +); diff --git a/site/src/examples/form-field/GroupedWithLabelLeft.tsx b/site/src/examples/form-field/GroupedWithLabelLeft.tsx new file mode 100644 index 00000000000..070e6335ef4 --- /dev/null +++ b/site/src/examples/form-field/GroupedWithLabelLeft.tsx @@ -0,0 +1,34 @@ +import { ReactElement } from "react"; +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 diff --git a/site/src/examples/form-field/GroupedWithLabelRight.tsx b/site/src/examples/form-field/GroupedWithLabelRight.tsx new file mode 100644 index 00000000000..dd56729ea46 --- /dev/null +++ b/site/src/examples/form-field/GroupedWithLabelRight.tsx @@ -0,0 +1,34 @@ +import { ReactElement } from "react"; +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 diff --git a/site/src/examples/form-field/GroupedWithLabelTop.tsx b/site/src/examples/form-field/GroupedWithLabelTop.tsx new file mode 100644 index 00000000000..4b2402b50b3 --- /dev/null +++ b/site/src/examples/form-field/GroupedWithLabelTop.tsx @@ -0,0 +1,34 @@ +import { ReactElement } from "react"; +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 diff --git a/site/src/examples/form-field/GroupedWithMultipleColumns.tsx b/site/src/examples/form-field/GroupedWithMultipleColumns.tsx new file mode 100644 index 00000000000..c7a12217cfb --- /dev/null +++ b/site/src/examples/form-field/GroupedWithMultipleColumns.tsx @@ -0,0 +1,59 @@ +import { CSSProperties, ReactElement } from "react"; +import { FormField, Checkbox, StackLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; + +export const GroupedWithMultipleColumns = (): ReactElement => { + return ( + + + Form Field label left + + 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 + + + + + Form Field label + + Helper text + + + Form Field label + + + + ); + }; \ No newline at end of file diff --git a/site/src/examples/form-field/GroupedWithVariant.tsx b/site/src/examples/form-field/GroupedWithVariant.tsx new file mode 100644 index 00000000000..f38d79dc914 --- /dev/null +++ b/site/src/examples/form-field/GroupedWithVariant.tsx @@ -0,0 +1,36 @@ +import { ReactElement } from "react"; +import { FormField, Checkbox, StackLayout, FormFieldLabel, FormFieldHelperText, Input, InputProps } from "@salt-ds/core"; + +export const GroupedWithVariant = (): ReactElement => { + 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 diff --git a/site/src/examples/form-field/HelperText.tsx b/site/src/examples/form-field/HelperText.tsx new file mode 100644 index 00000000000..ff28c9df07c --- /dev/null +++ b/site/src/examples/form-field/HelperText.tsx @@ -0,0 +1,12 @@ +import { ReactElement } from "react"; +import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; + +export const HelperText = (): ReactElement => ( + + + Form Field label + + Helper text + + +); diff --git a/site/src/examples/form-field/HelperTextAsTooltip.tsx b/site/src/examples/form-field/HelperTextAsTooltip.tsx new file mode 100644 index 00000000000..7708f0b5354 --- /dev/null +++ b/site/src/examples/form-field/HelperTextAsTooltip.tsx @@ -0,0 +1,11 @@ +import { ReactElement } from "react"; +import { FormField, FormFieldLabel, Input, Tooltip } from "@salt-ds/core"; + +export const HelperTextAsTooltip = (): ReactElement => ( + + Form Field label + + + + +); diff --git a/site/src/examples/form-field/Label.tsx b/site/src/examples/form-field/Label.tsx new file mode 100644 index 00000000000..969bb9d5ce0 --- /dev/null +++ b/site/src/examples/form-field/Label.tsx @@ -0,0 +1,18 @@ +import { ReactElement } from "react"; +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. + + + + +); diff --git a/site/src/examples/form-field/LabelLeft.tsx b/site/src/examples/form-field/LabelLeft.tsx new file mode 100644 index 00000000000..57e8ae88e79 --- /dev/null +++ b/site/src/examples/form-field/LabelLeft.tsx @@ -0,0 +1,18 @@ +import { ReactElement } from "react"; +import { FormField, FlowLayout, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; + +export const LabelLeft = (): ReactElement => ( + + + Form Field label left + + + + + Form Field label that's extra long. Showing that labels wrap around to + the line. + + + + +); diff --git a/site/src/examples/form-field/LabelQuestion.tsx b/site/src/examples/form-field/LabelQuestion.tsx new file mode 100644 index 00000000000..50f49e6a5d7 --- /dev/null +++ b/site/src/examples/form-field/LabelQuestion.tsx @@ -0,0 +1,13 @@ +import { ReactElement } from "react"; +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 new file mode 100644 index 00000000000..f14ff7b6a2f --- /dev/null +++ b/site/src/examples/form-field/MultipleChildren.tsx @@ -0,0 +1,125 @@ +import { ChangeEvent, ReactElement, useState } from "react"; +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 valid = firstValue.length && secondValue.length; + +const [values, setValues] = useState({ + firstValue: "3", + secondValue: "4.5", +}); + +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, + }; + } + setValues(update); + } + + if (value.length === 0) { + if (index === 0) { + update = { + ...values, + firstValue: value, + }; + } else { + update = { + ...values, + secondValue: value, + }; + } + setValues(update); + } +}; + +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 diff --git a/site/src/examples/form-field/NecessityLabel.tsx b/site/src/examples/form-field/NecessityLabel.tsx new file mode 100644 index 00000000000..e8a5256154d --- /dev/null +++ b/site/src/examples/form-field/NecessityLabel.tsx @@ -0,0 +1,19 @@ +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 + + + +); diff --git a/site/src/examples/form-field/Readonly.tsx b/site/src/examples/form-field/Readonly.tsx new file mode 100644 index 00000000000..1d21fa2e03d --- /dev/null +++ b/site/src/examples/form-field/Readonly.tsx @@ -0,0 +1,10 @@ +import { ReactElement } from "react"; +import { FormField, FormFieldLabel, FormFieldHelperText, Input } from "@salt-ds/core"; + +export const Readonly = (): ReactElement => ( + + 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 new file mode 100644 index 00000000000..802d6426a69 --- /dev/null +++ b/site/src/examples/form-field/Validation.tsx @@ -0,0 +1,41 @@ +import { ReactElement } from "react"; +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 + + + + 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 new file mode 100644 index 00000000000..c605e644f67 --- /dev/null +++ b/site/src/examples/form-field/WithControls.tsx @@ -0,0 +1,120 @@ +import { ChangeEventHandler, ReactElement, useState } from "react"; +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", + }, + ]; + +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?`} + + + Fee type + + {checkboxesData.map((data) => ( + + ))} + + {`${ + isCheckboxError ? "Must select at least one option. " : "" + }`} + + + ); + }; \ No newline at end of file diff --git a/site/src/examples/form-field/index.ts b/site/src/examples/form-field/index.ts new file mode 100644 index 00000000000..08c79c25ae1 --- /dev/null +++ b/site/src/examples/form-field/index.ts @@ -0,0 +1,17 @@ +export * from "./Default"; +export * from "./GroupedWithEmptySlot"; +export * from "./GroupedWithLabelLeft"; +export * from "./GroupedWithLabelRight"; +export * from "./GroupedWithLabelTop"; +export * from "./GroupedWithMultipleColumns"; +export * from "./GroupedWithVariant"; +export * from "./HelperText"; +export * from "./HelperTextAsTooltip"; +export * from "./Label"; +export * from "./LabelLeft"; +export * from "./LabelQuestion"; +export * from "./MultipleChildren"; +export * from "./NecessityLabel"; +export * from "./Readonly"; +export * from "./Validation"; +export * from "./WithControls"; \ No newline at end of file From a2defe6e00fcc487ea1bef73bf411f3d7f3a1f63 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 29 Aug 2023 10:34:24 -0400 Subject: [PATCH 02/16] examples --- .../stories/form-field/form-field.stories.tsx | 2 +- site/docs/components/form-field/examples.mdx | 46 +++++++++++++++---- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/packages/core/stories/form-field/form-field.stories.tsx b/packages/core/stories/form-field/form-field.stories.tsx index a342702ce3c..04d73caed86 100644 --- a/packages/core/stories/form-field/form-field.stories.tsx +++ b/packages/core/stories/form-field/form-field.stories.tsx @@ -148,7 +148,7 @@ export const LabelQuestion: ComponentStory = (props) => { ); }; -export const MultiChild: ComponentStory = (props) => { +export const MultipleChildren: ComponentStory = (props) => { const [firstValue, setFirstValue] = useState("Five"); const [secondValue, setSecondValue] = useState(""); diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index f2f5f1e87af..34c141da430 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -14,7 +14,7 @@ All examples demonstrate Salt form controls inside the Form Field, including Inp ### Default -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. +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. @@ -45,7 +45,7 @@ Form Field can display Helper Text using the `FormFieldHelperText` component. ### Helper Text As Tooltip - +Display the helper text in a Tooltip when you are low on screen real-estate. @@ -74,35 +74,47 @@ The form field label can be positioned to the left of the form control via the p ### Label as Question - +Form Field labels can be styled with a different intent by setting the `intent` prop. Use “sentence” intent for sentences and questions. See more about [displaying labels](/salt/patterns/forms#label-vs-question). ### Multiple Children - +You can display multiple controls within a single Form Field. Wrap the controls in a Stack Layout for the correct styling. ### Necessity Label - +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’. +- 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. + +- 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`. + +- 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. + +- 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. @@ -118,42 +130,60 @@ Form Field can wrap any Salt UI control that is typically found in a form, such ### Grouped With Label Left +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". ### Grouped With Label Top +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". ### Grouped With Label Right +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". ### Grouped With Multiple Columns - +Use more Stack Layouts inside a group to create a multiple column layout. ### Grouped With Empty Slot - +Use a Grid Layout within a group to create multiple columns where empty slots may be present. ### 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. From c1748020c490aed6d61b2d647c94ba3631a534bb Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 29 Aug 2023 10:42:45 -0400 Subject: [PATCH 03/16] prettier --- .../components/form-field/accessibility.mdx | 2 +- site/docs/components/form-field/examples.mdx | 72 +++--- site/docs/components/form-field/index.mdx | 2 +- site/docs/components/form-field/usage.mdx | 8 +- site/src/examples/form-field/Default.tsx | 20 +- site/src/examples/form-field/Disabled.tsx | 20 +- .../form-field/GroupedWithEmptySlot.tsx | 16 +- .../form-field/GroupedWithLabelLeft.tsx | 69 ++--- .../form-field/GroupedWithLabelRight.tsx | 69 ++--- .../form-field/GroupedWithLabelTop.tsx | 69 ++--- .../form-field/GroupedWithMultipleColumns.tsx | 85 ++++--- .../form-field/GroupedWithVariant.tsx | 72 +++--- site/src/examples/form-field/HelperText.tsx | 20 +- .../form-field/HelperTextAsTooltip.tsx | 12 +- site/src/examples/form-field/Label.tsx | 34 +-- site/src/examples/form-field/LabelLeft.tsx | 10 +- .../src/examples/form-field/LabelQuestion.tsx | 13 +- .../examples/form-field/MultipleChildren.tsx | 235 ++++++++--------- .../examples/form-field/NecessityLabel.tsx | 28 +-- site/src/examples/form-field/Readonly.tsx | 17 +- site/src/examples/form-field/Validation.tsx | 79 +++--- site/src/examples/form-field/WithControls.tsx | 236 +++++++++--------- site/src/examples/form-field/index.ts | 2 +- 23 files changed, 649 insertions(+), 541 deletions(-) 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"; From fd5725958c5a3db496b9d3c16040e8a1d0010928 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 29 Aug 2023 11:46:24 -0400 Subject: [PATCH 04/16] fix --- site/src/examples/form-field/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/site/src/examples/form-field/index.ts b/site/src/examples/form-field/index.ts index bed591d1294..bd0612cb71f 100644 --- a/site/src/examples/form-field/index.ts +++ b/site/src/examples/form-field/index.ts @@ -1,4 +1,5 @@ export * from "./Default"; +export * from "./Disabled"; export * from "./GroupedWithEmptySlot"; export * from "./GroupedWithLabelLeft"; export * from "./GroupedWithLabelRight"; From 88665393491f69343351a4676081f51c00ba1ec0 Mon Sep 17 00:00:00 2001 From: Liberty Curtis <91206958+libertymayc@users.noreply.github.com> Date: Wed, 30 Aug 2023 10:04:25 -0400 Subject: [PATCH 05/16] Update site/docs/components/form-field/accessibility.mdx Co-authored-by: Alina Visan --- site/docs/components/form-field/accessibility.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/accessibility.mdx b/site/docs/components/form-field/accessibility.mdx index f4d0887e2e8..fed854a895a 100644 --- a/site/docs/components/form-field/accessibility.mdx +++ b/site/docs/components/form-field/accessibility.mdx @@ -2,7 +2,7 @@ title: Form Field layout: DetailComponent sidebar: - label: Accessibility + exclude: true data: $ref: ./#/data --- From e944fd427aa8ca53fac0b63391704448aa8795db Mon Sep 17 00:00:00 2001 From: Liberty Curtis <91206958+libertymayc@users.noreply.github.com> Date: Wed, 30 Aug 2023 10:05:18 -0400 Subject: [PATCH 06/16] Update site/docs/components/form-field/examples.mdx Co-authored-by: Alina Visan --- site/docs/components/form-field/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index 4f0e7cfe91e..85d1e599ce6 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -2,7 +2,7 @@ title: Form Field layout: DetailComponent sidebar: - label: Examples + exclude: true data: $ref: ./#/data --- From ea8573f6a00edfabb6241421a4b47b2f3a078b59 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Wed, 30 Aug 2023 10:11:44 -0400 Subject: [PATCH 07/16] typos --- site/docs/components/form-field/examples.mdx | 6 +++--- site/docs/components/form-field/usage.mdx | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index 85d1e599ce6..7ce4b67c6f2 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -128,7 +128,7 @@ Form Field can wrap any Salt UI control that is typically found in a form, such -### Grouped With Label Left +### Grouped With Left Aligned Label Placement Wrap multiple Form Fields in a Stack Layout to form a group. @@ -141,7 +141,7 @@ This example shows a group with the fields `labelPlacement` props set to "left". -### Grouped With Label Top +### Grouped With Top Aligned Label Placement Wrap multiple Form Fields in a Stack Layout to form a group. @@ -154,7 +154,7 @@ This example shows a group with the fields `labelPlacement` props set to "top". -### Grouped With Label Right +### Grouped With Right Aligned Label Placement Wrap multiple Form Fields in a Stack Layout to form a group. diff --git a/site/docs/components/form-field/usage.mdx b/site/docs/components/form-field/usage.mdx index 5e73ebc932a..f470a832d34 100644 --- a/site/docs/components/form-field/usage.mdx +++ b/site/docs/components/form-field/usage.mdx @@ -30,3 +30,7 @@ import { FormField, FormFieldHelperText, FormFieldLabel } from "@salt-ds/core"; ### Props + + + + From f08b8aa2022f9aaa4a4aa958dbd8554d4fe833d7 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Wed, 30 Aug 2023 10:12:50 -0400 Subject: [PATCH 08/16] version --- site/docs/components/form-field/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/index.mdx b/site/docs/components/form-field/index.mdx index bc26a7e9de5..979f7479a78 100644 --- a/site/docs/components/form-field/index.mdx +++ b/site/docs/components/form-field/index.mdx @@ -5,7 +5,7 @@ data: sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/form-field/FormField.tsx" package: name: "@salt-ds/core" - initialVersion: "1.0.0" + initialVersion: "1.8.0-rc.0" alsoKnownAs: ["Form Input", "Input Control", "Form Element"] stickerSheet: "" layout: DetailComponent From cbcf6e142b464c96f4f4e222e2efd0b310594b4b Mon Sep 17 00:00:00 2001 From: Liberty Curtis <91206958+libertymayc@users.noreply.github.com> Date: Wed, 30 Aug 2023 10:32:47 -0400 Subject: [PATCH 09/16] Update site/docs/components/form-field/examples.mdx Co-authored-by: Zhihao Cui --- site/docs/components/form-field/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index 7ce4b67c6f2..d1822c6beb0 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -65,7 +65,7 @@ Form field provides a visible label which should be used to describe the form co ### 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. From 593beab27cff585f18dbc6b1cf1d653bd0025641 Mon Sep 17 00:00:00 2001 From: Liberty Curtis <91206958+libertymayc@users.noreply.github.com> Date: Wed, 30 Aug 2023 10:33:25 -0400 Subject: [PATCH 10/16] Update site/docs/components/form-field/examples.mdx Co-authored-by: Zhihao Cui --- site/docs/components/form-field/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index d1822c6beb0..c04948ad218 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -21,7 +21,7 @@ Form Field is a wrapper for UI controls that are typically found in a form (for ### Disabled -Form Field can be disabled via the prop ‘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. From 528044680e8c6319e4547cf7bb40fd906d56dca6 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Wed, 30 Aug 2023 12:41:21 -0400 Subject: [PATCH 11/16] feedback --- site/docs/components/form-field/examples.mdx | 14 +++++++------- ...Controls.tsx => WithCheckboxAndRadioButton.tsx} | 0 2 files changed, 7 insertions(+), 7 deletions(-) rename site/src/examples/form-field/{WithControls.tsx => WithCheckboxAndRadioButton.tsx} (100%) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index c04948ad218..5bee44e38fc 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -58,7 +58,7 @@ Form field provides a visible label which should be used to describe the form co - 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. @@ -117,11 +117,11 @@ Form Fields can show validation states (warning, success, error) with the prop ` - 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 +### With Checkbox and Radio Button -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 Combo Box components. This example shows Radio Button and Checkbox controls used within a Form Field. - 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. @@ -134,7 +134,7 @@ 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. +- Set `role="group"` or `as="fieldset"` on the layout component for accessibility. If using a fieldset, browser fieldset styling should be overridden. This example shows a group with the fields `labelPlacement` props set to "left". @@ -147,7 +147,7 @@ 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. +- Set `role="group"` or `as="fieldset"` on the layout component for accessibility. If using a fieldset, browser fieldset styling should be overridden. This example shows a group with the fields `labelPlacement` props set to "top". @@ -160,7 +160,7 @@ 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. +- Set `role="group"` or `as="fieldset"` on the layout component for accessibility. If using a fieldset, browser fieldset styling should be overridden. This example shows a group with the fields `labelPlacement` props set to "right". diff --git a/site/src/examples/form-field/WithControls.tsx b/site/src/examples/form-field/WithCheckboxAndRadioButton.tsx similarity index 100% rename from site/src/examples/form-field/WithControls.tsx rename to site/src/examples/form-field/WithCheckboxAndRadioButton.tsx From be6938896332d94c7108e73aacb56dd55d56eb16 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Wed, 30 Aug 2023 13:50:44 -0400 Subject: [PATCH 12/16] prettier --- site/docs/components/form-field/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index 5bee44e38fc..c5202aeceff 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -58,7 +58,7 @@ Form field provides a visible label which should be used to describe the form co - 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. +- Use `FormFieldHelperText` to provide additional information and context to help the user complete the field. From 1071a01e999d2a2d44e2f9fa1d600ab67fe38cdf Mon Sep 17 00:00:00 2001 From: Liberty Curtis <91206958+libertymayc@users.noreply.github.com> Date: Thu, 31 Aug 2023 07:49:32 -0400 Subject: [PATCH 13/16] Update site/docs/components/form-field/usage.mdx Co-authored-by: feliciackh <54270624+feliciackh@users.noreply.github.com> --- site/docs/components/form-field/usage.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/usage.mdx b/site/docs/components/form-field/usage.mdx index f470a832d34..146f154564a 100644 --- a/site/docs/components/form-field/usage.mdx +++ b/site/docs/components/form-field/usage.mdx @@ -9,7 +9,7 @@ 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 `FormFieldLabel` and `FormFieldHelperText` 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. From 2ac0436430ceed08ac3dc3c78c5f6b4ebce4aee8 Mon Sep 17 00:00:00 2001 From: Liberty Curtis <91206958+libertymayc@users.noreply.github.com> Date: Thu, 31 Aug 2023 07:58:56 -0400 Subject: [PATCH 14/16] Update site/docs/components/form-field/examples.mdx Co-authored-by: feliciackh <54270624+feliciackh@users.noreply.github.com> --- site/docs/components/form-field/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index c5202aeceff..be93729eeda 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -54,7 +54,7 @@ Display the helper text in a Tooltip when you are low on screen real-estate. 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 three words long. - Use the label to describe the information/data the field is collecting (e.g., Name, Location, Currency). From 0d6a05ec75ae8c2ea7e3bc87527a520d25e12e25 Mon Sep 17 00:00:00 2001 From: Liberty Curtis <91206958+libertymayc@users.noreply.github.com> Date: Thu, 31 Aug 2023 07:59:17 -0400 Subject: [PATCH 15/16] Update site/docs/components/form-field/examples.mdx Co-authored-by: feliciackh <54270624+feliciackh@users.noreply.github.com> --- site/docs/components/form-field/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index be93729eeda..8ff0a2ddde8 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -95,7 +95,7 @@ If a field is required, it can be marked with a "Required”, “Optional”, or ### 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. From 14bc40f6cf8e43649056a5e49c83d61c5d82d67f Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 31 Aug 2023 08:41:55 -0400 Subject: [PATCH 16/16] Updates from feedback --- site/docs/components/form-field/examples.mdx | 26 ++++++++++---------- site/docs/components/form-field/usage.mdx | 8 +++++- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/site/docs/components/form-field/examples.mdx b/site/docs/components/form-field/examples.mdx index 8ff0a2ddde8..9f69d4832d9 100644 --- a/site/docs/components/form-field/examples.mdx +++ b/site/docs/components/form-field/examples.mdx @@ -7,7 +7,7 @@ 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](../input), [Checkbox](../checkbox) and [Radio Button](../radio-button). These components are available as part of the Salt component library in addition to Form Field. @@ -32,20 +32,20 @@ Form Field can be disabled via the prop `disabled`. -### Helper Text +### 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 label short by moving guidance to the helper text. -### Helper Text As Tooltip +### 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](../tooltip) when you are low on screen real-estate. @@ -121,7 +121,7 @@ Form Fields can show validation states (warning, success, error) with the prop ` ### With Checkbox and Radio Button -Form Field can wrap any Salt UI control that is typically found in a form, such as Input, Checkbox and Combo Box components. This example shows Radio Button and Checkbox controls used within a Form Field. +Form Field can wrap any Salt UI control that is typically found in a form, such as [Input](../input), [Checkbox](../checkbox) and [Combo Box](../combo-box) components. This example shows Radio Button and Checkbox controls used within a Form Field. - 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. @@ -130,7 +130,7 @@ Form Field can wrap any Salt UI control that is typically found in a form, such ### Grouped With Left Aligned Label Placement -Wrap multiple Form Fields in a Stack Layout to form a group. +Wrap multiple Form Fields in a [Stack Layout](../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. @@ -143,7 +143,7 @@ This example shows a group with the fields `labelPlacement` props set to "left". ### Grouped With Top Aligned Label Placement -Wrap multiple Form Fields in a Stack Layout to form a group. +Wrap multiple Form Fields in a [Stack Layout](../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. @@ -156,7 +156,7 @@ This example shows a group with the fields `labelPlacement` props set to "top". ### Grouped With Right Aligned Label Placement -Wrap multiple Form Fields in a Stack Layout to form a group. +Wrap multiple Form Fields in a [Stack Layout](../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. @@ -169,14 +169,14 @@ This example shows a group with the fields `labelPlacement` props set to "right" ### Grouped With Multiple Columns -Use more Stack Layouts inside a group to create a multiple column layout. +Use multiple [Stack Layouts](../stack-layout) inside a group to create a multiple column layout. ### Grouped With Empty Slot -Use a Grid Layout within a group to create multiple columns where empty slots may be present. +Use [Grid Layout](../grid-layout) within a group to create multiple columns where empty slots may be present. diff --git a/site/docs/components/form-field/usage.mdx b/site/docs/components/form-field/usage.mdx index 146f154564a..ccd0bf1347e 100644 --- a/site/docs/components/form-field/usage.mdx +++ b/site/docs/components/form-field/usage.mdx @@ -11,7 +11,7 @@ data: - We highly recommend using the `FormFieldLabel` and `FormFieldHelperText` 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 Form Field Label and Form Field 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. @@ -29,8 +29,14 @@ import { FormField, FormFieldHelperText, FormFieldLabel } from "@salt-ds/core"; ### Props +#### Form Field + +#### Form Field Label + +#### Form Field Helper Text +