From b9c80faad34bed0a7c9335f265e0cf0852aa89d7 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 14 Jun 2024 12:01:01 +0200 Subject: [PATCH] fix(review) --- 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 | 10 +- site/content/docs/5.3/components/buttons.md | 10 +- site/content/docs/5.3/components/carousel.md | 2 +- site/content/docs/5.3/components/dropdowns.md | 16 +-- .../content/docs/5.3/components/list-group.md | 6 +- site/content/docs/5.3/components/modal.md | 4 +- site/content/docs/5.3/components/navs-tabs.md | 8 ++ site/content/docs/5.3/components/progress.md | 8 +- site/content/docs/5.3/components/scrollspy.md | 2 +- site/content/docs/5.3/components/spinners.md | 16 ++- site/content/docs/5.3/components/tooltips.md | 2 +- site/content/docs/5.3/content/reboot.md | 2 +- site/content/docs/5.3/content/tables.md | 50 ++++++-- .../docs/5.3/customize/color-palette.md | 2 +- site/content/docs/5.3/forms/input-group.md | 10 +- site/content/docs/5.3/forms/layout.md | 2 +- .../docs/5.3/getting-started/introduction.md | 2 +- .../content/docs/5.3/helpers/colored-links.md | 22 +++- site/content/docs/5.3/helpers/focus-ring.md | 28 ++++- site/content/docs/5.3/helpers/icon-link.md | 36 +++++- site/content/docs/5.3/utilities/background.md | 7 +- site/content/docs/5.3/utilities/borders.md | 10 +- site/content/docs/5.3/utilities/colors.md | 114 ++++++++++-------- site/content/docs/5.3/utilities/link.md | 52 +++++++- 27 files changed, 306 insertions(+), 132 deletions(-) diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index a65f92232e..d1b5b01f52 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -55,10 +55,11 @@ > details { padding: 5px 10px; // Static even on zoom border: transparent solid calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list - } - > [open] { - border-color: var(--bs-border-color); + // stylelint-disable-next-line selector-no-qualifying-type + &[open] { + border-color: var(--bs-border-color); + } } // End mod } diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md index 8b10a7d958..4598623e01 100644 --- a/site/content/docs/5.3/components/badge.md +++ b/site/content/docs/5.3/components/badge.md @@ -15,7 +15,7 @@ Badges scale to match the size of the immediate parent element by using relative ### Headings
-See Bootstrap's example +See Bootstrap example(s) 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. @@ -36,7 +36,7 @@ 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's example +See Bootstrap example(s) 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. @@ -89,7 +89,7 @@ Please refer to our **[Boosted Navbars]({{< docsref "/examples/navbars" >}})** e 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.
-See Bootstrap's examples +See Bootstrap example(s) 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. @@ -114,7 +114,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger Consider using our [Boosted Tags]({{< docsref "/components/tags" >}}) instead.
-See Bootstrap's examples +See Bootstrap example(s) 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. diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md index e7cc9447f2..54e644b12e 100644 --- a/site/content/docs/5.3/components/breadcrumb.md +++ b/site/content/docs/5.3/components/breadcrumb.md @@ -74,7 +74,7 @@ $breadcrumb-divider: url("data:image/svg+xml, +See Bootstrap example(s) 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`. @@ -69,7 +69,7 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.
-See Bootstrap's example +See Bootstrap example(s) 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. @@ -109,7 +109,7 @@ From the Orange Design System point of view, checkboxes should be represented li Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
-See Bootstrap's examples +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -194,7 +194,7 @@ Instead of applying button sizing classes to every button in a group, just add ` Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
-See Bootstrap's examples +See Bootstrap example(s) 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 +224,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's examples +See Bootstrap example(s) 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 d327bfb1a6..ad95567181 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -34,7 +34,7 @@ Boosted includes several button variants, each serving its own semantic purpose, {{< /example >}}
-Other variants from Bootstrap +See Bootstrap example(s) 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. @@ -193,7 +193,7 @@ In need of a button, but not the hefty background colors they bring? Replace the {{< /example >}}
-Other variants from Bootstrap +See Bootstrap example(s) 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. @@ -231,7 +231,7 @@ 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's example +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -284,7 +284,7 @@ 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's example +See Bootstrap example(s) 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. @@ -340,7 +340,7 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
-See Bootstrap's examples +See Bootstrap example(s) 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. diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md index 3a7736eb48..ead77643d6 100644 --- a/site/content/docs/5.3/components/carousel.md +++ b/site/content/docs/5.3/components/carousel.md @@ -156,7 +156,7 @@ Pausing the carousel by hovering one slide should not be used. You can add captions to your slides with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
-See Bootstrap's variant +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} **Captions** should not be used because they do not respect the Orange Design System specifications. diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index ca4984b1b4..73fdcb0003 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -60,7 +60,7 @@ While `
### Underline @@ -372,6 +376,9 @@ As a design recommendation, dropdowns are typically placed at the end of the nav ### Pills with dropdowns +
+See Bootstrap example(s) incompatible with Orange Design System +
{{< design-callout-alert >}} This variant should not be used because it should be a `
## CSS diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md index 7431b49c22..e456e2bce7 100644 --- a/site/content/docs/5.3/components/progress.md +++ b/site/content/docs/5.3/components/progress.md @@ -65,7 +65,7 @@ You only set a `height` value on the `.progress` container, so if you change tha {{< /example >}}
-Other variants from Bootstrap +See Bootstrap example(s) 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. @@ -121,7 +121,7 @@ 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's examples +See Bootstrap example(s) 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. @@ -197,7 +197,7 @@ You can include multiple progress components inside a container with `.progress- Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
-See Bootstrap's variants +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} These variants should not be used because they do not respect the Orange Design System specifications. @@ -229,7 +229,7 @@ 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's variant +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. diff --git a/site/content/docs/5.3/components/scrollspy.md b/site/content/docs/5.3/components/scrollspy.md index 5435b010ae..0437ba4d62 100644 --- a/site/content/docs/5.3/components/scrollspy.md +++ b/site/content/docs/5.3/components/scrollspy.md @@ -25,7 +25,7 @@ Scrollspy toggles the `.active` class on anchor (``) elements when the elemen ### Navbar
-See Bootstrap's example +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} This navbar version of the Scrollspy component is not compatible with the Orange Design System. diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md index 9ad1626d69..16d784cc85 100644 --- a/site/content/docs/5.3/components/spinners.md +++ b/site/content/docs/5.3/components/spinners.md @@ -43,8 +43,14 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c {{< /example >}}
-Other Bootstrap variants +See Bootstrap example(s) incompatible with Orange Design System
+{{< design-callout-alert >}} +This component contains some spinners that should not be used on Orange sites. + +**Colored spinners** are not compatible with the [Orange Design System]({{< param ods.web >}}). +{{< /design-callout-alert >}} + {{< example >}} {{< spinner.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -68,7 +74,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c 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's variants +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} This component contains some spinners that should not be used on Orange sites. @@ -86,7 +92,6 @@ Once again, this spinner is built with `currentColor`, so you can easily change {{< example >}} -{{< example >}} {{< spinner.inline >}} {{- range (index $.Site.Data "theme-colors") }}
@@ -169,7 +173,7 @@ Add `.spinner-border-sm` or `.spinner-border-lg` to make a smaller spinner that {{< /example >}}
-Other Bootstrap's variants +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} This component contains some spinners that should not be used on Orange sites. @@ -210,7 +214,7 @@ Use spinners within buttons to indicate an action is currently processing or tak {{< /example >}}
-Other Bootstrap's variants +See Bootstrap example(s) incompatible with Orange Design System
{{< design-callout-alert >}} This component contains some spinners that should not be used on Orange sites. diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index b8a51d81bc..4826f0f929 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -68,7 +68,7 @@ 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's example +See Bootstrap example(s) 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. diff --git a/site/content/docs/5.3/content/reboot.md b/site/content/docs/5.3/content/reboot.md index 7c4d4a8e95..cb8b73c0e1 100644 --- a/site/content/docs/5.3/content/reboot.md +++ b/site/content/docs/5.3/content/reboot.md @@ -134,7 +134,7 @@ The `
` element has been simplified. Similar to browser defaults, `
`s are {{< /example >}}
-Other Bootstrap's examples +See Bootstrap example(s) 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. diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index dd25d9c084..23ebeb2fea 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -40,8 +40,11 @@ Darker tables are allowed contextually. Add `data-bs-theme="dark"` to the `.tabl {{< /callout >}}
-See Bootstrap's colored variants +See Bootstrap example(s) 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. +{{< /design-callout-alert >}} Use contextual classes to color tables, table rows or individual cells. @@ -124,8 +127,14 @@ Use .table-striped-columns to add zebra-striping to any table column. {{< table class="table table-striped-columns" caption="Boosted striped columns table" >}}
-These classes can also be added to Bootstrap's table colored variants. +See Bootstrap example(s) 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. + +If you want dark tables, please consider using [contextual dark mode]({{< docsref "/customize/color-modes/#contextual-dark-mode-vs-dark-variants" >}}). +{{< /design-callout-alert >}} + {{< table class="table table-dark table-striped" caption="Boosted dark striped rows table" >}} {{< table class="table table-dark table-striped-columns" caption="Boosted dark striped columns table" >}} @@ -141,8 +150,15 @@ Add `.table-hover` to enable a hover state on table rows within a ``. {{< table class="table table-hover" caption="Boosted hoverable table" >}} -
-See it applied on another Bootstrap's variant +
+See Bootstrap example(s) 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. + +If you want dark tables, please consider using [contextual dark mode]({{< docsref "/customize/color-modes/#contextual-dark-mode-vs-dark-variants" >}}). +{{< /design-callout-alert >}} + {{< table class="table table-dark table-hover" caption="Boosted hoverable dark table" >}}
@@ -151,8 +167,14 @@ 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 it applied on another Bootstrap's variant +See Bootstrap example(s) 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. + +If you want dark tables, please consider using [contextual dark mode]({{< docsref "/customize/color-modes/#contextual-dark-mode-vs-dark-variants" >}}). +{{< /design-callout-alert >}} + {{< table class="table table-dark table-striped table-hover" caption="Boosted hoverable dark striped table" >}}
@@ -216,8 +238,14 @@ Highlight a table row or cell by adding a `.table-active` class. ```
-See it applied on another Bootstrap's variant +See Bootstrap example(s) 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. + +If you want dark tables, please consider using [contextual dark mode]({{< docsref "/customize/color-modes/#contextual-dark-mode-vs-dark-variants" >}}). +{{< /design-callout-alert >}} +
@@ -301,8 +329,14 @@ To display basic tables, Orange Design System recommends using these compact tab {{< table class="table table-sm" caption="Boosted small table" >}}
-See it applied on another Bootstrap's variant +See Bootstrap example(s) 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. + +If you want dark tables, please consider using [contextual dark mode]({{< docsref "/customize/color-modes/#contextual-dark-mode-vs-dark-variants" >}}). +{{< /design-callout-alert >}} + {{< table class="table table-dark table-sm" caption="Boosted dark small table" >}}
@@ -415,7 +449,7 @@ 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's example +See Bootstrap example(s) 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. diff --git a/site/content/docs/5.3/customize/color-palette.md b/site/content/docs/5.3/customize/color-palette.md index b5199dc17e..d8d73bbaa2 100644 --- a/site/content/docs/5.3/customize/color-palette.md +++ b/site/content/docs/5.3/customize/color-palette.md @@ -45,7 +45,7 @@ Please make sure that none of the [color theme variables]({{< docsref "/customiz Bootstrap defines a color palette on its own. We worked on a mapping between Orange Design System's colors and Bootstrap's ones in cases where users will use Bootstrap-based plugins or libraries so that, when used with Boosted CSS, provides an acceptable automatic rendering.
-See Bootstrap's palette +See Bootstrap palette incompatible with Orange Design System

All colors

diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md index d16dff7fac..2ca9ee0004 100644 --- a/site/content/docs/5.3/forms/input-group.md +++ b/site/content/docs/5.3/forms/input-group.md @@ -13,7 +13,7 @@ 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 `