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

[MattB]

We are excited to announce the release of version 3.6.0 of the @canva/app-ui-kit!

This update introduces a bunch of improvements, new icons, updates to existing components, the highly requested Tabs component and so much more!

The new additions in v3.6.0

• New components added!

  • Tab
  • TabList
  • Tabs
  • TabPanel
  • TabPanels

  Get started with playing around with Tabs:

  <Tabs>
    <Rows spacing="1u">
         {/* Your navigation Tabs: */}
           <TabList>
             <Tab id="images">Images</Tab>
             <Tab id="videos">Videos</Tab>
           </TabList>
  
         {/* The panels you swap to on Tab click: */}
           <TabPanels>
             <TabPanel id="images">
               <Text>Images</Text>
               {/* ... your panel content here ... */}
             </TabPanel>
             <TabPanel id="videos">
               <Text>Videos</Text>
               {/* ... your panel content here ... */}
             </TabPanel>
           </TabPanels>
    </Rows>
  </Tabs>
  

  

  Also look up a bunch of different Tabs scenarios in the app-ui-kit Tabs storybook.

• Added the following new icons:

  • CalendarIcon, MaximizeIcon, MinimizeIcon, MoreHorizontalIcon, MoreVerticalIcon, StrikethroughIcon

• New props to existing components:

  • Added a searchable prop to the Form Select component to allow searching for options.
    
  • Added a disabled prop to the ColorSelector component.
  • Added a tooltipLabel prop to the Badge component.
  • Added a selected prop to the Button component.
  • Added a thumbnailHeight, selectable, selected, and disabled prop to the VideoCard and EmbedCard components.
  • Added a bottomEnd and bottomEndVisibility prop for adding card decorators to the AudioCard, EmbedCard, ImageCard, and VideoCard components.

Upgrade to v3.6.0

Simply run the following command in your project directory:

npm install @canva/app-ui-kit@latest

More details

For more information about this release, please visit:

• npm package.
• Changelog.

---

We value your feedback, it helps us improve the @canva/app-ui-kit further. If you have any questions or would like to share your experiences with this new version, please feel free to reach out to us.

Looking forwarding to seeing the Tab’olicous apps you’ll build!

[coral]

Hello @MattB ,

I need some help with the tabs. If anyone from your team can provide guidance, that will be great.

Problem: I am making use of tabs to segregate the features in my app. The tabs are titled ‘Import’ & ‘Export’. My code structure is that I have an app.tsx file & 2 files for Import & export component. I am finding it hard to center align the elements. In fact, I am struggling to give a 100% height to the tab panel. Can someone please help with the below?

App.tsx

import Import from "./import";
import Export from "./export";

export const App = () => {

  return (
    <div className={styles.scrollContainer}>
      <Tabs>
        <Rows spacing="3u">
         <TabList>
            <Tab id="Import">
            Import
            </Tab>
            <Tab id="Export">
              Export
            </Tab>
          </TabList>
          <TabPanels>
            <TabPanel id="Import">
              <Import />
            </TabPanel>
            <TabPanel id="Export" >
                <Export />
            </TabPanel>            
          </TabPanels>
        </Rows>
        
      </Tabs>
    </div>
  );
};

Export.tsx

import { auth, Authentication } from "@canva/user";
import { Button, Rows, Title, Text, ProgressBar } from "@canva/app-ui-kit";
import React, { useState } from "react";

function Export() { 

  return(
<div>
        <div style={{position: "relative", display: "flex", alignItems: "center" }}>
        <Rows spacing="1u">
              <Text size="large" variant="regular" tone="primary" alignment="center">Doing the action</Text> 
              <ProgressBar value={progressValue} />
              <Rows spacing="2u">
                <Text size="medium" variant="regular" tone="secondary" alignment="center">Hold tight, larger designs may take longer</Text>
                <Button
                variant="secondary"
                onClick={() => {}}
                stretch
              >
                Cancel
              </Button>
              </Rows>
        </Rows>
      </div>
</div>
  )  
}

export default Export;

I am finding this hard to centre the div from export.tsx file. It floats on the top & the reason I understand is that the height of the tab panel is not 100%. How do I make the component take 100% of the height below the tab list & then align the progress bar towards the center? I have tried multiple combinations by assigning height to various parent divs. Thie code I shared is simplified to remove any app specific code.

[coral]

Any help with this will be appreciated. It is holding our progress.

From what I understand, TabPanels is creating a div & we’re not able to provide it a 100% height, or make the contents within it float to the center. Please suggest some way to achieve this.

[MattB]

Hi @coral unfortunately it’s currently not possible to center the TabPanel content in this way without fixing the parent height. It is something we are aware of and are exploring ways to make it easier to style TabPanel containers that can scale and be more responsive. I’ll will keep you posted once I have an update on a more suitable solution.

