New major release: v13!

Updates

Page layout

Gunnel no longer supports the ‘fixed width’ 88rem wide page layout. All pages are now 100% width. However, we also now support 12-column layouts so you can fill the full width.

Page headers are always 100% wide, page action buttons are always on the far right.

Page bodies are 100% wide but can have multiple columns depending on the content and page width. It’s up to you how you lay out your page. See the examples for an example.

We have added a new utility class fun-region that adds a consistent and responsive page padding. This should be used on page headers and bodies.

Page colours

We have switched the page colours to focus more on the page content. Instead of a white background, with page content in grey boxes, we now have a grey background with the content in white boxes. See the examples for an example.

New Icons

We have updated the icons to a new sleeker and cleaner design to align with the icon set used by the website and other design assets.

Page structure

We now recommend the following HTML structure for your pages. The page header should be in a <header> element, the page content should be in the <main> element. Both the header and main should apply the fun-region class for consistent responsive page padding. If you wish to use a 12-column layout the classes should be applied to the <main> element.

See the examples for more details on how this can be implemented.

Deprecations

React Widgets

All of @funnel-io/react-widgets is deprecated and will be removed in the next major version. All components that are in use now have web component and React alternatives @funnel-io/components and @funnel-io/react-components. Components that do not have an alternative should no longer be used.

There are some special components that are not drop-in replacements where some migration will be required.

Button to FunButton

See the fun-button documentation for the specifications and specs of the new button. The main changes are:

• We’ve reduced the number of button types to 5.
• We’ve adjusted the size scale to better reflect the sizes we actually use.

Page, Page.Body, Page.Header

Page Header properties sticky and readable no longer have an effect. To keep the old behaviour use deprecatedSticky and deprecatedReadable but be aware that these properties will also stop working soon and you should migrate your pages away from them.

Instead of sticky you should use the new page header controller component that allows you to switch page header on scroll instead of simply fixing the existing header to the top. We think this is better as it gives you much better control over the behaviour and contents of the header at different points and should hopefully lead to a more consistent experience.

In v13 page headers and bodies are both ‘regions’. See the page layout page for more on regions.

The Page.Body and Page.Header components will continue to work in v13 but will be removed in v14.

Migrating to V13

Upgrade gunnel packages to v13

Update styles imports

Update the styles update to:

Change the page background

Add the fun-page class to your body element. This will ensure your pages have the correct colour, in both light and dark mode.

Add the grid to your page body content

Your page body content should use this:

If your page has help section we recommend using:

Turn page sections into ‘fun-panes’

Replace any page-section classes with fun-pane. All page sections should have the fun-pane class.

Read more about how to do all of the above on the Page layout page.