design-library v2.2.4

What's Changed

• Export types from table component by @laurensgroeneveld in #290

Full Changelog: v2.2.3...v2.2.4

design-library v2.2.3

What's Changed

• Fixes rounding on Graphic parent by @u12206050 in #289

Full Changelog: v2.2.2...v2.2.3

design-library v2.2.2

What's Changed

• Some design updates to Graphic and Tabs by @u12206050 in #288

Full Changelog: v2.2.1...v2.2.2

design-library v2.2.1

What's Changed

• Small fixes for Table component by @laurensgroeneveld in #287

Full Changelog: v2.2.0...v2.2.1

design-library v2.2.0

In our quest to be the definitive collection of UI components for everything BCC, this release brings several widget-related components from the Event app to the design library 🎉

New Features

🆕 Graphic component

A large banner with customisable logo and background, for all your leading image needs.

View on Storybook

🆕 Header component

A more opinionated header component with options for an over- or underline and slot. If you need more options, consider using the typography classes from the design system directly.

View on Storybook

🆕 Info component

A way to render information with supporting text.

View on Storybook

🆕 ItemTile component

Not a full card component, but a way to display information in a uniform way.

View on Storybook

🆕 LinkItem component

Use several of these in sequence to display a nice list of styled links.

View on Storybook

Other Changes

As the library keeps growing, so does the list of components in Storybook. Besides the already existing Form category, components are now subdivided in more categories to help you more easily find the component you need.

What's Changed

• Bump vite from 4.4.12 to 4.5.2 in /design-library by @dependabot in #284
• Add writeShadows script to generate shadows from tokens by @u12206050 in #285
• Add Info, Header, ItemTile, SelectionElement and Graphic components by @StevenMalaihollo in #282
• Categorize stories in Common, Widgets and Other by @laurensgroeneveld in #286

Full Changelog: v2.1.0...v2.2.0

design-library v2.1.0

New Features

🆕 BccReact component

No, we're not switching our frontend framework just yet 😉 You might have seen this component in action on the BCC Event app already. A really nice way to have people leave emoji reactions, and fully customisable!

View on Storybook

What's Changed

• Add info for where to find icons manually by @u12206050 in #273
• Bump vite from 4.4.3 to 4.4.12 in /design-library by @dependabot in #274
• Add BccReact component by @u12206050 in #281

Full Changelog: v2.0.0...v2.1.0

design-library v2.0.0

We are happy to present the second major release for the design library! The amount of new features in this release is limited, as we took the opportunity to address some backwards incompatible changes. Upgrading from v1.8 should for most applications take under 15 minutes, and we encourage everyone to upgrade as soon as possible as the 1.x series will no longer be maintained.

Breaking changes

New typography styles

Estimated upgrade time: 15-30min

The typography styles have been updated, with several styles added and removed and most others renamed. If you do not use these directly in your application, as we expect most current users do, no action is needed.

Recommended migration: do a search and replace for each of these classes in your code, then check if your application still looks acceptable and adjust were needed.

Note: Since the underlying styles were updated, these classes do not always map one-on-one. Be sure to check Storybook to view all available classes.

Removed classes

Make sure these classes no longer exist in your code:

• text-display: This style has been removed, and can be replaced with text-title-xl.
• text-overline: No explicit alternative is provided

Renamed classes

Almost all classes have seen a renaming of their size variants:

• large to lg
• medium to no postfix (so text-title-medium to text-title)
• base to sm or no postfix depending on the style
• small to sm

To find usage, search for each of these classes, and then adjust where needed:

• text-title
• text-heading
• text-body
• text-label

Centered button layout by default

Estimated upgrade time: 5min

The button component layout is now centered by default both in the Vue component and in CSS. Previously the Vue component would always add a .bcc-button-center class. This class is now removed in favor of .bcc-button-justify-content class.

To migrate do a search-and-replace for these classes/props:

When using the Vue library

1. Replace any :center="false" prop usage with justify-content for BccButtons.

When using the CSS library

1. Check if you had any buttons without .bcc-button-center and add .bcc-button-justify-content.
2. Remove any .bcc-button-center class usage

Other Fixes

Mobile fixes

The default font size for inputs was updated to 16px on mobile to prevent the OS from zooming in. The modal was adjusted so it no longer hides behind the browser navigation.

Typography included in CSS

The typography styles were not included in the compiled CSS library, this is now solved.

All Changes

• Updated typography classes in components. Updated docs by @u12206050 in #255
• CI: support beta releases by @laurensgroeneveld in #257
• Bump postcss from 8.4.29 to 8.4.31 in /design-library by @dependabot in #259
• Make button centered by default in CSS by @laurensgroeneveld in #260
• Bump @babel/traverse from 7.22.11 to 7.23.2 in /design-library by @dependabot in #263
• feat: improve Shadow DOM compatibility by @Bernton in #264
• Fix BccProgress component not exported from TS by @laurensgroeneveld in #267
• Update input default text size to be 16px on mobile by @u12206050 in #268
• fix: modal for mobile by @Bernton in #265
• Include typography css in compiled style.css by @u12206050 in #272
• Updated icons-vue dependency in design library to 1.4 by @u12206050 in #271

New Contributors

• @Bernton made their first contribution in #264

Missing Something?

If you're missing a component or feature, we welcome community contributions! To get started, read our new contributing guide or leave a message on Discord.

Full Changelog: v1.8.0...v2.0.0

design-library v2.0.0-beta.4

What's Changed

• Update input default text size to be 16px on mobile by @u12206050 in #268

Full Changelog: v2.0.0-beta.3...v2.0.0-beta.4

design-library v2.0.0-beta.3

What's Changed

• Fix BccProgress component not exported from TS by @laurensgroeneveld in #267

Full Changelog: v2.0.0-beta.2...v2.0.0-beta.3

design-library v2.0.0-beta.2

What's Changed

• Bump @babel/traverse from 7.22.11 to 7.23.2 in /design-library by @dependabot in #263
• feat: improve Shadow DOM compatibility by @Bernton in #264

New Contributors

• @Bernton made their first contribution in #264

Full Changelog: v2.0.0-beta.1...v2.0.0-beta.2