fix: Clean up docs and pointset size

Workday · Sep 5, 2023 · 6233311 · 6233311
1 parent 5280d72
commit 6233311
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 11 deletions.
diff --git a/modules/react/collection/lib/useListItemRegister.tsx b/modules/react/collection/lib/useListItemRegister.tsx
@@ -94,7 +94,7 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
       disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
       item: null, // remove `item` from prop list
       virtual: null, // remove `virtual` from prop list
-      'aria-setsize': elemProps.virtual?.size,
+      'aria-setsize': state.items.length || elemProps.virtual?.size,
       'aria-posinset': elemProps.virtual ? elemProps.item!.index + 1 : undefined,
       style,
       id: slugify(`${state.id}-${localId}`),

diff --git a/modules/react/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts
@@ -4,7 +4,7 @@ import {useComboboxInput} from '@workday/canvas-kit-react/combobox';
 import {useSelectModel} from './useSelectModel';
 
 /**
- * `useSelectInput` extends `useComboboxInput` while adding type ahead functionality and adding select specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/)
+ * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and adds type ahead functionality and select specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 export const useSelectInput = composeHooks(
   useComboboxInput,

diff --git a/modules/react/select/lib/hooks/useSelectItem.tsx b/modules/react/select/lib/hooks/useSelectItem.tsx
@@ -1,7 +1,7 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {useSelectModel} from './useSelectModel';
 
-/** Adds the correct aria role for the select item */
+/** Adds aria role `option` for the select item. */
 export const useSelectItem = createElemPropsHook(useSelectModel)(({state}) => {
   return {
     role: 'option',

diff --git a/modules/react/select/lib/hooks/useSelectModel.tsx b/modules/react/select/lib/hooks/useSelectModel.tsx
@@ -5,12 +5,12 @@ import {useComboboxModel} from '@workday/canvas-kit-react/combobox';
  * `SelectModel` extends the {@link ComboboxModel}. Selecting items from
  * the menu will dispatch an
  * [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event on the
- * input which should work with form libraries, automation, and autofill.
+ * input which should work with form libraries, automation and autofill.
  *
  * ```tsx
- * const model = useSelectModel()
+ * const model = useSelectModel({items: ['Mobile', 'Phone', 'E-Mail']})
  *
- * <SelectBase model={model}>{Select child components}</SelectBase>
+ * <Select model={model}>{Select child components}</Select>
  * ```
  */
 export const useSelectModel = createModelHook({

diff --git a/modules/react/select/stories/Select.stories.mdx b/modules/react/select/stories/Select.stories.mdx
@@ -203,6 +203,15 @@ associated to the `<Select>` and read out by voiceover. **Note: The Select conta
 `<Select>` must wrap the `FormField` element to ensure prop styling on the `<Select.Input/>`
 element.**
 
+```tsx
+<Select items={options}>
+	<FormField label="Contact" inputId="contact-id-formfield">
+		<Select.Input id="contact-id-formfield" />
+		... select sub components
+	</FormfField>
+</Select>
+```
+
 #### Alert
 
 Use the alert state when a selection is valid but there is additional information.
@@ -218,4 +227,3 @@ Use the error state when the selection is no longer valid.
 ## Component API
 
 <SymbolDoc name="Select" fileName="/react/" />
-```
diff --git a/modules/react/select/stories/examples/RefForwarding.tsx b/modules/react/select/stories/examples/RefForwarding.tsx
@@ -33,8 +33,8 @@ export const RefForwarding = () => {
   return (
     <>
       <Select items={options} nonInteractiveIds={disabledItems}>
-        <FormField label="Contact" inputId="contact-select">
-          <Select.Input ref={ref} onChange={e => handleChange(e)} id="contact-select" />
+        <FormField label="Contact" inputId="refforwarding-select">
+          <Select.Input ref={ref} onChange={e => handleChange(e)} id="refforwarding-select" />
           <Select.Popper>
             <Select.Card maxHeight="200px">
               <Select.List>

diff --git a/modules/react/select/stories/examples/Scrollable.tsx b/modules/react/select/stories/examples/Scrollable.tsx
@@ -40,10 +40,9 @@ export const cities = [
 export const Scrollable = () => {
   return (
     <Box>
-      <FormField label="Choose a City" inputId="scrollable">
+      <FormField label="Choose a City" inputId="scrollable-select">
         <Select
           items={cities}
-          id="scrollable-select"
           nonInteractiveIds={cities.filter(item => item.disabled === true).map(item => item.id)}
         >
           <Select.Input id="scrollable-select" />