Cherry-pick callouts from #1614

site/assets/scss/_content.scss

@@ -54,12 +54,7 @@
 
  > details {
  padding: 5px 10px; // static even when zoomed
- border: transparent solid calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
-
- // stylelint-disable-next-line selector-no-qualifying-type
- &[open] {
- border-color: var(--bs-border-color);
- }
+ border: var(--bs-border-color) dashed calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
  }
  // End mod
 }

site/content/docs/5.3/components/badge.md

@@ -18,7 +18,7 @@ Badges scale to match the size of the immediate parent element by using relative
 <summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
-This component variant should not be used because it does not exist in the Orange Design System specifications.
+This variant should not be used because it does not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -62,7 +62,7 @@ Use utilities to modify a `.badge` and position it in the corner of a link with
 {{< design-callout-alert >}}
 This component variant should be used **only** inside a header component.
 
-Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >}}). You can also refer to the [Global headers](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) guidelines on the Orange Design System website.
+Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >}}). You can also refer to the [Global headers guidelines](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -86,7 +86,7 @@ Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >
 
 {{< added-in "5.2.0" >}}
 
-Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
+Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}` utilities]({{< docsref "/utilities/background" >}}) for styling, which you still may use if you prefer.
 
 <details>
 <summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
@@ -119,7 +119,7 @@ Consider using our [Boosted Tags]({{< docsref "/components/tags" >}}) instead.
 {{< design-callout-alert >}}
 This component should not be used because it does not exist in the Orange Design System specifications.
 
-Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}). You can also refer to the [Tags](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) guidelines on the Orange Design System website.
+Instead, consider using our [Tags component]({{< docsref "/components/tags" >}}). You can also refer to the [Tags guidelines](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}

site/content/docs/5.3/components/breadcrumb.md

@@ -79,7 +79,7 @@ $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/
 {{< design-callout-alert >}}
 This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications.
 
-Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) guidelines on the Orange Design System website.
+Please refer to the [Local Headers/Breadcrumb guidelines](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.

site/content/docs/5.3/components/button-group.md

@@ -42,7 +42,7 @@ These classes can also be added to groups of links, as an alternative to the [`.
 {{< design-callout-alert >}}
 This variant **using and mixing colored button backgrounds** should not be used because it does not respect the Orange Design System specifications. In button groups, you should only use the button variant that uses `.btn .btn-outline-secondary`.
 
-Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" >}}) secondary variant component. You can also refer to the [Buttons: standard](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) guidelines on the Orange Design System website.
+Please refer to our Boosted [Buttons secondary variant component]({{< docsref "/components/buttons#examples" >}}). You can also refer to the [Buttons: standard guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -74,7 +74,7 @@ Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/chec
 {{< design-callout-alert >}}
 This **checkbox** variant should not be used because it does not respect the Orange Design System specifications.
 
-From the Orange Design System point of view, checkboxes should be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) component. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on the Orange Design System website.
+From the Orange Design System point of view, checkboxes should be represented like in our Boosted [Checks component]({{< docsref "/forms/checks-radios#checks" >}}). You can also refer to the [Checkbox guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -101,8 +101,8 @@ From the Orange Design System point of view, checkboxes should be represented li
 
  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-toggle" for="btnradio3">Radio 3</label>
- </div>
- {{< /example >}}
+</div>
+{{< /example >}}
 
 ## Button toolbar
 
@@ -112,7 +112,7 @@ Combine sets of button groups into button toolbars for more complex components.
 <summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
-This variant should not be used because it does not respect the Orange Design System specifications.
+These variants should not be used because they do not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -169,6 +169,23 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
 
+{{< example >}}
+<div class="btn-group" role="group" aria-label="Default button group">
+ <button type="button" class="btn btn-outline-secondary">Left</button>
+ <button type="button" class="btn btn-outline-secondary">Middle</button>
+ <button type="button" class="btn btn-outline-secondary">Right</button>
+</div>
+{{< /example >}}
+
+<details>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<br>
+{{< design-callout-alert >}}
+The **first size variant (50px height) and the last one (30px height)** should not be used because they do not respect the Orange Design System specifications.
+
+Please refer to the [Toggle buttons](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-outline-secondary">Left</button>
@@ -188,6 +205,7 @@ Instead of applying button sizing classes to every button in a group, just add `
  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 {{< /example >}}
+</details>
 
 ## Nesting
 

site/content/docs/5.3/components/buttons.md

@@ -39,7 +39,7 @@ Boosted includes several button variants, each serving its own semantic purpose,
 {{< design-callout-alert >}}
 Warning, info, light and dark variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
 
-Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -198,7 +198,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
 {{< design-callout-alert >}}
 The only variant of outline buttons that should be used is the `.btn-outline-secondary` one. The other variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
 
-Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -236,7 +236,7 @@ You can even roll your own custom sizing with CSS variables:
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
 
-Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -289,7 +289,7 @@ Create responsive stacks of full-width, "block buttons" like those in Boosted 4
 {{< design-callout-alert >}}
 These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications.
 
-Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -345,7 +345,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre
 {{< design-callout-alert >}}
 These variants with only **one toggle button** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, a toggle button should not be used alone.
 
-Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components.
+Instead, consider using our Boosted [Checks component]({{< docsref "/forms/checks-radios#checks" >}}), [Radios component]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons component]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}).
 {{< /design-callout-alert >}}
 
 {{< example >}}