baloise/design-system

The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications.

design-system's Issues

Add tab-panel component or ability to have a appropriate select for tab-based views

How do you add the "bal-app" class to the body?

I do not understand how "bal-app" class is added on body. I'm using vuejs and vite (and no typescript). I read the documentation and the vue-starter-kit code, but this part stay a mystery.

Add file upload component

Add notification component

BalDatepicker fail because allowedDates is not a function

Using the component like that

<BalDatepicker name="datepicker" v-model="datepicker" placeholder="TT.MM.JJJJ" trigger-icon />

will generate an error with TypeError: this.allowedDates is not a function and the component will not be rendered.

Add tooltip component

Add modal window component

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Cannot push to the Git repository.

semantic-release cannot push the version tag to the branch master on the remote Git repository with URL https://[secure]@github.com/hirsch88/bal-ui-library.git.

This can be caused by:

• a misconfiguration of the repositoryUrl option
• the repository being unavailable
• or missing push permission for the user configured via the Git credentials on your CI environment

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Add hint component

This component is similar to a tooltip for a user, but we should implemented like a popover with mobile fullscreen feature.

Replace tslint with eslint

Add hover effect for datepicker

Hover effects are missing in datepicker component

Navbar burger doesn't toggle menu (mobile)

Navbar's burger button doesn't toggle the menu (via class "is-active").

todo:

• toggle menu via burger
• add property to show/hide menu from outside?
• add menu show/hide event?

Create a icon-font with the baloise icons

Navbar hide menu icon if the content is empty

Only in mobile version

Add bal-select component

Migrate from travis-ci.org to travis-ci.com until 2020-12-31

travis-ci.org will be closed down December 31st, 2020

Announcement: https://mailchi.mp/3d439eeb1098/travis-ciorg-is-moving-to-travis-cicom
Migration guide: https://docs.travis-ci.com/user/migrate/open-source-repository-migration

The font-size and line-height helpers do not match to Soba SOB UI design

Following the design typography of one of Soba projects, the development team has problems with font-size and line-height when using this ui-library.

We could see there were defined classes for title, subtitle and is-size-n (n from 1 to 6). But verifying each size of them the team figured out that the font-size and line-height did not match to the defined typography of Soba (got from design team).

The team cannot create custom stylings to have exactly matched sizes to the defined typography of Soba because doing that we could not control the size of ui-library components. There will be inconsistency between sizes of ui-library components and customized styling of the team.

The team need an unique change to resolve the problem.

And the team is thinking about adjusting sizes on this ui-library.
It would be great of the ui-library can provide classes which matched to the defined typography of Soba. Or the ui-library can provide helpers that can make life of the development be better.

Please have a look at the attached image for better understanding.

You are the best,
Khanh Nguyen

Move to github.com/baloise Orga

I'd like to propose moving this to our official GH Orga

left-icon in bal-field does not add padding (in combination with datepicker)

It worked prior to 1.35.0

BalSelect fail if data is set to undefined

If you have a components such as

<BalSelect expanded id="bal-select" v-model="option">
         <BalSelectOption value="Option1" label="Option1">Option1</BalSelectOption>
         <BalSelectOption value="Option2" label="Option2">Option2</BalSelectOption>
 </BalSelect>
  <BalRadioGroup id="bal-radio" v-model="radio">
            <BalRadio name="radio1" value="radio1">radio1</BalRadio>
            <BalRadio name="radio1" value="prepaid">radio1</BalRadio>
 </BalRadioGroup>

Having option initial value to undefined will generate a TypeError: this.value.filter is not a function error and crash vuejs if you change the BalRadioGroup before using the BalSelect.

Add timepicker component

Add stepper component

Error when using with vite

I tried to import the the baloise DS using vue3 and vite without typescript following https://baloise-ui-library.vercel.app/components/essentials/vue.html#install

I did use the Vue.use(BaloiseDesignSystem, { useVite: false }) to load the plugin as indicated in the doc.

me@computer ~/project/ (git:main) $ npm run dev

> dev
> vite

Pre-bundling dependencies:
  vue
  @baloise/design-system-components-vue
(this will be run only when your dependencies or config have changed)

  vite v2.3.8 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 277ms.

