Various Docs site issues

[silvalaura]

1. Grid

Component: Grid
Description of the bug: docs code example issues

• Basic Usage example :
  • 'styled' is declared but its value is never read.
• Semantic HTML example
  • Type '"center"' is not assignable to type 'GridJustifyContent | undefined'
  • Type '"center"' is not assignable to type 'GridAlignItems | undefined'.typescript(2322)

Steps to reproduce:

1. navigate to https://next--upbeat-sinoussi-f675aa.netlify.app/api/grid/
2. check code examples in CSB

2. Container

Component: Container

Description of bug: CS examples are wrong - level should be level={3} instead of `level="3"

Steps to reproduce:

• Open all/any CS from https://next--upbeat-sinoussi-f675aa.netlify.app/api/container/

Can it only be reproduced in dev or is it reproducible in the last released version? both

3. Stepper

Component: Stepper
Description of bug: Broken code sandboxes

• Step label
• Completed Step Description

4. Combobox

Component: Combobox

Description of bug: Various CS errors/warnings:

1. Label Position example: label reads left-aligned but the example shows top alignment. Should be labelPosition={LabelPosition.left}
2. Async: inputValue is declared but value is never read, 'items' is of type 'unknown'.
3. Custom Items Typescript: cannot find name uuid, Type '{ id: any; name: string; representation: string; }' is not assignable to type 'CustomComboboxItem'.
4. Custom Items: cannot find name uuid, Type '{ id: number; name: string; representation: string; hex: string; }' is not assignable to type '{ id: any; name: any; representation: any; }'.

5. Hyperlink

Component: Hyperlink

Description of the bug: docs code example issues

• Icon example: missing and unused imports (https://next--upbeat-sinoussi-f675aa.netlify.app/api/hyperlink/#icon)

6. IconButton

Component: Icon Button

Description of the bug: docs code example issues https://next--upbeat-sinoussi-f675aa.netlify.app/api/icon-button/:

• Basic Usage: Property 'success' does not exist on type 'typeof ButtonColor'.
• Inverse: wrong Imports,
• Event Handling type error

7. Toast

Toast Documentation

There are a couple items in the "Accessibility Considerations" section that need to be fixed.

1. The toast is displayed in the bottom-left corner of the window, not the center
2. "Where ever" should be "Wherever".

8. DatePicker

Component: DatePicker

Description of bug:

CS errors in most of the examples:

• Type 'string' is not assignable to type 'Date'.
• Argument of type 'null' is not assignable to parameter of type 'Date'.
• magma is declared but never used

The description under Keyboard Navigation is no longer accurate now that we've removed ?
If you would like to see all of the options for keyboard navigation click on the ? button in the bottom right corner of the DatePicker or press the ? key. should be removed

Steps to reproduce:

• Checkout the mdx files for https://next--upbeat-sinoussi-f675aa.netlify.app/api/date-pickers/
• Navigate to https://next--upbeat-sinoussi-f675aa.netlify.app/api/date-pickers/#keyboard_navigation

9. Dropdown

Component: Dropdown

Description of bug: CS errors:

• DropdownSplitButton missing aria-label
• OptionalDropdownMenuItem: Type '{ children: string; toggle: true; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & { toggle: any; dropdownMenuItemProps: any; }'
• DropdownExpandableMenuGroup: Property 'isMulti' is missing in type '{ children: Element[]; defaultIndex: number[]; }' but required in type 'AccordionMultipleProps'
• DropdownExpandableMenuListItem: Property 'icon' does not exist on type 'IntrinsicAttributes & DropdownExpandableMenuListItemProps & RefAttributes<HTMLDivElement>'
• ButtonVariant is not defined in Custom Button example (this is a fully broken CS)
• DropdownMenuItem onClick: Type '(value: string) => void' is not assignable to type '(value?: string | number | undefined) => void'.

Steps to reproduce:

• Navigate to CS in https://next--upbeat-sinoussi-f675aa.netlify.app/api/dropdown/

10. Form

Form Props should be heading 2 ## instead of 1 so it can show up on the side nav

11. FormGroup

Visually Hidden Label, Custom Styles and Labeling Form Groups all use name prop which is not needed

12. useFocusLock

https://next--upbeat-sinoussi-f675aa.netlify.app/api/use-focus-lock/#optional_header_without_focusable_element unneeded imports Input, Button, Heading

13. ProgressBar

Description of bug:
Broken link to the Loading indicator component

Steps to reproduce:

• Open the Progress bar in the docs;
• Open Design;
• Click on the loading indicator component link;
• Page not found;

14. RadioButton

Steps to reproduce issue 1:

• Open the Radio button in the docs;
• Click on the Design Guidelines link;
• Page not found;

Steps to reproduce issue 2:

• Open the Radio button in the docs;
• Navigate to Froward ref;
• Click the Toggle option 1 button;
• No effect;

15. Select

Description of bug:
Useless scroll bars;

Steps to reproduce:

• Open the Select in the docs;
• Navigate to State Change Types;
• Check styles;