fix: Add isHidden to FormField label element (#2973)

Add `isHidden` to FormFIeld.Label to support what hidden label that existed in form field main before promotion. [category:Components] Release Note: If you want to hide the label but maintain accessibility, add the `isHidden` prop on the `FormField.Label` element. Co-authored-by: manuel.carrera <[email protected]> Co-authored-by: @josh-bagwell <[email protected]>
Workday · Oct 10, 2024 · d80aecc · d80aecc
1 parent 96aa087
commit d80aecc
Show file tree

Hide file tree

Showing 13 changed files with 332 additions and 121 deletions.
diff --git a/modules/docs/mdx/10.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/10.0-UPGRADE-GUIDE.mdx
@@ -1,3 +1,5 @@
+import {Markdown} from '@storybook/blocks';
+
 <Meta title="Guides/Upgrade Guides/v10.0" />
 
 # Canvas Kit 10.0 Upgrade Guide
@@ -160,6 +162,8 @@ updated on a 1:1 basis. None of the base values have changed, only the unit.
 The table below shows what each token value is, what it corresponds to, and what the new `rem` value
 is in `px`:
 
+<Markdown>
+  {`
 | px Value | rem Value | space Token |
 | -------- | --------- | ----------- |
 | 0        | 0         | zero        |
@@ -172,17 +176,23 @@ is in `px`:
 | 40px     | 2.5rem    | xl          |
 | 64px     | 4rem      | xxl         |
 | 80px     | 5rem      | xxxl        |
+`}
+</Markdown>
 
 You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default
 browser font size hasn't been updated, the value will be `16`).
 
 For example:
 
+<Markdown>
+  {`
 | Equation    | rem Value |
 | ----------- | --------- |
-| `16px/16px` | `1rem`    |
-| `32px/16px` | `2rem`    |
-| `8px/16px`  | `0.5rem`  |
+| \`16px/16px\` | \`1rem\`    |
+| \`32px/16px\` | \`2rem\`    |
+| \`8px/16px\`  | \`0.5rem\`  |
+`}
+</Markdown>
 
 #### Why Did We Make This Change?
 
@@ -271,7 +281,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
     <SelectOption label="Medium" value="medium" />
     <SelectOption label="Large" value="large" />
   </Select>
-</FormField>
+</FormField>;
 ```
 
 ```tsx
@@ -292,7 +302,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
       </Select.Card>
     </Select.Popper>
   </FormField>
-</Select>
+</Select>;
 ```
 
 Notice that `Select` is now outside the `FormField`. This is due to the update in `Select` and how

diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
@@ -50,6 +50,7 @@ A note to the reader:
   - [Search Form](#search-form)
   - [Select](#select)
   - [Text Area](#text-area)
+  - [Text Input](#text-input)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -248,7 +249,8 @@ The following changes have been made to the API:
 
 **PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865),
 [#2881](https://github.com/Workday/canvas-kit/pull/2881),
-[#2934](https://github.com/Workday/canvas-kit/pull/2934)
+[#2934](https://github.com/Workday/canvas-kit/pull/2934),
+[2973](https://github.com/Workday/canvas-kit/pull/2973)
 
 We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has been
 made to provide more flexibility and better explicit components when using inputs.
@@ -296,6 +298,7 @@ an example of how to **update** your code to match the new compound component AP
   labelPosition={FormField.LabelPosition.Left}
   useFieldSet={true}
   required={true}
+	inputId='input-id'
   hintId="hint-alert"
   hintText="Please enter a valid email."
   label="Email"
@@ -306,9 +309,10 @@ an example of how to **update** your code to match the new compound component AP
 
 // v12 Newly promoted FormField from Preview to Main
 <FormField
-  error="error"
+  error="alert"
   orientation="horizontalStart"
   isRequired={true}
+	id='input-id'
 >
 	<FormField.Label>Email</FormField.Label>
 	<FormField.Field>
@@ -318,6 +322,34 @@ an example of how to **update** your code to match the new compound component AP
 </FormField>
 ```
 
+- `FormField.LabelPosition.Hidden` is no longer valid. If you still want to hide the label, use the
+  prop `isHidden`.
+
+```tsx
+// v11 FormField in Main
+<FormField
+  error={FormField.ErrorType.Alert}
+  labelPosition={FormField.LabelPosition.Hidden}
+  useFieldSet={true}
+  required={true}
+  inputId="input-id"
+  label="Search"
+>
+  <TextInput onChange={handleChange} value={value} />
+</FormField>;
+
+// v12 Newly promoted FormField from Preview to Main
+
+//...
+
+<FormField error="alert" orientation="horizontalStart" isRequired={true} id="input-id">
+  <FormField.Label isHidden>Search</FormField.Label>
+  <FormField.Field>
+    <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+  </FormField.Field>
+</FormField>;
+```
+
 **Noticeable changes:**
 
 - `error` prop takes in the following values: `"error" | "alert"`.
@@ -334,6 +366,10 @@ an example of how to **update** your code to match the new compound component AP
 - `label` is no longer a valid prop. Use `FormField.Label` sub component to render your label text.
 - Instead of rendering an input, ensure you use `FormField.Input` with the `as` prop. This ensures
   proper error handling and aria attributes for accessibility.
+- `inputId` is no longer a valid prop. Use `id` if you want a custom `id`, otherwise, the component
+  will handle generating a unique id to associate each element for accessibility.
+- `isHidden` has been added as a prop to `FormField.Label` in cases where you want to hide the label
+  while still meeting accessibility standards.
 
 🤖 The codemod will handle the change of `orientation="horizontal"` to
 `orientation="horizontalStart"` if you're using the string literal values. It will also handle
@@ -401,8 +437,7 @@ pass the interface that the `as` prop is pointing to.
 **PRs:** [#2934](https://github.com/Workday/canvas-kit/pull/2934),
 
 `SearchForm` is now using the newly promoted `FormField` component. `SearchForm` now uses `labelId`
-to set the appropiate aria attributes and `id` on the underlying input element. There should be no
-visual breaking changes and the API remains the same.
+to set the appropiate aria attributes and `id` on the underlying input element.
 
 ### Select
 
@@ -474,6 +509,66 @@ interface MyProps {
 }
 ```
 
+`Themeable` has been removed from `TextAreaProps`. If you wish to theme `TextArea`, use our
+`CanvasProvider` with the `theme` object.
+
+```tsx
+const theme: PartialEmotionCanvasTheme = {
+  canvas: {
+    palette: {
+      common: {
+        focusOutline: 'pink',
+      },
+      primary: {
+        main: 'green',
+        light: 'lightgreen',
+      },
+    },
+  },
+};
+
+//...
+
+<CanvasProvider theme={theme}>
+  <FormField>
+    <FormField.Label>Contact</FormField.Label>
+    <FormField.Input as={TextArea} onChange={handleChange} />
+  </FormField>
+</CanvasProvider>;
+```
+
+### Text Input
+
+**PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
+
+`Themeable` has been removed from `TextInputProps`. If you wish to theme `TextInput`, use our
+`CanvasProvider` with the `theme` object.
+
+```tsx
+const theme: PartialEmotionCanvasTheme = {
+  canvas: {
+    palette: {
+      common: {
+        focusOutline: 'pink',
+      },
+      primary: {
+        main: 'green',
+        light: 'lightgreen',
+      },
+    },
+  },
+};
+
+//...
+
+<CanvasProvider theme={theme}>
+  <FormField>
+    <FormField.Label>Contact</FormField.Label>
+    <FormField.Input as={TextInput} onChange={handleChange} />
+  </FormField>
+</CanvasProvider>;
+```
+
 ## Troubleshooting
 
 ### My Styles Seem Broken?

diff --git a/modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx
@@ -1,3 +1,5 @@
+import {Markdown} from '@storybook/blocks';
+
 <Meta title="Guides/Upgrade Guides/v5.0" />
 
 # Canvas Kit 5.0 Upgrade Guide
@@ -122,56 +124,51 @@ updated as you expect.
   tokens in `@workday/canvas-kit-labs-react-core`, but some are using the Legacy type in
   `@workday/canvas-kit-react-core`.
 
-  | Beta Type (px)  | Responsive Type (rem)                     |
-  | --------------- | ----------------------------------------- |
-  | `brand1` (56px) | `levels.title.large` ( 3.5rem \ 56px)     |
-  | `brand2` (48px) | `levels.title.medium` ( 3rem \ 48px)      |
-  | `h1` (40px)     | `levels.title.small` ( 2.5rem \ 40px)     |
-  | `h2` (32px)     | `levels.heading.large` ( 2rem \ 32px)     |
-  | `h3` (24px)     | `levels.heading.small` ( 1.5rem \ 24px)   |
-  | `h4` (20px)     | `levels.body.large` ( 1.25rem \ 20px)     |
-  | `h5` (20px)     | `levels.body.large` ( 1.25rem \ 20px)     |
-  | `body` (16px)   | `levels.body.small` ( 1rem \ 16px)        |
-  | `body2` (14px)  | `levels.subtext.large` ( 0.875rem \ 14px) |
-  | `small` (13px)  | `levels.subtext.medium` ( 0.75rem \ 12px) |
-
-  | Legacy Type (px)  | Responsive Type (rem)                    |
-  | ----------------- | ---------------------------------------- |
-  | `dataViz1` (56px) | `levels.title.large` (3.5rem \ 56px)     |
-  | `dataViz2` (34px) | `levels.heading.large` (2rem \ 32px)     |
-  | `h1` (28px)       | `levels.heading.medium` (1.75rem \ 28px) |
-  | `h2` (24px)       | `levels.heading.small` (1.5rem \ 24px)   |
-  | `h3` (20px)       | `levels.body.large` (1.25rem,) \ 20px    |
-  | `h4` (16px)       | `levels.body.small` (1rem \ 16px)        |
-  | `h5` (16px)       | `levels.body.small` (1rem \ 16px)        |
-  | `body` (14px)     | `levels.subtext.large` (0.875rem \ 14px) |
-  | `body2` (13px)    | `levels.subtext.medium` (0.75rem \ 12px) |
-  | `small` (12px)    | `levels.subtext.medium` (0.75rem \ 12px) |
+<Markdown>{`
+| Legacy Type (px)  | Responsive Type (rem)                    |
+| ----------------- | ---------------------------------------- |
+| \`dataViz1\` (56px) | \`levels.title.large\` (3.5rem \ 56px)     |
+| \`dataViz2\` (34px) | \`levels.heading.large\` (2rem \ 32px)     |
+| \`h1\` (28px)       | \`levels.heading.medium\` (1.75rem \ 28px) |
+| \`h2\` (24px)       | \`levels.heading.small\` (1.5rem \ 24px)   |
+| \`h3\` (20px)       | \`levels.body.large\` (1.25rem,) \ 20px    |
+| \`h4\` (16px)       | \`levels.body.small\` (1rem \ 16px)        |
+| \`h5\` (16px)       | \`levels.body.small\` (1rem \ 16px)        |
+| \`body\` (14px)     | \`levels.subtext.large\` (0.875rem \ 14px) |
+| \`body2\` (13px)    | \`levels.subtext.medium\` (0.75rem \ 12px) |
+| \`small\` (12px)    | \`levels.subtext.medium\` (0.75rem \ 12px) |
+`}</Markdown>
 
 - 🤖 Property Updates
 
   All `fontFamily`, `fontSize`, and `fontWeight` property updates are handled by the codemod.
 
-  | CSS Property | Corresponding Token            | Notes                                                           |
+<Markdown>
+  {`| CSS Property | Corresponding Token            | Notes                                                           |
   | ------------ | ------------------------------ | --------------------------------------------------------------- |
-  | `fontFamily` | `type.properties.fontFamilies` | `default` (Roboto) and `monospace` (Roboto Mono) are available  |
-  | `fontSize`   | `type.properties.fontSizes`    | please consult the type hierarchies above to map values         |
-  | `fontWeight` | `type.properties.fontWeights`  | `regular` (400), `medium` (500), and `bold` (700) are available |
+  | \`fontFamily\` | \`type.properties.fontFamilies\` | \`default\` (Roboto) and \`monospace\` (Roboto Mono) are available  |
+  | \`fontSize\`   | \`type.properties.fontSizes\`    | please consult the type hierarchies above to map values         |
+  | \`fontWeight\` | \`type.properties.fontWeights\`  | \`regular\` (400), \`medium\` (500), and \`bold\` (700) are available |`}
+</Markdown>
 
 - 🤖 Variant Updates
 
   All `variant` updates _except `link`_ are handled by the codemod. Please see the
   [variants](#variants) section below for more information.
 
-  | Variant                | Transformation                                                                 | Notes                                   |
-  | ---------------------- | ------------------------------------------------------------------------------ | --------------------------------------- |
-  | `type.variant.error`   | `type.variants.error`                                                          | name change only                        |
-  | `type.variant.hint`    | `type.variants.hint`                                                           | name change only                        |
-  | `type.variant.inverse` | `type.variants.inverse`                                                        | name change only                        |
-  | `type.variant.button`  | `{fontWeight: type.properties.fontWeights.bold}`                               | variant deprecated, use type properties |
-  | `type.variant.caps`    | `{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}` | variant deprecated, use type properties |
-  | `type.variant.label`   | `{fontWeight: type.properties.fontWeights.medium}`                             | variant deprecated, use type properties |
-  | `type.variant.mono`    | `{fontFamily: type.properties.fontFamilies.monospace}`                         | variant deprecated, use type properties |
+<Markdown>
+  {`
+| Variant                | Transformation                                                                 | Notes                                   |
+| ---------------------- | ------------------------------------------------------------------------------ | --------------------------------------- |
+| \`type.variant.error\`   | \`type.variants.error\`                                                          | name change only                        |
+| \`type.variant.hint\`    | \`type.variants.hint\`                                                           | name change only                        |
+| \`type.variant.inverse\` | \`type.variants.inverse\`                                                        | name change only                        |
+| \`type.variant.button\`  | \`{fontWeight: type.properties.fontWeights.bold}\`                               | variant deprecated, use type properties |
+| \`type.variant.caps\`    | \`{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}\` | variant deprecated, use type properties |
+| \`type.variant.label\`   | \`{fontWeight: type.properties.fontWeights.medium}\`                             | variant deprecated, use type properties |
+| \`type.variant.mono\`    | \`{fontFamily: type.properties.fontFamilies.monospace}\`                         | variant deprecated, use type properties |
+`}
+</Markdown>
 
 #### Manual Updates
 
@@ -639,14 +636,20 @@ types (which were too generic) and their JSDoc hints.
 
 The following table describes each update:
 
+<Markdown>
+{`
 | Before                | After                     | Change Description               |
 | --------------------- | ------------------------- | -------------------------------- |
-| `spacing`             | `space`                   | name change only                 |
-| `spacingNumbers`      | `spaceNumbers`            | name change only                 |
-| `CanvasSpacing`       | `CanvasSpace`             | name change and improved types\* |
-| `CanvasSpacingValue`  | `CanvasSpaceValues`       | name change only                 |
-| `CanvasSpacingNumber` | `CanvasSpaceNumbers`      | name change and improved types\* |
-| `n/a`                 | `CanvasSpaceNumberValues` | new type!                        |
+| \`spacing\`             | \`space\`                   | name change only                 |
+| \`spacingNumbers\`      | \`spaceNumbers\`            | name change only                 |
+| \`CanvasSpacing\`       | \`CanvasSpace\`             | name change and improved types\* |
+| \`CanvasSpacingValue\`  | \`CanvasSpaceValues\`       | name change only                 |
+| \`CanvasSpacingNumber\` | \`CanvasSpaceNumbers\`      | name change and improved types\* |
+| \`n/a\`                 | \`CanvasSpaceNumberValues\` | new type!                        |
+
+`}
+
+</Markdown>
 
 \* Before, the types were too generic and not very useful. They now better reflect the values they
 represent.
@@ -1199,14 +1202,18 @@ Pass a `css` prop or a styled button instead to have a custom styled button. You
 
 If you were using `usePopup` before, here's a list of equivalent APIs:
 
+<Markdown>
+  {`
 | Before                                                                  | After                                 |
 | ----------------------------------------------------------------------- | ------------------------------------- |
-| `const { popperProps, targetProps, closePopup, stackRef } = usePopup()` | `const model = usePopupModel()`       |
-| `popperProps.open`                                                      | `model.state.visibility !== 'hidden'` |
-| `closePopup()`                                                          | `model.events.hide()`                 |
-| `stackRef` or `popperProps.ref`                                         | `model.state.stackRef`                |
-| `popperProps.anchorElement`                                             | `model.state.targetRef.current`       |
-| `targetProps.onClick`                                                   | `usePopupTarget(model).onClick`       |
+| \`const { popperProps, targetProps, closePopup, stackRef } = usePopup()\` | \`const model = usePopupModel()\`       |
+| \`popperProps.open\`                                                      | \`model.state.visibility !== 'hidden'\` |
+| \`closePopup()\`                                                          | \`model.events.hide()\`                 |
+| \`stackRef\` or \`popperProps.ref\`                                         | \`model.state.stackRef\`                |
+| \`popperProps.anchorElement\`                                             | \`model.state.targetRef.current\`       |
+| \`targetProps.onClick\`                                                   | \`usePopupTarget(model).onClick\`       |
+`}
+</Markdown>
 
 #### New Focus Management
 
@@ -1281,11 +1288,16 @@ model and behaviors, the following is equivalent:
 
 `Popup.Card` uses `Card`, which is now using `Box`. Consequently, the following props have changed:
 
+<Markdown>
+{`
 | Before                         | After                                      |
 | ------------------------------ | ------------------------------------------ |
-| `padding={Popup.Padding.zero}` | `padding="zero"` or `padding={space.zero}` |
-| `depth={depth[0]}`             | `depth={0}`                                |
-| `popupRef={ref}`               | `ref={ref}`                                |
+| \`padding={Popup.Padding.zero}\` | \`padding="zero"\` or \`padding={space.zero}\` |
+| \`depth={depth[0]}\`             | \`depth={0}\`                                |
+| \`popupRef={ref}\`               | \`ref={ref}\`                                |
+`}
+
+</Markdown>
 
 #### Transitioning