Version Packages #817

github-actions · 2023-05-03T13:02:50Z

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@baloise/design-system-components@13.0.0

Major Changes

#806 95f127928 Thanks @hirsch88! - improved scroll handler blocks scrolling with only CSS.
With that we are able to remember the last scroll position of the user.

before
```
const scrollHandler = BodyScrollBlocker()
this.bodyScrollBlocker.block()
this.bodyScrollBlocker.allow()
```
after

Rename the handler to ScrollHandler and call the connect function to
connect the handler to the target element (Default is document). block and allow have been
renamed to disable and enable. The new function disconnect removes all
the defined event listeners and resets the handler.
```
const scrollHandler = ScrollHandler()

// can also pass in a custom element instead of using document
scrollHandler.connect()
scrollHandler.disable()
scrollHandler.enable()
scrollHandler.disconnect()
```

#806 95f127928 Thanks @hirsch88! - The namespaces Props and Events are renamed to BalProps and BalEvents.
As long as the packages @baloise/design-system-components is imported into your project
you have direct access to the new namespaces.

With Props

before

import { Props } from '@baloise/design-system-components'

const myColor: Props.BalButtonColor = 'primary'

after

const myColor: BalProps.BalButtonColor = 'primary'

With Events

before

import type { Events } from "@baloise/design-system-components"

const onChange = (event: Events.BalAccordionChange) => {
  const myAccordion = event.target // type => EventTarget
  const myDetail = event.detail // type => boolean
  ...
}

after

const onChange = (event: BalEvents.BalAccordionChange) => {
  const myAccordion = event.target // type => HTMLBalAccordion
  const myDetail = event.detail // type => boolean
  ...
}

All component types are now located in the component folders *.interfaces.ts file.

#806 95f127928 Thanks @hirsch88! - add new steps component with options property and overflow solution

before

<bal-tabs interface="o-steps" value="tab-a">
  <bal-tab-item done value="tab-a" label="Tab A">Content of Tab A</bal-tab-item>
</bal-tabs>

after

The interface of the components are the same as before.
Only the tag names of the component changed and to pass the interface property is not needed anymore.

<bal-steps value="tab-a">
  <bal-step-item done value="tab-a" label="Tab A">Content of Tab A</bal-step-item>
</bal-steps>

#806 95f127928 Thanks @hirsch88! - update dependency stencil to v3.
#806 95f127928 Thanks @hirsch88! - Remove inverted property from bal-stage, bal-datepicker, bal-input, bal-textarea.

Inverted property is removed because is not supported in our new rebranded style.

Components that are affected are:

Component Property

bal-stage inverted

bal-datepicker inverted

bal-input inverted

bal-textarea inverted
#806 95f127928 Thanks @hirsch88! - accordion & popover renamed property value to active, since they are not considered as a form control component.

before
```
<bal-accordion value="true">My hidden Content</bal-accordion>
```
after
```
<bal-accordion active="true">My hidden Content</bal-accordion>
```

#806 95f127928 Thanks @hirsch88! - remove deprecated global component styles.
Component styles will be loaded lazy to optimize the speed of the first render, there for only import the needed CSS files.

Global import

The global import of the main styles and his utility classes move to the CSS framework.

before

@import '@baloise/design-system-components/src/styles/global';

after

With the solution we are able to add only what we need.

// SASS mixins and variables
@import '@baloise/design-system-css/sass/mixins';

// Resets CSS for all browser
@import '@baloise/design-system-css/css/normalize';
@import '@baloise/design-system-css/css/structure';

// Custom font faces
@import '@baloise/design-system-css/sass/font';

// Core CSS, always required
@import '@baloise/design-system-css/css/core';

// Deprecated styles will be removed with the next breaking version (optional)
@import '@baloise/design-system-css/sass/legacy';

// CSS utilities classes (optional)
@import '@baloise/design-system-css/css/border';
@import '@baloise/design-system-css/css/color';
@import '@baloise/design-system-css/css/display';
@import '@baloise/design-system-css/css/flex';
@import '@baloise/design-system-css/css/grid';
@import '@baloise/design-system-css/css/opacity';
@import '@baloise/design-system-css/css/radius';
@import '@baloise/design-system-css/css/shadow';
@import '@baloise/design-system-css/css/spacing';
@import '@baloise/design-system-css/css/typography';

Component utilities import

The location of the variable & mixins has changed to @baloise/design-system-css/sass/mixins.

before

@import '@baloise/design-system-components/src/styles/global.utilities';

