diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md index 580669a16f..c9fae18bd7 100644 --- a/site/content/docs/5.3/components/badge.md +++ b/site/content/docs/5.3/components/badge.md @@ -14,6 +14,9 @@ Badges scale to match the size of the immediate parent element by using relative ### Headings +
+See Bootstrap's variants +
{{< design-callout-alert >}} This component variant should not be used because it does not exist in the Orange Design System specifications. {{< /design-callout-alert >}} @@ -26,11 +29,15 @@ This component variant should not be used because it does not exist in the Orang
Example heading New
Example heading New
{{< /example >}} +
### Buttons Badges can be used as part of links or buttons to provide a counter. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This component should not be used because it does not exist in the Orange Design System specifications. {{< /design-callout-alert >}} @@ -44,6 +51,7 @@ This component should not be used because it does not exist in the Orange Design Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. +
### Positioned @@ -51,6 +59,9 @@ Unless the context is clear (as with the "Notifications" example, where it is un Use utilities to modify a `.badge` and position it in the corner of a link with an icon. +
+See Bootstrap's variants that can be useful in some contexts +
{{< design-callout-alert >}} This component variant should be used **only** inside a header component. @@ -73,11 +84,15 @@ Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examp +
## Background colors {{< added-in "5.2.0" >}} +
+See Bootstrap's variants +
{{< design-callout-alert >}} These component variants should not be used because they do not exist in the Orange Design System specifications. {{< /design-callout-alert >}} @@ -94,11 +109,15 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} +
## Pill badges Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This component should not be used because it does not exist in the Orange Design System specifications. @@ -111,6 +130,7 @@ Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}). {{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}} +
## CSS diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md index 3ef0ecdbf1..66bba05040 100644 --- a/site/content/docs/5.3/components/breadcrumb.md +++ b/site/content/docs/5.3/components/breadcrumb.md @@ -75,6 +75,9 @@ $breadcrumb-divider: url("data:image/svg+xml, +Other variants from Bootstrap +
{{< design-callout-alert >}} This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications. @@ -94,6 +97,7 @@ Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/ ```scss $breadcrumb-divider: none; ``` + ## Dark variant diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md index fed88b5d97..35ef621b4e 100644 --- a/site/content/docs/5.3/components/button-group.md +++ b/site/content/docs/5.3/components/button-group.md @@ -36,6 +36,9 @@ These classes can also be added to groups of links, as an alternative to the [`. ## Mixed styles +
+See Bootstrap's variants +
{{< 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`. @@ -49,6 +52,7 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" {{< /example >}} +
@@ -56,10 +60,13 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group. +
+See Bootstrap's variants +
{{< design-callout-alert >}} -This **checkbox** variant should not be used because it does not respect the Orange Design System specifications. +These **checkbox** and **radio button** variants should not be used because they do 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 and radio buttons should respectively be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) or [Radios]({{< docsref "/forms/checks-radios#radios" >}}) components. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) and [Radio button](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -87,11 +94,15 @@ From the Orange Design System point of view, checkboxes should be represented li {{< /example >}} +
## Button toolbar Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. {{< /design-callout-alert >}} @@ -144,11 +155,29 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th {{< /example >}} +
## Sizing 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 >}} +
+ + + +
+{{< /example >}} + +
+Other variants from Bootstrap +
+{{< 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 >}}
@@ -168,11 +197,15 @@ Instead of applying button sizing classes to every button in a group, just add `
{{< /example >}} +
## Nesting Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. {{< /design-callout-alert >}} @@ -194,11 +227,15 @@ This variant should not be used because it does not respect the Orange Design Sy {{< /example >}} +
## Vertical variation Make a set of buttons appear vertically stacked rather than horizontally. +
+See Bootstrap's variants +
{{< design-callout-alert >}} These 3 vertical variants should not be used because they do not respect the Orange Design System specifications. {{< /design-callout-alert >}} @@ -265,3 +302,4 @@ These 3 vertical variants should not be used because they do not respect the Ora {{< /example >}} +
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index fd387ea5be..056db27bf5 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -231,6 +231,9 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes You can even roll your own custom sizing with CSS variables: +
+Other variants from Bootstrap +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -243,6 +246,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb Custom button {{< /example >}} +
## Disabled state @@ -280,6 +284,9 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t Create responsive stacks of full-width, "block buttons" like those in Boosted 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors. +
+Other variants from Bootstrap +
{{< design-callout-alert >}} These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications. @@ -292,6 +299,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb {{< /example >}} +
Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change. @@ -324,12 +332,6 @@ Additional utilities can be used to adjust the alignment of buttons when horizon The button plugin allows you to create simple on/off toggle buttons. -{{< 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. -{{< /design-callout-alert >}} - {{< callout info >}} Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button. {{< /callout >}} @@ -338,6 +340,15 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies. +
+See Bootstrap's variants +
+{{< design-callout-alert >}} +These variants with only **one toggle button instead of a group of buttons** 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, [Toggle buttons](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) 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. +{{< /design-callout-alert >}} + {{< example >}} @@ -349,6 +360,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre Active toggle link Disabled toggle link {{< /example >}} +
### Methods diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md index 379a9b58fd..abfb9aabde 100644 --- a/site/content/docs/5.3/components/carousel.md +++ b/site/content/docs/5.3/components/carousel.md @@ -155,6 +155,9 @@ Pausing the carousel by hovering one slide should not be used. You can add captions to your slides with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`. +
+See Bootstrap's variants +
{{< design-callout-alert >}} **Captions** should not be used because they do not respect the Orange Design System specifications. @@ -201,6 +204,7 @@ Please refer to the [Carousel navigation](https://system.design.orange.com/0c1af {{< /example >}} +
### Crossfade diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index dfc230a114..212e81795f 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -335,6 +335,9 @@ Button dropdowns work with buttons of all sizes, including default and split dro ``` +
+Other variants from Bootstrap +
{{< design-callout-alert >}} This small variant should not be used because it does not respect the Orange Design System specifications. @@ -390,6 +393,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b ``` +
## Dark dropdowns @@ -407,6 +411,9 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -425,6 +432,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b {{< /example >}} +
### Dropup @@ -489,6 +497,9 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. Make the dropup menu centered above the toggle with `.dropup-center` on the parent element. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -507,6 +518,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b {{< /example >}} +
### Dropend @@ -643,7 +655,7 @@ You can use `` or ` {{< /example >}} + ### Change animation @@ -692,6 +696,9 @@ Another override is the option to pop up a modal that covers the user viewport, | `.modal-fullscreen-xxl-down` | `1440px` | {{< /bs-table >}} +
+See Bootstrap's variants +
{{< design-callout-alert >}} These **full screen** variants should not be used because they do not respect the Orange Design System specifications. Indeed, modals should always be placed in the center of a page and not be full screen. @@ -815,6 +822,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 +
## CSS diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index 7dbbdff6e9..90db7a72d9 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -24,6 +24,15 @@ The base `.nav` component does not include any `.active` state. The following ex To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set. {{< /callout >}} +
+See Bootstrap's variants +
+{{< design-callout-alert >}} +This component variant should not be used because it does not respect the Orange Design System specifications. + +Instead, please consider using our Boosted tabs [Underline]({{< docsref "/components/navs-tabs#underline" >}}) variant. You can also refer to [Tabs](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) guidelines on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
## Available styles @@ -60,6 +70,15 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/utilities/flex#justify-content" >}}). By default, navs are left-aligned, but you can easily change them to center or right-aligned. +
+See Bootstrap's variants +
+{{< design-callout-alert >}} +These **centered** and **right aligned** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be left aligned. + +Instead, please consider using our Boosted tabs [Underline]({{< docsref "/components/navs-tabs#underline" >}}) variant. You can also refer to [Tabs](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) guidelines on the Orange Design System website. +{{< /design-callout-alert >}} + Centered with `.justify-content-center`: {{< example >}} @@ -97,11 +116,21 @@ Right-aligned with `.justify-content-end`: {{< /example >}} +
### Vertical Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`). +
+See Bootstrap's variants +
+{{< design-callout-alert >}} +These **vertical** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be displayed horizontally. + +Instead, please consider using our Boosted tabs [Underline]({{< docsref "/components/navs-tabs#underline" >}}) variant. You can also refer to [Tabs](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) guidelines on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
### Tabs @@ -155,6 +185,9 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb Take that same HTML, but use `.nav-pills` instead: +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it is a button component in the Orange Design System specifications. {{< /design-callout-alert >}} @@ -175,6 +208,7 @@ This variant should not be used because it is a button component in the Orange D {{< /example >}} +
### Underline @@ -259,7 +293,7 @@ Nav tabs light is nested in a tab for adding a level of depth in information org Force your `.nav`'s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width. {{< example >}} -