Announcing @canva/app-ui-kit v3.6.0 with Tabs!

Announcements
15

Hi @coral, just following up on this thread, version 4.2.0 of the @canva/app-ui-kit is now released. In this version we’ve included an improvement to the Tabs component to always fill to outer Tabs height regardless if is “fill”, “fixed” or “auto”.

To achieve the desired result of vertical content centering you can set your Tabs height prop to "fill" and control your own content alignment with a flex box with justifyContent to your TabPanel. Something like this:

<Tabs height="fill">      {/* <-- height = "fill" */}
  <TabList>
    <Tab id="panel1">Tab 1</Tab>
    <Tab id="panel2">Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel id="panel1">
      <Box  
        display="flex"              // <-- Add your own Box and flex column
        flexDirection="column"     
        height="full"               // <-- height = "full"
        justifyContent="center"     // <-- center the content vertically
      >
        <Box
          border="low"
          borderRadius="standard"
          paddingX="6u"
          paddingY="12u"
          width="full"
        >
          <Text alignment="center">Vertically centered content.</Text>
        </Box>
      </Box>
    </TabPanel>
    <TabPanel id="panel2">
      {/* ... */}
    </TabPanel>
  </TabPanels>
</Tabs>

For more specific code samples refer to the Storybook page here.

See announcement post here for more info on the release: Trick or Treat! 🎃 Announcing @canva/app-ui-kit v4.2.0 with HorizontalCard!

Any issues still achieving your desired result let me know!

2 Likes