@workday/canvas-kit-docs 11.0.0-alpha.662-next.0 → 11.0.0-alpha.664-next.0

package/dist/es6/lib/docs.js

@@ -5690,7 +5690,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "FormField",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormField.tsx",
-    "description": "Use `FormField` to wrap input components to make them accessible. You can customize the field\nby passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input`.\n\n```tsx\n<FormField>\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n </FormField>\n```",
+    "description": "Use `FormField` to wrap input components to make them accessible. You can customize the field\nby passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.\n\n```tsx\n<FormField>\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n </FormField>\n```",
     "declarations": [
       {
         "name": "FormField",
@@ -5739,6 +5739,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "grow",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "boolean"
+          },
+          "description": "True if the component should grow to its container's width. False otherwise.",
+          "declarations": [
+            {
+              "name": "grow",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "as",
@@ -5846,7 +5863,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "name": "Input",
           "symbol": "FormFieldInput",
-          "description": "`FormField.Input` will render any `inputs` passed to it including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.\n`FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.\n\n```tsx\n <FormField id='my-unique-id'>\n   <FormField.Label>My Label Text</FormField.Label>\n   <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />\n <FormField>\n```",
+          "description": "`FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.\n`FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.\n\n**Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**\n\n```tsx\n <FormField id='my-unique-id'>\n   <FormField.Label>My Label Text</FormField.Label>\n   <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />\n <FormField>\n```",
           "declarations": [
             {
               "name": "Input",
@@ -6448,72 +6465,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "typeLevel",
-          "required": false,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "string",
-                "value": "body.medium"
-              },
-              {
-                "kind": "string",
-                "value": "body.large"
-              },
-              {
-                "kind": "string",
-                "value": "body.small"
-              },
-              {
-                "kind": "string",
-                "value": "title.medium"
-              },
-              {
-                "kind": "string",
-                "value": "title.large"
-              },
-              {
-                "kind": "string",
-                "value": "title.small"
-              },
-              {
-                "kind": "string",
-                "value": "subtext.medium"
-              },
-              {
-                "kind": "string",
-                "value": "subtext.large"
-              },
-              {
-                "kind": "string",
-                "value": "subtext.small"
-              },
-              {
-                "kind": "string",
-                "value": "heading.medium"
-              },
-              {
-                "kind": "string",
-                "value": "heading.large"
-              },
-              {
-                "kind": "string",
-                "value": "heading.small"
-              }
-            ]
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "typeLevel",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/LabelText.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "disabled",
@@ -6522,11 +6473,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "primitive",
             "value": "boolean"
           },
-          "description": "Disabled state as a boolean\n\n```tsx\n<LabelText disabled={true}>Error text</LabelText>\n```",
+          "description": "Will style the text as disabled",
           "declarations": [
             {
               "name": "disabled",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/LabelText.tsx"
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
             }
           ],
           "tags": {}
@@ -6552,29 +6503,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "Type variant token names: `error`, `hint` or `inverse`.\n\n```tsx\n<LabelText variant=\"error\">Error text</LabelText>\n```",
+          "description": "Changes the color of the text",
           "declarations": [
             {
               "name": "variant",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text/lib/LabelText.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "cs",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "CSToPropsInput",
-            "value": "CSToPropsInput"
-          },
-          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
-          "declarations": [
-            {
-              "name": "cs",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/form-field/lib/FormFieldLabel.tsx"
             }
           ],
           "tags": {}
@@ -6591,8 +6524,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
           },
           "defaultValue": {
-            "kind": "symbol",
-            "name": "LabelText"
+            "kind": "external",
+            "name": "label",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
           }
         },
         {
@@ -6611,8 +6545,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "name": "R",
                 "required": true,
                 "defaultValue": {
-                  "kind": "symbol",
-                  "name": "LabelText"
+                  "kind": "external",
+                  "name": "label",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
                 }
               }
             ]
@@ -6671,12 +6606,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         }
       ],
       "baseElement": {
-        "kind": "symbol",
-        "name": "LabelText"
-      },
-      "styleComponent": {
-        "kind": "symbol",
-        "name": "Box"
+        "kind": "external",
+        "name": "label",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label"
       },
       "model": "FormFieldModel"
     }
