Refactor ActionList to improve a11y / IE11, enrich and improve (#1474)

* Major refactor of ActionList
* Use <table> for ActionList to improve a11y / IE11
* ActionList code shuffle
* ColumnSelector is now its own component and it displays a popover when clicked
* Allow icon for label
* Improved :focus presentation
* Moved mock data to __mock__ folder
* Apply / Cancel buttons on Popover
* Remove header property (you get what you get)
* Fix `columnsToDisplay` typing in context
* Update packages/components/src/ActionList/ActionList.tsx

Co-authored-by: Lara Harrow <[email protected]>
Co-authored-by: mdodgelooker <[email protected]>

Author: 3 people

.vscode/settings.json

@@ -30,6 +30,7 @@
     "labeledby",
     "labelledby",
     "nomarker",
+    "nowrap",
     "polarbrightness",
     "popperjs",
     "scrollbar",

packages/components/CHANGELOG.md

@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- `ActionList` got a major refactor
+  - Columns now support `size`
+    - If `small`, `medium` or `large` is specified the content will be truncated to fit
+    - If `nowrap` column will not wrap white-space and will grow fit content width
+  - Responsive support - if table exceeds viewport width it will scroll sideways
+    - `firstColumnStuck` developer can specify if the first column should "stick" to the viewport edge when scrolling
+    - NOTE: Column for checkbox selection and actions column are always stuck to their respective edges
+  - Column selection - the user can select which columns are displayed (if any columns have `hide` specified in their configuration)
 - The `autoFocus` prop will now work for inputs in `Popover` and `Dialog`
 - `Select`, `SelectMulti`, `InputTimeSelect`, and `InputSearch` now support `autoFocus`
 - `Dialog` & `Drawer` now support semantic sizes (`xxsmall - xlarge`)
@@ -17,6 +25,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- `ActionList` got a major refactor
+  - Now uses a `table` element instead of previous grid layout (IE11 compatible)
+  - Vertical cadence of `ActionList` reduced to a minimum of `36px`
 - `Popover`, `Menu`, and `Select` no longer cancel the first click outside by default (use `cancelClickOutside` to override this)
 - `DialogContent` no longer has `py` unless it overflows the available space (acting as `overflow: scroll`)
 
@@ -35,6 +46,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
+- `ActionList` no longer supports `header` prop (header is always generated by component now)
+  - `column` no longer supports `width` (see new `size` behavior)
 - `groupedPopoversRef` and `groupedMenusRef` (`Popover` and `Menu` no longer cancel the first click outside)
 - `Dialog` no longer supports `maxWidth` (it's now always `100%` - use `width`)
 - `Drawer` no longer supports `height` (use `minHeight`)