after

@import '@baloise/design-system-css/sass/mixins';

#806 95f127928 Thanks @hirsch88! - .title, bal-heading, bal-text and bal-label inherit default color

#806 95f127928 Thanks @hirsch88! - remove deprecated parts

Design Token Removal

Component	Value	Why
radius	`small`	Is not supported in the new Style Guide
radius	`x-large`	Is not supported in the new Style Guide
container	`is-blog`	Use default container instead

Component Property Renaming

Component	Before	After
bal-card-actions	`right`	`position="right"`
bal-navbar-brand	`link-target`	`target`
bal-stage	`has-shape`	`shape`
bal-radio	`is-empty`	`label-hidden`

Component Property Removal

Component	Property	Why
bal-select	`no-border`	Left over from the old style guide. Was event not active anymore
bal-select	`has-movement`	Left over from the old style guide. Was event not active anymore

Minor Changes

#806 95f127928 Thanks @hirsch88! - add border property to bal-carousel to show a light border at the bottom.
#806 95f127928 Thanks @hirsch88! - add more alignment options and add padding properties to the bal-stack
#806 95f127928 Thanks @hirsch88! - add no-wrap option to typography components to cut long text with ellipse
#806 95f127928 Thanks @hirsch88! - add new component divider

Patch Changes

Updated dependencies [95f127928, 95f127928, 95f127928]:
- @baloise/design-system-css@13.0.0
- @baloise/design-system-tokens@13.0.0
- @baloise/design-system-fonts@13.0.0
- @baloise/design-system-icons@13.0.0

@baloise/design-system-components-angular@13.0.0

Major Changes

#806 95f127928 Thanks @hirsch88! - Remove Angular component modules, because of Zone.js optimization.
Tree-shaking is given by Stencil and therefor to have Angular component modules
does not have any advantages anymore.

before

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import { BalCoreModule, BalHeadingModule, BalButtonModule } from '@baloise/design-system-components-angular'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BalCoreModule.forRoot(), BalHeadingModule, BalButtonModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

after

Import the new module BaloiseDesignSystemModule, which adds all the components.
After remove all old component modules like BalButtonModule from your project.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import { BaloiseDesignSystemModule } from '@baloise/design-system-components-angular'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BaloiseDesignSystemModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Patch Changes

Updated dependencies [95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928]:
- @baloise/design-system-components@13.0.0

@baloise/design-system-components-table@13.0.0

Major Changes

#806 95f127928 Thanks @hirsch88! - upgrade to AG-Grid v29. Breaking changes are the theming that changed from SASS variables to CSS variables.
Moreover, our styles are just an extension to the AG-Grid styles.
Therefor please import them before the Baloise styles also check out our documentation

before
```
@import '@baloise/design-system-components-table/scss';
```
after
```
@import 'ag-grid-community/styles/ag-grid';
@import 'ag-grid-community/styles/ag-theme-alpine';
@import '@baloise/design-system-components-table/css/design-system-table';
```

Patch Changes

Updated dependencies [95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928]:
- @baloise/design-system-components@13.0.0
- @baloise/design-system-css@13.0.0

@baloise/design-system-css@13.0.0

Major Changes

#806 95f127928 Thanks @hirsch88! - remove deprecated global component styles.
Component styles will be loaded lazy to optimize the speed of the first render, there for only import the needed CSS files.

Global import

The global import of the main styles and his utility classes move to the CSS framework.

before

@import '@baloise/design-system-components/src/styles/global';

after

With the solution we are able to add only what we need.

// SASS mixins and variables
@import '@baloise/design-system-css/sass/mixins';

// Resets CSS for all browser
@import '@baloise/design-system-css/css/normalize';
@import '@baloise/design-system-css/css/structure';

// Custom font faces
@import '@baloise/design-system-css/sass/font';

// Core CSS, always required
@import '@baloise/design-system-css/css/core';

// Deprecated styles will be removed with the next breaking version (optional)
@import '@baloise/design-system-css/sass/legacy';

// CSS utilities classes (optional)
@import '@baloise/design-system-css/css/border';
@import '@baloise/design-system-css/css/color';
@import '@baloise/design-system-css/css/display';
@import '@baloise/design-system-css/css/flex';
@import '@baloise/design-system-css/css/grid';
@import '@baloise/design-system-css/css/opacity';
@import '@baloise/design-system-css/css/radius';
@import '@baloise/design-system-css/css/shadow';
@import '@baloise/design-system-css/css/spacing';
@import '@baloise/design-system-css/css/typography';

