Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8b4c16e

Browse files
louismaximepitonjulien-deramond
louismaximepiton
and
julien-deramond
committedDec 26, 2023
Dark mode: Dropdown variant (#2323)
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
1 parent 93190a3 commit 8b4c16e

File tree

11 files changed

+806
-167
lines changed

11 files changed

+806
-167
lines changed
 

‎js/tests/visual/dropdown.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
6868
</div>
6969
</div>
7070
<div class="btn-group dropup">
71-
<button type="button" class="btn btn-outline-secondary">Dropup split</button>
72-
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
71+
<button type="button" class="btn btn-secondary">Dropup split</button>
72+
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
7373
<span class="visually-hidden">Dropup split</span>
7474
</button>
7575
<ul class="dropdown-menu">
@@ -104,8 +104,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
104104

105105
<div class="col-sm-12 mt-4">
106106
<div class="btn-group dropup">
107-
<a href="#" class="btn btn-outline-secondary">Dropup split align end</a>
108-
<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">
107+
<a href="#" class="btn btn-secondary">Dropup split align end</a>
108+
<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">
109109
<span class="visually-hidden">Product actions</span>
110110
</button>
111111
<div class="dropdown-menu dropdown-menu-end">
@@ -126,8 +126,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
126126

127127
<div class="col-sm-12 mt-4">
128128
<div class="btn-group dropend">
129-
<a href="#" class="btn btn-outline-secondary">Dropend split</a>
130-
<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">
129+
<a href="#" class="btn btn-secondary">Dropend split</a>
130+
<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">
131131
<span class="visually-hidden">Product actions</span>
132132
</button>
133133
<div class="dropdown-menu">
@@ -148,8 +148,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
148148
</div>
149149
<!-- dropstart -->
150150
<div class="btn-group dropstart">
151-
<a href="#" class="btn btn-outline-secondary">Dropstart split</a>
152-
<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">
151+
<a href="#" class="btn btn-secondary">Dropstart split</a>
152+
<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">
153153
<span class="visually-hidden">Product actions</span>
154154
</button>
155155
<div class="dropdown-menu">
@@ -174,8 +174,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
174174
<div class="row">
175175
<div class="col-sm-3 mt-4">
176176
<div class="btn-group dropdown">
177-
<button type="button" class="btn btn-outline-secondary">Dropdown reference</button>
178-
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
177+
<button type="button" class="btn btn-secondary">Dropdown reference</button>
178+
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
179179
<span class="visually-hidden">Dropdown split</span>
180180
</button>
181181
<ul class="dropdown-menu">

‎scss/_button-group.scss

+26-4
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,31 @@
6464
> .btn-group:not(:first-child) > .btn {
6565
@include border-start-radius(0);
6666
}
67+
68+
// Boosted mod
69+
> [class*="btn-outline-"]:not(:last-of-type) {
70+
border-right-width: 0;
71+
72+
&::after {
73+
display: inline-block;
74+
width: var(--#{$prefix}btn-border-width);
75+
height: 100%;
76+
margin: 0;
77+
content: "";
78+
border: 0;
79+
}
80+
81+
&:focus {
82+
&[data-focus-visible-added] {
83+
border-right-width: var(--#{$prefix}btn-border-width);
84+
85+
&::after {
86+
display: none;
87+
}
88+
}
89+
}
90+
}
91+
// End mod
6792
}
6893

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

88112
// Boosted mod
89113
.btn-group:not(.dropstart) &,
@@ -101,14 +125,12 @@
101125
content: "";
102126
background:
103127
linear-gradient(
104-
currentcolor $btn-border-width,
105128
transparent $btn-border-width,
106129
transparent map-get($spacers, 1),
107130
currentcolor map-get($spacers, 1),
108131
currentcolor subtract(100%, map-get($spacers, 1)),
109132
transparent subtract(100%, map-get($spacers, 1)),
110-
transparent subtract(100%, $btn-border-width),
111-
currentcolor subtract(100%, $btn-border-width)
133+
transparent subtract(100%, $btn-border-width)
112134
);
113135
}
114136
}

‎scss/_buttons.scss

+7
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,13 @@
155155
// End mod
156156

157157

158+
// Boosted mod: dropdown button
159+
.btn-dropdown {
160+
@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));
161+
}
162+
// End mod
163+
164+
158165
//
159166
// Link buttons
160167
//

‎scss/_dropdown.scss

-7
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,6 @@
1414
white-space: nowrap;
1515
// Generate the caret automatically
1616
@include caret();
17-
18-
// Boosted mod
19-
// TODO: should probably be a `.btn-*` class
20-
&:not(.dropdown-toggle-split) {
21-
@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));
22-
}
23-
// End mod
2417
}
2518

2619
// The dropdown menu

‎site/assets/scss/_content.scss

+8-7
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@
9999

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

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

110111
.dropdown-menu {
111112
--bs-dropdown-bg: #{mix($blue-500, $blue-600)};
112-
--bs-dropdown-link-color: var(--bs-white); // Boosted mod
113+
--bs-dropdown-link-color: var(--bs-white);
113114
--bs-dropdown-link-active-bg: #{$blue-700};
114-
--bs-dropdown-link-hover-color: var(--bs-white); // Boosted mod
115-
--bs-dropdown-link-hover-bg: #{$blue-600}; // Boosted mod
115+
--bs-dropdown-link-hover-color: var(--bs-white);
116+
--bs-dropdown-link-hover-bg: #{$blue-600};
116117
}
117118