[coral]

Thanks for your response. Since center aligning is important, can we get an exception during the review process to use our own Tab components?

[MattB]

Hi @coral , we still recommend to use native ui-kit components over custom solutions where available as it provides the best consistent user experience across Canva for all users. As to the best solution with the current components we can recommend establishing a fixed height container around your TabPanel content (in your case your <Import /> and <Export /> components).

Therefore your implementation could be extended like so:

import Import from "./import";
import Export from "./export";
+ import styles from "styles/components.css";

export const App = () => {
  return (
  <div className={styles.scrollContainer}>
      <Tabs>
        <Rows spacing="3u">
          <TabList>
            <Tab id="Import">Import</Tab>
            <Tab id="Export">Export</Tab>
          </TabList>
          <TabPanels>
            <TabPanel id="Import">
+.                               <Box className={styles.fixedHeight}>
                <Import />
+.                               </Box>
            </TabPanel>
            <TabPanel id="Export">
+.                               <Box className={styles.fixedHeight}>
                <Export />
+.                               </Box>
            </TabPanel>
          </TabPanels>
        </Rows>
      </Tabs>
    </div>
  );
};

Where your styles/components.css should be extended with the following:

.fixedHeight {
 height: 85dvh;
}

You can play around with a height value to suit your content.

Your Import and Export components should also be updated to grow to fill the height and center your content accordingly:

 function Export() { 
  return(
   <Box 
          height="full"
          display="flex"
          alignItems="center"
          justifyContent="center"
      >
      ...
      </Box>
  );
}  

We are also working on adding a Storybook story to more succinctly outline this solution in the coming days.

[MattB]

Hi @coral , just to follow up on my message yesterday, for more details on TabPanel content centering we’ve added a new Storyboook story available here:

app-ui-kit/storybook: tab-panel-content-centering-scenarios

For code samples refer to the Tabs docs.

[coral]

Thanks for sharing this. We’ll give this a try.

[coral]

Hello @MattB ,

My team tried this & yes, we can center the elements. But then we’re not able to get this working with rest of the elements that need to be to aligned. These are the issues we faced:

1. App has a default state where all elements are top aligned.

• When user performs the action, we display loading state that needs to be center aligned.
• We couldn’t find a clean way to get both of these working together.
• Either we use multiple tags to wrap top & center aligned elements separately & hide/show on conditions.
• This doesn’t look like an elegant solution. Is there any better way to do this?

2. The second problem we have is that a Box within scroll container leads to double scroll bar. Box ends up creating an inside scroll, while the default scroll is also there.

[coral]

Hi @MattB is there any way to prevent an additional scroll within the Box? The problem with Box is that when we make use of Box, if the contents go beyond, an additional scroll bar shows up within the box. This is not suited as per the design review. When you zoom in, the scroll bar shows up with 150% zoom or more, since the content goes beyond the screen.

If there is no way to avoid this, can we please get an exception in design review to not use the Tabs component?

11th September-

Hi @MattB , waiting for your response on this. The app was rejected in review because we were not making use of the Tabs component. But with the known limitations around top/center alignment, there is no solution available for us to move ahead. Please guide.

[shivaskanthan]

@coral jumping in here since I recently used Tabs as well. Are you saying that when the component within the Tab requires a scroll, you are seeing two scroll bars (one outer and one inner)? Cause I had the same issue as well when implementing a Infinite Masonry view within my Tab. In the end, I submitted my app with a Segment replacing the Tab.

[coral]

Hey @shivaskanthan ,

My problem is a bit different. We have a workflow in our app. So, we display the form to take user input and when user proceeds, we display the loading state (progress bar). The form has to be top aligned & the loading indicator has to be center aligned.

1. There is no way to center align the items in the tab without using the Box component as suggested in above components.
2. When we use Box to center align, we have to do special handling to top align content.
3. Also, if we make use of Box, and at some resolutions, the form grows bigger than the screen height, we now see 2 scrolls. 1 for the app scroll container & other for the box.

[coral]

Hi @MattB do you have an update on this? We are unable to make some critical changes to the app as our app was rejected in the review process for not using the Tab component. We need a tab component that can support top & middle alignment. Or else, please help us get a temporary exception in the review process, since the current Tab component doesn’t support all use-cases.

[MattB]

Hi @coral, sorry for the radio silence on this one! We have been working on a few improvements, including an update to TabPanels content alignment with no added workarounds required. This change will be available in the in next @canva/app-ui-kit release. You should expect this next week. I will post an update as soon as I have an update when it’s available and how you can leverage it.

[MattB]

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!