feat(table): added sorting, cell types, actions, and inputs

[ArtBlue]

Fixes #1900

• This PR contains CSS changes
• This PR does not contain CSS changes

Description

This PR is Iteration 2 of the Table module. It includes

1. Sorting
2. Cell Types
3. Actions
4. Inputs

Notes

The BEM structure was adjusted to better align with the markup structure.

Screenshots

Checklist

• I verify the build is in a non-broken state
• I verify all changes are within scope of the linked issue

• I regenerated all CSS files under dist folder
• I tested the UI in all supported browsers
• I did a visual regression check of the components impacted by doing a Percy build and approved the build
• I tested the UI in dark mode and RTL mode
• I added/updated/removed Storybook coverage as appropriate

[changeset-bot]

🦋 Changeset detected

Latest commit: a6151bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@ebay/skin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[agliga]

Took a quick pass. Looks good overall, but I had a concern about the amount of css variables we added.

[ianmcburnie]

Seeing an odd artifact on the previously keyboard focussed element in Safari:

[ArtBlue]

Seeing an odd artifact on the previously keyboard focussed element in Safari:

@ianmcburnie , this is fixed.

[agliga]

One thing I noticed is one of the examples looks misaligned.
The Multiple Actions seem to be bleeding into Actions Plus, is this expected?
I would expect that column to expand to fix the content.

[agliga]

To add (forgot to be explicit in my last comment): Im fine approving it other than that alignment thing, looks ready to go to me!

[ArtBlue]

One thing I noticed is one of the examples looks misaligned. The Multiple Actions seem to be bleeding into Actions Plus, is this expected? I would expect that column to expand to fix the content.

Great catch!!! I fixed it.

Technically, there is a max cell width, so it's not an indeterminate amount of space, but it was nowhere near the max; was a real issue.

[agliga]

LGTM! Nice job

[ianmcburnie]

Could we please add an introductory sentence for the sections "Compact Density Table" and "Relaxed Density Table"? I think those modifiers just affect the spacing, right?

Generally I think we should always have a sentence of explanation/introduction after a heading.

[ianmcburnie]

I notice that the Basic Default Table includes sortable column headers. How do we feel about making the basic version non-sortable and introducing the concept of column sort afterwards (i.e. create a new example section specially for that).

Generally I like to layer in the complexity/features. It might make sense in this case also.

[ianmcburnie]

For the introduction, I'd be tempted to just align with the MDN text:

The <table> HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

We can probably remove this text as I don't see it providing much value:

Interactive elements should be tabbed into in correct sequence top down row by row and column by column based on the respective LTR or RTL mode.

I would change this sentence:

The top-level container element should have a tabindex="0" to make it focusable, an aria-label to relay context of the component, and should have a role of group to make it accessible to screen readers. That will also allow the table element to be scrollable inside the container, both vertically (when overflowing) and horizontally.

to something like this:

To allow scrolling of the table via a keyboard interface, the root element must be added to the page's tab sequence. This in turn requires the root element to have an accessible role and label.

I've been meaning to sweep through the entire docs to align with a single style & tone of voice.

[ArtBlue]

@ianmcburnie ,

For the introduction, I'd be tempted to just align with the MDN text

I thought about doing something similar, but the module's outermost element is not a table. I would actually prefer we keep it as is to allow more flexibility. Lining up modules directly with html elements is not ideal IMO.

I'll change the language to be more inline with what you have, but will avoid reference to the html element.

[ianmcburnie]

Very nice!