prettier

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. 
+All keyboard interactions are supplied by the underlying wrapped components, rather than the Form Field component.

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.
 
 <LivePreviewControls>
 <LivePreview componentName="form-field" exampleName="Default" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="Disabled" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="HelperText" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="HelperTextAsTooltip" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="Label" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="LabelLeft" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="LabelQuestion" >
@@ -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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="Readonly" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="Validation" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="WithControls" >
 
 ### 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.
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="GroupedWithLabelLeft" >
 
 ### 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".
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="GroupedWithLabelTop" >
 
 ### 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".
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="GroupedWithLabelRight" >
 
 ### 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".
 
 </LivePreview>
 <LivePreview componentName="form-field" exampleName="GroupedWithMultipleColumns" >
@@ -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.
 
 </LivePreview>
 </LivePreviewControls>

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"

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
 

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 => (
   <FlowLayout style={{ width: "256px" }}>
-  <FormField>
-    <FormFieldLabel>Form Field label</FormFieldLabel>
-    <Input defaultValue="Value" />
-    <FormFieldHelperText>Helper text</FormFieldHelperText>
-  </FormField>
-</FlowLayout>
+    <FormField>
+      <FormFieldLabel>Form Field label</FormFieldLabel>
+      <Input defaultValue="Value" />
+      <FormFieldHelperText>Helper text</FormFieldHelperText>
+    </FormField>
+  </FlowLayout>
 );

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 => (
   <FlowLayout style={{ width: "256px" }}>
-  <FormField disabled>
-    <FormFieldLabel>Form Field label</FormFieldLabel>
-    <Input defaultValue="Value" />
-    <FormFieldHelperText>Helper text</FormFieldHelperText>
-  </FormField>
-</FlowLayout>
+    <FormField disabled>
+      <FormFieldLabel>Form Field label</FormFieldLabel>
+      <Input defaultValue="Value" />
+      <FormFieldHelperText>Helper text</FormFieldHelperText>
+    </FormField>
+  </FlowLayout>
 );

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 => ( 
-<StackLayout
+export const GroupedWithEmptySlot = (): ReactElement => (
+  <StackLayout
     style={{ "--formField-label-width": "100px" } as React.CSSProperties}
     role={"group"}
->
+  >
     <FormField>
       <FormFieldLabel>Form Field label left</FormFieldLabel>
       <Input defaultValue="Value" />

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 (
-      <StackLayout>
-        <FormField {...groupedProps}>
-          <FormFieldLabel>Form Field label left</FormFieldLabel>
-          <Input defaultValue="Value" />
-          <FormFieldHelperText>Helper text</FormFieldHelperText>
-        </FormField>
-        <FormField {...groupedProps}>
-          <FormFieldLabel>
-            Form Field label that's extra long. Showing that labels wrap around to
-            the line.
-          </FormFieldLabel>
-          <Input defaultValue="Primary Input value" />
-        </FormField>
-        <FormField {...groupedProps}>
-          <FormFieldLabel>Form Field label</FormFieldLabel>
-          <Input defaultValue="Value" />
-          <FormFieldHelperText>Helper text</FormFieldHelperText>
-        </FormField>
-        <FormField {...groupedProps}>
-          <FormFieldLabel>Form Field label</FormFieldLabel>
-          <Input defaultValue="Primary Input value" />
-        </FormField>
-      </StackLayout>
-    );
-  };
+  const groupedProps: { labelPlacement: FormFieldLabelPlacement } = {
+    labelPlacement: "left",
+  };
+
+  return (
+    <StackLayout>
+      <FormField {...groupedProps}>
+        <FormFieldLabel>Form Field label left</FormFieldLabel>
+        <Input defaultValue="Value" />
+        <FormFieldHelperText>Helper text</FormFieldHelperText>
+      </FormField>
+      <FormField {...groupedProps}>
+        <FormFieldLabel>
+          Form Field label that's extra long. Showing that labels wrap around to
+          the line.
+        </FormFieldLabel>
+        <Input defaultValue="Primary Input value" />
+      </FormField>
+      <FormField {...groupedProps}>
+        <FormFieldLabel>Form Field label</FormFieldLabel>
+        <Input defaultValue="Value" />
+        <FormFieldHelperText>Helper text</FormFieldHelperText>
+      </FormField>
+      <FormField {...groupedProps}>
+        <FormFieldLabel>Form Field label</FormFieldLabel>
+        <Input defaultValue="Primary Input value" />
+      </FormField>
+    </StackLayout>
+  );
+};