feat(table): s2 table migration layout part-1 (#3799)

* docs(table): refactors template
- implements some new arguments, such as isSortable, support for more
visual elements, different text alignments in the table cells, and the
different sorting icons, selection and checkboxes, loading
and empty states
- adds numerical data handling (text alignment)
- adds menu disclosure icon to table header cells
- adds isFocused arg for rows
- adds cellCustomClasses to support focused cells
- refactors the head cells to correctly use aria-sort (i.e. only one
column supports sorting instead of all 3)
- passes density arg to table row template to appropriately size the
visuals

* docs(table): refactors story files
- new args implemented like isSortable, visual elements, isLoading,etc.
- new stories for sortable columns, selection modes (previously known
as multi-select), empty state, loading
- adds table row focus/selected states
- removes any dropzone stories from autodocs since design isn't certain
the S2 table will support those.
- adds numerical data alignment story
- adds hasMenu story (disclosure icon)
- uses sentence-case for story names
- updates to some display names and cell organization
- remove collapsible variants from autodocs

* feat(table): adds new table styles
- consolidates repetitive code
- moves custom properties to top of file
- moves high contrast styles to bottom of file
- add styles for headCells and icons
- styles for body/rows/cells borders/focus/dropzones
- clarifies some code comments
- corrects border and border-radii for cells and rows based on new specs
- fixes any scroll styling issues
- updates the thumbnail styles to "visual" to reflect the avatar, icon,
and thumbnail support
- fixes vertical alignment for sort and disclosure/menu icons
- fixes the indentation for the isCollapsible block
- adds -headRow class name for header rows
- corrects some styles for section headers
- adds some mods for summary rows and section headers
- corrects some styling for checkboxes
- adds focus indicators for cells and rows
- opts for a pseudo-element for the focus indicator instead of outline
- add specific alignEnd class for numerical data

* feat(table): vertically center all text in cells

* docs(table): adds migrated badge

* fix(table): linting errors fixed
- addresses some unused or "undefined" custom properties related to
thumbnail that are not in use anymore
- fixes linting issues with table-header-row-top-to-text/bottom-to-text
- remove old custom property ref to please linter

* chore(table): expands test coverage
- fixes up existing tests to use new default props if necessary
- adds numerical test, text alignment, visual elements, empty state,
loading state, and a test of a smattering of other focus/selected tests
for the rows and cells
- add sort test case
- add/fixes tests for selection mode and menu button

* chore(table): checkboxes and multi select stories
- the indeterminate checkbox for a multi-select table should only show in
the header row. Single select tables should not have a checkbox in the
header row.

* refactor(table): body drop target indicator is ::after
- to avoid the outline being covered by the border, we now use an
::after pseudo-element laid on top of the body borders

* fix(table): fix layout shift when row is focused

* fix(table): remove border-block-end from header row
-instead, continue the use of the individual cell border-block-start in
the quiet variant, but use the divider color instead of border-color

* fix(table): update border-radius for focused cells
- updates a missing token for focused cells

* docs(table): add story for action button menu
- adds story for a table with a menu action button in the header cell
- adds hasMenu story arg and new markup

* feat(table): sort and menu button markup and styles
- removes action button markup in favor of regular button
- adjusts template for sort-only and menu buttons
- updates some class names
- sort-only renders a button in the head cell, and menu renders a button
in the head cell with the sort icon and disclosure icon

* fix(table): combine some menu button styles
- the sort-only and menu button styles are now the same since the markup
changed
- new passthrough mods for the button component were refactored from the
action button component
- removes unused sortIcon and menuIcon selectors/styles

* fix(table): pr fixes
- updates to documentation to clear up additional classes for the
sort button and menu button
- updates the template to use the new classes
- updates the aria sort attribute to be set on the head cell if hasMenu
is true
- updates the new classes in the CSS

* chore(table): update metadata

* chore(table): add changeset

Author: marissahuysentruyt

.changeset/petite-toys-greet.md

@@ -0,0 +1,87 @@
+---
+"@spectrum-css/table": major
+---
+
+### S2 table migration
+
+Compared to the S1 table, this component has updated corner rounding, updated color tokens, some updated spacing, and an overall refreshed look.
+
+#### Net-new features
+
+- The S2 table supports an empty state, rendering an illustrated message component.
+- As data is loading to the table, this component will render a progress circle during the loading state.
+- There are 2 selection modes: single-select and multi-select. Multi-select tables (`selectionMode: "multiple"`) render an indeterminate checkbox in the `thead`/`div` equivalent. Single-select tables (`selectionMode: "single"`) do not render the indeterminate checkbox in the header row. (Note: the `selectionMode` arg is disabled and will not render in the Storybook control table.)
+- For tables with sortable column, there are three new S2 icons used: `Sort` to indicate "general" sorting, `SortUp` for ascending sort direction, `SortDown` for descending sort direction.
+- Tables support thumbnail, avatar, and icon components as content within a cell.
+- Focus indicators for entire rows have been updated for rows to include a side focus indicator.
+
+#### Description of other S2 table work
+
+T-shirt sizing for tables is not technically supported, so t-shirt size classes (i.e. `.spectrum-Table--sizeS`), have been removed across all density variants.
+
+The `.spectrum-Table-cell--alignRight` class has been renamed to `.spectrum-Table-cell--alignEnd` to reflect the preference for "logical" positioning. The `.spectrum-Table-cell--alignCenter` class has been refactored to `.spectrum-Table-cell--alignStart`.
+
+In S1, the CSS table component only supported thumbnails. Because the S2 table supports thumbnails, as well as avatars and icons, most of the language regarding thumbnails has also changed. For instance, the `showThumbnail` storybook arg was refactored to `visualElement`. The following CSS classes have been removed or refactored to remove the thumbnail language in favor of "visual" instead:
+
+- `.spectrum-Table-thumbnailInner` >> `.spectrum-Table-visualInner`
+
+- `.spectrum-Table-row--thumbnail` >> **removed**
+- `.spectrum-Table-cell--thumbnail` >> **removed**
+- `.spectrum-Table-thumbnailInner` >> **removed**
+- `.spectrum-Table-thumbnailContent` >> **removed**
+- `.spectrum-Table-thumbnailInner` >> **removed**
+
+The drop zones have been refactored to approach the drop zone indicators as pseudo elements, as opposed to `outline` properties.
+
+Because there are multiple sort icons in the S2 table, `.spectrum-Table-sortedIcon` has been renamed to `.spectrum-Table-sortIcon`.
+
+Individual cell focus rings have rounded corners.
+
+The outer table border extends all the way around the `thead`/`div` equivalent.
+
+In Storybook, several new stories have been added to the docs page and the testing grid for Chromatic. These stories include `EmptyState`, `LoadingState`, `SingleSelect`, `NumericalData`, `TableStates`, `Sortable`. Documentation has been added for each of these stories, as well as expanded in other stories.
+
+#### Mods
+
+##### Renamed Modifiers
+
+| Old Modifier                                       | New modifier                                      |
+| -------------------------------------------------- | ------------------------------------------------- |
+| `--mod-table-border-radius--quiet`                 | `--mod-table-border-radius-quiet`                 |
+| `--mod-table-header-top-to-text`                   | `--mod-table-header-row-top-to-text`              |
+| `--mod-table-header-bottom-to-text`                | `--mod-table-header-row-bottom-to-text`           |
+| `--mod-table-cell-inline-space`                    | `--mod-table-cell-inline-spacing`                 |
+| `--mod-table-checkbox-to-text`                     | `--mod-table-checkbox-to-cell-content`            |
+| `--mod-table-header-background-color--quiet`       | `--mod-table-header-background-color-quiet`       |
+| `--mod-table-header-bottom-to-text`                | `--mod-table-header-row-bottom-to-text`           |
+| `--mod-table-header-top-to-text`                   | `--mod-table-header-row-top-to-text`              |
+| `--mod-table-min-row-height--compact`              | `--mod-table-min-row-height-compact`              |
+| `--mod-table-min-row-height--spacious`             | `--mod-table-min-row-height-spacious`             |
+| `--mod-table-outer-border-inline-width--quiet`     | `--mod-table-outer-border-inline-width-quiet`     |
+| `--mod-table-row-background-color--quiet`          | `--mod-table-row-background-color-quiet`          |
+| `--mod-table-row-checkbox-block-spacing--compact`  | `--mod-table-row-checkbox-block-spacing-compact`  |
+| `--mod-table-row-checkbox-block-spacing--spacious` | `--mod-table-row-checkbox-block-spacing-spacious` |
+| `--mod-table-thumbnail-to-text`                    | `--mod-table-visual-to-text`                      |
+
+##### New Modifiers
+
+- `--mod-table-avatar-size`
+- `--mod-table-avatar-size-compact`
+- `--mod-table-avatar-size-spacious`
+- `--mod-table-section-header-inline-start-spacing`
+- `--mod-table-summary-row-bottom-to-text`
+- `--mod-table-summary-row-min-height`
+- `--mod-table-summary-row-top-to-text`
+
+##### Removed Modifiers
+
+- `--mod-table-edge-to-content`
+- `--mod-table-header-row-checkbox-block-spacing`
+- `--mod-table-avatar-size-spacious`
+- `--mod-table-row-bottom-to-text--compact`
+- `--mod-table-row-bottom-to-text--spacious`
+- `--mod-table-row-top-to-text--compact`
+- `--mod-table-row-top-to-text--spacious`
+- `--mod-table-thumbnail-block-spacing"`
+- `--mod-table-thumbnail-block-spacing-compact`
+- `--mod-table-thumbnail-block-spacing-spacious`