From cbea7f333074c8a6071be5b3964eaff554e3f201 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Thu, 18 Jul 2024 12:32:29 +0200 Subject: [PATCH] docs: improve and add design or Bootstrap callouts (#2625) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored by: Isabelle Chanclou Co-authored by: Hannah Issermann Co-authored by: Julien Déramond --- site/assets/scss/_content.scss | 7 +- site/content/docs/5.3/components/badge.md | 26 ++-- .../content/docs/5.3/components/breadcrumb.md | 4 +- .../docs/5.3/components/button-group.md | 30 +++-- site/content/docs/5.3/components/buttons.md | 20 +-- site/content/docs/5.3/components/card.md | 124 ++++++++++++++++-- site/content/docs/5.3/components/carousel.md | 4 +- site/content/docs/5.3/components/dropdowns.md | 42 +++--- site/content/docs/5.3/components/footer.md | 2 +- .../content/docs/5.3/components/list-group.md | 10 +- site/content/docs/5.3/components/modal.md | 8 +- site/content/docs/5.3/components/navbar.md | 2 +- site/content/docs/5.3/components/navs-tabs.md | 58 ++++++-- .../docs/5.3/components/orange-navbar.md | 2 +- site/content/docs/5.3/components/popovers.md | 10 ++ site/content/docs/5.3/components/progress.md | 26 ++-- site/content/docs/5.3/components/scrollspy.md | 4 +- site/content/docs/5.3/components/spinners.md | 16 +-- site/content/docs/5.3/components/tooltips.md | 4 +- site/content/docs/5.3/content/reboot.md | 4 +- site/content/docs/5.3/content/tables.md | 18 +-- .../docs/5.3/customize/color-palette.md | 2 +- .../docs/5.3/examples/download-app/index.html | 4 +- site/content/docs/5.3/extend/icons.md | 2 +- site/content/docs/5.3/forms/checks-radios.md | 10 ++ site/content/docs/5.3/forms/form-control.md | 87 ++++++++++-- site/content/docs/5.3/forms/input-group.md | 88 ++++++++++--- site/content/docs/5.3/forms/layout.md | 46 ++++++- site/content/docs/5.3/forms/select.md | 12 ++ site/content/docs/5.3/forms/validation.md | 10 ++ .../docs/5.3/getting-started/introduction.md | 6 +- site/content/docs/5.3/guidelines/_index.md | 2 +- .../docs/5.3/helpers/color-background.md | 8 ++ .../content/docs/5.3/helpers/colored-links.md | 8 +- site/content/docs/5.3/helpers/focus-ring.md | 12 +- site/content/docs/5.3/helpers/icon-link.md | 16 +-- site/content/docs/5.3/helpers/stacks.md | 8 ++ site/content/docs/5.3/migration.md | 8 +- site/content/docs/5.3/utilities/background.md | 10 +- site/content/docs/5.3/utilities/borders.md | 10 +- site/content/docs/5.3/utilities/colors.md | 8 +- site/content/docs/5.3/utilities/link.md | 24 ++-- 42 files changed, 593 insertions(+), 209 deletions(-) diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 0bd10ba16e..fc77b36adb 100644 --- a/site/assets/scss/_content.scss +++ b/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 } diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md index 242184a878..9385486e64 100644 --- a/site/content/docs/5.3/components/badge.md +++ b/site/content/docs/5.3/components/badge.md @@ -15,10 +15,10 @@ Badges scale to match the size of the immediate parent element by using relative ### Headings
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This component variant should not be used because it does not exist in 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 >}} @@ -36,10 +36,10 @@ This component variant should not be used because it does not exist in the Orang Badges can be used as part of links or buttons to provide a counter.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This component 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 >}} @@ -60,9 +60,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. {{< design-callout-alert >}} -This component variant should be used **only** inside a header component. +This 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,13 +86,13 @@ 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}`]({{< docsref "/utilities/colors" >}}) utilities and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -These component variants should not be used because they do not exist in the Orange Design System specifications. +These variants should not be used because they do not respect in the Orange Design System specifications. {{< /design-callout-alert >}} {{< example >}} @@ -111,15 +111,15 @@ These component variants should not be used because they do not exist in the Ora Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`. -Consider using our [Boosted Tags]({{< docsref "/components/tags" >}}) instead. +Consider using our [Tags component]({{< docsref "/components/tags" >}}) instead.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This component should not be used because it does not exist in the Orange Design System specifications. +These variants should not be used because they do not respect 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 >}} diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md index 95b475f61a..a2976f0917 100644 --- a/site/content/docs/5.3/components/breadcrumb.md +++ b/site/content/docs/5.3/components/breadcrumb.md @@ -74,12 +74,12 @@ $breadcrumb-divider: url("data:image/svg+xml, -See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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 [Outline buttons secondary variant]({{< docsref "/components/buttons#outline-buttons" >}}). 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 >}} @@ -69,12 +69,12 @@ 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 example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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 [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,18 +101,18 @@ From the Orange Design System point of view, checkboxes should be represented li - - {{< /example >}} + +{{< /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 example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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,15 @@ 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. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< 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 guidelines](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -188,13 +197,14 @@ 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 example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -224,7 +234,7 @@ This variant should not be used because it does not respect the Orange Design Sy Make a set of buttons appear vertically stacked rather than horizontally.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These 3 vertical variants should not be used because they do not respect the Orange Design System specifications. diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index 0c93843963..0759f01a68 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -34,12 +34,12 @@ Boosted includes several button variants, each serving its own semantic purpose, {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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 >}} @@ -193,12 +193,12 @@ In need of a button, but not the hefty background colors they bring? Replace the {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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 >}} @@ -231,12 +231,12 @@ 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:
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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 >}} @@ -284,12 +284,12 @@ 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.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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 >}} @@ -340,12 +340,12 @@ 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 example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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 [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 >}} diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 1a8594ed7b..da4bfb222e 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -12,6 +12,13 @@ toc: true A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you're familiar with Boosted 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. +{{< design-callout-alert info >}} +The [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) defined on the Orange Design System website describe how cards need to be rendered and used, mainly as static containers with specific fixed sizes and spacings. +

