feat: improve gl-table stacked feature
New Proposal
This MR aims to override the stacked mode of b-table to be more similar to the current implementation of our custom table, the implementation is completely based on CSS override.
Video:
Caveats:
- There is still cross browser testing to do
and some overflow to be fixed - The implementation may have to be revised with the new version of bootstrap
Tested in:
- Chrome
- Firefox
- Safari
- Edge
- Chrome on Android
- Safari on Iphone 11
Nb: storybook does not work on browserstack + ie11 or iphone X, syntax error in the console
# Old proposal (kept for context)
This MR aims to extend `gl-table` to have a responsive solution similar to the one that is currently shown in this screenshot:
https://gitlab.com/gitlab-org/gitlab/uploads/dd6be55b24a81daeabf1b89617a8dc07/Screenshot_2019-11-18_at_17.50.50.png
And implemented in pure SCSS, this MR aims to 'bring in' the functionality and looks of the attempted new component from this MR !931
## Proposal
- add a new prop called `gl-responsive` ( to not conflict with vue-boostrap `responsive` prop )
- add a new prop called `gl-responsive-default-column-size` ( again to avoid risk of conflicts with vue-boostrap props)
- if `gl-responsive` is true do not load b-table but load another markup ( based on the one described in the MR )
- use 3 types of slots for customisation
- normal header
- mobile header
- cell header
- keep the slots naming convention the same as b-table ( plus the new mobile slot )
- use utility first approach everywhere is possible
- add extensive documentation of what gl-responsive markup can or cannot do
the idea is to iteratively add more and more functionality to the 'responsive mode' in an iterative fashion
## Downsides:
- With this approach toggling a prop means swapping completely the markup, we should probably discourage the users to do dynamically and make the prop a 'initialisation parameter' only, I will try to see if we can implement this easily.
- We should be wary of props clashing between our custom solution and b-table, maybe with a unit-test I will see if that is achievable as well.
- **This will make GlTable not complaint with Pajama anymore**
## Note
When the upgrade to vue-boostrap is done we will need to rework the slot naming to be consistent with the new names.
Context / Previous attempt:
Related to #269 (closed)
Edited by Nicolò Maria Mezzopera