From bdc890003def805b66386c437f87e65e8e4c085e Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 11 Sep 2025 16:53:38 +0200 Subject: [PATCH 1/2] chore(docs): bootstrap and ng-bootstrap removal in migration guide --- .changeset/thick-melons-think.md | 9 + .../migrationv9-10.component.ts | 295 +++--------------- 2 files changed, 59 insertions(+), 245 deletions(-) create mode 100644 .changeset/thick-melons-think.md diff --git a/.changeset/thick-melons-think.md b/.changeset/thick-melons-think.md new file mode 100644 index 0000000000..02327b710b --- /dev/null +++ b/.changeset/thick-melons-think.md @@ -0,0 +1,9 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Updated the migration guide: + +- Added information regarding the removal of bootstrap and ng-bootstrap in one place +- Cleaned up scattered informations regarding bootstrap removal in the rest of the page +- Removed all informations of removed elements that were never previously documented diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts index 2947cc7200..10ad42589a 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts +++ b/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts @@ -48,6 +48,45 @@ export class MigrationV99Component extends LitElement {

  • Component Migration 🤓

    + +

    Notice: Bootstrap & Ng-Bootstrap removed

    +

    + As part of the latest migration, Bootstrap and Ng-Bootstrap have been fully removed from the design system. This means that any variables, classes, mixins, or utilities originating from Bootstrap and all components from Ng-Bootstrap are no longer available. +

    +

    + However, many commonly used features from Bootstrap — such as the grid system (columns) and most utility classes — have been internalized into the design system. You can continue using them through the design system without needing Bootstrap.
    +

    +

    + If you encounter any broken styles or issues after upgrading, you have two options: +

    +
      +
    • Install Bootstrap as a dependency in your own project
      • +
    • Internalize the specific mixins or utilities you still rely on +
      • +
    +

    Please review your components and styles to ensure compatibility. +


    + +     + +
    +

    Ng-Bootstrap

    +

    Removed the following Ng-Bootstrap components:

    +
      +
    • carousel
      • +
    • custom select
      • +
    • datatable
      • +
    • datepicker
      • +
    • dropdown
      • +
    • modal
      • +
    • notification overlay
      • +
    • pagination
      • +
    • progressbar
      • +
    • timepicker
      • +
    • typeahead
      • +
    +
    +

    Styles

    @@ -86,59 +125,7 @@ export class MigrationV99Component extends LitElement {

  • The .form-text class has been renamed to .form-hint - breaking🪄 migration rule -

    -
    • -
  • -

    - Some form-check scss variables have been removed - breaking -

    -
      -
    • $form-check-inline-margin-left
      • -
    • $form-check-input-width
      • -
    • $form-check-min-height
      • -
    • $form-check-padding-start
      • -
    • $form-check-input-color
      • -
    • $form-check-input-bg
      • -
    • $form-check-input-border
      • -
    • $form-check-input-border-radius
      • -
    • $form-check-radio-border-radius
      • -
    • $form-check-input-focus-border
      • -
    • $form-check-input-focus-width
      • -
    • $form-check-input-focus-box-shadow
      • -
    • $form-check-input-active-filter
      • -
    • $form-check-input-hover-color
      • -
    • $form-check-input-checked-color
      • -
    • $form-check-input-checked-bg-color
      • -
    • $form-check-input-checked-border-color
      • -
    • $form-check-input-checked-bg-icon
      • -
    • $form-check-input-checked-bg-image
      • -
    • $form-check-radio-checked-bg-icon
      • -
    • $form-check-radio-checked-bg-image
      • -
    • $form-check-input-indeterminate-color
      • -
    • $form-check-input-indeterminate-bg-color
      • -
    • $form-check-input-indeterminate-border-color
      • -
    • $form-check-input-indeterminate-bg-icon
      • -
    • $form-check-input-indeterminate-bg-image
      • -
    • $form-check-inline-margin-end
      • -
    • $form-check-label-cursor
      • -
    • $form-check-label-color
      • -
    • $form-check-label-padding-x
      • -
    • $form-check-label-padding-top
      • -
    • $form-check-label-padding-start
      • -
    • $form-check-label-padding-end
      • -
    • $form-check-feedback-margin-top
      • -
    -
    • -
  • -

    - Removed the @mixin placeholder() - breaking -

    -

    - The CSS selector ::placeholder can be used instead as it is now - widely available. + breaking 🪄 migration rule

    • @@ -319,24 +306,6 @@ export class MigrationV99Component extends LitElement { breaking

    • -
  • -

    Removed utility mixins breaking

    - -

  • Renamed some utility classes @@ -374,30 +343,6 @@ export class MigrationV99Component extends LitElement {

    • -
    Helpers
    - -
    Typography
    -
  • -

    - All classes and CSS variables related to the bootstrap - navbar component have been removed - breaking -

    -

  • Deprecated loader classes and related scss variables have been removed @@ -830,15 +635,15 @@ export class MigrationV99Component extends LitElement {

  • - Removed the accordion-item shadow part from the + Removed the accordion-item shadow part from the post-accordion-item component and introduced two new shadow parts: button and body. breaking

    If you were styling the component using the ::part(accordion-item) selector, - this will no longer work. Update your styles to use - ::part(button) for the header trigger and + this will no longer work. Update your styles to use + ::part(button) for the header trigger and ::part(body) for the content area instead.

    • From 49c1596ba0c1541b6a91148a6091729bdc9ea2ff Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 16 Sep 2025 10:50:14 +0200 Subject: [PATCH 2/2] update internalize bootstrap to open gh issue --- .../stories/misc/migration-guide/migrationv9-10.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts index 2030843215..edba1d2ade 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts +++ b/packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts @@ -60,9 +60,9 @@ export class MigrationV99Component extends LitElement { If you encounter any broken styles or issues after upgrading, you have two options:

    Please review your components and styles to ensure compatibility.