From b8a48d84931d99f47898016cf724b38831396da6 Mon Sep 17 00:00:00 2001 From: Isabelle Chanclou Date: Wed, 9 Nov 2022 15:10:30 +0100 Subject: [PATCH 01/61] Add design callout messages everywhere needed Signed-off-by: Isabelle Chanclou --- site/content/docs/5.2/components/badge.md | 24 ++++++++++ .../content/docs/5.2/components/breadcrumb.md | 7 +++ .../docs/5.2/components/button-group.md | 31 +++++++++++++ site/content/docs/5.2/components/buttons.md | 13 ++++++ site/content/docs/5.2/components/carousel.md | 7 +++ site/content/docs/5.2/components/collapse.md | 5 ++ site/content/docs/5.2/components/dropdowns.md | 46 +++++++++++++++++++ .../content/docs/5.2/components/list-group.md | 30 ++++++++++++ site/content/docs/5.2/components/modal.md | 36 +++++++++++++++ site/content/docs/5.2/components/navs-tabs.md | 20 ++++++++ site/content/docs/5.2/components/progress.md | 42 +++++++++++++++++ site/content/docs/5.2/components/tooltips.md | 7 +++ site/content/docs/5.2/content/reboot.md | 5 ++ site/content/docs/5.2/forms/form-control.md | 5 ++ site/content/docs/5.2/forms/input-group.md | 42 +++++++++++++++++ site/content/docs/5.2/forms/layout.md | 35 ++++++++++++++ site/content/docs/5.2/forms/overview.md | 15 ++++++ site/content/docs/5.2/forms/select.md | 21 +++++++++ site/content/docs/5.2/forms/validation.md | 23 ++++++++++ .../docs/5.2/getting-started/introduction.md | 19 ++++++++ .../shortcodes/ods-incompatibility-alert.html | 2 +- 21 files changed, 434 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.2/components/badge.md b/site/content/docs/5.2/components/badge.md index be00735814..e31e8b9903 100644 --- a/site/content/docs/5.2/components/badge.md +++ b/site/content/docs/5.2/components/badge.md @@ -14,6 +14,11 @@ Badges scale to match the size of the immediate parent element by using relative ### Headings + +{{< ods-incompatibility-alert >}} +This component can not be used because it does not exist in the Orange Design System specifications. +{{< /ods-incompatibility-alert >}} + {{< example >}}

Example heading New

Example heading New

@@ -27,6 +32,11 @@ Badges scale to match the size of the immediate parent element by using relative Badges can be used as part of links or buttons to provide a counter. + +{{< ods-incompatibility-alert >}} +This component can not be used because it does not exist in the Orange Design System specifications. +{{< /ods-incompatibility-alert >}} + {{< example >}} @@ -54,6 +61,15 @@ These classes can also be added to groups of links, as an alternative to the [`. Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group. + +{{< ods-incompatibility-alert >}} +This checkbox variant can not be used because it does not respect the Orange Design System specifications. + +Instead use Boosted [Checks]({{< docsref "/forms/checks-radios" >}}) components. + +For the correct design, you can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) component on on the Orange Design System website. +{{< /ods-incompatibility-alert >}} + {{< example >}}
@@ -84,6 +100,11 @@ Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/chec Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. + +{{< ods-incompatibility-alert >}} +This variant can not be used because it does not respect the Orange Design System specifications. +{{< /ods-incompatibility-alert >}} + {{< example >}} {{< /example >}} + ## Opacity @@ -92,9 +96,6 @@ These border color variants are just **examples illustrating the use of this col Boosted `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes. -{{< design-callout-alert >}} -These border color variants **with opacity** should not be used because they do not respect the Orange Design System specifications. -{{< /design-callout-alert >}} ### How it works Consider our default `.border-success` utility. @@ -112,6 +113,13 @@ We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CS To change that opacity, override `--bs-border-opacity` via custom styles or inline styles. +
+See Bootstrap's variants +
+{{< design-callout-alert >}} +These border color variants **with opacity** should not be used because they do not respect the Orange Design System specifications. +{{< /design-callout-alert >}} + {{< example >}}
This is default success border
This is 50% opacity success border
@@ -126,9 +134,19 @@ Or, choose from any of the `.border-opacity` utilities:
This is 25% opacity success border
This is 10% opacity success border
{{< /example >}} +
## Width +{{< example class="bd-example-border-utils" >}} + + + +{{< /example >}} + +
+Other variants from Bootstrap +
{{< 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. {{< /design-callout-alert >}} @@ -141,11 +159,20 @@ The three last border utilities with **a width larger than 2px** should not be u {{< /example >}} +
## Radius Add classes to an element to easily round its corners. +{{< example >}} +{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}} +{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}} +{{< /example >}} + +
+Other variants from Bootstrap +
{{< 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. {{< /design-callout-alert >}} @@ -159,6 +186,7 @@ These border variants with **a radius CSS class different than `.rounded-circle` {{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}} {{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}} {{< /example >}} +
### Sizes @@ -166,6 +194,13 @@ These border variants with **a radius CSS class different than `.rounded-circle` Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`, and can be configured by modifying the utilities API. +{{< example class="bd-example-rounded-utils" >}} +{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" color="#999" >}} +{{< /example >}} + +
+See Bootstrap's variants +
{{< 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. {{< /design-callout-alert >}} @@ -186,6 +221,7 @@ These border variants with **a size CSS class different than `.rounded-0`** shou {{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" color="#999" >}} {{< /example >}} +
## Dividers