[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

12:32:50 AM [vite] warning: 
/Users/me/project/node_modules/.vite/@baloise_design-system-components-vue.js
7221|      return module[exportName];
7222|    }
7223|    return import(
   |                  ^
7224|      /* webpackInclude: /\.entry\.js$/ */
7225|      /* webpackExclude: /\.system\.entry\.js$/ */
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: Users/me/project/node_modules/.vite/@baloise_design-system-components-vue.js?v=8639cb5e

test slack integration

Add footer component

Add track-line component

The famous bal-track-line component that everyone has on the end of his/her app

Add table styles

Dropdown: strange effect with the scrollbar on mouseover

Add closable Toast / Toast with a close button

Issue
At the moment, one can only open a toast that has no close button by using a Stencil component

Some situations my require to have a toast that stays visible until the user clicks on the close-icon, similar to this one:

Suggestion
Add a method like closeOnClick() to balToastController.create(...) chain, so that it generates a permanent toast with an close ("x") button instead of a toast that disappears after a time

navbar: reset menu 'is-active' if width changes

Issue:

1. Click burger to enable menu (javascript sets menu's 'is-active' class)
2. Increase browser size
3. CSS changes from burger+menu to normal navbar BUT items are still styled with menu's 'is-active' class

An in-range update of @stencil/core is breaking the build 🚨

The devDependency @stencil/core was updated from 1.7.3 to 1.7.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@stencil/core is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build is in progress (Details).
• ❌ now: Deployment has failed (Details).

---

Commits

The new version differs by 2 commits.

• a6c0fd3 🎠 1.7.4
• 7e166e1 fix(types): use var for components.d.ts

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Test Suite

How to do data tables properly?

Fix ReferenceError in Toast example page

How to reproduce:

1. go to https://bal-ui-library.hirsch.now.sh/#/components/bal-toast/readme
2. Click on "Show default Toast" or "Show danger Toast".

Toast will not show up and the following browser error exists within the console logs:

Uncaught ReferenceError: balToastController is not defined
at HTMLElement.document.getElementById.onclick (eval at (docsify.min.js:1), :4:9)
document.getElementById.onclick @ VM178:4

Add typeahead component

Add pagination component

Create Modal Card component

bal-radio swap label content that is between tag (first become last)

Take a bal-radio with HTML content:

<bal-radio name="link-example" value="2">This is a <b>bug?</b></bal-radio>

Instead of rendering the radio with the label This is a <b>bug?</b> the label's elements will be swapped like <b>bug?</b> This is a.

I'm using vite, but I don't see how this could be a problem with the builder.

Create a second .scss file for internal applications

Support CSP policies for style-src 'self'

Feature Request

We always defines <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *;"> in most of our prod environment, and some components are currently incompatible with a strict Content Security Policy (CSP) of style-src 'self';, like Icon or Hints component, these component generate in-line style tag which violate CSP, they do not work as we expected.

It would be nice if all components are compatible with CSP, just like Navbar, List or Data component which use global css style.

Question

Is there any trick to pass/avoid CSP without using unsafe-inline?

An in-range update of autoprefixer is breaking the build 🚨

The devDependency autoprefixer was updated from 9.6.5 to 9.7.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

autoprefixer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build is in progress (Details).
• ❌ now: Deployment has failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Add download input component

Fix incompatibility with Angular 8

Stencil version 1.8.0 and greater use Typescript version 3.7.
Stencil with Typescript version 3.7 is known to generate definition files that are incompatible with Angular 8. It will be supported again only in Angular 9, which in turn is beading edge.

I suggest to downgrade the used stencil version to 1.7.5 until either Angular 9 or a patched Stencil version gets released.

Relevant issue: ionic-team/stencil#2062

New Sidebar component

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No Slack web-hook defined.

A Slack Webhook must be created and set in the SLACK_WEBHOOK environment variable on your CI environment.

Please make sure to create a Slack Webhook and to set it in the SLACK_WEBHOOK environment variable on your CI environment. Alternatively, provide slackWebhook as a configuration option.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

What is the difference between "@baloise/design-system-components-vue" and "@baloise/ui-library"

The doc https://baloise-ui-library.vercel.app/components/essentials/vue.html explain that all components can be acceded from import like

import { BalCheckbox, BalButton } from '@baloise/design-system-components-vue'.

But in the starter-kit https://github.com/baloise/vue-starter-kit/blob/vite/src/app/components/HelloWorld.vue#L9 a componant is imported using

import { BalButton } from '@baloise/ui-library-vue'

I don't think the package '@baloise/ui-library-vue' is mentioned in the documentation. Perhaps I mistaking but it doens't seem to be a dependency neither.

The starter kit https://github.com/baloise/vue-starter-kit/blob/master/package.json depend on:

  "dependencies": {
    "@baloise/ui-library": "^4.15.1",
    "@baloise/ui-library-vue": "^4.15.1",

Instead of "@baloise/design-system-components-vue": "^1.3.0",

Could someone bring some clarification on this? Thanks a lot.

question: `bal-datepicker` with range `minDate` and `maxDate`

Hello, I'm from @kasko and am implementing first component (bal-datepicker) in our platform.

Currently i'm not sure how bal-datepicker should look and feel with minDate and maxDate properties.

In documentation it seems to have everything disabled in example, so not sure if it's a bug or something else.

I tried to implement these properties via element properties and via attributes, neither seem to do anything.
Heres an example: https://codesandbox.io/s/litelement-baloiseui-reproduction-oc7py

Am I doing something wrong or is this a bug?

Add header component

Make bal-icon an inline element

At the moment, bal-icon is a block-element and spans the entire possible width of the parent container.

This is IMHO not a desired standard behaviour, as we usually us it as marker alongside to a text or control.

What do you think?

An in-range update of @stencil/sass is breaking the build 🚨

The devDependency @stencil/sass was updated from 1.0.1 to 1.1.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@stencil/sass is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build is in progress (Details).
• ❌ now: Deployment has failed (Details).

---

Release Notes for v1.1.0

• chore(): update deps e45962d

v1.0.1...v1.1.0

Commits

The new version differs by 2 commits.

• 233ea40 1.1.0
• e45962d chore(): update deps

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