fix: Clean up old form field usage

Workday · Sep 24, 2024 · b3d33fa · b3d33fa
1 parent 929bf2b
commit b3d33fa
Show file tree

Hide file tree

Showing 18 changed files with 176 additions and 340 deletions.
diff --git a/modules/codemod/lib/v12/compoundFormField.ts b/modules/codemod/lib/v12/compoundFormField.ts
diff --git a/modules/preview-react/select/stories/examples/Left Label/AlertLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/AlertLeft.tsx
@@ -2,20 +2,17 @@ import React from 'react';
 
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
-import {hintId, hintText, options} from '../storiesData';
+import {hintText, options} from '../storiesData';
 import {controlComponent} from '../../../../../../utils/storybook';
 
 export const AlertLeft = () => {
   return (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-alert"
-      error={FormField.ErrorType.Alert}
-      hintText={hintText}
-      hintId={hintId}
-    >
-      {controlComponent(<Select name="contact" options={options} />)}
+    <FormField orientation="horizontalStart" id="select-alert" error="alert">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+        <FormField.Hint>{hintText}</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };
diff --git a/modules/preview-react/select/stories/examples/Left Label/DefaultLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/DefaultLeft.tsx
@@ -7,8 +7,11 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export const DefaultLeft = () => {
   return (
-    <FormField labelPosition={FormField.LabelPosition.Left} label="Label" inputId="select-default">
-      {controlComponent(<Select name="contact" options={options} />)}
+    <FormField orientation="horizontalStart" id="select-default">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+      </FormField.Field>
     </FormField>
   );
 };
diff --git a/modules/preview-react/select/stories/examples/Left Label/DefaultWithCustomOptionsLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/DefaultWithCustomOptionsLeft.tsx
@@ -7,19 +7,19 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export const DefaultWithCustomOptionsLeft = () => {
   return (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-default-custom"
-    >
-      {controlComponent(
-        <Select
-          name="icon"
-          options={customOptions}
-          renderOption={customRenderOption}
-          renderSelected={customRenderSelected}
-        />
-      )}
+    <FormField orientation="horizontal" id="select-default-custom">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(
+          <FormField.Input
+            as={Select}
+            name="icon"
+            options={customOptions}
+            renderOption={customRenderOption}
+            renderSelected={customRenderSelected}
+          />
+        )}
+      </FormField.Field>
     </FormField>
   );
 };
diff --git a/modules/preview-react/select/stories/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx
@@ -7,12 +7,11 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export const DefaultWithSimpleOptionsLeft = () => {
   return (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-default-simple"
-    >
-      {controlComponent(<Select name="state" options={simpleOptions} />)}
+    <FormField orientation="horizontal" id="select-default-simple">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}
+      </FormField.Field>
     </FormField>
   );
 };
diff --git a/modules/preview-react/select/stories/examples/Left Label/DisabledLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/DisabledLeft.tsx
@@ -7,8 +7,13 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export const DisabledLeft = () => {
   return (
-    <FormField labelPosition={FormField.LabelPosition.Left} label="Label" inputId="select-disabled">
-      {controlComponent(<Select name="contact" options={options} disabled={true} />)}
+    <FormField orientation="horizontalStart" id="select-disabled">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(
+          <FormField.Input as={Select} name="contact" options={options} disabled={true} />
+        )}
+      </FormField.Field>
     </FormField>
   );
 };
diff --git a/modules/preview-react/select/stories/examples/Left Label/ErrorLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/ErrorLeft.tsx
@@ -2,20 +2,17 @@ import React from 'react';
 
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-preview-react/select';
-import {hintId, hintText, options} from '../storiesData';
+import {hintText, options} from '../storiesData';
 import {controlComponent} from '../../../../../../utils/storybook';
 
 export const ErrorLeft = () => {
   return (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-error"
-      error={FormField.ErrorType.Error}
-      hintText={hintText}
-      hintId={hintId}
-    >
-      {controlComponent(<Select name="contact" options={options} />)}
+    <FormField orientation="horizontalStart" id="select-error" error="error">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+        <FormField.Hint>{hintText}</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };
diff --git a/modules/preview-react/select/stories/examples/Left Label/GrowLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/GrowLeft.tsx
@@ -7,13 +7,11 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export const GrowLeft = () => {
   return (
-    <FormField
-      labelPosition={FormField.LabelPosition.Left}
-      label="Label"
-      inputId="select-grow"
-      grow={true}
-    >
-      {controlComponent(<Select name="contact" options={options} />)}
+    <FormField orientation="horizontalStart" id="select-grow" grow={true}>
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+      </FormField.Field>
     </FormField>
   );
 };
diff --git a/modules/preview-react/select/stories/examples/Left Label/ScrollableLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/ScrollableLeft.tsx
@@ -7,8 +7,11 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export const ScrollableLeft = () => {
   return (
-    <FormField labelPosition={FormField.LabelPosition.Left} label="Label" inputId="select-default">
-      {controlComponent(<Select name="contact" options={manyOptions} />)}
+    <FormField orientation="horizontalStart" id="select-default">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={manyOptions} />)}
+      </FormField.Field>
     </FormField>
   );
 };