Compact interactive list component layout

[adoroshk]

Summary

This PR creates the layout for the Compact Interactive List component, adds layout usage examples and tests.

What was changed:
The Compact Interactive List component layout has following features:

1. The layout is div-based with roles "grid", "row", "gridCell" assigned to corresponding semantic element.
2. The Items (semantic rows) are arrange-able in columns (the number of columns is provided via prop).
3. Semantic rows are located at fixed points, not flowed via CSS (this should be added in the future).
4. Semantic rows direction is top to bottom, but with a prop can be changed to left to right.
5. Customers can provide the cells’ width, but can also set the props for cells to grow.
6. The supported width units are px, em, rem.

NOTE: Semantic Rows headers and column headers should be out of scope of this Jira and added once the key navigation is added. As they need to be hidden and the only purpose of them is to provide a row/column context with keyboard navigation, there is no way to test if they work before the keyboard navigation exists.

Testing

This change was tested using:

• WDIO
• Jest
• Visual testing (please attach a screenshot or recording)
• Other (please describe below)
• No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

• UX review
• Accessibility review
• Functional review

Additional Details

This PR resolves:

UXPLATFORM-9557

[github-actions]

	Fails
🚫	Please include a CHANGELOG entry for each changed package this PR. Looks like a CHANGELOG entry is missing for: terra-compact-interactive-list

Generated by 🚫 dangerJS against 6d4771b

[adoroshk]

I am not clear on the design or requirements for responsiveness for this control. Usually, a control is responsive based on the size of the container element.

@cm9361 Currently there are 2 major options:

1. The customers set width to all columns, the component is not responsive, it it's bigger than its container the scroll shows up.
2. The customers omitted width or set the flexGrow prop for at least one column. That column will be responsive and grow to fill the container width or shrink to fit in it.

In option 2, providing the uniqueness of the list component, I can see the situations when the customers might want the columns to grow (or shrink), but not exceed some specific width. In that case the customers can add maximumWidth (minimumWidth) to that column. That would make the list responsive, but not taking 100% of the width. That would allow the list to be responsive, but not limited to the container width.

[eawww]

@adoroshk that's correct but they're appearing in a different order in the dom. Going over it with a screen reader, without using any extra controls, it reads in the wrong order.

[adoroshk]

@adoroshk that's correct but they're appearing in a different order in the dom. Going over it with a screen reader, without using any extra controls, it reads in the wrong order.

Per discussion with @eawww adding aria-rowindex to the rows would not solve the problem and the DOM order of items should be changed to reflect the column (top to bottom, then right to left) order of items inside the list. In order to break into columns with such DOM order without wrapping elements, the items have to be of known height.

It has been also discussed that that the placeholder rows (empty spaces at the end of the list) are allowed, but must not have a role (already implemented) and aria-hidden=true (will be added in the next commit).

[eawww]

Just a couple more things.

[eawww]

In order to make the examples more useful, all relevant implementation information should be included in the example's jsx file. For components like this, the data fed into it is important so it should be included, even if that means repeating it across examples.

In this instance, the focus of the example is the columns so the row data may not be terribly important, but there should be at least one base example that includes the row data inline.

[adoroshk]

Fixed in a60c1c5

[eawww]

The icons in this file are all meaningful, so they should make use of the a11yLabel prop.

[adoroshk]

Added in a60c1c5

[nikhitasharma]

I thought we are still matching snapshots for the default component render once in our tests.

[adoroshk]

I guess I need to add some tests, including an initial snapshot. Will get back to this comment once I have an update.

[adoroshk]

I removed widthUnit prop in 6f635df. The customer will be allowed to pass all width props for columns (such as width, maxWidth, minWidth) with valid css string. The customer is supposed to pass all width props using the same width unit, but if they fail to do so the failed prop will be disregarded, which will not break the layout, just make the column flex growing. There will be also a console warning for width unit inconsistency.
This new functionality will need some more tests added.

[eawww]

Component is laid out as designed. Meets meaningful sequence requirements. Not evaluated for interactivity as this is only to serve as a base for further work.

[nikhitasharma]

Looks good to me given some minor test updates are done.

[kenk2]

1 nit otherwise 👍

[kenk2]

nit: I'd want to see if we can try to encapsulate this messaging inside a useEffect. This will run every time the component re-renders and could potentially flood the console with excessive messages.