design-library v1.5.2

What's Changed

• Updated alert box design. Now text content is inline with icon
• Slight update on tabs

Full Changelog: v1.5.1...v1.5.2

design-library v1.5.1

What's Changed

• Clarify Pin/Badge usage in documentation by @laurensgroeneveld in #182
• Update tabs design by @u12206050 in #183

Full Changelog: v1.5.0...v1.5.1

design-library v1.5.0

New Features

🆕 Tabs component

A versatile tabs component is now available in the library, with a lot of different options on how to render both the tabs themselves and their content. A great contribution by @u12206050!

View on Storybook

Text support for pin

The BccPin component now supports any arbitrary text.

View on Storybook

Color tokens documentation

In case you missed it, a page is now included in the Storybook documentation with all the color tokens that are available. Together with the typography tokens that were already documented it's now that much easier to use the right tokens from the design system in your project. All the color tokens are available in the library as both a CSS variable and a Tailwind utility.

View on Storybook

What's Changed

• Add color tokens documentation by @laurensgroeneveld in #171
• Add font info to docs by @laurensgroeneveld in #174
• Add BccTabs component by @u12206050 in #177

Full Changelog: v1.4.3...v1.5.0

design-library v1.4.3

Maintenance release to update several links to the new monorepo setup we have created for all BCC design system packages.

What's Changed

• Convert to monorepo by @laurensgroeneveld in #164
• Update links to new repo name by @laurensgroeneveld in #170

Full Changelog: v1.4.2...v1.4.3

v1.4.2

What's Changed

• Disable text selection on button by @u12206050 in #167
• Change to static lookups instead of multiple ifs by @u12206050 in #168

Full Changelog: v1.4.1...v1.4.2

icons v1.0.1

Maintenance release to update several links to the new monorepo setup we have created for all BCC design system packages.

v1.4.1

New Features

Render nested objects in the table

It's now possible to render content from a nested object in the table, by passing a column key with a dot notation. For example, if your data looks like this:

{
  // ...
  progress: {
      amount: 42
  }
}

You can render the contents of this column by setting progress.amount as the column key:

const columns = [
    // ...
    {
      text: "Progress",
      key: "progress.amount",
    },
]

Bug Fixes

A reactivity issue was fixed in the table, leading to it not always correctly rendering an updated items list.

What's Changed

• Make it possible for the table to render a subitem by @laurensgroeneveld in #165
• Fix table reactivity issue by @laurensgroeneveld in #166

Full Changelog: v1.4.0...v1.4.1

v1.4.0

New Features

🆕 Table component

The library now features a BccTable component which can be used to render data. The component provides automatic sorting of columns and easy customization of table cells.

View on Storybook

Icon only button is now square

In accordance with the rest of the button, the icon only button is now square by default, instead of always rounded like previously. Add the rounded prop to get the previous look:

View on Storybook

Bug Fixes

• Fixed v-model not working on the radio component
• All form elements are now wrapped in an inline-flex container instead of flex so the components only take as much space as they need by default

What's Changed

• Create table component by @laurensgroeneveld in #154
• Make icon only button square by default by @laurensgroeneveld in #160
• Fix v-model not working for radio input by @laurensgroeneveld in #161
• Render form elements with inline-flex instead of flex by @laurensgroeneveld in #162

Full Changelog: v1.3.2...v1.4.0

v1.3.2

New Features

🆕 FormMessage component

This component was extracted from the input and select components to be standalone so it can be used for other form elements as well, for example to show inline validation messages.

View on Storybook

CSS changes

The CSS classes for this component were updated from .bcc-input-message to .bcc-form-message. For now the old class names are supported but it's recommend to change this if you were using these classes.

What's Changed

• Extract FormMessage component by @laurensgroeneveld in #151

Full Changelog: v1.3.1...v1.3.2

v1.3.1

New Features

🆕 Form label component

Previously the label was embedded in the input and select components. Now you can use the BccFormLabel component as a standalone component, enabling its usage with for example radio groups:

View on Storybook

Textarea support for input

The input component now supports an is prop to change it to an textarea:

View on Storybook

Changes to CSS classes

Two important CSS changes:

• With the new form label component, the two label classes were updated from .bcc-input-label and .bcc-input-optional-label to .bcc-form-label and .bcc-form-label-optional. The old classes are still available but we recommend updating your app if you depend on these classes as they might get removed in 2.0
• A base bcc-input-message class was added to the input message on the input and select elements. This will probably become it's own component in the future as well.

What's Changed

• Create form label component by @laurensgroeneveld in #149
• Add textarea by @laurensgroeneveld in #150

Full Changelog: v1.3.0...v1.3.1