Fix markup in Table's column manager

[r100-stack]

Changes

Fixes #2134. Upon investigating that issue, I noticed that there were a few issues in the markup. E.g.:

• <input> (checkbox) as a descendant of a <button>
• <div> not allowed as a child of <button> in this context

MenuItem markup in the column manager

Furthermore, @mayank99 added that even if each menu item was a div, no interactable elements are allowed in role="menuitem".

As a result, we decided to replace the DropdownMenu + MenuItem startIcon={<Checkbox>} with a Popover + floating <fieldset> with a <Checkbox label={…}> for each column. Using a Popover also makes it easy to expand on column manager functionality to address #783.

Created a new iui-table-column-manager class mainly for padding and max-block-size styles. Like iui-menu, this also shows a maximum of 8.5 items (hardcoded without any calculation (#2135 (comment))). The 0.5 part is to show that there are more items in the list.

Unrelated: Added @default to the JSDocs and a default value to the deconstructed object for the Surface's isPadded prop.

Testing

• Fixed failing unit tests
• Approved failing test images

Docs

Added changesets

After PR TODOs

• Consider offering a way localize the "Column Manager" label (#2135 (comment))
• Try preventing "<SomeComponent as={Flex}> not override the rendered element" (#2135 (comment)). Related: #2152 (comment)

broken