118-
.btn-secondary {
119-
--bs-btn-color: var(--bs-white); // Boosted mod
119+
.btn-dropdown {
120+
--bs-btn-color: var(--bs-white);
120121
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
121122
--bs-btn-border-color: #{rgba($white, .25)};
122123
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
123-
--bs-btn-hover-color: inherit; // Boosted mod
124+
--bs-btn-hover-color: inherit;
124125
--bs-btn-hover-border-color: #{rgba($white, .25)};
125126
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
126-
--bs-btn-active-color: inherit; // Boosted mod
127+
--bs-btn-active-color: inherit;
127128
--bs-btn-active-border-color: #{rgba($white, .5)};
128129
--bs-btn-focus-border-color: #{rgba($white, .5)};
129130
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);

‎site/content/docs/5.3/components/button-group.md

+22-17
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ These classes can also be added to groups of links, as an alternative to the [`.
3737
## Mixed styles
3838

3939
{{< design-callout-alert >}}
40-
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`.
40+
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`.
4141

4242
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.
4343
{{< /design-callout-alert >}}
@@ -200,7 +200,7 @@ This variant should not be used because it does not respect the Orange Design Sy
200200
Make a set of buttons appear vertically stacked rather than horizontally.
201201

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

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

215215
{{< example >}}
216216
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
217-
<button type="button" class="btn btn-outline-secondary">Button</button>
218-
<button type="button" class="btn btn-outline-secondary">Button</button>
217+
<button type="button" class="btn btn-primary">Button</button>
218+
<button type="button" class="btn btn-primary">Button</button>
219219
<div class="btn-group" role="group">
220-
<button type="button" class="btn btn-outline-secondary">Split button</button>
221-
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
222-
<span class="visually-hidden">Toggle Dropdown</span>
220+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
221+
Dropdown
223222
</button>
224223
<ul class="dropdown-menu">
225224
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
226225
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
227226
</ul>
228227
</div>
229228
<div class="btn-group dropstart" role="group">
230-
<button type="button" class="btn btn-outline-secondary">Split button</button>
231-
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
232-
<span class="visually-hidden">Toggle Dropdown</span>
229+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
230+
Dropdown
233231
</button>
234232
<ul class="dropdown-menu">
235233
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
236234
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
237235
</ul>
238236
</div>
239237
<div class="btn-group dropend" role="group">
240-
<button type="button" class="btn btn-outline-secondary">Split button</button>
241-
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
242-
<span class="visually-hidden">Toggle Dropdown</span>
238+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
239+
Dropdown
243240
</button>
244241
<ul class="dropdown-menu">
245242
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
246243
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
247244
</ul>
248245
</div>
249246
<div class="btn-group dropup" role="group">
250-
<button type="button" class="btn btn-outline-secondary">Split button</button>
251-
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
252-
<span class="visually-hidden">Toggle Dropdown</span>
247+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
248+
Dropdown
253249
</button>
254250
<ul class="dropdown-menu">
255251
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -259,4 +255,13 @@ These 2 vertical variants should not be used because they do not respect the Ora
259255
</div>
260256
{{< /example >}}
261257

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

‎site/content/docs/5.3/components/dropdowns.md

+228-33
Large diffs are not rendered by default.

‎site/content/docs/5.3/components/offcanvas.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
7070
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
7171
</div>
7272
<div class="dropdown mt-3">
73-
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
73+
<button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown">
7474
Dropdown button
7575
</button>
7676
<ul class="dropdown-menu">

‎site/content/docs/5.3/customize/color-modes.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li
3333

3434
{{< example class="d-flex justify-content-between" >}}
3535
<div class="dropdown" data-bs-theme="light">
36-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
36+
<button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
3737
Default dropdown
3838
</button>
3939
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
@@ -47,7 +47,7 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li
4747
</div>
4848

4949
<div class="dropdown" data-bs-theme="dark">
50-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
50+
<button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
5151
Dark dropdown
5252
</button>
5353
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
@@ -167,7 +167,7 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu
167167
<hr class="my-4">
168168

169169
<div class="dropdown">
170-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
170+
<button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
171171
Dropdown button
172172
</button>
173173
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">

‎site/content/docs/5.3/dark-mode.md

+497-81
Large diffs are not rendered by default.

‎site/content/docs/5.3/forms/input-group.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
194194

195195
{{< example >}}
196196
<div class="input-group mb-3">
197-
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
197+
<button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
198198
<ul class="dropdown-menu">
199199
<li><a class="dropdown-item" href="#">Action</a></li>
200200
<li><a class="dropdown-item" href="#">Another action</a></li>
@@ -207,7 +207,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
207207

208208
<div class="input-group mb-3">
209209
<input type="text" class="form-control" aria-label="Text input with dropdown button">
210-
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
210+
<button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
211211
<ul class="dropdown-menu dropdown-menu-end">
212212
<li><a class="dropdown-item" href="#">Action</a></li>
213213
<li><a class="dropdown-item" href="#">Another action</a></li>
@@ -218,7 +218,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
218218
</div>
219219

220220
<div class="input-group">
221-
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
221+
<button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
222222
<ul class="dropdown-menu">
223223
<li><a class="dropdown-item" href="#">Action before</a></li>
224224
<li><a class="dropdown-item" href="#">Another action before</a></li>
@@ -227,7 +227,7 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
227227
<li><a class="dropdown-item" href="#">Separated link</a></li>
228228
</ul>
229229
<input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
230-
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
230+
<button class="btn btn-dropdown dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
231231
<ul class="dropdown-menu dropdown-menu-end">
232232
<li><a class="dropdown-item" href="#">Action</a></li>
233233
<li><a class="dropdown-item" href="#">Another action</a></li>

0 commit comments

Comments
 (0)
Please sign in to comment.