Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode: Dropdown variant #2323

Merged
merged 4 commits into from
Nov 13, 2023
Merged

Dark mode: Dropdown variant #2323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d65a1a
Change dropdown btn variant
louismaximepiton Oct 18, 2023
311ac8e
Drop Boosted mod comments from custom-color-mode
julien-deramond Nov 13, 2023
84b94db
.
julien-deramond Nov 13, 2023
7668643
.
julien-deramond Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions js/tests/visual/dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-outline-secondary">Dropup split</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<button type="button" class="btn btn-secondary">Dropup split</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Dropup split</span>
</button>
<ul class="dropdown-menu">
Expand Down Expand Up @@ -104,8 +104,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>

<div class="col-sm-12 mt-4">
<div class="btn-group dropup">
<a href="#" class="btn btn-outline-secondary">Dropup split align end</a>
<button type="button" id="dropdown-page-subheader-button-3" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="btn btn-secondary">Dropup split align end</a>
<button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
Expand All @@ -126,8 +126,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>

<div class="col-sm-12 mt-4">
<div class="btn-group dropend">
<a href="#" class="btn btn-outline-secondary">Dropend split</a>
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="btn btn-secondary">Dropend split</a>
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu">
Expand All @@ -148,8 +148,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
<!-- dropstart -->
<div class="btn-group dropstart">
<a href="#" class="btn btn-outline-secondary">Dropstart split</a>
<button type="button" id="dropdown-page-subheader-button-5" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="btn btn-secondary">Dropstart split</a>
<button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu">
Expand All @@ -174,8 +174,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
<div class="row">
<div class="col-sm-3 mt-4">
<div class="btn-group dropdown">
<button type="button" class="btn btn-outline-secondary">Dropdown reference</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<button type="button" class="btn btn-secondary">Dropdown reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Dropdown split</span>
</button>
<ul class="dropdown-menu">
Expand Down
30 changes: 26 additions & 4 deletions scss/_button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,31 @@
> .btn-group:not(:first-child) > .btn {
@include border-start-radius(0);
}

// Boosted mod
> [class*="btn-outline-"]:not(:last-of-type) {
border-right-width: 0;

&::after {
display: inline-block;
width: var(--#{$prefix}btn-border-width);
height: 100%;
margin: 0;
content: "";
border: 0;
}

&:focus {
&[data-focus-visible-added] {
border-right-width: var(--#{$prefix}btn-border-width);

&::after {
display: none;
}
}
}
}
// End mod
}

// Sizing
Expand All @@ -83,7 +108,6 @@
min-width: add($dropdown-padding-x * 2, calc(#{$caret-width} * 2)); // Boosted mod
padding-right: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
padding-left: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
border-color: currentcolor; // Boosted mod

// Boosted mod
.btn-group:not(.dropstart) &,
Expand All @@ -101,14 +125,12 @@
content: "";
background:
linear-gradient(
currentcolor $btn-border-width,
transparent $btn-border-width,
transparent map-get($spacers, 1),
currentcolor map-get($spacers, 1),
currentcolor subtract(100%, map-get($spacers, 1)),
transparent subtract(100%, map-get($spacers, 1)),
transparent subtract(100%, $btn-border-width),
currentcolor subtract(100%, $btn-border-width)
transparent subtract(100%, $btn-border-width)
);
}
}
Expand Down
7 changes: 7 additions & 0 deletions scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,13 @@
// End mod


// Boosted mod: dropdown button
.btn-dropdown {
@include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-translucent), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
}
// End mod


//
// Link buttons
//
Expand Down
7 changes: 0 additions & 7 deletions scss/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,6 @@
white-space: nowrap;
// Generate the caret automatically
@include caret();

// Boosted mod
// TODO: should probably be a `.btn-*` class
&:not(.dropdown-toggle-split) {
@include button-variant($dropdown-bg, $dropdown-border-color, $dropdown-color, $dropdown-bg, $dropdown-border-color, $dropdown-color, $dropdown-bg, $dropdown-color, $dropdown-color, $dropdown-bg, var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
}
// End mod
}

// The dropdown menu
Expand Down
15 changes: 8 additions & 7 deletions site/assets/scss/_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@

// Boosted mod: no `.bd-summary-link`

// Boosted mod: some values have been changed in the following `custom-color-mode` and `.btn-dropdown` is used instead of `.btn-secondary`
// scss-docs-start custom-color-mode
[data-bs-theme="blue"] {
--bs-body-color: var(--bs-white);
Expand All @@ -109,21 +110,21 @@

.dropdown-menu {
--bs-dropdown-bg: #{mix($blue-500, $blue-600)};
--bs-dropdown-link-color: var(--bs-white); // Boosted mod
--bs-dropdown-link-color: var(--bs-white);
--bs-dropdown-link-active-bg: #{$blue-700};
--bs-dropdown-link-hover-color: var(--bs-white); // Boosted mod
--bs-dropdown-link-hover-bg: #{$blue-600}; // Boosted mod
--bs-dropdown-link-hover-color: var(--bs-white);
--bs-dropdown-link-hover-bg: #{$blue-600};
}

.btn-secondary {
--bs-btn-color: var(--bs-white); // Boosted mod
.btn-dropdown {
--bs-btn-color: var(--bs-white);
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
--bs-btn-border-color: #{rgba($white, .25)};
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
--bs-btn-hover-color: inherit; // Boosted mod
--bs-btn-hover-color: inherit;
--bs-btn-hover-border-color: #{rgba($white, .25)};
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
--bs-btn-active-color: inherit; // Boosted mod
--bs-btn-active-color: inherit;
--bs-btn-active-border-color: #{rgba($white, .5)};
--bs-btn-focus-border-color: #{rgba($white, .5)};
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
Expand Down
39 changes: 22 additions & 17 deletions site/content/docs/5.3/components/button-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ These classes can also be added to groups of links, as an alternative to the [`.
## Mixed styles

{{< 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-secondary`.
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.
{{< /design-callout-alert >}}
Expand Down Expand Up @@ -200,7 +200,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.

{{< design-callout-alert >}}
These 2 vertical variants should not be used because they do not respect the Orange Design System specifications.
These 3 vertical variants should not be used because they do not respect the Orange Design System specifications.
{{< /design-callout-alert >}}

{{< example >}}
Expand All @@ -214,42 +214,38 @@ These 2 vertical variants should not be used because they do not respect the Ora

{{< example >}}
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-outline-secondary">Button</button>
<button type="button" class="btn btn-outline-secondary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-secondary">Split button</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-outline-secondary">Split button</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group dropend" role="group">
<button type="button" class="btn btn-outline-secondary">Split button</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-outline-secondary">Split button</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
Expand All @@ -259,4 +255,13 @@ These 2 vertical variants should not be used because they do not respect the Ora
</div>
{{< /example >}}

<!-- Boosted mod: toggle buttons group don't support vertical variation -->
{{< example >}}
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
<label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>
{{< /example >}}
Loading