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 32fb2bb802..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 @@ -48,6 +48,45 @@ export class MigrationV99Component extends LitElement {
+ 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: +
+Please review your components and styles to ensure compatibility. +
Removed the following Ng-Bootstrap components:
+
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
Removed utility mixins breaking
-@mixin responsive-size
- @mixin generate-utility-class()
- @mixin bezel-small()
, @mixin bezel-small-regular()
,
- @mixin bezel-regular()
,
- @mixin bezel-bigger-regular()
,
- @mixin bezel-medium()
, @mixin bezel-large()
,
- @mixin bezel-big()
- Renamed some utility classes @@ -374,30 +343,6 @@ export class MigrationV99Component extends LitElement {
- The following bootstrap helper classes have been removed - breaking -
-.figure
, .figure-img
and
- .figure-caption
- .vr
.text-bg-*
.link-*
.visually-hidden-focusable
.stretched-link
.vstack
and .hstack
.ratio
and .ratio-*x*
.icon-link
and .icon-link-hover
- Removed font curve mixin - breaking -
-@mixin font-curve
- Removed deprecated line-height SCSS variables and CSS classes + Removed deprecated line-height variables breaking
- Removed the following display SCSS variables - breaking -
-$display1-weight
$display2-weight
$display3-weight
$display4-weight
$display-line-height
- The display sizes scss variables have been removed
+ The .lh-base
class has been removed
breaking
$display{1/2/3/4/5/6}-size
variables no longer exist
- We recommend using the heading classes to replace their usage, either by using
- the standard html tags (e.g. h1
) or the css classes (e.g.
- .h1
).
-
- The @function line-height-calc($val)
has been removed
- breaking
-
- 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. -
@@ -576,49 +480,10 @@ export class MigrationV99Component extends LitElement { breaking
- Some text placeholder have been removed - breaking -
-%list-adjustement
%module-container
%default-module-spacer
%text-container
- Removed the dependency to bootstrap as well as all of the overrides of its SCSS - variables and classes. - breaking -
-- Removed the dependency to ng-bootstrap as well as all of the components built on - it: - breaking -
-Some elements of the card component and their corresponding classes have been removed. breaking @@ -628,20 +493,22 @@ export class MigrationV99Component extends LitElement {
.card-img
.card-img-top
.card-img-bottom
.card-button
.card-buttons
- The card button CSS component has been removed.The .card-button
and
- .card-buttons
are therefore no longer available.
+ The .card-group
class has been removed.
breaking
Card elements should be set inside a grid container.
The .btn-rg
class has been removed. Buttons using this class will
- now fall back to the default btn-md
+ now fall back to the default size.
breaking 🪄 migration rule
- The @mixin scroll-shadows-y
has been removed
- breaking
-
- The .card-group
class has been removed.
- breaking
-
Card elements should be set inside a grid container.
-
The .chip-filter
has been renamed to
@@ -701,48 +555,6 @@ export class MigrationV99Component extends LitElement {
breaking
- Some datatable scss variables have been removed - breaking -
-$datatable-sort-asc-icon
$datatable-sort-desc-icon
$datatable-sort-unset-icon
$datatable-sort-editable-icon
- Some stepper scss variables have been removed - breaking -
-$stepper-link-hover-color
$stepper-indicator-hover-outline
$stepper-indicator-font-size
$stepper-link-current-font-size
$stepper-indicator-hover-check-icon
$stepper-indicator-height
- 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. - breaking -
-$zindex-sticky
$zindex-fixed
$zindex-modal-backdrop
$zindex-modal
$zindex-popover
$zindex-tooltip
$zindex-alert
Accent colors have been removed @@ -767,13 +579,6 @@ export class MigrationV99Component extends LitElement {
- 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