@@ -31531,27 +31463,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "subtext.medium"
+                "value": "heading.medium"
               },
               {
                 "kind": "string",
-                "value": "subtext.large"
+                "value": "heading.large"
               },
               {
                 "kind": "string",
-                "value": "subtext.small"
+                "value": "heading.small"
               },
               {
                 "kind": "string",
-                "value": "heading.medium"
+                "value": "subtext.medium"
               },
               {
                 "kind": "string",
-                "value": "heading.large"
+                "value": "subtext.large"
               },
               {
                 "kind": "string",
-                "value": "heading.small"
+                "value": "subtext.small"
               }
             ]
           },
@@ -32652,7 +32584,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "alias",
@@ -32670,7 +32602,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "enhancedComponent",
@@ -32713,6 +32645,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "grow",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "boolean"
+          },
+          "description": "True if the component should grow to its container's width. False otherwise.",
+          "declarations": [
+            {
+              "name": "grow",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "as",
@@ -32847,7 +32796,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "enhancedComponent",
@@ -33000,7 +32949,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `useTextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `useTextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "function",
@@ -33077,7 +33026,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `useTextInputModel` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `useTextInputModel` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "symbol",
@@ -33095,7 +33044,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `TextInputProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `TextInputProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "alias",
@@ -33113,7 +33062,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "enhancedComponent",
@@ -33156,6 +33105,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "grow",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "boolean"
+          },
+          "description": "True if the component should grow to its container's width. False otherwise.",
+          "declarations": [
+            {
+              "name": "grow",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "as",
@@ -33290,7 +33256,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "enhancedComponent",
@@ -44266,27 +44232,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "subtext.medium"
+                "value": "heading.medium"
               },
               {
                 "kind": "string",
-                "value": "subtext.large"
+                "value": "heading.large"
               },
               {
                 "kind": "string",
-                "value": "subtext.small"
+                "value": "heading.small"
               },
               {
                 "kind": "string",
-                "value": "heading.medium"
+                "value": "subtext.medium"
               },
               {
                 "kind": "string",
-                "value": "heading.large"
+                "value": "subtext.large"
               },
               {
                 "kind": "string",
-                "value": "heading.small"
+                "value": "subtext.small"
               }
             ]
           },
@@ -125146,7 +125112,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "alias",
@@ -125199,7 +125165,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "component",
@@ -125478,7 +125444,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "object",
@@ -125571,7 +125537,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "object",
@@ -125703,7 +125669,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "object",
@@ -125748,7 +125714,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "deprecated": "⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead."
+      "deprecated": "⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead."
     },
     "type": {
       "kind": "object",
@@ -224206,27 +224172,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "subtext.medium"
+                "value": "heading.medium"
               },
               {
                 "kind": "string",
-                "value": "subtext.large"
+                "value": "heading.large"
               },
               {
                 "kind": "string",
-                "value": "subtext.small"
+                "value": "heading.small"
               },
               {
                 "kind": "string",
-                "value": "heading.medium"
+                "value": "subtext.medium"
               },
               {
                 "kind": "string",
-                "value": "heading.large"
+                "value": "subtext.large"
               },
               {
                 "kind": "string",
-                "value": "heading.small"
+                "value": "subtext.small"
               }
             ]
           },
@@ -228813,27 +228779,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "subtext.medium"
+                "value": "heading.medium"
               },
               {
                 "kind": "string",
-                "value": "subtext.large"
+                "value": "heading.large"
               },
               {
                 "kind": "string",
-                "value": "subtext.small"
+                "value": "heading.small"
               },
               {
                 "kind": "string",
-                "value": "heading.medium"
+                "value": "subtext.medium"
               },
               {
                 "kind": "string",
-                "value": "heading.large"
+                "value": "subtext.large"
               },
               {
                 "kind": "string",
-                "value": "heading.small"
+                "value": "subtext.small"
               }
             ]
           },
