From fbffa84796a4968753cfc06f6ee088c98af4bdf8 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 16 Jul 2024 17:07:34 +0200 Subject: [PATCH] Cherry-pick callouts from #1614 --- site/assets/scss/_content.scss | 7 +- site/content/docs/5.3/components/badge.md | 8 +- .../content/docs/5.3/components/breadcrumb.md | 2 +- .../docs/5.3/components/button-group.md | 28 +++- site/content/docs/5.3/components/buttons.md | 10 +- site/content/docs/5.3/components/card.md | 139 ++++++++++++++++-- site/content/docs/5.3/components/carousel.md | 2 +- site/content/docs/5.3/components/dropdowns.md | 39 ++++- site/content/docs/5.3/components/modal.md | 4 +- site/content/docs/5.3/components/navbar.md | 2 +- site/content/docs/5.3/components/navs-tabs.md | 50 +++++-- site/content/docs/5.3/components/popovers.md | 10 ++ site/content/docs/5.3/components/progress.md | 16 +- site/content/docs/5.3/components/scrollspy.md | 2 +- site/content/docs/5.3/components/tooltips.md | 2 +- site/content/docs/5.3/content/tables.md | 2 +- .../docs/5.3/customize/color-palette.md | 2 +- 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 | 66 +++++++-- site/content/docs/5.3/forms/layout.md | 42 +++++- 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 | 4 +- .../docs/5.3/helpers/color-background.md | 8 + .../content/docs/5.3/helpers/colored-links.md | 4 +- site/content/docs/5.3/helpers/stacks.md | 8 + site/content/docs/5.3/migration.md | 6 +- site/content/docs/5.3/utilities/background.md | 12 ++ site/content/docs/5.3/utilities/colors.md | 4 +- site/content/docs/5.3/utilities/link.md | 12 +- 32 files changed, 516 insertions(+), 96 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..3baae88c66 100644 --- a/site/content/docs/5.3/components/badge.md +++ b/site/content/docs/5.3/components/badge.md @@ -18,7 +18,7 @@ Badges scale to match the size of the immediate parent element by using relative See Bootstrap example(s) 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. +This variant should not be used because it does not respect the Orange Design System specifications. {{< /design-callout-alert >}} {{< example >}} @@ -62,7 +62,7 @@ Use utilities to modify a `.badge` and position it in the corner of a link with {{< design-callout-alert >}} This component variant should be used **only** inside a header component. -Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >}}). You can also refer to the [Global headers](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) guidelines on the Orange Design System website. +Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >}}). You can also refer to the [Global headers guidelines](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -86,7 +86,7 @@ Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" > {{< added-in "5.2.0" >}} -Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer. +Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}` utilities]({{< docsref "/utilities/background" >}}) for styling, which you still may use if you prefer.
See Bootstrap example(s) that are incompatible with Orange Design System. @@ -119,7 +119,7 @@ Consider using our [Boosted Tags]({{< docsref "/components/tags" >}}) instead. {{< design-callout-alert >}} This component should not be used because it does not exist in the Orange Design System specifications. -Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}). You can also refer to the [Tags](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) guidelines on the Orange Design System website. +Instead, consider using our [Tags component]({{< docsref "/components/tags" >}}). You can also refer to the [Tags guidelines](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md index 95b475f61a..524b668ba3 100644 --- a/site/content/docs/5.3/components/breadcrumb.md +++ b/site/content/docs/5.3/components/breadcrumb.md @@ -79,7 +79,7 @@ $breadcrumb-divider: url("data:image/svg+xml,}} This variant **using and mixing colored button backgrounds** should not be used because it does not respect the Orange Design System specifications. In button groups, you should only use the button variant that uses `.btn .btn-outline-secondary`. -Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" >}}) secondary variant component. You can also refer to the [Buttons: standard](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) guidelines on the Orange Design System website. +Please refer to our Boosted [Buttons secondary variant component]({{< docsref "/components/buttons#examples" >}}). You can also refer to the [Buttons: standard guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -74,7 +74,7 @@ Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/chec {{< design-callout-alert >}} This **checkbox** variant should not be used because it does not respect the Orange Design System specifications. -From the Orange Design System point of view, checkboxes should be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) component. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on the Orange Design System website. +From the Orange Design System point of view, checkboxes should be represented like in our Boosted [Checks component]({{< docsref "/forms/checks-radios#checks" >}}). You can also refer to the [Checkbox guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -101,8 +101,8 @@ From the Orange Design System point of view, checkboxes should be represented li
{{< design-callout-alert >}} -This variant should not be used because it does not respect the Orange Design System specifications. +These variants should not be used because they do not respect the Orange Design System specifications. {{< /design-callout-alert >}} {{< example >}} @@ -169,6 +169,23 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups. +{{< example >}} +
+ + + +
+{{< /example >}} + +
+See Bootstrap example(s) 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](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) guidelines on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -188,6 +205,7 @@ Instead of applying button sizing classes to every button in a group, just add `
{{< /example >}} +
## Nesting diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index 0c93843963..fd86942cdb 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -39,7 +39,7 @@ Boosted includes several button variants, each serving its own semantic purpose, {{< design-callout-alert >}} Warning, info, light and dark variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap. -Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website. +Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -198,7 +198,7 @@ In need of a button, but not the hefty background colors they bring? Replace the {{< design-callout-alert >}} The only variant of outline buttons that should be used is the `.btn-outline-secondary` one. The other variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap. -Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website. +Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -236,7 +236,7 @@ You can even roll your own custom sizing with CSS variables: {{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. -Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website. +Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -289,7 +289,7 @@ Create responsive stacks of full-width, "block buttons" like those in Boosted 4 {{< design-callout-alert >}} These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications. -Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website. +Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website. {{< /design-callout-alert >}} {{< example >}} @@ -345,7 +345,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre {{< design-callout-alert >}} These variants with only **one toggle button** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, a toggle button should not be used alone. -Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components. +Instead, consider using our Boosted [Checks component]({{< docsref "/forms/checks-radios#checks" >}}), [Radios component]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons component]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}). {{< /design-callout-alert >}} {{< example >}} diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index 1a8594ed7b..7b21a1ff45 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -12,6 +12,18 @@ 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 >}} +
+ +**On the Orange Design System website**, you'll find the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) component guidelines describing how Orange designers want cards to be represented and used, mainly as static containers. +

+**In this Boosted cards component description page**, you'll find card variants that can be used as cards, but as some variants that are meant to be used as adjustable containers. + +{{< /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 +195,14 @@ Card headers can be styled by adding `.card-header` to `` elements. {{< /example >}} +
+See Bootstrap example(s) 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 +218,7 @@ Card headers can be styled by adding `.card-header` to `` elements.
{{< /example >}} +
## Sizing @@ -270,6 +291,25 @@ 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" >}}). +{{< example >}} +
+
+
Special title treatment
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
+
+{{< /example >}} + +
+See Bootstrap example(s) 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 +335,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 example(s) 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 +395,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
{{< /example >}} +
## Images @@ -377,6 +428,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 example(s) 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 +451,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 +484,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 example(s) 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 +527,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 example(s) 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 example(s) 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 +592,7 @@ You can also change the borders on the card header and footer as needed, and eve
Footer
{{< /example >}} +
## Card layout @@ -491,6 +602,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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These variants **with no spacing between cards** should not be used because they do 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 +676,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..94eb2d5b30 100644 --- a/site/content/docs/5.3/components/carousel.md +++ b/site/content/docs/5.3/components/carousel.md @@ -161,7 +161,7 @@ You can add captions to your slides with the `.carousel-caption` element within {{< 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..1f13373283 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -65,7 +65,7 @@ While ` + +
+
+{{< /example >}} + +
+See Bootstrap example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This variant with a `data-bs-offset` attribute having values different than `"0,0"` should not be used because it does not respect the Orange Design System specifications. + +Please refer to the [Dropdown guidelines](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
@@ -984,6 +1008,7 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
{{< /example >}} +
### Auto close behavior diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index da87b65843..c77c788be7 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -543,7 +543,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target {{< design-callout-alert >}} This toggle behavior between multiple modals should not be used because it does not respect the Orange Design System specifications. It is not recommended for usability reasons. -Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3-modals/b/774d3d) guidelines on the Orange Design System website. +Please refer to the [Modals guidelines](https://system.design.orange.com/0c1af118d/p/16d9f3-modals/b/774d3d) on the Orange Design System website. {{< /design-callout-alert >}} @@ -691,7 +691,7 @@ Another override is the option to pop up a modal that covers the user viewport, {{< 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. -Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3-modals/b/774d3d) guidelines on the Orange Design System website. +Please refer to the [Modals guidelines](https://system.design.orange.com/0c1af118d/p/16d9f3-modals/b/774d3d) on the Orange Design System website. {{< /design-callout-alert >}} {{< bs-table >}} diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md index 337afbeee6..c9acf0d498 100644 --- a/site/content/docs/5.3/components/navbar.md +++ b/site/content/docs/5.3/components/navbar.md @@ -11,7 +11,7 @@ toc: true {{< design-callout-alert >}} This component explains the basic behavior, structure and concepts of navbars from a Bootstrap point of view. Some discrepancies exist with Boosted due to a different HTML structure. Moreover, Orange navbars have the same rendering in light and dark mode. -In order to build an Orange navbar please refer to [Orange navbar]({{< docsref "/components/orange-navbar" >}}). +In order to build an Orange navbar please refer to [Orange navbar component]({{< docsref "/components/orange-navbar" >}}). {{< /design-callout-alert >}} ## How it works diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index 230f34a9fb..28acaebf53 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -60,6 +60,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 example(s) that are incompatible with Orange Design System. +
+{{< 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 variant]({{< docsref "/components/navs-tabs#underline" >}}). You can also refer to [Tabs guidelines](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) on the Orange Design System website. +{{< /design-callout-alert >}} + Centered with `.justify-content-center`: {{< example >}} @@ -97,11 +106,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 example(s) that are incompatible with Orange Design System. +
+{{< 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 variant]({{< docsref "/components/navs-tabs#underline" >}}). You can also refer to [Tabs guidelines](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) on the Orange Design System website. +{{< /design-callout-alert >}} + {{< example >}}
  • @@ -129,6 +148,7 @@ As always, vertical navigation is possible without `
### Tabs @@ -159,7 +179,7 @@ Take that same HTML, but use `.nav-pills` instead: See Bootstrap example(s) that are incompatible with Orange Design System.
{{< design-callout-alert >}} -This variant should not be used as is because it should use a ` @@ -602,6 +624,15 @@ The tabs plugin also works with pills. ``` +
+See Bootstrap example(s) that are incompatible with Orange Design System. +
+{{< 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 variant]({{< docsref "/components/navs-tabs#underline" >}}). You can also refer to [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/popovers.md b/site/content/docs/5.3/components/popovers.md index ef75f3afb8..ebf2a6dda9 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 example(s) 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 the 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..48f15c860a 100644 --- a/site/content/docs/5.3/components/progress.md +++ b/site/content/docs/5.3/components/progress.md @@ -70,7 +70,7 @@ You only set a `height` value on the `.progress` container, so if you change tha {{< 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 >}} @@ -126,7 +126,7 @@ Use background utility classes to change the appearance of individual progress b {{< 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 example(s) 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,6 +198,7 @@ You can include multiple progress components inside a container with `.progress-
{{< /example >}} +
## Striped @@ -202,7 +210,7 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra {{< 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 >}} @@ -234,7 +242,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro {{< design-callout-alert >}} This 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 >}} diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md index 8b23575f0c..285767362c 100644 --- a/site/content/docs/5.3/components/scrollspy.md +++ b/site/content/docs/5.3/components/scrollspy.md @@ -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 [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/tooltips.md b/site/content/docs/5.3/components/tooltips.md index eb49f6f19e..ff3328809b 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -73,7 +73,7 @@ You can customize the appearance of tooltips using [CSS variables](#variables). {{< 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/tables.md b/site/content/docs/5.3/content/tables.md index b980940d0e..1afc92e7a3 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 [small tables paragraph]({{< docsref "/content/tables#small-tables" >}}). {{< /design-callout-alert >}} {{< table class="table" simplified="false" caption="Boosted tables basic look" >}} diff --git a/site/content/docs/5.3/customize/color-palette.md b/site/content/docs/5.3/customize/color-palette.md index d8d73bbaa2..87dd6e20d3 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 Boosted [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/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..a700848fb2 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 example(s) 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 Boosted [Checks component]({{< docsref "/forms/checks-radios#checks" >}}), [Radios component]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons component]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}). +{{< /design-callout-alert >}} + {{< example >}} @@ -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..b70ff359c8 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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +The last variant with a `.form-control-sm` class and a height of 30px can 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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This form version, 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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This form 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 >}} +
+ +
+ +
+
+
+ +
+ +
+
+{{< /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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +The **Small file input example** below with a height of 30px can 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..a93e5f7a96 100644 --- a/site/content/docs/5.3/forms/input-group.md +++ b/site/content/docs/5.3/forms/input-group.md @@ -18,7 +18,7 @@ Place one add-on or button on either side of an input. You may also place one on {{< design-callout-alert >}} These form variants should not be used because they do 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 >}} @@ -77,6 +77,15 @@ Add the relative form sizing classes to the `.input-group` itself and contents w **Sizing on the individual input group elements isn't supported.** +
+See Bootstrap example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These 3 form variants, with an **horizontal layout** (i.e. labels not above the input fields), and the **small** one because of its height, 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 >}}
Small @@ -93,6 +102,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
{{< /example >}} +
## Checkboxes and radios @@ -124,7 +134,7 @@ While multiple ``s are supported visually, validation styles are only ava {{< design-callout-alert >}} This form 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 >}} @@ -146,7 +156,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< design-callout-alert >}} This form 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 >}} @@ -172,7 +182,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b- {{< design-callout-alert >}} These variants should not be used because they do not respect the Orange Design System specifications. They are not recommended for usability reasons. -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 >}} @@ -234,7 +244,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b- {{< design-callout-alert >}} This **third** form 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 >}} @@ -324,6 +334,27 @@ Input groups include support for custom selects and custom file inputs. Browser ### Custom select +{{< example >}} +
+ + +
+{{< /example >}} + +
+See Bootstrap example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These **first 3** form variants should not be used because they do not respect the Orange Design System specifications. The **first 2** form variants should have a vertical layout (i.e., having their label above the input field). The **third** form variant should be split in 2 elements (a button and a dropdown) which should be presented in a more logical way : the dropdown first and then the button. + +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 >}}
@@ -365,9 +396,26 @@ Input groups include support for custom selects and custom file inputs. Browser
{{< /example >}} +
### Custom file input +{{< example >}} +
+ + +
+{{< /example >}} + +
+See Bootstrap example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These form variants 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 >}}
@@ -379,16 +427,12 @@ Input groups include support for custom selects and custom file inputs. Browser
-
+
- -
- - -
{{< /example >}} +
## CSS diff --git a/site/content/docs/5.3/forms/layout.md b/site/content/docs/5.3/forms/layout.md index 5d6eb407a6..26894bad61 100644 --- a/site/content/docs/5.3/forms/layout.md +++ b/site/content/docs/5.3/forms/layout.md @@ -119,6 +119,15 @@ Create horizontal forms with the grid by adding the `.row` class to form groups At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline. +
+See Bootstrap example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This form 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 our Boosted [Forms example]({{< docsref "/examples/form" >}}). 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 >}}
@@ -169,11 +178,21 @@ At times, you maybe need to use margin or padding utilities to create that perfe {{< /example >}} +
### Horizontal form label sizing Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `
{{< /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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These form 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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +These form 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,6 +329,7 @@ You can then remix that once again with size-specific column classes.
{{< /example >}} +
## Inline forms @@ -301,7 +341,7 @@ Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding {{< design-callout-alert >}} This form 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..4acf979c7d 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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This size variant, with a **height of 30px**, 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..6844f57199 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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This form 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 Boosted [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..7296891985 100644 --- a/site/content/docs/5.3/getting-started/introduction.md +++ b/site/content/docs/5.3/getting-started/introduction.md @@ -17,7 +17,7 @@ As Boosted is based on Bootstrap, you'll find in Boosted **all** the Bootstrap's 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. -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 Boosted [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/helpers/color-background.md b/site/content/docs/5.3/helpers/color-background.md index fb8fa05e75..6113909e0c 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 example(s) 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. +{{< /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..9098cc212a 100644 --- a/site/content/docs/5.3/helpers/colored-links.md +++ b/site/content/docs/5.3/helpers/colored-links.md @@ -18,7 +18,7 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class {{< 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 Boosted [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 >}} @@ -53,7 +53,7 @@ Colored links can also be modified by [our link utilities]({{< docsref "/utiliti {{< 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 Boosted [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/stacks.md b/site/content/docs/5.3/helpers/stacks.md index bf2237f280..8e4296f146 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 example(s) that are incompatible with Orange Design System. +
+{{< design-callout-alert >}} +This form 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..a3bff4e7ee 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -16,6 +16,10 @@ 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 + +- Some component variants have been hidden from the documentation in order for you to better see the variants you should use and ease the link between [Orange Design System]({{< param ods.web >}}) and the Boosted documentation. These variants are still available under the details of `See Bootstrap example(s) that are incompatible with Orange Design System.`, but know that using them might be a transgression of the Orange Design System rules and try to avoid them as much as possible. + ### CSS and Sass variables -
@@ -934,7 +938,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..2ead30e807 100644 --- a/site/content/docs/5.3/utilities/background.md +++ b/site/content/docs/5.3/utilities/background.md @@ -94,6 +94,17 @@ 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. +{{< example >}} +
This is default success background
+{{< /example >}} + +
+See Bootstrap example(s) 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 +119,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/colors.md b/site/content/docs/5.3/utilities/colors.md index eda3d479a9..b10bb5f2cf 100644 --- a/site/content/docs/5.3/utilities/colors.md +++ b/site/content/docs/5.3/utilities/colors.md @@ -74,7 +74,7 @@ The following colors are meant to be used with icons. {{< 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 >}} @@ -136,7 +136,7 @@ To change that opacity, override `--bs-text-opacity` via custom styles or inline {{< 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..5c3e585f4e 100644 --- a/site/content/docs/5.3/utilities/link.md +++ b/site/content/docs/5.3/utilities/link.md @@ -18,7 +18,7 @@ Change the alpha opacity of the link `rgba()` color value with utilities. Please See Bootstrap example(s) 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 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 use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -50,7 +50,7 @@ Change the underline's color independent of the link text color. See Bootstrap example(s) 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 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 use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -70,7 +70,7 @@ Change the underline's distance from your text. Offset is set in `em` units to a See Bootstrap example(s) 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 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 use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -89,7 +89,7 @@ Change the underline's opacity. Requires adding `.link-underline` to first set a See Bootstrap example(s) 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 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 use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -110,7 +110,7 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under See Bootstrap example(s) 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 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 use cases or other reusable components. {{< /design-callout-alert >}} {{< example >}} @@ -128,7 +128,7 @@ Link utilities should be used carefully because the rendering provided in the fo See Bootstrap example(s) 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 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 use cases or other reusable components. {{< /design-callout-alert >}}