Component utilities import

The location of the variable & mixins has changed to @baloise/design-system-css/sass/mixins.

before

@import '@baloise/design-system-components/src/styles/global.utilities';

after

@import '@baloise/design-system-css/sass/mixins';

#806 95f127928 Thanks @hirsch88! - .title, bal-heading, bal-text and bal-label inherit default color

Patch Changes

Updated dependencies [95f127928]:
- @baloise/design-system-tokens@13.0.0
- @baloise/design-system-fonts@13.0.0

@baloise/design-system-tokens@13.0.0

Major Changes

#806 95f127928 Thanks @hirsch88! - remove deprecated parts

Design Token Removal

Component	Value	Why
radius	`small`	Is not supported in the new Style Guide
radius	`x-large`	Is not supported in the new Style Guide
container	`is-blog`	Use default container instead

Component Property Renaming

Component	Before	After
bal-card-actions	`right`	`position="right"`
bal-navbar-brand	`link-target`	`target`
bal-stage	`has-shape`	`shape`
bal-radio	`is-empty`	`label-hidden`

Component Property Removal

Component	Property	Why
bal-select	`no-border`	Left over from the old style guide. Was event not active anymore
bal-select	`has-movement`	Left over from the old style guide. Was event not active anymore

@baloise/design-system-components-react@13.0.0

Patch Changes

Updated dependencies [95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928]:
- @baloise/design-system-components@13.0.0

@baloise/design-system-components-vue@13.0.0

Patch Changes

Updated dependencies [95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928]:
- @baloise/design-system-components@13.0.0

@baloise/design-system-testing@13.0.0

Patch Changes

Updated dependencies [95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928, 95f127928]:
- @baloise/design-system-components@13.0.0

@baloise/design-system-favicons@13.0.0

@baloise/design-system-fonts@13.0.0

@baloise/design-system-icons@13.0.0

@baloise/design-system-maps@13.0.0

@baloise/design-system-output-target-angular@13.0.0

@baloise/design-system-output-target-react@13.0.0

@baloise/design-system-output-target-vue@13.0.0

vercel · 2023-05-03T13:02:54Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
design-system-old	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 3, 2023 1:10pm

github-actions bot requested review from hirsch88, mladenplaninicic and clastzoo as code owners May 3, 2023 13:02

Version Packages

d18d9c7

github-actions bot force-pushed the changeset-release/main branch from 7a97406 to d18d9c7 Compare May 3, 2023 13:07

hirsch88 merged commit ac2e21a into main May 3, 2023

hirsch88 deleted the changeset-release/main branch May 3, 2023 13:08

vercel bot deployed to Preview May 3, 2023 13:14 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Version Packages #817

Version Packages #817

github-actions bot commented May 3, 2023 •

edited

Loading

vercel bot commented May 3, 2023 •

edited

Loading

Component	Property
`bal-stage`	inverted
`bal-datepicker`	inverted
`bal-input`	inverted
`bal-textarea`	inverted

Version Packages #817

Version Packages #817

Conversation

github-actions bot commented May 3, 2023 • edited Loading

Releases

@baloise/design-system-components@13.0.0

Major Changes

With Props

With Events

Global import

Component utilities import

Design Token Removal

Component Property Renaming

Component Property Removal

Minor Changes

Patch Changes

@baloise/design-system-components-angular@13.0.0

Major Changes

Patch Changes

@baloise/design-system-components-table@13.0.0

Major Changes

Patch Changes

@baloise/design-system-css@13.0.0

Major Changes

Global import

Component utilities import

Patch Changes

@baloise/design-system-tokens@13.0.0

Major Changes

Design Token Removal

Component Property Renaming

Component Property Removal

@baloise/design-system-components-react@13.0.0

Patch Changes

@baloise/design-system-components-vue@13.0.0

Patch Changes

@baloise/design-system-testing@13.0.0

Patch Changes

@baloise/design-system-favicons@13.0.0

@baloise/design-system-fonts@13.0.0

@baloise/design-system-icons@13.0.0

@baloise/design-system-maps@13.0.0

@baloise/design-system-output-target-angular@13.0.0

@baloise/design-system-output-target-react@13.0.0

@baloise/design-system-output-target-vue@13.0.0

vercel bot commented May 3, 2023 • edited Loading

github-actions bot commented May 3, 2023 •

edited

Loading

vercel bot commented May 3, 2023 •

edited

Loading