@@ -229047,27 +229013,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               },
               {
                 "kind": "string",
-                "value": "subtext.medium"
+                "value": "heading.medium"
               },
               {
                 "kind": "string",
-                "value": "subtext.large"
+                "value": "heading.large"
               },
               {
                 "kind": "string",
-                "value": "subtext.small"
+                "value": "heading.small"
               },
               {
                 "kind": "string",
-                "value": "heading.medium"
+                "value": "subtext.medium"
               },
               {
                 "kind": "string",
-                "value": "heading.large"
+                "value": "subtext.large"
               },
               {
                 "kind": "string",
-                "value": "heading.small"
+                "value": "subtext.small"
               }
             ]
           },

package/dist/mdx/preview-react/form-field/FormField.mdx

@@ -14,6 +14,8 @@ import CustomId from './examples/CustomId';
 import AllFields from './examples/AllFields';
 import Hint from './examples/Hint';
 import FieldSet from './examples/FieldSet';
+import Grow from './examples/Grow';
+import ThemedError from './examples/ThemedErrors';
 
 
 # Canvas Kit Form Field
@@ -75,6 +77,15 @@ input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPositionHorizontal} />
 
+### Grow
+
+Set the `grow` prop of the Form Field to `true` to configure it (including the wrapped input
+component) to expand to the width of its container.
+
+**Note: This Prop is deprecated and will be removed in a future major version.**
+
+<ExampleCodeBlock code={Grow} />
+
 ### Ref Forwarding
 
 If you need full customization you can use the `FormField` behavior hooks to build your own
@@ -120,6 +131,13 @@ Form Field should allow you to use it with all `inputs` including `Select`, `Tex
 
 <ExampleCodeBlock code={AllFields} />
 
+### Themed Errors
+
+You can theme your error rings by wrapping an input in a `CanvasProvider` and defining
+`focusOutline` and `error` properties on the `theme`.
+
+<ExampleCodeBlock code={ThemedError} />
+
 ## Component API
 
 <SymbolDoc name="FormField" fileName="/preview-react/" />

package/dist/mdx/preview-react/form-field/examples/AllFields.tsx

@@ -18,26 +18,26 @@ export default () => {
         borderRadius: '4px',
       }}
     >
-      <FormField>
+      <FormField grow>
         <FormField.Label>First Name</FormField.Label>
-        <FormField.Input width="100%" as={TextInput} />
+        <FormField.Input as={TextInput} />
       </FormField>
 
-      <FormField isRequired={true} error="alert">
+      <FormField isRequired={true} error="alert" grow>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Container cs={{width: '100%'}}>
-          <FormField.Input width="100%" as={TextInput} />
+        <FormField.Container>
+          <FormField.Input as={TextInput} />
           <FormField.Hint>Hint text for your input</FormField.Hint>
         </FormField.Container>
       </FormField>
-      <FormField>
+      <FormField grow>
         <FormField.Label>Text Area Label</FormField.Label>
-        <FormField.Input width="100%" as={TextArea} />
+        <FormField.Input as={TextArea} />
       </FormField>
-      <FormField error="error" width="100%">
+      <FormField error="error" grow>
         <FormField.Label>Choose a Crust</FormField.Label>
         <Select items={['Pizza', 'Cheeseburger', 'Fries']}>
-          <FormField.Input width="100%" as={Select.Input} />
+          <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
@@ -45,7 +45,7 @@ export default () => {
           </Select.Popper>
         </Select>
       </FormField>
-      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontal">
+      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontal" grow>
         <FormField.Label as="legend">Radio Group Legend</FormField.Label>
         <FormField.Container>
           <FormField.Input as={RadioGroup}>
@@ -60,14 +60,14 @@ export default () => {
           <FormField.Hint>Error Message</FormField.Hint>
         </FormField.Container>
       </FormField>
-      <FormField as="fieldset">
+      <FormField as="fieldset" grow>
         <FormField.Label as="legend">Checkbox Legend</FormField.Label>
         <FormField.Input checked={true} as={Checkbox} label="Checkbox Label" />
         <FormField.Input checked={false} as={Checkbox} label="Thin Crust" />
         <FormField.Input checked={false} as={Checkbox} label="Extra Cheese" />
       </FormField>
 
-      <FormField orientation="horizontal">
+      <FormField orientation="horizontal" grow>
         <FormField.Label>Switch Label</FormField.Label>
         <FormField.Input as={Switch} />
       </FormField>