Workday · alanbsmith · Apr 16, 2025 · Apr 14, 2025 · Apr 16, 2025 · Apr 16, 2025
diff --git a/modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx
@@ -23,6 +23,7 @@ any questions.
   - [Avatar](#avatar)
   - [Expandable](#expandable)
   - [External Hyperlink](#external-hyperlink)
+	- [Form Field and Form Field Group](#form-field-and-form-field-group)
   - [Pill](#pill)
   - [Tabs](#tabs)
 - [Brand Refresh](#brand-refresh)
@@ -171,9 +172,35 @@ import {Expandable} from '@workday/canvas-kit-react/expandable';
 </ExternalHyperlink>
 ```
 
+### Form Field and Form Field Group
+**PR:** [#3101](https://github.com/Workday/canvas-kit/pull/3101)
+
+The `orientation` prop on `FormField` component has been updated to remove the deprecated `horizontal` value. v12 had a codemod to update this value to `horizontalStart`. In v13, we've dropped `horizontal` as a value.` You must update your code to use `horizontalStart`.
+
+**Before in v12**
+```tsx
+<FormField orientation="horizontal">
+	<FormField.Label>Label</FormField.Label>
+	<FormField.Field>
+		<FormField.Input as={TextInput} />
+	<FormField.Field>
+</FormField>
+```
+
+**After in v13**
+```tsx
+<FormField orientation="horizontalStart">
+	<FormField.Label>Label</FormField.Label>
+	<FormField.Field>
+		<FormField.Input as={TextInput} />
+	<FormField.Field>
+</FormField>
+```
+
+
 ### Pill
 
-**PRs:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
+**PR:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
 
 A few changes have been made to `Pill` to ensure proper accessibility and styles.
 

diff --git a/modules/preview-react/multi-select/stories/examples/Basic.tsx b/modules/preview-react/multi-select/stories/examples/Basic.tsx
@@ -9,7 +9,7 @@ export const Basic = () => {
   return (
     <>
       <MultiSelect items={items} initialSelectedIds={['Olives', 'Onions', 'Pepperoni']}>
-        <FormField orientation="horizontal">
+        <FormField orientation="horizontalStart">
           <FormField.Label>Toppings</FormField.Label>
           <FormField.Input
             as={MultiSelect.Input}

diff --git a/modules/preview-react/multi-select/stories/examples/Complex.tsx b/modules/preview-react/multi-select/stories/examples/Complex.tsx
@@ -34,7 +34,7 @@ export const Complex = () => {
         >
           <main className={mainContentStyles}>
             <MultiSelect items={items} getId={i => i.id} getTextValue={i => i.text}>
-              <FormField orientation="horizontal">
+              <FormField orientation="horizontalStart">
                 <FormField.Label>Toppings</FormField.Label>
                 <FormField.Input
                   as={MultiSelect.Input}

diff --git a/modules/preview-react/multi-select/stories/examples/Controlled.tsx b/modules/preview-react/multi-select/stories/examples/Controlled.tsx
@@ -41,7 +41,7 @@ export const Controlled = () => {
       >
         <Flex gap="s" flexDirection="column">
           <MultiSelect items={items}>
-            <FormField orientation="horizontal">
+            <FormField orientation="horizontalStart">
               <FormField.Label>Toppings</FormField.Label>
               <FormField.Input
                 as={MultiSelect.Input}

diff --git a/modules/preview-react/multi-select/stories/examples/Icons.tsx b/modules/preview-react/multi-select/stories/examples/Icons.tsx
@@ -21,7 +21,7 @@ const items = [
 export const Icons = () => {
   return (
     <MultiSelect items={items}>
-      <FormField orientation="horizontal">
+      <FormField orientation="horizontalStart">
         <FormField.Label>Controls</FormField.Label>
         <FormField.Input
           as={MultiSelect.Input}

diff --git a/modules/preview-react/multi-select/stories/examples/Searching.tsx b/modules/preview-react/multi-select/stories/examples/Searching.tsx
@@ -83,7 +83,7 @@ export const Searching = () => {
         >
           <main className={mainContentStyles}>
             <MultiSelect model={model}>
-              <FormField orientation="horizontal">
+              <FormField orientation="horizontalStart">
                 <FormField.Label>Fruits</FormField.Label>
                 <FormField.Input
                   as={MultiSelect.SearchInput}

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,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export const DefaultWithCustomOptionsLeft = () => {
   return (
-    <FormField orientation="horizontal" id="select-default-custom">
+    <FormField orientation="horizontalStart" id="select-default-custom">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(

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,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export const DefaultWithSimpleOptionsLeft = () => {
   return (
-    <FormField orientation="horizontal" id="select-default-simple">
+    <FormField orientation="horizontalStart" id="select-default-simple">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}

diff --git a/modules/preview-react/text-area/lib/TextArea.tsx b/modules/preview-react/text-area/lib/TextArea.tsx
@@ -35,7 +35,7 @@ export const TextArea = createContainer('div')({
         elemProps,
         formFieldStencil({
           grow,
-          orientation: orientation === 'horizontal' ? 'horizontalStart' : orientation,
+          orientation: orientation,
           error: model.state.error,
           required: model.state.isRequired,
         })

diff --git a/modules/preview-react/text-input/lib/TextInput.tsx b/modules/preview-react/text-input/lib/TextInput.tsx
@@ -35,7 +35,7 @@ export const TextInput = createContainer('div')({
           elemProps,
           formFieldStencil({
             grow,
-            orientation: orientation === 'horizontal' ? 'horizontalStart' : orientation,
+            orientation: orientation,
             error: model.state.error,
             required: model.state.isRequired,
           })

diff --git a/modules/react/form-field/lib/FormField.tsx b/modules/react/form-field/lib/FormField.tsx
@@ -11,13 +11,12 @@ import {FormFieldContainer} from './FormFieldContainer';
 import {formFieldStencil} from './formFieldStencil';
 import {FormFieldField} from './FormFieldField';
 
-//TODO: Remove `horizontal` option in v13 and the console warn message.
 export interface FormFieldProps extends FlexProps, GrowthBehavior {
   /**
    * The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.
    * @default vertical
    */
-  orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd' | 'horizontal';
+  orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd';
   children: React.ReactNode;
 }
 
@@ -100,7 +99,7 @@ export const FormField = createContainer('div')({
     /**
      * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
      * ```tsx
-     * <FormField orientation="horizontal">
+     * <FormField orientation="horizontalStart">
      *    <FormField.Label>First Name</FormField.Label>
      *    <FormField.Field>
      *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
@@ -111,24 +110,14 @@ export const FormField = createContainer('div')({
      */
     Field: FormFieldField,
   },
-})<FormFieldProps>(({children, grow, orientation, ...elemProps}, Element, model) => {
-  // TODO: Remove this warning in v13 once we remove horizontal support in favor of horizontalStart and horizontalEnd.
-  if (process.env.NODE_ENV === 'development') {
-    if (orientation === 'horizontal') {
-      console.warn(
-        'FormField: Orientation option of "horizontal" is deprecated and will be removed in v13. Please update your types and value to use the string literal of "horizontalStart". The following values will be accepted in v13: "horizontalStart" | "horizontalEnd" | "vertical".'
-      );
-    }
-  }
-
+})<FormFieldProps>(({children, grow, orientation = 'vertical', ...elemProps}, Element, model) => {
   return (
     <Element
       {...mergeStyles(
         elemProps,
         formFieldStencil({
           grow,
-          orientation:
-            model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+          orientation: model.state.orientation,
           error: model.state.error,
           required: model.state.isRequired,
         })

diff --git a/modules/react/form-field/lib/FormFieldGroup.tsx b/modules/react/form-field/lib/FormFieldGroup.tsx
@@ -17,7 +17,7 @@ export interface FormFieldGroupProps extends FlexProps, GrowthBehavior {
    * The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.
    * @default vertical
    */
-  orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd' | 'horizontal';
+  orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd';
   children: React.ReactNode;
 }
 
@@ -120,8 +120,7 @@ export const FormFieldGroup = createContainer('div')({
         elemProps,
         formFieldStencil({
           grow,
-          orientation:
-            model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+          orientation: model.state.orientation,
           error: model.state.error,
           required: model.state.isRequired,
         })

diff --git a/modules/react/form-field/lib/FormFieldGroupLabel.tsx b/modules/react/form-field/lib/FormFieldGroupLabel.tsx
@@ -75,8 +75,7 @@ export const FormFieldGroupLabel = createSubcomponent('div')({
           typeLevel,
           variant,
           isRequired: model.state.isRequired as any,
-          orientation:
-            model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+          orientation: model.state.orientation,
         })
       )}
     >

diff --git a/modules/react/form-field/lib/FormFieldLabel.tsx b/modules/react/form-field/lib/FormFieldLabel.tsx
@@ -87,10 +87,7 @@ export const FormFieldLabel = createSubcomponent('label')({
             variant,
             isHidden: isHidden ? 'true' : undefined,
             isRequired: model.state.isRequired as any,
-            orientation:
-              model.state.orientation === 'horizontal'
-                ? 'horizontalStart'
-                : model.state.orientation,
+            orientation: model.state.orientation,
           })
         )}
       >

diff --git a/modules/react/form-field/lib/hooks/useFormFieldModel.tsx b/modules/react/form-field/lib/hooks/useFormFieldModel.tsx
@@ -25,7 +25,7 @@ export const useFormFieldModel = createModelHook({
      */
     isRequired: false,
 
-    orientation: 'vertical' as 'vertical' | 'horizontal' | 'horizontalEnd' | 'horizontalStart',
+    orientation: 'vertical' as 'vertical' | 'horizontalEnd' | 'horizontalStart',
   },
 })(config => {
   const id = useUniqueId(config.id);

diff --git a/modules/react/radio/stories/visualTesting.stories.tsx b/modules/react/radio/stories/visualTesting.stories.tsx
@@ -150,7 +150,7 @@ export const RadioStates = () => (
 
     <h3>RadioGroup (wrapping)</h3>
     <div style={{maxWidth: 480}}>
-      <FormField orientation="horizontal" as="fieldset">
+      <FormField orientation="horizontalStart" as="fieldset">
         <FormField.Label as="legend">
           Really long label. Really long label. Really long label. Really long label. Really long
           label. Really long label.