From 4fcd51da842ae65af61e8b6fbf91778a6d1f4cd9 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 8 Jan 2024 11:29:38 +0100 Subject: [PATCH] Proposal --- site/content/docs/5.3/components/badge.md | 20 +++++ .../content/docs/5.3/components/breadcrumb.md | 4 + .../docs/5.3/components/button-group.md | 32 ++++++++ site/content/docs/5.3/components/buttons.md | 24 ++++-- site/content/docs/5.3/components/carousel.md | 4 + site/content/docs/5.3/components/dropdowns.md | 28 +++++++ .../content/docs/5.3/components/list-group.md | 17 ++-- site/content/docs/5.3/components/modal.md | 8 ++ site/content/docs/5.3/components/navs-tabs.md | 42 ++++++---- site/content/docs/5.3/components/popovers.md | 4 + site/content/docs/5.3/components/progress.md | 50 ++++++++---- site/content/docs/5.3/components/scrollspy.md | 8 +- site/content/docs/5.3/components/spinners.md | 25 +++++- site/content/docs/5.3/components/tooltips.md | 8 +- site/content/docs/5.3/content/reboot.md | 8 ++ site/content/docs/5.3/content/tables.md | 8 +- site/content/docs/5.3/forms/checks-radios.md | 12 ++- site/content/docs/5.3/forms/form-control.md | 72 +++++++++++------ site/content/docs/5.3/forms/input-group.md | 80 ++++++++++++++++--- site/content/docs/5.3/forms/layout.md | 20 +++++ site/content/docs/5.3/forms/select.md | 13 +++ site/content/docs/5.3/forms/validation.md | 4 + .../docs/5.3/getting-started/introduction.md | 2 +- site/content/docs/5.3/utilities/borders.md | 42 +++++++++- 24 files changed, 442 insertions(+), 93 deletions(-) diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md index 580669a16f..c9fae18bd7 100644 --- a/site/content/docs/5.3/components/badge.md +++ b/site/content/docs/5.3/components/badge.md @@ -14,6 +14,9 @@ Badges scale to match the size of the immediate parent element by using relative ### Headings +
+See Bootstrap's variants +
{{< design-callout-alert >}} This component variant should not be used because it does not exist in the Orange Design System specifications. {{< /design-callout-alert >}} @@ -26,11 +29,15 @@ This component variant should not be used because it does not exist in the Orang
Example heading New
Example heading New
{{< /example >}} +
### Buttons Badges can be used as part of links or buttons to provide a counter. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This component should not be used because it does not exist in the Orange Design System specifications. {{< /design-callout-alert >}} @@ -44,6 +51,7 @@ This component should not be used because it does not exist in the Orange Design Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. +
### Positioned @@ -51,6 +59,9 @@ Unless the context is clear (as with the "Notifications" example, where it is un Use utilities to modify a `.badge` and position it in the corner of a link with an icon. +
+See Bootstrap's variants that can be useful in some contexts +
{{< design-callout-alert >}} This component variant should be used **only** inside a header component. @@ -73,11 +84,15 @@ Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examp +
## Background colors {{< added-in "5.2.0" >}} +
+See Bootstrap's variants +
{{< design-callout-alert >}} These component variants should not be used because they do not exist in the Orange Design System specifications. {{< /design-callout-alert >}} @@ -94,11 +109,15 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} +
## Pill badges Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This component should not be used because it does not exist in the Orange Design System specifications. @@ -111,6 +130,7 @@ Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}). {{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}} +
## CSS diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md index 3ef0ecdbf1..66bba05040 100644 --- a/site/content/docs/5.3/components/breadcrumb.md +++ b/site/content/docs/5.3/components/breadcrumb.md @@ -75,6 +75,9 @@ $breadcrumb-divider: url("data:image/svg+xml, +Other variants from Bootstrap +
{{< design-callout-alert >}} This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications. @@ -94,6 +97,7 @@ Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/ ```scss $breadcrumb-divider: none; ``` + ## Dark variant diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md index e05b2e7619..35ef621b4e 100644 --- a/site/content/docs/5.3/components/button-group.md +++ b/site/content/docs/5.3/components/button-group.md @@ -36,6 +36,9 @@ These classes can also be added to groups of links, as an alternative to the [`. ## Mixed styles +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant **using and mixing colored button backgrounds** should not be used because it does not respect the Orange Design System specifications. In button groups, you should only use the button variant that uses `.btn .btn-outline-secondary`. @@ -49,6 +52,7 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" {{< /example >}} +
@@ -56,6 +60,9 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group. +
+See Bootstrap's variants +
{{< design-callout-alert >}} These **checkbox** and **radio button** variants should not be used because they do not respect the Orange Design System specifications. @@ -87,11 +94,15 @@ From the Orange Design System point of view, checkboxes and radio buttons should {{< /example >}} +
## Button toolbar Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. {{< /design-callout-alert >}} @@ -144,11 +155,23 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th {{< /example >}} +
## Sizing Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups. +{{< example >}} +
+ + + +
+{{< /example >}} + +
+Other variants from Bootstrap +
{{< design-callout-alert >}} The **first size variant (50px height) and the last one (30px height)** should not be used because they do not respect the Orange Design System specifications. @@ -174,11 +197,15 @@ Please refer to the [Toggle buttons](https://system.design.orange.com/0c1af118d/ {{< /example >}} +
## Nesting Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. {{< /design-callout-alert >}} @@ -200,11 +227,15 @@ This variant should not be used because it does not respect the Orange Design Sy {{< /example >}} +
## Vertical variation Make a set of buttons appear vertically stacked rather than horizontally. +
+See Bootstrap's variants +
{{< design-callout-alert >}} These 3 vertical variants should not be used because they do not respect the Orange Design System specifications. {{< /design-callout-alert >}} @@ -271,3 +302,4 @@ These 3 vertical variants should not be used because they do not respect the Ora {{< /example >}} +
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index 08d5cc05a2..056db27bf5 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -231,6 +231,9 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes You can even roll your own custom sizing with CSS variables: +
+Other variants from Bootstrap +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -243,6 +246,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb Custom button {{< /example >}} +
## Disabled state @@ -280,6 +284,9 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t Create responsive stacks of full-width, "block buttons" like those in Boosted 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors. +
+Other variants from Bootstrap +
{{< design-callout-alert >}} These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications. @@ -292,6 +299,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb {{< /example >}} +
Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change. @@ -324,12 +332,6 @@ Additional utilities can be used to adjust the alignment of buttons when horizon The button plugin allows you to create simple on/off toggle buttons. -{{< design-callout-alert >}} -These variants with only **one toggle button instead of a group of buttons** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, [Toggle buttons](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) should not be used alone. - -Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components. -{{< /design-callout-alert >}} - {{< callout info >}} Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button. {{< /callout >}} @@ -338,6 +340,15 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies. +
+See Bootstrap's variants +
+{{< design-callout-alert >}} +These variants with only **one toggle button instead of a group of buttons** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, [Toggle buttons](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) should not be used alone. + +Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components. +{{< /design-callout-alert >}} + {{< example >}} @@ -349,6 +360,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre Active toggle link Disabled toggle link {{< /example >}} +
### Methods diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md index 379a9b58fd..abfb9aabde 100644 --- a/site/content/docs/5.3/components/carousel.md +++ b/site/content/docs/5.3/components/carousel.md @@ -155,6 +155,9 @@ Pausing the carousel by hovering one slide should not be used. You can add captions to your slides with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`. +
+See Bootstrap's variants +
{{< design-callout-alert >}} **Captions** should not be used because they do not respect the Orange Design System specifications. @@ -201,6 +204,7 @@ Please refer to the [Carousel navigation](https://system.design.orange.com/0c1af {{< /example >}} +
### Crossfade diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index 05406e547b..212e81795f 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -335,6 +335,9 @@ Button dropdowns work with buttons of all sizes, including default and split dro ``` +
+Other variants from Bootstrap +
{{< design-callout-alert >}} This small variant should not be used because it does not respect the Orange Design System specifications. @@ -390,6 +393,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b ``` +
## Dark dropdowns @@ -407,6 +411,9 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -425,6 +432,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b {{< /example >}} +
### Dropup @@ -489,6 +497,9 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. Make the dropup menu centered above the toggle with `.dropup-center` on the parent element. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -507,6 +518,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b {{< /example >}} +
### Dropend @@ -852,6 +864,9 @@ Separate groups of related menu items with a divider. Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -868,11 +883,15 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b

{{< /example >}} +
### Forms Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{< docsref "/utilities/spacing" >}}) to give it the negative space you require. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it does not respect the Orange Design System specifications. @@ -932,11 +951,15 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b {{< /example >}} +
## Dropdown options Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown. +
+See Bootstrap's variants +
{{< 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. @@ -970,11 +993,15 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b {{< /example >}} +
### Auto close behavior By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown. +
+See Bootstrap's variants +
{{< design-callout-alert >}} The 3 last auto close behavior variants should not be used because featuring a single selection, they do no respect the Orange Design System specifications. They should be used only with multiple selections. {{< /design-callout-alert >}} @@ -1024,6 +1051,7 @@ The 3 last auto close behavior variants should not be used because featuring a s {{< /example >}} +
## CSS diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index b8672c8191..ebdd6b56a2 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -146,6 +146,9 @@ Add `.list-group-horizontal` to change the layout of list group items from verti **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant is just an **example illustrating the use of the layout utility**. It should not be used because it does not respect the Orange Design System specifications. {{< /design-callout-alert >}} @@ -161,6 +164,7 @@ This variant is just an **example illustrating the use of the layout utility**. {{- end -}} {{< /list-group.inline >}} {{< /example >}} +
## Variants @@ -171,11 +175,6 @@ This variant is just an **example illustrating the use of the layout utility**. Use contextual classes to style list items with a stateful icon. -{{< design-callout-alert >}} -This variant should not be used as is because its rendering does not respect the Orange Design System specifications. -However, please note that the HTML markup remains valid and will be used as is when the [issue #1452](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/1452) will be closed. -{{< /design-callout-alert >}} - {{< example >}} {{< /example >}} + ## Dark variant diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index 46620d1a78..b7960c719e 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -537,6 +537,9 @@ Below is a live demo followed by example HTML and JavaScript. For more informati Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals. +
+See Bootstrap's variants +
{{< 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. @@ -579,6 +582,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 {{< /example >}} +
### Change animation @@ -692,6 +696,9 @@ Another override is the option to pop up a modal that covers the user viewport, | `.modal-fullscreen-xxl-down` | `1440px` | {{< /bs-table >}} +
+See Bootstrap's variants +
{{< design-callout-alert >}} These **full screen** variants should not be used because they do not respect the Orange Design System specifications. Indeed, modals should always be placed in the center of a page and not be full screen. @@ -815,6 +822,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3 +
## CSS diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index 74ccc61660..90db7a72d9 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -24,6 +24,9 @@ The base `.nav` component does not include any `.active` state. The following ex To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set. {{< /callout >}} +
+See Bootstrap's variants +
{{< design-callout-alert >}} This component variant should not be used because it does not respect the Orange Design System specifications. @@ -57,6 +60,7 @@ Classes are used throughout, so your markup can be super flexible. Use `
## Available styles @@ -66,6 +70,9 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/utilities/flex#justify-content" >}}). By default, navs are left-aligned, but you can easily change them to center or right-aligned. +
+See Bootstrap's variants +
{{< design-callout-alert >}} These **centered** and **right aligned** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be left aligned. @@ -109,11 +116,15 @@ Right-aligned with `.justify-content-end`: {{< /example >}} +
### Vertical Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`). +
+See Bootstrap's variants +
{{< design-callout-alert >}} These **vertical** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be displayed horizontally. @@ -147,6 +158,7 @@ As always, vertical navigation is possible without `
### Tabs @@ -173,6 +185,9 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb Take that same HTML, but use `.nav-pills` instead: +
+See Bootstrap's variants +
{{< design-callout-alert >}} This variant should not be used because it is a button component in the Orange Design System specifications. {{< /design-callout-alert >}} @@ -193,6 +208,7 @@ This variant should not be used because it is a button component in the Orange D {{< /example >}} +
### Underline @@ -276,14 +292,8 @@ Nav tabs light is nested in a tab for adding a level of depth in information org Force your `.nav`'s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width. -{{< design-callout-alert >}} -These **link** variants, which are just **examples illustrating the use of the fill and justify utilities**, should not be used because they do not respect the Orange Design System specifications. - -Instead, please consider using our Boosted tabs [Underline]({{< docsref "/components/navs-tabs#underline" >}}) variant. You can also refer to [Tabs](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) guidelines on the Orange Design System website. -{{< /design-callout-alert >}} - {{< example >}} -