Tab block variants

We’re also introducing a new ‘copy’ button in the Code block, and a whole batch of quality-of-life improvements!

This version was released on September 30, 2022

We prepared a smaller but impactful release of several improvements and fixes to make your design system documentation even more flexible for creators and easier and more delightful to use for the viewers.

New variants for Tabs block

Accordion

You can now display your content inside of an expandable vertical accordion! This variant is great for displaying Frequently Asked Questions or Related components. But it works for any content if needed.

Example FAQ are from Nord design system, one of our favorites design systems.

What is the goal of the design system?

The goal of Nord Design System is to improve UI consistency and quality, while making our software design and development processes more efficient. Nord also helps to establish a common vocabulary between everyone in our organization and ease collabo­ration between different teams and disciplines.

Nord is Nordhealth’s design system for products, digital experiences and brand. It’s a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences.

Public documentation makes sharing and collaboration between different teams and third party vendors much easier as it increases the system’s visibility and accountability. This also makes us push towards higher quality content and enables us to be more transparent. Finally, this also serves as an amazing tool that we can leverage in recruiting.

The short answer is yes, you should use it. Nord improves UI consistency and quality, while making our software design and development processes more efficient.

Columns (experimental)

We've seen our customers implementing a column variants in Tabs block, so even though we know it's a workaround, we decided to release it to our Default Documentation Template too.

What is it useful for? Many things. One of the use cases is to use combination of other blocks we have to have a nice Do/Don't or Content guidelines.

Example guidelines from Polaris and Orbit.

Content guidelines (using Tab Columns variant)

  • We’ve made some changes to improve your store’s security
  • These products aren’t getting a lot of views, but visitors are adding them to their carts
  • Your SSL certificates were activated
  • These are your less popular products with the highest add-to-cart conversion

Component guidelines (using Tab Columns variant)

Provide context for your messages.

Don’t include only details with no context.


Two columns of text (using Tab Columns variant)

 

Popover

Popovers help reduce clutter in your designs by keeping small bits of information hidden behind an interaction. They work well for units of slightly complex options (if it gets to be very complicated, consider a modal to structure it all).

Collapse

Collapse components hide long information so that it’s not cluttering up the screen. They’re great for hiding things like options that have reasonable defaults that most people wouldn’t change, but some people might want to. This is especially true where there are multiple groups of such options.


Note that we're planning to have the support for Column Layout on our roadmap. If the feature is important for you, don't forget to vote for it in our Feature Requests Portal.

Learn more about variant in Tab blocks


Quality-of-Life improvements

We released a lot of smaller QoL improvements to make it easier to interact with design system documentation!

Copy button for Code block

Hint: Try to hover the code block below 👀


                                                        
                                                        
                                                            <Stack direction="row" spacing={1}>
                                                            <IconButton aria-label="fingerprint" color="secondary">
                                                                <Fingerprint />
                                                            </IconButton>
                                                            <IconButton aria-label="fingerprint" color="success">
                                                                <Fingerprint />
                                                            </IconButton>
                                                        </Stack>
                                                        
                                                            

Sticky page-level tabs

No need to scroll up and down all the time just for switching a tab. Page-level tabs are now visible even when the page is scrolled down, attached to the top of your screen. It was never easier to switch between Design and Code documentation.

Other improvements in documentation

  • Added a proper preview for Typography tokens – "Ag" is newly displayed with all the applied token styling. Make sure you have your custom fonts loaded in documentation.
  • Added missing alt text for Image, Frames, and Assets blocks (using Caption or the name of the frame from Figma). Accessibility of our documentation should be a bit tighter now, but we are taking this very seriously and will continue our efforts to match the expectations of even the most demanding design systems.
  • Improved page title for pages that have tabs. We now display also the page title of the parent page. Instead of "Code", the page title is now "Code | Button". So when you'll need to share component documentation page with anyone on Slack, it'll be much clearer what the page is about.
  • Added option to hide a component from the Component Overview block by adding an underscore prefix (e.g. "_Button New") to the component name in component data tab. Any component which name starts with an underscore will not render anywhere inside the documentation. This aligns with how you can now hide pages inside the documentation as well.

Bugfixes in documentation

  • Fixed previews for linear gradients.
  • Added missing alphabetical sorting for components in Component Overview Table block.
  • Fixed non-displaying cells for Number and Text types.
  • Fixed missing full-width table formatting.
  • Icons in Callout blocks are now displayed also in Safari.
  • Left margin in Ordered list is from now on better vertically aligned with the other blocks.
  • Fixed mismatched font weights for table and table cells.

Oh, you scrolled to the very bottom today! Do not tell anyone (or do, if you want to help us spread the word), but we have something really big coming your way next week, as you might have guessed already! 👀 🤫 🎁 Onto the final stretch of work we go!