Skip to content

chore(docs): bootstrap and ng-bootstrap removal in migration guide #6208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 16, 2025
+56 −242
Merged

chore(docs): bootstrap and ng-bootstrap removal in migration guide #6208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bdc8900
chore(docs): bootstrap and ng-bootstrap removal in migration guide
leagrdv Sep 11, 2025
fc0e04f
Merge branch 'main' into 5584-add-section-to-migration-regarding-the-…
leagrdv Sep 12, 2025
767d056
Merge branch 'main' into 5584-add-section-to-migration-regarding-the-…
leagrdv Sep 16, 2025
49c1596
update internalize bootstrap to open gh issue
leagrdv Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .changeset/thick-melons-think.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
289 changes: 47 additions & 242 deletions packages/documentation/src/stories/misc/migration-guide/migrationv9-10.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,45 @@ export class MigrationV99Component extends LitElement {
<li>
<h3>Component Migration 🤓</h3>

<post-banner type="warning">
<h4 slot="heading">Notice: Bootstrap & Ng-Bootstrap removed</h4>
<p>
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.
</p>
<p>
However, <span class="fw-bold">many commonly used features from Bootstrap — such as the grid system (columns) and most utility classes — have been internalized into the design system</span>. You can continue using them through the design system without needing Bootstrap.<br/>
</p>
<p>
If you encounter any broken styles or issues after upgrading, you have two options:
</p>
<ul>
<li>Internalize the specific mixins or utilities you still rely on
</li>
<li>If issues persist, open a <a href="https://github.com/swisspost/design-system/issues">GitHub issue</a></li>
</ul>
<p>Please review your components and styles to ensure compatibility.
</p><br/>

</post-banner>

<section>
<h4>Ng-Bootstrap</h4>
<p>Removed the following Ng-Bootstrap components:</p>
<ul>
<li>carousel</li>
<li>custom select</li>
<li>datatable</li>
<li>datepicker</li>
<li>dropdown</li>
<li>modal</li>
<li>notification overlay</li>
<li>pagination</li>
<li>progressbar</li>
<li>timepicker</li>
<li>typeahead</li>
</ul>
</section>

<section>
<h4>Styles</h4>

Expand Down Expand Up @@ -86,59 +125,7 @@ export class MigrationV99Component extends LitElement {
<li class="mb-16">
<p>
The <code>.form-text</code> class has been renamed to <code>.form-hint</code>
<span class="tag tag-sm tag-danger">breaking</span><span class="tag tag-sm tag-info">🪄 migration rule</span>
</p>
</li>
<li class="mb-16">
<p>
Some <code>form-check</code> scss variables have been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li><code>$form-check-inline-margin-left</code></li>
<li><code>$form-check-input-width</code></li>
<li><code>$form-check-min-height</code></li>
<li><code>$form-check-padding-start</code></li>
<li><code>$form-check-input-color</code></li>
<li><code>$form-check-input-bg</code></li>
<li><code>$form-check-input-border</code></li>
<li><code>$form-check-input-border-radius</code></li>
<li><code>$form-check-radio-border-radius</code></li>
<li><code>$form-check-input-focus-border</code></li>
<li><code>$form-check-input-focus-width</code></li>
<li><code>$form-check-input-focus-box-shadow</code></li>
<li><code>$form-check-input-active-filter</code></li>
<li><code>$form-check-input-hover-color</code></li>
<li><code>$form-check-input-checked-color</code></li>
<li><code>$form-check-input-checked-bg-color</code></li>
<li><code>$form-check-input-checked-border-color</code></li>
<li><code>$form-check-input-checked-bg-icon</code></li>
<li><code>$form-check-input-checked-bg-image</code></li>
<li><code>$form-check-radio-checked-bg-icon</code></li>
<li><code>$form-check-radio-checked-bg-image</code></li>
<li><code>$form-check-input-indeterminate-color</code></li>
<li><code>$form-check-input-indeterminate-bg-color</code></li>
<li><code>$form-check-input-indeterminate-border-color</code></li>
<li><code>$form-check-input-indeterminate-bg-icon</code></li>
<li><code>$form-check-input-indeterminate-bg-image</code></li>
<li><code>$form-check-inline-margin-end</code></li>
<li><code>$form-check-label-cursor</code></li>
<li><code>$form-check-label-color</code></li>
<li><code>$form-check-label-padding-x</code></li>
<li><code>$form-check-label-padding-top</code></li>
<li><code>$form-check-label-padding-start</code></li>
<li><code>$form-check-label-padding-end</code></li>
<li><code>$form-check-feedback-margin-top</code></li>
</ul>
</li>
<li class="mb-16">
<p>
Removed the <code>@mixin placeholder()</code>
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<p class="info">
The CSS selector <code>::placeholder</code> can be used instead as it is now
widely available.
<span class="tag tag-sm tag-danger">breaking</span> <span class="tag tag-sm tag-info">🪄 migration rule</span>
</p>
</li>
</ul>
Expand Down Expand Up @@ -319,24 +306,6 @@ export class MigrationV99Component extends LitElement {
<span class="tag tag-sm tag-danger">breaking</span>
</p>
</li>
<li class="mb-16">
<p>Removed utility mixins <span class="tag tag-sm tag-danger">breaking</span></p>
<ul>
<li>
<code>@mixin responsive-size</code>
</li>
<li>
<code>@mixin generate-utility-class()</code>
</li>
<li>
<code>@mixin bezel-small()</code>, <code>@mixin bezel-small-regular()</code>,
<code>@mixin bezel-regular()</code>,
<code>@mixin bezel-bigger-regular()</code>,
<code>@mixin bezel-medium()</code>, <code>@mixin bezel-large()</code>,
<code>@mixin bezel-big()</code>
</li>
</ul>
</li>
<li class="mb-16">
<p>
Renamed some utility classes
Expand Down Expand Up @@ -374,30 +343,6 @@ export class MigrationV99Component extends LitElement {
</li>
</ul>

<h5>Helpers</h5>
<ul>
<li class="mb-16">
<p>
The following bootstrap helper classes have been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li>
Figures: <code>.figure</code>, <code>.figure-img</code> and
<code>.figure-caption</code>
</li>
<li>Vertical rule: <code>.vr</code></li>
<li>Colored background: <code>.text-bg-*</code></li>
<li>Colored links: <code>.link-*</code></li>
<li>Visually hidden: <code>.visually-hidden-focusable</code></li>
<li>Stretched link: <code>.stretched-link</code></li>
<li>Stacks: <code>.vstack</code> and <code>.hstack</code></li>
<li>Ratios: <code>.ratio</code> and <code>.ratio-*x*</code></li>
<li>Icon link: <code>.icon-link</code> and <code>.icon-link-hover</code></li>
</ul>
</li>
</ul>

<h5>Typography</h5>
<ul>
<li class="mb-16">
Expand Down Expand Up @@ -456,16 +401,7 @@ export class MigrationV99Component extends LitElement {
</li>
<li class="mb-16">
<p>
Removed font curve mixin
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li><code>@mixin font-curve</code></li>
</ul>
</li>
<li class="mb-16">
<p>
Removed deprecated line-height SCSS variables and CSS classes
Removed deprecated line-height variables
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
Expand Down Expand Up @@ -533,41 +469,9 @@ export class MigrationV99Component extends LitElement {
</li>
<li class="mb-16">
<p>
Removed the following display SCSS variables
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li><code>$display1-weight</code></li>
<li><code>$display2-weight</code></li>
<li><code>$display3-weight</code></li>
<li><code>$display4-weight</code></li>
<li><code>$display-line-height</code></li>
</ul>
</li>
<li class="mb-16">
<p>
The display sizes scss variables have been removed
The <code>.lh-base</code> class has been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li><code>$display{1/2/3/4/5/6}-size</code> variables no longer exist</li>
</ul>
<p class="info">
We recommend using the heading classes to replace their usage, either by using
the standard html tags (e.g. <code>h1</code>) or the css classes (e.g.
<code>.h1</code>).
</p>
</li>
<li class="mb-16">
<p>
The <code>@function line-height-calc($val)</code> has been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<p class="info">
The line height is now set to a default value for both paragraph elements and
headings. If a different value is needed, we recommend using the line height
text utility classes.
</p>
</li>
<li class="mb-16">
<p>
Expand All @@ -576,49 +480,10 @@ export class MigrationV99Component extends LitElement {
<span class="tag tag-sm tag-danger">breaking</span>
</p>
</li>
<li class="mb-16">
<p>
Some text placeholder have been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li><code>%list-adjustement</code></li>
<li><code>%module-container</code></li>
<li><code>%default-module-spacer</code></li>
<li><code>%text-container</code></li>
</ul>
</li>
</ul>

<h5>Other styles</h5>
<ul>
<li class="mb-16">
<p>
Removed the dependency to bootstrap as well as all of the overrides of its SCSS
variables and classes.
<span class="tag tag-sm tag-danger">breaking</span>
</p>
</li>
<li class="mb-16">
<p>
Removed the dependency to ng-bootstrap as well as all of the components built on
it:
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li>carousel</li>
<li>custom select</li>
<li>datatable</li>
<li>datepicker</li>
<li>dropdown</li>
<li>modal</li>
<li>notification overlay</li>
<li>pagination</li>
<li>progressbar</li>
<li>timepicker</li>
<li>typeahead</li>
</ul>
</li>
<li class="mb-16">
<p>
Some elements of the card component and their corresponding classes have been removed. <span class="tag tag-sm tag-danger">breaking</span>
Expand All @@ -628,20 +493,22 @@ export class MigrationV99Component extends LitElement {
<li><code>.card-img</code></li>
<li><code>.card-img-top</code></li>
<li><code>.card-img-bottom</code></li>
<li><code>.card-button</code></li>
<li><code>.card-buttons</code></li>
</ul>
</p>
</li>
<li class="mb-16">
<p>
The card button CSS component has been removed.The <code>.card-button</code> and
<code>.card-buttons</code> are therefore no longer available.
The <code>.card-group</code> class has been removed.
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<p class="info">Card elements should be set inside a grid container.</p>
</li>
<li class="mb-16">
<p>
The <code>.btn-rg</code> class has been removed. Buttons using this class will
now fall back to the default <code>btn-md</code>
now fall back to the default size.
<span class="tag tag-sm tag-danger">breaking</span> <span class="tag tag-sm tag-info">🪄 migration rule</span>
</p>
</li>
Expand Down Expand Up @@ -680,19 +547,6 @@ export class MigrationV99Component extends LitElement {
<span class="tag tag-sm tag-danger">breaking</span>
</p>
</li>
<li class="mb-16">
<p>
The <code>@mixin scroll-shadows-y</code> has been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
</li>
<li class="mb-16">
<p>
The <code>.card-group</code> class has been removed.
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<p class="info">Card elements should be set inside a grid container.</p>
</li>
<li class="mb-16">
<p>
The <code>.chip-filter</code> has been renamed to
Expand All @@ -701,48 +555,6 @@ export class MigrationV99Component extends LitElement {
<span class="tag tag-sm tag-danger">breaking</span>
</p>
</li>
<li class="mb-16">
<p>
Some datatable scss variables have been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li><code>$datatable-sort-asc-icon</code></li>
<li><code>$datatable-sort-desc-icon</code></li>
<li><code>$datatable-sort-unset-icon</code></li>
<li><code>$datatable-sort-editable-icon</code></li>
</ul>
</li>
<li class="mb-16">
<p>
Some stepper scss variables have been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li><code>$stepper-link-hover-color</code></li>
<li><code>$stepper-indicator-hover-outline</code></li>
<li><code>$stepper-indicator-font-size</code></li>
<li><code>$stepper-link-current-font-size</code></li>
<li><code>$stepper-indicator-hover-check-icon</code></li>
<li><code>$stepper-indicator-height</code></li>
</ul>
</li>
<li class="mb-16">
<p>
The following z-index scss variables have been removed, as they were set on
elements that are now using popover which place them in the top layer.
<span class="tag tag-sm tag-danger">breaking</span>
</p>
<ul>
<li><code>$zindex-sticky</code></li>
<li><code>$zindex-fixed</code></li>
<li><code>$zindex-modal-backdrop</code></li>
<li><code>$zindex-modal</code></li>
<li><code>$zindex-popover</code></li>
<li><code>$zindex-tooltip</code></li>
<li><code>$zindex-alert</code></li>
</ul>
</li>
<li class="mb-16">
<p>
Accent colors have been removed
Expand All @@ -767,13 +579,6 @@ export class MigrationV99Component extends LitElement {
</li>
</ul>
</li>
<li class="mb-16">
<p>
All classes and CSS variables related to the bootstrap
<code>navbar</code> component have been removed
<span class="tag tag-sm tag-danger">breaking</span>
</p>
</li>
<li class="mb-16">
<p>
Deprecated loader classes and related scss variables have been removed
Expand Down