+**However, in Boosted**, as some card variants can be used as containers, **more sizing possibilities are offered to adjust their sizes**. + +{{< /design-callout-alert >}} + ## Example Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Boosted components. They have no `margin` by default, so use [spacing utilities]({{< docsref "/utilities/spacing" >}}) as needed. @@ -183,6 +190,14 @@ Card headers can be styled by adding `.card-header` to `` elements. {{< /example >}} +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This variant with its **centered layout** should not be used because it does not respect the Orange Design System specifications. +Please refer to the [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -198,6 +213,7 @@ Card headers can be styled by adding `.card-header` to `` elements.
{{< /example >}} +
## Sizing @@ -270,6 +286,15 @@ Use custom CSS in your stylesheets or as inline styles to set a width. You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{< docsref "/utilities/text#text-alignment" >}}). +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These second and third variants, **with centered and right-aligned layout**, should not be used because they do not respect the Orange Design System specifications. + +Please refer to the [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -295,11 +320,21 @@ You can quickly change the text alignment of any card—in its entirety or speci
{{< /example >}} +
## Navigation Add some navigation to a card's header (or block) with Boosted's [nav components]({{< docsref "/components/navs-tabs" >}}). +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants should not be used because they do not respect the Orange Design System specifications. + +Please refer to the [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -345,6 +380,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
{{< /example >}} +
## Images @@ -377,6 +413,15 @@ Similar to headers and footers, cards can include top and bottom "image caps"— Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This variant should not be used because it does not respect the Orange Design System specifications. Moreover, it might lead to accessibility issues. Instead, prefer using a card that includes a top image. + +Please refer to the [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
{{< placeholder width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" background="#000" >}} @@ -391,6 +436,7 @@ Turn an image into a card background and overlay your card's text. Depending on {{< callout info >}} Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image. {{< /callout >}} +
## Horizontal @@ -423,6 +469,32 @@ Cards include various options for customizing their backgrounds, borders, and co 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. +{{< example >}} +
+
Header
+
+
Secondary card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
Header
+
+
Dark card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+{{< /example >}} + +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants **with a colored background** should not be used because they do not respect the Orange Design System specifications. + +Please refer to the [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}} {{< card.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -440,38 +512,61 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} +
### Border Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below. + {{< example >}} -{{< card.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -
+
Header
-
{{ .name | title }} card title
+
Borderless card title

Some quick example text to build on the card title and make up the bulk of the card's content.

-{{- end }} - -
+{{< /example >}} + + +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants, **with a colored border** should not be used because they do not respect the Orange Design System specifications. + +Please refer to the [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) on the Orange Design System website. +{{< /design-callout-alert >}} + +{{< example >}} +{{< card.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +
Header
-
Borderless card title
+
{{ .name | title }} card title

Some quick example text to build on the card title and make up the bulk of the card's content.

- +{{- end }} {{< /card.inline >}} {{< /example >}} +
### Mixins utilities You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This variant should not be used because it does not respect the Orange Design System specifications. + +Please refer to the [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
Header
@@ -482,6 +577,7 @@ You can also change the borders on the card header and footer as needed, and eve
Footer
{{< /example >}} +
## Card layout @@ -491,6 +587,15 @@ In addition to styling the content within cards, Boosted includes a few options Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This variant **with no spacing between cards** should not be used because it does not respect the Orange Design System specifications. Instead, prefer having a gap of at least 20px between cards. + +Please refer to the [Cards guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -556,6 +661,7 @@ When using card groups with footers, their content will automatically line up.
{{< /example >}} +
### Grid cards diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md index 90b6b02293..ddf7ae174f 100644 --- a/site/content/docs/5.3/components/carousel.md +++ b/site/content/docs/5.3/components/carousel.md @@ -156,12 +156,12 @@ 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 example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} **Captions** should not be used because they do not respect the Orange Design System specifications. -Please refer to the [Carousel navigation](https://system.design.orange.com/0c1af118d/p/7773e1-carousel-navigation/b/99a7b7) guidelines on the Orange Design System website. +Please refer to the [Carousel navigation guidelines](https://system.design.orange.com/0c1af118d/p/7773e1-carousel-navigation/b/99a7b7) or to the [Hero banners guidelines](https://system.design.orange.com/0c1af118d/p/925608-promotions/b/685a2d) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index 09ffe637c7..c4b61a0b40 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -60,12 +60,12 @@ While `
``` -The tabs plugin also works with pills. +The tabs plugin also works with underline.
-
``` +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These **vertical** 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 [Tabs Underline variant]({{< docsref "/components/navs-tabs#underline" >}}). You can also refer to the [Tabs guidelines](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) on the Orange Design System website. +{{< /design-callout-alert >}} + And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container.
@@ -651,6 +682,7 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
``` +
### Accessibility diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md index 414e0f0ddd..c6570e4f7a 100644 --- a/site/content/docs/5.3/components/orange-navbar.md +++ b/site/content/docs/5.3/components/orange-navbar.md @@ -57,7 +57,7 @@ This component should be: - visible only for the **larger screens** (`lg` to `xxl` breakpoints) using `.navbar-expand-*`. - displayed inside the burger menu for **smaller screens**. There it has to be split in 2 parts. -Refer to [Responsive behavior](#responsive-behavior) to have more details. +Refer to the [Responsive behavior](#responsive-behavior) to have more details. ### Standard diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md index ef75f3afb8..313480e52d 100644 --- a/site/content/docs/5.3/components/popovers.md +++ b/site/content/docs/5.3/components/popovers.md @@ -102,6 +102,15 @@ const popover = new boosted.Popover('.example-popover', { You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This **customized** variant should not be used because it does not respect the Orange Design System specifications. More generally, customizing popover CSS might lead to mismatch Orange Design System. + +Please refer to the [Popover guidelines](https://system.design.orange.com/0c1af118d/p/644ffa-popovers) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< scss-docs name="custom-popovers" file="site/assets/scss/_component-examples.scss" >}} {{< example class="custom-popover-demo" stackblitz_add_js="true" >}} @@ -113,6 +122,7 @@ You can customize the appearance of popovers using [CSS variables](#variables). Custom popover {{< /example >}} +
### Dismiss on next click diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md index 82d67f4011..d248fb767e 100644 --- a/site/content/docs/5.3/components/progress.md +++ b/site/content/docs/5.3/components/progress.md @@ -65,12 +65,12 @@ You only set a `height` value on the `.progress` container, so if you change tha {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} The **1px height** variant should not be used because it does not respect the Orange Design System specifications. -Please refer to the [Progress bar](https://system.design.orange.com/0c1af118d/p/080a7d-progress-bar/b/898b87) guidelines on the Orange Design System website. +Please refer to the [Progress bar guidelines](https://system.design.orange.com/0c1af118d/p/080a7d-progress-bar/b/898b87) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -121,12 +121,12 @@ Boosted also provides size variants for progress bar: simply add `.progress-xs` Use background utility classes to change the appearance of individual progress bars.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These backgrounds color variants should not be used because they do not respect the Orange Design System specifications. The only background color to use is the primary color. -Please refer to the [Progress bar](https://system.design.orange.com/0c1af118d/p/080a7d-progress-bar/b/898b87) guidelines on the Orange Design System website. +Please refer to the [Progress bar guidelines](https://system.design.orange.com/0c1af118d/p/080a7d-progress-bar/b/898b87) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -178,6 +178,13 @@ Alternatively, you can use the new combined [color and background]({{< docsref " You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants should not be used because they do not respect the Orange Design System specifications. +{{< /design-callout-alert >}} + {{< example >}}
@@ -191,18 +198,19 @@ You can include multiple progress components inside a container with `.progress-
{{< /example >}} +
## Striped Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These variants should not be used because they do not respect the Orange Design System specifications. -Please refer to the [Progress bar](https://system.design.orange.com/0c1af118d/p/080a7d-progress-bar/b/898b87) guidelines on the Orange Design System website. +Please refer to the [Progress bar guidelines](https://system.design.orange.com/0c1af118d/p/080a7d-progress-bar/b/898b87) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -229,12 +237,12 @@ Please refer to the [Progress bar](https://system.design.orange.com/0c1af118d/p/ The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< 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. -Please refer to the [Progress bar](https://system.design.orange.com/0c1af118d/p/080a7d-progress-bar/b/898b87) guidelines on the Orange Design System website. +Please refer to the [Progress bar guidelines](https://system.design.orange.com/0c1af118d/p/080a7d-progress-bar/b/898b87) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md index 8b23575f0c..855a86a753 100644 --- a/site/content/docs/5.3/components/scrollspy.md +++ b/site/content/docs/5.3/components/scrollspy.md @@ -10,7 +10,7 @@ toc: true ## How it works -Scrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Scrollspy is best used in conjunction with a Boosted [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page. Here's how it works. +Scrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Scrollspy is best used in conjunction with a [Nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page. Here's how it works. - To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `` or a custom element with a set `height` and `overflow-y: scroll`. @@ -27,7 +27,7 @@ Scrollspy toggles the `.active` class on anchor (``) elements when the elemen {{< design-callout-alert >}} This navbar version of the Scrollspy component is incompatible with Orange Design System. -Refer to [Orange navbar]({{< docsref "/components/orange-navbar" >}}) and [Nav & tabs]({{< docsref "/components/navs-tabs" >}}). +Refer to the [Orange navbar component]({{< docsref "/components/orange-navbar" >}}) and [Nav & tabs component]({{< docsref "/components/navs-tabs" >}}). {{< /design-callout-alert >}} Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well. diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md index dcf8714825..2896858c0b 100644 --- a/site/content/docs/5.3/components/spinners.md +++ b/site/content/docs/5.3/components/spinners.md @@ -43,10 +43,10 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This component contains some spinners that should not be used on Orange sites. +These variants contain some spinners that should not be used on Orange sites. **Colored spinners** are incompatible with Orange Design System. {{< /design-callout-alert >}} @@ -74,10 +74,10 @@ This component contains some spinners that should not be used on Orange sites. If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This component contains some spinners that should not be used on Orange sites. +These variants contain some spinners that should not be used on Orange sites. **Growing spinner** and its examples are incompatible with Orange Design System. {{< /design-callout-alert >}} @@ -173,10 +173,10 @@ Add `.spinner-border-sm` or `.spinner-border-lg` to make a smaller spinner that {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This component contains some spinners that should not be used on Orange sites. +These variants contain some spinners that should not be used on Orange sites. **Growing spinner** and its examples are incompatible with Orange Design System. {{< /design-callout-alert >}} @@ -214,10 +214,10 @@ Use spinners within buttons to indicate an action is currently processing or tak {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This component contains some spinners that should not be used on Orange sites. +These variants contain some spinners that should not be used on Orange sites. **Growing spinner** and its examples are incompatible with Orange Design System. {{< /design-callout-alert >}} diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index eb49f6f19e..58f1143dc5 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -68,12 +68,12 @@ Hover over the links below to see tooltips: You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} This **customized** variant should not be used because it does not respect the Orange Design System specifications. More generally, customizing tooltip CSS might lead to mismatch the Orange Design System. -Please refer to the [Tooltip](https://system.design.orange.com/0c1af118d/p/932946-tooltip/b/417f3e) guidelines on the Orange Design System website. +Please refer to the [Tooltip guidelines](https://system.design.orange.com/0c1af118d/p/932946-tooltip/b/417f3e) on the Orange Design System website. {{< /design-callout-alert >}} {{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}} diff --git a/site/content/docs/5.3/content/reboot.md b/site/content/docs/5.3/content/reboot.md index d822da69aa..9d58070550 100644 --- a/site/content/docs/5.3/content/reboot.md +++ b/site/content/docs/5.3/content/reboot.md @@ -134,10 +134,10 @@ The `
` element has been simplified. Similar to browser defaults, `
`s are {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -These `
` 2nd, 3rd and 4th variants can not be used because they do not respect the Orange Design System specifications. For the 2nd variant, it is because of its color. For the 3rd variant, it is because of its opacity. For the 4th variant, it is because of its height and its opacity. +These `
` 2nd, 3rd and 4th variants should not be used because they do not respect the Orange Design System specifications. For the 2nd variant, it is because of its color. For the 3rd variant, it is because of its opacity. For the 4th variant, it is because of its height and its opacity. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index b980940d0e..6e1ffcbcbf 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -16,7 +16,7 @@ Using the most basic table markup, here's how `.table`-based tables look in Boos {{< design-callout-alert info >}} In order to get the row height recommended by Orange Design System, please use the `.table-sm` class in addition to `.table`. -You can refer to [small tables]({{< docsref "/content/tables#small-tables" >}}) paragraph. +You can refer to the [small tables paragraph]({{< docsref "/content/tables#small-tables" >}}). {{< /design-callout-alert >}} {{< table class="table" simplified="false" caption="Boosted tables basic look" >}} @@ -40,7 +40,7 @@ Darker tables are allowed contextually. Add `data-bs-theme="dark"` to the `.tabl {{< /callout >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These colored tables should not be used because they do not respect the [Orange Design System]({{< param ods.web >}}) specifications as they are inherited from Bootstrap. @@ -127,7 +127,7 @@ Use .table-striped-columns to add zebra-striping to any table column. {{< table class="table table-striped-columns" caption="Boosted striped columns table" >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These colored tables should not be used because they do not respect the [Orange Design System]({{< param ods.web >}}) specifications as they are inherited from Bootstrap. @@ -151,7 +151,7 @@ Add `.table-hover` to enable a hover state on table rows within a ``. {{< table class="table table-hover" caption="Boosted hoverable table" >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These colored tables should not be used because they do not respect the [Orange Design System]({{< param ods.web >}}) specifications as they are inherited from Bootstrap. @@ -167,7 +167,7 @@ These hoverable rows can also be combined with the striped rows variant: {{< table class="table table-striped table-hover" caption="Boosted hoverable striped table" >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These colored tables should not be used because they do not respect the [Orange Design System]({{< param ods.web >}}) specifications as they are inherited from Bootstrap. @@ -238,7 +238,7 @@ Highlight a table row or cell by adding a `.table-active` class. ```
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These colored tables should not be used because they do not respect the [Orange Design System]({{< param ods.web >}}) specifications as they are inherited from Bootstrap. @@ -329,7 +329,7 @@ To display basic tables, Orange Design System recommends using these compact tab {{< table class="table table-sm" caption="Boosted small table" >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These colored tables should not be used because they do not respect the [Orange Design System]({{< param ods.web >}}) specifications as they are inherited from Bootstrap. @@ -449,10 +449,10 @@ Table cells of `` are always vertical aligned to the bottom. Table cells Border styles, active styles, and table variants are not inherited by nested tables.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This component variant should not be used because it does not respect the Orange Design System specifications. It is not recommended for usability reasons. +This variant should not be used because it does not respect the Orange Design System specifications. It is not recommended for usability reasons. {{< /design-callout-alert >}}
diff --git a/site/content/docs/5.3/customize/color-palette.md b/site/content/docs/5.3/customize/color-palette.md index d8d73bbaa2..2daf70a7da 100644 --- a/site/content/docs/5.3/customize/color-palette.md +++ b/site/content/docs/5.3/customize/color-palette.md @@ -52,7 +52,7 @@ Bootstrap defines a color palette on its own. We worked on a mapping between Ora {{< design-callout-alert >}} Some of the colors below do not belong to the Orange Design System specifications. -Please refer to our Boosted [color palette](#palette) section and to the [Color](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) guidelines on the Orange Design System website. +Please refer to our [color palette section](#palette) and to the [Color guidelines](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) on the Orange Design System website. {{< /design-callout-alert >}} {{< callout warning >}} diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html index 3ffc1cf513..2dad581bc5 100644 --- a/site/content/docs/5.3/examples/download-app/index.html +++ b/site/content/docs/5.3/examples/download-app/index.html @@ -97,7 +97,7 @@

Implementing mobile designs into code

A trusted source for developers

-

From documentation, though repositories, to a showcase mobile application, the Orange Design System provides the elements for developers to implement experiences on mobile iOS and Android operating systems, by integrating brand foundations, design standards, societal and environmental commitments.

+

From documentation, though repositories, to a showcase mobile application, Orange Design System provides the elements for developers to implement experiences on mobile iOS and Android operating systems, by integrating brand foundations, design standards, societal and environmental commitments.

@@ -115,7 +115,7 @@

A showcase mobile applicati -

The place for mobile designers and developers to experiment the elements of the Orange Design System

+

The place for mobile designers and developers to experiment the elements of Orange Design System

diff --git a/site/content/docs/5.3/extend/icons.md b/site/content/docs/5.3/extend/icons.md index 20a5b45a6c..2de6176709 100644 --- a/site/content/docs/5.3/extend/icons.md +++ b/site/content/docs/5.3/extend/icons.md @@ -50,7 +50,7 @@ All icons can be retrieved easily in any of these formats in the Solaris icons f This technique is the preferred choice for flexibility, performance and accessibility. Using the [Solaris icons finder]({{< param icons >}}), you can generate an SVG sprite—a single SVG file containing all your icons—and insert an icon through the `` element. -This is similar to an `` element, but with the power of `currentColor` for easy theming: see in this example how some icons inherit their color from the parent's light or dark theme, whereas some others get their color from [text Orange's colors utilities]({{< docsref "/utilities/colors#oranges-colors" >}}) or local style. +This is similar to an `` element, but with the power of `currentColor` for easy theming: see in this example how some icons inherit their color from the parent's light or dark theme, whereas some others get their color from [text Orange's colors utilities]({{< docsref "/utilities/colors#colors" >}}) or local style. {{< example >}}

diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index fb1c2484ee..bf79c3f89c 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -250,6 +250,15 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th ### Checkbox toggle buttons +

+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These **checkbox toggle button** variants should not be used because they do not respect the Orange Design System specifications. Indeed, from the Orange Design System point of view a checkbox should always look like a checkbox component. + +Instead, consider using our [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 >}} @@ -268,6 +277,7 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th {{< callout info >}} Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]({{< docsref "/components/buttons#button-plugin" >}}). 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 the button plugin 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 >}} +
### Radio toggle buttons diff --git a/site/content/docs/5.3/forms/form-control.md b/site/content/docs/5.3/forms/form-control.md index b222cfff36..92824cd269 100644 --- a/site/content/docs/5.3/forms/form-control.md +++ b/site/content/docs/5.3/forms/form-control.md @@ -27,11 +27,26 @@ Form controls are styled with a mix of Sass and CSS variables, allowing them to Set heights using classes like `.form-control-lg` and `.form-control-sm`. +{{< example >}} + + +{{< /example >}} + +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +The last small variant with a `.form-control-sm` class should not be used because it does not respect the Orange Design System specifications. + +Please refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) and to the [Pages form examples](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}} {{< /example >}} +
## Form text @@ -53,6 +68,15 @@ Form text below inputs can be styled with `.form-text`. If a block-level element Inline text can use any typical inline HTML element (be it a ``, ``, or something else) with nothing more than the `.form-text` class. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This variant with an **horizontal layout** (i.e. labels not above the input fields) should not be used because it does not respect the Orange Design System specifications. + +Please refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) and to the [Pages form examples](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -68,6 +92,7 @@ Inline text can use any typical inline HTML element (be it a ``, ``
{{< /example >}} +
## Disabled @@ -92,34 +117,59 @@ If you want to have `` elements in your form styled as plain tex {{< example >}}
- -
+ +
- -
+ +
{{< /example >}} +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants with an **horizontal layout** (i.e. labels not above the input fields) should not be used because they do not respect the Orange Design System specifications. + +Please refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) and to the [Pages form examples](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) on the Orange Design System website. +{{< /design-callout-alert >}} + +{{< example >}} +
+ +
+ +
+
+
+ +
+ +
+
+{{< /example >}} + {{< example >}}
- - + +
- - + +
{{< /example >}} +
## File input @@ -136,16 +186,29 @@ If you want to have `` elements in your form styled as plain tex
-
- - -
{{< /example >}} +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This small variant should not be used because it does not respect the Orange Design System specifications. + +Please refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) and to the [Pages form examples](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) on the Orange Design System website. +{{< /design-callout-alert >}} + +{{< example >}} +
+ + +
+{{< /example >}} +
+ ## Color Set the `type="color"` and add `.form-control-color` to the ``. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers. diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md index 03567b69f6..cfb67a510e 100644 --- a/site/content/docs/5.3/forms/input-group.md +++ b/site/content/docs/5.3/forms/input-group.md @@ -13,12 +13,12 @@ toc: true Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `
{{< /example >}} +

## Column sizing As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-7`. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants with an **horizontal layout** (i.e. labels not above the input fields) should not be used because they do not respect the Orange Design System specifications. + +Please refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) and the [Pages form examples](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -212,11 +241,21 @@ As shown in the previous examples, our grid system allows you to place any numbe
{{< /example >}} +
## Auto-sizing The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants with an **horizontal layout** (i.e. labels not above the input fields) should not be used because they do not respect the Orange Design System specifications. + +Please refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) and the [Pages form examples](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -290,18 +329,19 @@ You can then remix that once again with size-specific column classes.
{{< /example >}} +
## Inline forms Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-check` align properly.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This form variant should not be used because it does not respect the Orange Design System specifications. +This variant should not be used because it does not respect the Orange Design System specifications. -Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website. +Please refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) and to the [Pages form examples](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/forms/select.md b/site/content/docs/5.3/forms/select.md index 8d77b618d8..ed1ac0deae 100644 --- a/site/content/docs/5.3/forms/select.md +++ b/site/content/docs/5.3/forms/select.md @@ -32,7 +32,18 @@ You may also choose from small and large custom selects to match our similarly s +{{< /example >}} + +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This small variant should not be used because it does not respect the Orange Design System specifications. +Please refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) on the Orange Design System website. +{{< /design-callout-alert >}} + +{{< example >}} {{< /example >}} +
The `multiple` attribute is also supported: diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md index e8a81764c6..2286c1c94f 100644 --- a/site/content/docs/5.3/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -114,6 +114,15 @@ Not interested in custom validation feedback messages or writing JavaScript to c While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This variant, **with browser default validation feedback messages**, should not be used because it does not respect the Orange Design System specifications. + +Instead, please refer to our [Custom styles section](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1614/files). You can also refer to the [Forms guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) and to the [Pages form examples](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -158,6 +167,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
{{< /example >}} +
## Server-side diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md index ad2882705f..7ab4d6fda9 100644 --- a/site/content/docs/5.3/getting-started/introduction.md +++ b/site/content/docs/5.3/getting-started/introduction.md @@ -15,9 +15,9 @@ toc: true As Boosted is based on Bootstrap, you'll find in Boosted **all** the Bootstrap's components and their variants, but with an Orange branded look. -Among those inherited components and variants, some exist in the Orange Design System and fully respect its design specifications and some don't. Those ones should not be used in your projects to ensure a consistent user experience throughout our Orange web services. +Among those inherited components and variants, some exist in Orange Design System and fully respect its design specifications and some don't. Those ones should not be used in your projects to ensure a consistent user experience throughout our Orange web services. -As for maintainability reasons we have to keep them in this documentation, we tagged them under a `
` with red incompatibility design callouts. They inform you of what should not be used from an Orange design point of view. They suggest, when available, a replacement solution and/or a link to the Orange Design System website to see other possibilities. +As for maintainability reasons we have to keep them in this documentation, we tagged them under a `
` with red incompatibility design callouts. They inform you of what should not be used from an Orange design point of view. They suggest, when available, a replacement solution and/or a link to the Orange Design System website to see other possibilities. We tried to hide them as much as possible while keeping the variants in our documentation. Thanks for taking this information into account. Design incompatibility callouts message example: @@ -25,7 +25,7 @@ Design incompatibility callouts message example: {{< 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" >}}) component. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on on the Orange Design System website. +From the Orange Design System point of view, checkboxes should be represented like in our [Checks component]({{< docsref "/forms/checks-radios" >}}). You can also refer to the [Checkbox guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) on on the Orange Design System website. {{< /design-callout-alert >}} In the same spirit, some blue recommendation design callouts will inform you of specific Orange Design System recommendations. diff --git a/site/content/docs/5.3/guidelines/_index.md b/site/content/docs/5.3/guidelines/_index.md index 38b0631fff..524694bdf3 100644 --- a/site/content/docs/5.3/guidelines/_index.md +++ b/site/content/docs/5.3/guidelines/_index.md @@ -9,7 +9,7 @@ aliases:
-

Other platforms in the Orange Design System

+

Other platforms in Orange Design System

{{< design-guidelines-cards.inline >}} {{ range (index $.Site.Data "design-guidelines") -}} diff --git a/site/content/docs/5.3/helpers/color-background.md b/site/content/docs/5.3/helpers/color-background.md index fb8fa05e75..848e88dce2 100644 --- a/site/content/docs/5.3/helpers/color-background.md +++ b/site/content/docs/5.3/helpers/color-background.md @@ -32,6 +32,13 @@ Color and background helpers combine the power of our [`.text-*` utilities]({{< ## With components +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants should not be used because they do not respect the Orange Design System specifications. +{{< /design-callout-alert >}} + Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}): {{< example >}} @@ -55,3 +62,4 @@ Or on [cards]({{< docsref "/components/card#background-and-color" >}}):
{{< /example >}} +
diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md index a697270a9d..890aea822b 100644 --- a/site/content/docs/5.3/helpers/colored-links.md +++ b/site/content/docs/5.3/helpers/colored-links.md @@ -13,12 +13,12 @@ toc: true You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} The colors combinations below do not belong to the Orange Design System specifications. -Please refer to our Boosted [links]({{< docsref "/content/typography#links" >}}) section and to the [Text links in body copy](https://system.design.orange.com/0c1af118d/p/38f221-typography/t/56933e) guidelines on the Orange Design System website. +Please refer to our [links section]({{< docsref "/content/typography#links" >}}) and to the [Text links in body copy guidelines](https://system.design.orange.com/0c1af118d/p/38f221-typography/t/56933e) on the Orange Design System website. {{< /design-callout-alert >}} {{< callout info >}} @@ -48,12 +48,12 @@ Please refer to our Boosted [links]({{< docsref "/content/typography#links" >}}) Colored links can also be modified by [our link utilities]({{< docsref "/utilities/link/" >}}).
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} The colors combinations below do not belong to the Orange Design System specifications. -Please refer to our Boosted [links]({{< docsref "/content/typography#links" >}}) section and to the [Text links in body copy](https://system.design.orange.com/0c1af118d/p/38f221-typography/t/56933e) guidelines on the Orange Design System website. +Please refer to our [links section]({{< docsref "/content/typography#links" >}}) and to the [Text links in body copy guidelines](https://system.design.orange.com/0c1af118d/p/38f221-typography/t/56933e) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md index 91bb079526..7fae362c3d 100644 --- a/site/content/docs/5.3/helpers/focus-ring.md +++ b/site/content/docs/5.3/helpers/focus-ring.md @@ -17,10 +17,10 @@ The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This helper should not be used because the rendering provided in the following examples does not exist in the Orange Design System specifications. +This helper should not be used because the rendering provided in the following examples does not respect the Orange Design System specifications. {{< /design-callout-alert >}} {{< example >}} @@ -39,10 +39,10 @@ Modify the styling of a focus ring with our CSS variables, Sass variables, utili Modify the `--bs-focus-ring-*` CSS variables as needed to change the default appearance.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This helper should not be used because the rendering provided in the following examples does not exist in the Orange Design System specifications. +This helper should not be used because the rendering provided in the following examples does not respect the Orange Design System specifications. {{< /design-callout-alert >}} {{< example >}} @@ -75,10 +75,10 @@ Customize the focus ring Sass variables to modify all usage of the focus ring st In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color-theme#theming" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This helper should not be used because the rendering provided in the following examples does not exist in the Orange Design System specifications. +This helper should not be used because the rendering provided in the following examples does not respect the Orange Design System specifications. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md index 4b6b1f5eb1..21237f1568 100644 --- a/site/content/docs/5.3/helpers/icon-link.md +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -33,10 +33,10 @@ When icons are purely decorative, they should be hidden from assistive technolog Take a regular `` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This helper should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -59,10 +59,10 @@ This helper should be used carefully because the rendering provided in the follo Add `.icon-link-hover` to move the icon to the right on hover.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This helper should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -82,10 +82,10 @@ Modify the styling of an icon link with our link CSS variables, Sass variables, Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This helper should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. {{< /design-callout-alert >}} Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: @@ -118,10 +118,10 @@ Customize the icon link Sass variables to modify all icon link styles across you Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This helper should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. +This helper should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications. But still, this helper could help in some cases to build specific ues cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md index bf2237f280..c4717dd876 100644 --- a/site/content/docs/5.3/helpers/stacks.md +++ b/site/content/docs/5.3/helpers/stacks.md @@ -75,6 +75,13 @@ Use `.vstack` to stack buttons and other elements: Create an inline form with `.hstack`: +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This variant with an **horizontal layout** (i.e. labels not above the input fields) should not be used because it does not respect the Orange Design System specifications. +{{< /design-callout-alert >}} + {{< example >}}
@@ -84,6 +91,7 @@ Create an inline form with `.hstack`:
{{< /example >}} +
## CSS diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index c49d33dd34..5888ce236b 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -16,6 +16,12 @@ toc: true - **Colors** - Warning The dark mode red color hexadecimal value has been updated from `#f66` to `#ff4d4d` after a change in the design specifications to enhance the contrast for a better accessibility. This modification should be transparent for you except if you were using an hardcoded hexadecimal value directly in your websites. +### Docs + +- Certain variants of the components and renderings have been omitted from the documentation to help you clearly understand what is available for use, thereby simplifying the connection between [Orange Design System]({{< param ods.web >}}) and the Boosted documentation. + + Although these variants can still be found under the "See Bootstrap examples that are incompatible with Orange Design System" section, be aware that using them may violate the Orange Design System guidelines. It is advisable to avoid these variants whenever possible. + ### CSS and Sass variables -
@@ -934,7 +940,7 @@ Color mode mechanism coming from Bootstrap is available from Boosted v5.3.0. How - Warning We slightly changed the values for `.lh-sm`, `.lh-base` and `.lh-lg` to provide some more usable values. Please check that it doesn't break your design. Otherwise, it could still be reverted by setting the value directly in `_utilities.scss`. -- Breaking We restored all Bootstrap [text color utilities]({{< docsref "/utilities/colors" >}}) and removed automatic corresponding backgrounds. Please note that you must now check for sufficient contrast yourself when using text color utilities. Guidance on this has been added in [Orange's color utilities]({{< docsref "/utilities/colors#oranges-colors" >}}). +- Breaking We restored all Bootstrap [text color utilities]({{< docsref "/utilities/colors" >}}) and removed automatic corresponding backgrounds. Please note that you must now check for sufficient contrast yourself when using text color utilities. Guidance on this has been added in [Orange's color utilities]({{< docsref "/utilities/colors#colors" >}}). ### Examples diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md index 1d32434704..8bdde6fb2e 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -46,7 +46,7 @@ Supporting background utilities are generated from our [supporting colors]({{< d {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} Bootstrap-specific background color utilities should not be used because they are not part of the [Orange Design System]({{< param ods.web >}}) as they are inherited from Bootstrap. @@ -94,6 +94,13 @@ We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CS To change that opacity, override `--bs-bg-opacity` via custom styles or inline styles. +
+See Bootstrap examples that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +Some of the colors combinations below do not belong to the Orange Design System specifications, and do not meet accessibility standards. +{{< /design-callout-alert >}} + {{< example >}}
This is default success background
This is 50% opacity success background
@@ -108,6 +115,7 @@ Or, choose from any of the `.bg-opacity` utilities:
This is 25% opacity success background
This is 10% opacity success background
{{< /example >}} +
## CSS diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md index f8b4247633..8888312441 100644 --- a/site/content/docs/5.3/utilities/borders.md +++ b/site/content/docs/5.3/utilities/borders.md @@ -68,7 +68,7 @@ Here is a list of these extra classes: Or modify the default `border-color` of a component:
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These border color variants are just **examples illustrating the use of this color utility**. They should not be used because they do not respect the Orange Design System specifications. @@ -118,7 +118,7 @@ To change that opacity, override `--bs-border-opacity` via custom styles or inli {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These border color variants **with opacity** should not be used because they do not respect the Orange Design System specifications. @@ -149,7 +149,7 @@ Or, choose from any of the `.border-opacity` utilities: {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} The three last border utilities with **a width larger than 2px** should not be used because they do not respect the Orange Design System specifications. @@ -175,7 +175,7 @@ Add classes to an element to easily round its corners. {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These border variants with **a radius CSS class different than `.rounded-circle` and `.rounded-pill`** should not be used because they do not respect the Orange Design System specifications. @@ -203,7 +203,7 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These border variants with **a size CSS class different than `.rounded-0`** should not be used because they do not respect the Orange Design System specifications. diff --git a/site/content/docs/5.3/utilities/colors.md b/site/content/docs/5.3/utilities/colors.md index eda3d479a9..87b39a7fab 100644 --- a/site/content/docs/5.3/utilities/colors.md +++ b/site/content/docs/5.3/utilities/colors.md @@ -69,12 +69,12 @@ The following colors are meant to be used with icons. {{< /example >}}
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} Some of the colors combinations below do not belong to the Orange Design System specifications, and do not meet accessibility standards. -Please refer to our [Orange's colors]({{< docsref "/utilities/colors#oranges-colors" >}}) section underneath and to the [Color](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) guidelines on the Orange Design System website. +Please refer to our [Orange's colors section]({{< docsref "/utilities/colors#colors" >}}) above and to the [Color guidelines](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -131,12 +131,12 @@ When used in dark mode, `--bs-primary-rgb` will use the value of (with the value To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} Some of the colors combinations below do not belong to the Orange Design System specifications, and do not meet accessibility standards. -Please refer to our [Orange's colors]({{< docsref "/utilities/colors#oranges-colors" >}}) section underneath and to the [Color](https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/17b829) guidelines on the Orange Design System website. +Please refer to our [Orange's colors section]({{< docsref "/utilities/colors#colors" >}}) above. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/utilities/link.md b/site/content/docs/5.3/utilities/link.md index 4846e6026b..db4766fde4 100644 --- a/site/content/docs/5.3/utilities/link.md +++ b/site/content/docs/5.3/utilities/link.md @@ -15,10 +15,10 @@ added: Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can lead to links with [*insufficient* contrast]({{< docsref "getting-started/accessibility#color-contrast" >}}).
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -Link utilities should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific ues cases or other reusable components. +Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -47,10 +47,10 @@ You can even change the opacity level on hover. Change the underline's color independent of the link text color.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -Link utilities should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific ues cases or other reusable components. +Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -67,10 +67,10 @@ Link utilities should be used carefully because the rendering provided in the fo Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -Link utilities should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific ues cases or other reusable components. +Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -86,10 +86,10 @@ Link utilities should be used carefully because the rendering provided in the fo Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -Link utilities should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific ues cases or other reusable components. +Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -107,10 +107,10 @@ Link utilities should be used carefully because the rendering provided in the fo Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -Link utilities should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific ues cases or other reusable components. +Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -125,10 +125,10 @@ Link utilities should be used carefully because the rendering provided in the fo [Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
-See Bootstrap example(s) that are incompatible with Orange Design System. +See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} -Link utilities should be used carefully because the rendering provided in the following examples does not exist in the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific ues cases or other reusable components. +Link utilities should be used carefully because the rendering provided in the following examples does not respect the Orange Design System specifications and do not always meet accessibility standards. But still, these utilities could help in some cases to build specific use cases or other reusable components. {{< /design-callout-alert >}}