fix(tabbar): make Wave's theme apply to TabBar component

[martimalek]

What

Make Wave's theme apply to TabBar component

Media

{/* When passing a margin to TabBar it doesn't apply it correctly */}
{/* mb={3} should equal 24px (Spaces[3]), it is 16px instead */}
<TabBar mb={3}>
  {['Tab One', 'Tab Two'].map(it => (
    <TabBar.Link
        key={it}
        href="#"
        onClick={e => {
            e.preventDefault();
            setSelected(it);
        }}
        selected={selected === it}
    >
        {it}
    </TabBar.Link>
  ))}
</TabBar>
{/* Here's a correct margin for comparison */}
<Box width='100%' mb={3} >The margin above is 16px, but should be 24px</Box>
<Box width='100%' >The margin above is 24px</Box>

Check it out in this CodeSandbox

Why

All Wave components should have Wave's theme applied to them

​

How

• Pass our theme as a styled component attribute in TabBar

[github-actions[bot]]

:tada: This PR is included in version 2.1.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[JanHamara]

Hi @martimalek , I know this is already merged, just a little comment from what I noticed recently, and I see in your comment above TabBar that you noticed it too, maybe we should promote more to use the Spaces[value] that we have exported from Wave, rather than just numbers alone for margins, paddings, etc., because:

• as we see, values of spacing returned from Spaces[value] and just using [value] itself, are not the same
• I think the main point of having the Spaces components, was to let it manage all spacing, when using Wave

So I think it would make sense to also include using Spaces, when defining spacings of in our other components within the library

wdyt?