eightshift-frontend-libs icon indicating copy to clipboard operation
eightshift-frontend-libs copied to clipboard

Published 20 hours ago • verified publisher icon infinum

Add tabs block (WIP)

Open mbmjertan opened this issue 3 years ago • 2 comments

This PR adds support for a tabs block.

https://user-images.githubusercontent.com/1742806/127016659-f4598d09-112a-4cc7-8e1c-281e1a0acf4a.mov

It's a work in progress, and remaining tasks include (along with anything else you can think of):

  • [x] improving accessibility and UX
  • [ ] adding options (currently, the only useful option I can think of is what tab is opened by default)
  • [x] cleaning up code (some SCSS is duplicated needlessly, and some whitespace lines remain in JavaScript)
  • [ ] fixing the example modal (which currently doesn't work because the block relies on wp.data.select('core/block-editor')
  • [x] adding icons for the tabs and tab blocks
  • [ ] adding storybook

I'm also not sure that this is the best way to do implement this, so any and all suggestions would be welcome.

As for how this works, this commit introduces a parent block tabs that contains a tab block which contains InnerBlocks (akin to the way columns work). The tabs block looks up what its InnerBlocks are by using getBlock, while the currently active tab is stored as an attribute (that's set using updateBlock) and provided in context to tab blocks to toggle visibility classes.

mbmjertan avatar Jul 26 '21 15:07 mbmjertan

@goranalkovic-infinum do you think you'll be able to pick this one up? I think having tabs would be a nice addition to the libs 🙂

dingo-d avatar Aug 25 '22 07:08 dingo-d

@goranalkovic-infinum do you think you'll be able to pick this one up? I think having tabs would be a nice addition to the libs 🙂

this is in plan after the "redesign" that Goc is doing

iruzevic avatar Aug 25 '22 07:08 iruzevic

Hmm.. nice option for tab will be "remeber me" like when user open tab and then navigate to other page when he returns to page with tabs then that tab with flag remeber me know the state of closed/opened ....put it in localstorage....

marijang avatar Dec 08 '22 17:12 marijang

Nice work and a block we definitely need as part of the libs 😄

Also it would be nice:

  • to add aria attributes
  • to add keyboard support for switching tabs

I think this is pretty nice example of this: https://codepen.io/heydon/pen/veeaEa

dadadavorin avatar Dec 09 '22 10:12 dadadavorin

goodbye to this PR 👋

mbmjertan avatar Jan 26 '24 10:01 mbmjertan