Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(table): migrate to core tokens (#3441)
* build(table): use beta version of spectrum-css table Use new 5.0 beta version of spectrum-css/table. Includes updated auto generated CSS files after yarn install. * build(table): bump up tokens package version to include table tokens Table tokens were added in spectrum-css/tokens 10.2.1 * build(table): generated updates after tokens version bump Auto generated updates after bumping tokens version to 10.2.1 * fix(table): set block-size used for min-height back to auto Block-size is used for for the min height of elements that are displayed as table-cell, as min-block-size does not work for that display value. For SWC elements changing display table-cell to display flex, set this property back to auto, so there is not a fixed height. * build(table): bump up spectrum-css beta version to beta.1 * fix(table): border fixes for scrollable display flex Some fixes to get this looking closer to Spectrum CSS. SWC changes display to flex, with a scrollable table body, which throws off the outside border (unset in overrides). Adjusted some spectrum-config to create the correct selectors. Still existing: problems with how checkboxCell is handled. * refactor(table): styles for checkbox cell and head-cell attribute Previously all styles for Table-cell, Table-headCell, and Table-checkboxCell were being applied to the sp-table-checkbox-cell, regardless of where it was located. Resulting in head cell styles appearing on checkbox body cells, and other incorrect styles. Adds a 'headCell' property / 'head-cell' attribute to the checkbox cell component. And modifies the spectrum-config to include the various styles depending on whether that attribute exists or not. * build(table): use latest 5.0.0-beta.2 Build with the latest table beta, including generated CSS. * fix(table): restore flex scrollable and display properties * fix(table): adjust spectrum config to fix checkbox cell styling - Target the checkbox element correctly in generated styles. - Increase specificity on checkboxCell class, so it doesn't get overridden by the [head-cell] related classes, using repeated :host selector. Using :where to reduce specificity of the [head-cell] selectors was an option as well, but its browser support is still fairly new. * fix(table): improve checkbox head-cell attribute with reflect Set new TableCheckboxCell headCell property to have 'reflect' and attribute setting. * feat(table): add support for emphasized and non-emphasized Table styles now have emphasized and non-emphasized colors used for selected rows, based on the main table variant class for emphasized is present. * fix(table): move sort icon to left side Sort icon moved to left side and removes whitespace between the icon and the text that creates 3 pixels of extra space. Version update to new beta also includes some CSS custom property refactors that should simplify emphasized and non-emphasized. * fix(table): adjustment for new inline-size style when using flex * feat(table): finalize emphasized attribute including docs Set up emphasized attribute properly, and pass it down to checkbox cell so it can be applied to the sp-checkbox as well. Update documentation around emphasized, adding a new section and adding emphasized to some existing examples. * feat(table): add density property Add 'density' property to the component with options for compact and spacious. Includes documentation examples showing both. * feat(table): update t-shirt sizing support and docs - Remove size="m" used on examples, as medium styles are used by default and the attribute is not needed when it has that value. - Add support for large and extra-large t-shirt sizes which are now supported in the CSS. - Add docs section for Sizing. * docs(table): clarify docs around current use of scroller Scrolling in previous examples that were not virtualized was a result of the example wrapper's overflow and not a feature of the table. So setting a height on these was only triggering scrolling in that wrapper. There was also a non-virtualized example with 'scroller' set to true that wasn't doing anything (that feature only appears to work with virtualized examples). * feat(table): add quiet property Add property for the 'quiet' variant, and a documentation example. * docs(table): organize some examples into tabs Use tabs for density and emphasized docs examples, in a similar manner to 'sizing', so the displayed options are more consolidated. * build(table): use 5.0.0 spectrum css release of table Set version of Spectrum CSS table to the latest 5.0.0 release, just merged into main. And run yarn install and yarn build to update generated files. * docs(table): non-emphasized default and docs update Make non-emphasized the default and only have a single emphasized example. Make sure checkboxes are shown in emphasized story. And minor text update in the docs for selects=multiple. * ci: update golden image hash * test(table): update virtualised tests to update properly * test(table): abstract testing helpers --------- Co-authored-by: Najika Yoo <naj.halsema@gmail.com> Co-authored-by: Najika Halsema Yoo <44980010+najikahalsema@users.noreply.github.com>
- Loading branch information
3 people
committed
Sep 6, 2023
1 parent
95bb964
commit b866bab