Skip to content

Commit 1586d9a

Browse files
julien-deramondlouismaximepiton
julien-deramond
and
louismaximepiton
authored
docs: add detailed migration guide v5.2.0 → v5.2.1 (#1522)
Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
1 parent 6255243 commit 1586d9a

File tree

1 file changed

+197
-0
lines changed

1 file changed

+197
-0
lines changed

‎site/content/docs/5.2/migration.md‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,203 @@ aliases:
99
toc: true
1010
---
1111

12+
## v5.2.1
13+
14+
<hr class="mb-4">
15+
16+
Boosted v5.2.1 is here with fixes from our latest minor release, v5.2. These changes include bug fixes, documentation updates, and some dependency updates, but also a new Tags component and a lot of new dark variants for our components.
17+
18+
If you need more details about the changes, please refer to the [v5.2.1 release](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/tag/v5.2.0).
19+
20+
### Components
21+
22+
- **Back to top**
23+
- <span class="badge bg-danger">Breaking</span> Back to top 'Label inside' variant was removed because not compliant with Orange Design System. Even if the rendering could still work, it is recommended to only use the versions presented in the documentation.
24+
25+
- **Breadcrumb**
26+
- <span class="badge bg-success">New</span> Breadcrumb now has a dark variant.
27+
28+
- **Footers**
29+
- <span class="badge bg-warning">Warning</span> All Footers examples have been modified to use the "Terms and conditions" wording instead of "Terms & Conditions". Please reflect this modification into your websites.
30+
31+
- **List group**
32+
- <span class="badge bg-success">New</span> List group now has a dark variant.
33+
34+
- **Pagination**
35+
- <span class="badge bg-success">New</span> Pagination now has a dark variant.
36+
37+
- **Scrollspy**
38+
- <span class="badge bg-success">New</span> Scrollspy has a new `data-bs-threshold` data attribute.
39+
40+
- **Stepped process**
41+
- <span class="badge bg-success">New</span> Stepped process now has a dark variant.
42+
43+
- **Tags**
44+
- <span class="badge bg-success">New</span> Tags are now a component.
45+
46+
- **Toasts**
47+
- <span class="badge bg-warning">Warning</span> Changed the markup for Toasts with a custom content (toast message and close button). Please reflect this modification into your websites.
48+
<details class="mt-2">
49+
<summary>More info</summary>
50+
{{< markdown >}}
51+
```diff
52+
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
53+
<div class="d-flex">
54+
- <div class="toast-body">
55+
+ <div class="toast-body my-auto">
56+
Hello, world! This is a toast message.
57+
</div>
58+
- <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
59+
+ <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
60+
</div>
61+
</div>
62+
```
63+
{{< /markdown >}}
64+
</details>
65+
66+
### Contents
67+
68+
- <span class="badge bg-warning">Warning</span> Changed the rendering of `<mark>` (and so `.mark`). Depending on your usage it may worth checking the impact in your websites.
69+
70+
- <span class="badge bg-warning">Warning</span> Tooltips examples applied on SVGs have been updated to use `focusable="false"` and `aria-hidden="true"` because SVGs do not carry any specific information so they should not be readable by screen readers. Please reflect this modification in your websites. By the way please check all the SVGs in your websites in order to apply this same modification if needed.
71+
<details class="mb-3">
72+
<summary>More info</summary>
73+
{{< markdown >}}
74+
```diff
75+
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Default tooltip">
76+
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
77+
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
78+
<rect width="100%" height="100%" fill="#563d7c"/>
79+
<circle cx="50" cy="50" r="30" fill="#007bff"/>
80+
</svg>
81+
</a>
82+
```
83+
{{< /markdown >}}
84+
</details>
85+
86+
- The close icon SVG rendering has changed in modals, offcanvases and close buttons. Although is has no direct impact, you might want apply this same modification within your websites.
87+
88+
### Helpers and utilities
89+
90+
- <span class="badge bg-success">New</span> `.img-thumbnail` is now officially supported.
91+
92+
### CSS and Sass variables
93+
94+
- <span class="badge bg-danger">Breaking</span> `--bs-pagination-margin-start` and `--bs-pagination-focus-outline` are now deprecated.
95+
96+
- <span class="badge bg-warning">Warning</span> `$accordion-color` was announced a deprecated in v5.2.0 but is finally not removed.
97+
98+
- <details class="mb-2">
99+
<summary><span class="badge bg-success">New</span> CSS variables:</summary>
100+
<ul>
101+
<li><code>--bs-alert-btn-close-offset</code></li>
102+
<li><code>--bs-alert-dismissible-padding-right</code></li>
103+
<li><code>--bs-alert-heading-font-weight</code></li>
104+
<li><code>--bs-alert-icon-margin-y</code></li>
105+
<li><code>--bs-alert-icon-size</code></li>
106+
<li><code>--bs-alert-line-height</code></li>
107+
<li><code>--bs-alert-link-font-weight</code></li>
108+
<li><code>--bs-alert-logo-size</code></li>
109+
<li><code>--bs-breadcrumb-color</code></li>
110+
<li><code>--bs-btn-close-active-border-color</code></li>
111+
<li><code>--bs-btn-close-active-color</code></li>
112+
<li><code>--bs-btn-close-bg</code></li>
113+
<li><code>--bs-btn-close-border-color</code></li>
114+
<li><code>--bs-btn-close-border-width</code></li>
115+
<li><code>--bs-btn-close-color</code></li>
116+
<li><code>--bs-btn-close-disabled-color</code></li>
117+
<li><code>--bs-btn-close-hover-color</code></li>
118+
<li><code>--bs-btn-close-padding</code></li>
119+
<li><code>--bs-btn-hover-border-color</code></li>
120+
<li><code>--bs-dropdown-zindex</code></li>
121+
<li><code>--bs-highlight-color</code></li>
122+
<li><code>--bs-pagination-active-item-color</code></li>
123+
<li><code>--bs-pagination-padding-end</code></li>
124+
<li><code>--bs-tab-content-border-width</code></li>
125+
<li><code>--bs-tab-content-padding-x</code></li>
126+
<li><code>--bs-tab-content-padding-y</code></li>
127+
<li><code>--bs-nav-tabs-link-border-width</code></li>
128+
<li><code>--bs-nav-tabs-link-hover-bg</code></li>
129+
<li><code>--bs-nav-tabs-link-hover-color</code></li>
130+
<li><code>--bs-nav-tabs-link-padding-x</code></li>
131+
<li><code>--bs-navbar-font-weight</code></li>
132+
<li><code>--bs-navbar-toggler-icon-filter</code></li>
133+
<li><code>--bs-stepped-process-link-next-color</code></li>
134+
<li><code>--bs-toast-zindex</code></li>
135+
</ul>
136+
</details>
137+
138+
- <details class="mb-2">
139+
<summary><span class="badge bg-success">New</span> Sass variables:</summary>
140+
<ul>
141+
<li><code>$alert-heading-font-weight</code></li>
142+
<li><code>$alert-icon-size-sm</code></li>
143+
<li><code>$breadcrumb-color</code></li>
144+
<li><code>$breadcrumb-dark-active-color</code></li>
145+
<li><code>$breadcrumb-dark-bg</code></li>
146+
<li><code>$breadcrumb-dark-color</code></li>
147+
<li><code>$breadcrumb-dark-divider-color</code></li>
148+
<li><code>$btn-close-active-border-color</code></li>
149+
<li><code>$btn-close-active-color</code></li>
150+
<li><code>$btn-close-border-color</code></li>
151+
<li><code>$btn-close-border-width</code></li>
152+
<li><code>$btn-close-disabled-color</code></li>
153+
<li><code>$btn-close-hover-color</code></li>
154+
<li><code>$btn-close-white-active-border-color</code></li>
155+
<li><code>$btn-close-white-active-color</code></li>
156+
<li><code>$btn-close-white-bg</code></li>
157+
<li><code>$btn-close-white-border-color</code></li>
158+
<li><code>$btn-close-white-color</code></li>
159+
<li><code>$btn-close-white-disabled-color</code></li>
160+
<li><code>$btn-close-white-hover-color</code></li>
161+
<li><code>$list-group-dark-action-active-bg</code></li>
162+
<li><code>$list-group-dark-action-active-color</code></li>
163+
<li><code>$list-group-dark-action-color</code></li>
164+
<li><code>$list-group-dark-action-hover-color</code></li>
165+
<li><code>$list-group-dark-active-bg</code></li>
166+
<li><code>$list-group-dark-active-border-color</code></li>
167+
<li><code>$list-group-dark-active-color</code></li>
168+
<li><code>$list-group-dark-bg</code></li>
169+
<li><code>$list-group-dark-border-color</code></li>
170+
<li><code>$list-group-dark-color</code></li>
171+
<li><code>$list-group-dark-disabled-bg</code></li>
172+
<li><code>$list-group-dark-disabled-color</code></li>
173+
<li><code>$mark-bg-dark</code></li>
174+
<li><code>$mark-color</code></li>
175+
<li><code>$mark-color-dark</code></li>
176+
<li><code>$navbar-dark-border-color</code></li>
177+
<li><code>$navbar-font-weight</code></li>
178+
<li><code>$pagination-active-item-color</code></li>
179+
<li><code>$pagination-dark-active-bg</code></li>
180+
<li><code>$pagination-dark-active-border-color</code></li>
181+
<li><code>$pagination-dark-active-color</code></li>
182+
<li><code>$pagination-dark-active-item-bg</code></li>
183+
<li><code>$pagination-dark-active-item-border-color</code></li>
184+
<li><code>$pagination-dark-active-item-color</code></li>
185+
<li><code>$pagination-dark-bg</code></li>
186+
<li><code>$pagination-dark-border-color</code></li>
187+
<li><code>$pagination-dark-color</code></li>
188+
<li><code>$pagination-dark-disabled-bg</code></li>
189+
<li><code>$pagination-dark-disabled-border-color</code></li>
190+
<li><code>$pagination-dark-disabled-color</code></li>
191+
<li><code>$pagination-dark-focus-bg</code></li>
192+
<li><code>$pagination-dark-focus-color</code></li>
193+
<li><code>$pagination-dark-hover-bg</code></li>
194+
<li><code>$pagination-dark-hover-border-color</code></li>
195+
<li><code>$pagination-dark-hover-color</code></li>
196+
<li><code>$step-item-dark-active-bg</code></li>
197+
<li><code>$step-item-dark-bg</code></li>
198+
<li><code>$step-item-dark-drop-shadow</code></li>
199+
<li><code>$step-item-dark-next-bg</code></li>
200+
<li><code>$step-link-dark-active-color</code></li>
201+
<li><code>$step-link-dark-color</code></li>
202+
<li><code>$step-link-dark-next-color</code></li>
203+
<li><code>$step-link-next-color</code></li>
204+
</ul>
205+
</details>
206+
207+
- Dark text variants handling is now explained in [Customize > CSS variables > Dark text rule]({{< docsref "/customize/css-variables#dark-text-rule" >}}).
208+
12209
## v5.2.0
13210

14211
<hr class="mb-4">

0 commit comments

Comments
 (0)