feat(sbb-table-wrapper): initial implementation

[TomMenga]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the pull request tracker for a Pull Request (PR) that matches the one I want to submit, without success.

Issue

This PR Closes #2670

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)

See Review Guidelines for more information what is checked during review process.

Changes

Changes in this pull request:

• Table styles and mixins
• sbb-table-wrapper implementation

Browsers

I tested the build on the following browsers:

• Firefox Desktop
• Chrome Desktop
• Edge Desktop
• Safari Desktop
• Chrome Mobile
• Safari Mobile

Screen readers

I tested the build on the following browsers:

• JAWS Firefox Desktop
• JAWS Chrome Desktop
• NVDA Firefox Desktop
• NVDA Chrome Desktop
• VoiceOver Safari Desktop
• VoiceOver Chrome Desktop
• VoiceOver Safari Mobile
• Android Accessibility Suite Chrome Mobile

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Does this introduce a breaking change?

• Yes
• No

Other information

[DavideMininni-Fincons]

Looks good! some minor changes

[kyubisation]

Generally LGTM 👍
Some open topics:

• Should the default width of the table be 100%? This was previously the case in the sbb-angular library. Thoughts @TomMenga, @jeripeierSBB, @mcilurzo?
• The shadow logic can be compared with the sbb-angular implementation. Basically add a scroll listener to the wrapper and use the resize event from the window to calculate shadow necessity. https://github.com/sbb-design-systems/sbb-angular/blob/main/src/angular/table/table/table-wrapper.ts
• Maybe for the wrapper story, add more columns to demonstrate the responsiveness.

[TomMenga]

Generally LGTM 👍 Some open topics:

• Should the default width of the table be 100%? This was previously the case in the sbb-angular library. Thoughts @TomMenga, @jeripeierSBB, @mcilurzo?
• The shadow logic can be compared with the sbb-angular implementation. Basically add a scroll listener to the wrapper and use the resize event from the window to calculate shadow necessity. https://github.com/sbb-design-systems/sbb-angular/blob/main/src/angular/table/table/table-wrapper.ts
• Maybe for the wrapper story, add more columns to demonstrate the responsiveness.

I'll reply point by point:

• In the first implementation I set the width to 100%. Then, I thought the consumer should be responsible for the table layout (whether fixed or auto) and size. I'm not against having a default 100% width though.
• It's not the same, unfortunately. We do not have a problem understanding when to show the shadow (we already do that in the sticky header for example). The problem stands in the shadow effect itself since we do not have any element that could cast that shadow from the table borders. The angular wrapper only has a shadow effect on fixed columns (because the column itself can cast it). I've tried different approaches but none of them worked 100%.
  The closest thing I found was by simulating a shadow using backgrounds (Codepen). The drawback is that the appearance is bound to the scroll and that's not an actual shadow. Maybe we can deep down on it in a call
• On it 👍

[kyubisation]

LGTM 👍
Nice work!

Outdated

Old