Skip to content

Commit

Permalink
Proposal
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Jan 8, 2024
1 parent 5632d11 commit 4fcd51d
Show file tree
Hide file tree
Showing 24 changed files with 442 additions and 93 deletions.
20 changes: 20 additions & 0 deletions site/content/docs/5.3/components/badge.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ Badges scale to match the size of the immediate parent element by using relative

### Headings

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
This component variant should not be used because it does not exist in the Orange Design System specifications.
{{< /design-callout-alert >}}
Expand All @@ -26,11 +29,15 @@ This component variant should not be used because it does not exist in the Orang
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
{{< /example >}}
</details>

### Buttons

Badges can be used as part of links or buttons to provide a counter.

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
This component should not be used because it does not exist in the Orange Design System specifications.
{{< /design-callout-alert >}}
Expand All @@ -44,13 +51,17 @@ 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.
</details>

### Positioned

<!-- Boosted mod: replace the button with a link with an icon because notifiers are only authorized with icons -->

Use utilities to modify a `.badge` and position it in the corner of a link with an icon.

<details class="mb-2">
<summary>See Bootstrap's variants that can be useful in some contexts</summary>
<br>
{{< design-callout-alert >}}
This component variant should be used **only** inside a header component.

Expand All @@ -73,11 +84,15 @@ Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examp
<!-- The example without a count is dropped because not existing in the UI kit -->

<!-- End mod -->
</details>

## Background colors

{{< added-in "5.2.0" >}}

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
These component variants should not be used because they do not exist in the Orange Design System specifications.
{{< /design-callout-alert >}}
Expand All @@ -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 >}}
</details>

## Pill badges

Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
This component should not be used because it does not exist in the Orange Design System specifications.

Expand All @@ -111,6 +130,7 @@ Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}).
<span class="badge rounded-pill text-bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
</details>

## CSS

Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.3/components/breadcrumb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,9 @@ $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/

You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.

<details class="mb-2">
<summary>Other variants from Bootstrap</summary>
<br>
{{< design-callout-alert >}}
This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications.

Expand All @@ -94,6 +97,7 @@ Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/
```scss
$breadcrumb-divider: none;
```
</details>

<!-- Boosted mod: Dark variant -->
## Dark variant
Expand Down
32 changes: 32 additions & 0 deletions site/content/docs/5.3/components/button-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ These classes can also be added to groups of links, as an alternative to the [`.

## Mixed styles

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< 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`.

Expand All @@ -49,13 +52,17 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples"
<button type="button" class="btn btn-success">Right</button>
</div>
{{< /example >}}
</details>

<!-- Boosted mod: no outline styles -->

## Checkbox and radio button groups

Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
These **checkbox** and **radio button** variants should not be used because they do not respect the Orange Design System specifications.

Expand Down Expand Up @@ -87,11 +94,15 @@ From the Orange Design System point of view, checkboxes and radio buttons should
<label class="btn btn-toggle" for="btnradio3">Radio 3</label>
</div>
{{< /example >}}
</details>

## 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.

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
This variant should not be used because it does not respect the Orange Design System specifications.
{{< /design-callout-alert >}}
Expand Down Expand Up @@ -144,11 +155,23 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
</div>
</div>
{{< /example >}}
</details>

## 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 >}}
<div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
{{< /example >}}

<details class="mb-2">
<summary>Other variants from Bootstrap</summary>
<br>
{{< 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.

Expand All @@ -174,11 +197,15 @@ Please refer to the [Toggle buttons](https://system.design.orange.com/0c1af118d/
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
{{< /example >}}
</details>

## Nesting

Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
This variant should not be used because it does not respect the Orange Design System specifications.
{{< /design-callout-alert >}}
Expand All @@ -200,11 +227,15 @@ This variant should not be used because it does not respect the Orange Design Sy
</div>
</div>
{{< /example >}}
</details>

## Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
These 3 vertical variants should not be used because they do not respect the Orange Design System specifications.
{{< /design-callout-alert >}}
Expand Down Expand Up @@ -271,3 +302,4 @@ These 3 vertical variants should not be used because they do not respect the Ora
<label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>
{{< /example >}}
</details>
24 changes: 18 additions & 6 deletions site/content/docs/5.3/components/buttons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<details class="mb-2">
<summary>Other variants from Bootstrap</summary>
<br>
{{< design-callout-alert >}}
This variant should not be used because it does not respect the Orange Design System specifications.

Expand All @@ -243,6 +246,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb
Custom button
</button>
{{< /example >}}
</details>

## Disabled state

Expand Down Expand Up @@ -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.

<details class="mb-2">
<summary>Other variants from Bootstrap</summary>
<br>
{{< design-callout-alert >}}
These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications.

Expand All @@ -292,6 +299,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb
<button class="btn btn-primary" type="button">Button</button>
</div>
{{< /example >}}
</details>

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.

Expand Down Expand Up @@ -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 >}}
Expand All @@ -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.

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< 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 >}}
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
Expand All @@ -349,6 +360,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
{{< /example >}}
</details>

### Methods

Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.3/components/carousel.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

<details class="mb-2">
<summary>See Bootstrap's variants</summary>
<br>
{{< design-callout-alert >}}
**Captions** should not be used because they do not respect the Orange Design System specifications.

Expand Down Expand Up @@ -201,6 +204,7 @@ Please refer to the [Carousel navigation](https://system.design.orange.com/0c1af
</button>
</div>
{{< /example >}}
</details>

### Crossfade

Expand Down
Loading

0 comments on commit 4fcd51d

Please sign in to comment.