docs: Clarify and correct Select docs (#2684)

This PR clarifies some vagueness in the v10 upgrade guide around Select, and it corrects some Select JSDoc typos

[category:Documentation]

modules/docs/mdx/10.0-UPGRADE-GUIDE.mdx

@@ -263,6 +263,9 @@ We've converted `Select` into a
 a flexible API and access to its internals via its subcomponents.
 
 ```tsx
+import {Select} from '@workday/canvas-kit-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
 // v9
 <FormField label="Pizza Size">
   <Select onChange={handleChange} value={value}>
@@ -274,6 +277,9 @@ a flexible API and access to its internals via its subcomponents.
 ```
 
 ```tsx
+import {Select} from '@workday/canvas-kit-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
 // v10
 <Select items={['Small', 'Medium', 'Large']}>
   <FormField label="Pizza Size" inputId="pizza">
@@ -291,7 +297,13 @@ a flexible API and access to its internals via its subcomponents.
 </Select>
 ```
 
-Unlike the
+Notice that `Select` is now outside the `FormField`. This is due to the update in `Select` and how
+the `FormField` in main applies attributes. Previously, `Select` was a styled native `<select>`
+input and `FormField` applied attributes automatically to that input. The new `Select` is solely a
+React context provider for its subcomponents. `FormField` needs `Select.Input` to be a direct child
+to apply attributes correctly.
+
+Also, unlike the
 [Select in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-select-left-label--default),
 this component does not have a border around its menu.
 

modules/react/select/lib/Select.tsx

@@ -172,7 +172,7 @@ export const Select = createContainer()({
      * `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
      *
      * ```tsx
-     * <Select item={options}>
+     * <Select items={options}>
      *  <FormField label="Your Label">
      *    <Select.Input onChange={(event) => handleChange(event)}>
      *    <Select.Popper>
@@ -189,7 +189,7 @@ export const Select = createContainer()({
      * **Note: The card will be the width of its corresponding `Select.Input`**.
      *
      * ```tsx
-     * <Select item={options}>
+     * <Select items={options}>
      *  <FormField label="Your Label">
      *    <Select.Input onChange={(event) => handleChange(event)}>
      *    <Select.Popper>
@@ -206,7 +206,7 @@ export const Select = createContainer()({
      * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
      *
      * ```tsx
-     * <Select item={options}>
+     * <Select items={options}>
      *  <FormField label="Your Label">
      *    <Select.Input onChange={(event) => handleChange(event)}>
      *    <Select.Popper>
@@ -225,7 +225,7 @@ export const Select = createContainer()({
      * `Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.
      *
      * ```tsx
-     * <Select item={options}>
+     * <Select items={options}>
      *  <FormField label="Your Label">
      *    <Select.Input onChange={(event) => handleChange(event)}>
      *      <Select.Popper>