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

design-library v2.0.0-beta.1

Breaking Changes

Centered button layout by default

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. Remove any .bcc-button-center class usage
2. Check if you had any buttons without .bcc-button-center and add .bcc-button-justify-content.

What's Changed

• 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

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

design-library v2.0.0-beta.0

This is the first beta release for the eventual 2.0 release of the library. This release will likely not contain major new features, but instead be used to address breaking changes. Follow along and comment in issue #253 if you have suggestions on changes that should be made.

Breaking Changes

New typography styles

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, 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 the 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

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

Renamed classes

Almost all classes have seen a renaming:

• 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

What's Changed

• Updated typography classes in components. Updated docs by @u12206050 in #255
• CI: support beta releases by @laurensgroeneveld in #257

Full Changelog: v1.8.0...v2.0.0-beta.0

design-library v1.8.0

New Features

🆕 Progress component

A versatile component to show all kinds of progress, both for loading bars and the progress for an action for example. A great contribution by @steffanhalv!

View on Storybook

What's Changed

• Implemented BccProgress component by @steffanhalv in #242
• Update Storybook to 7.4.2 by @laurensgroeneveld in #247
• Include build step in test pipeline by @laurensgroeneveld in #254

New Contributors

• @steffanhalv made their first contribution in #242

Full Changelog: v1.7.0...v1.8.0

design-library v1.7.0

New Features

🆕 Spinner component

A loading spinner component has been added to the library. Thanks @Lucas-Powell for your contribution!

View on Storybook

What's Changed

• Add neutral option to BccAlert by @StevenMalaihollo in #215
• Created BccSpinner by @Lucas-Powell in #217
• Add linting info to readme by @laurensgroeneveld in #246

New Contributors

• @Lucas-Powell made their first contribution in #217

Full Changelog: v1.6.0...v1.7.0