Skip to content

Commit dcdbec7

Browse files
louismaximepitonjulien-deramondhannahissvprothais
authored
feat: add Dimension tokens, utilities and documentation (#2754)
Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Hannah Issermann <[email protected]> Co-authored-by: Vincent Prothais <[email protected]>
1 parent cb37cef commit dcdbec7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+25033
-1523
lines changed

‎.bundlewatch.config.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
"files": [
33
{
44
"path": "./dist/css/ouds-web-bootstrap.css",
5-
"maxSize": "51.0 kB"
5+
"maxSize": "61.0 kB"
66
},
77
{
88
"path": "./dist/css/ouds-web-bootstrap.min.css",
9-
"maxSize": "47.75 kB"
9+
"maxSize": "58.0 kB"
1010
},
1111
{
1212
"path": "./dist/css/ouds-web-grid.css",
@@ -26,19 +26,19 @@
2626
},
2727
{
2828
"path": "./dist/css/ouds-web-utilities.css",
29-
"maxSize": "14.25 kB"
29+
"maxSize": "20.75 kB"
3030
},
3131
{
3232
"path": "./dist/css/ouds-web-utilities.min.css",
33-
"maxSize": "13.5 kB"
33+
"maxSize": "19.75 kB"
3434
},
3535
{
3636
"path": "./dist/css/ouds-web.css",
37-
"maxSize": "49.0 kB"
37+
"maxSize": "54.75 kB"
3838
},
3939
{
4040
"path": "./dist/css/ouds-web.min.css",
41-
"maxSize": "45.5 kB"
41+
"maxSize": "51.5 kB"
4242
},
4343
{
4444
"path": "./dist/js/ouds-web.bundle.js",

‎.cspell.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,18 @@
8080
"navigations",
8181
"navs",
8282
"Neue",
83+
"nhuge",
84+
"njumbo",
85+
"nmedium",
8386
"noindex",
87+
"nshort",
88+
"nshorter",
89+
"nshortest",
90+
"nsmash",
91+
"nspacious",
92+
"ntall",
93+
"ntaller",
94+
"ntallest",
8495
"Noto",
8596
"offcanvas",
8697
"offcanvases",
@@ -120,6 +131,7 @@
120131
"svgs",
121132
"tabbable",
122133
"tarteaucitron",
134+
"tblrsexy",
123135
"textareas",
124136
"tiktok",
125137
"toggleable",
@@ -160,4 +172,4 @@
160172
"CHANGELOG.md"
161173
],
162174
"useGitignore": true
163-
}
175+
}

‎js/tests/integration/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@
1111
<title>Hello, world!</title>
1212
</head>
1313
<body>
14-
<div class="container-fluid py-4">
14+
<div class="container-fluid py-tallest">
1515
<h1>Hello, world!</h1>
1616

17-
<div class="mt-5">
18-
<button type="button" class="btn btn-secondary mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
17+
<div class="mt-huge">
18+
<button type="button" class="btn btn-secondary mb-tall" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
1919
Tooltip on top
2020
</button>
2121

22-
<div id="carouselExampleIndicators" class="carousel slide mt-2" data-bs-ride="carousel">
22+
<div id="carouselExampleIndicators" class="carousel slide mt-short" data-bs-ride="carousel">
2323
<div class="carousel-indicators">
2424
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button>
2525
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active" aria-current="true" aria-label="Slide 2"></button>

‎js/tests/unit/toast.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ describe('Toast', () => {
6666
return new Promise(resolve => {
6767
fixtureEl.innerHTML = [
6868
'<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
69-
' <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
69+
' <button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
7070
'</div>'
7171
].join('')
7272

@@ -99,7 +99,7 @@ describe('Toast', () => {
9999

100100
fixtureEl.innerHTML = [
101101
'<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
102-
' <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
102+
' <button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
103103
'</div>'
104104
].join('')
105105

‎js/tests/visual/collapse.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h1>Collapse <small>Bootstrap Visual Test</small></h1>
1313
<div id="accordion" role="tablist">
1414
<div class="card" role="presentation">
1515
<div class="card-header" role="tab" id="headingOne">
16-
<h5 class="mb-0">
16+
<h5 class="mb-none">
1717
<a data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
1818
Collapsible Group Item #1
1919
</a>
@@ -28,7 +28,7 @@ <h5 class="mb-0">
2828
</div>
2929
<div class="card" role="presentation">
3030
<div class="card-header" role="tab" id="headingTwo">
31-
<h5 class="mb-0">
31+
<h5 class="mb-none">
3232
<a class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
3333
Collapsible Group Item #2
3434
</a>
@@ -42,7 +42,7 @@ <h5 class="mb-0">
4242
</div>
4343
<div class="card" role="presentation">
4444
<div class="card-header" role="tab" id="headingThree">
45-
<h5 class="mb-0">
45+
<h5 class="mb-none">
4646
<a class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
4747
Collapsible Group Item #3
4848
</a>
@@ -56,7 +56,7 @@ <h5 class="mb-0">
5656
</div>
5757
<div class="card" role="presentation">
5858
<div class="card-header" role="tab" id="headingFour">
59-
<h5 class="mb-0">
59+
<h5 class="mb-none">
6060
<a class="collapsed" data-bs-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
6161
Collapsible Group Item with XSS in data-bs-parent
6262
</a>

‎js/tests/visual/dropdown.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
3939
</div>
4040
</nav>
4141

42-
<ul class="nav nav-pills mt-3">
42+
<ul class="nav nav-pills mt-tall">
4343
<li class="nav-item">
4444
<a class="nav-link active" href="#">Active</a>
4545
</li>
@@ -60,7 +60,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
6060
</ul>
6161

6262
<div class="row">
63-
<div class="col-sm-12 mt-4">
63+
<div class="col-sm-12 mt-tallest">
6464
<div class="dropdown">
6565
<button type="button" class="btn btn-secondary" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
6666
<div class="dropdown-menu">
@@ -80,7 +80,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
8080
</div>
8181
</div>
8282

83-
<div class="col-sm-12 mt-4">
83+
<div class="col-sm-12 mt-tallest">
8484
<div class="btn-group dropup">
8585
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
8686
<ul class="dropdown-menu">
@@ -102,7 +102,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
102102
</div>
103103
</div>
104104

105-
<div class="col-sm-12 mt-4">
105+
<div class="col-sm-12 mt-tallest">
106106
<div class="btn-group dropup">
107107
<a href="#" class="btn btn-secondary">Dropup split align end</a>
108108
<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">
@@ -124,7 +124,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
124124
</div>
125125
</div>
126126

127-
<div class="col-sm-12 mt-4">
127+
<div class="col-sm-12 mt-tallest">
128128
<div class="btn-group dropend">
129129
<a href="#" class="btn btn-secondary">Dropend split</a>
130130
<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">
@@ -172,7 +172,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
172172
</div>
173173

174174
<div class="row">
175-
<div class="col-sm-3 mt-4">
175+
<div class="col-sm-3 mt-tallest">
176176
<div class="btn-group dropdown">
177177
<button type="button" class="btn btn-secondary">Dropdown reference</button>
178178
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
@@ -185,7 +185,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
185185
</ul>
186186
</div>
187187
</div>
188-
<div class="col-sm-3 mt-4">
188+
<div class="col-sm-3 mt-tallest">
189189
<div class="dropdown">
190190
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
191191
Dropdown menu without Popper

‎js/tests/visual/input.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,26 @@ <h1>Input <small>Bootstrap Visual Test</small></h1>
1313

1414
<h2>No layout</h2>
1515

16-
<div class="mb-3">
16+
<div class="mb-tall">
1717
Text
1818
<input class="form-control">
1919
</div>
20-
<div class="mb-3">
20+
<div class="mb-tall">
2121
Email
2222
<input type="email" class="form-control">
2323
</div>
24-
<div class="mb-3">
24+
<div class="mb-tall">
2525
Number
2626
<input type="number" class="form-control">
2727
</div>
28-
<div class="mb-3">
28+
<div class="mb-tall">
2929
Date
3030
<input type="date" class="form-control">
3131
</div>
3232

3333
<h2>Flex</h2>
3434

35-
<div class="d-flex flex-wrap gap-3 mb-3">
35+
<div class="d-flex flex-wrap gap-tall mb-tall">
3636
<div>
3737
Text
3838
<input class="form-control">
@@ -53,7 +53,7 @@ <h2>Flex</h2>
5353

5454
<h2>Grid</h2>
5555

56-
<div class="row mb-3">
56+
<div class="row mb-tall">
5757
<div class="col">
5858
Text
5959
<input class="form-control">

‎js/tests/visual/modal.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</div>
3636
</nav>
3737

38-
<div class="container-fluid mt-3">
38+
<div class="container-fluid mt-tall">
3939
<h1>Modal <small>Bootstrap Visual Test</small></h1>
4040

4141
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
@@ -59,7 +59,7 @@ <h4>Tooltips in a modal</h4>
5959
<div id="accordion" role="tablist">
6060
<div class="card" role="presentation">
6161
<div class="card-header" role="tab" id="headingOne">
62-
<h5 class="mb-0">
62+
<h5 class="mb-none">
6363
<a data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
6464
Collapsible Group Item #1
6565
</a>
@@ -74,7 +74,7 @@ <h5 class="mb-0">
7474
</div>
7575
<div class="card" role="presentation">
7676
<div class="card-header" role="tab" id="headingTwo">
77-
<h5 class="mb-0">
77+
<h5 class="mb-none">
7878
<a class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
7979
Collapsible Group Item #2
8080
</a>
@@ -88,7 +88,7 @@ <h5 class="mb-0">
8888
</div>
8989
<div class="card" role="presentation">
9090
<div class="card-header" role="tab" id="headingThree">
91-
<h5 class="mb-0">
91+
<h5 class="mb-none">
9292
<a class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
9393
Collapsible Group Item #3
9494
</a>
@@ -188,7 +188,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
188188

189189
<br><br>
190190

191-
<div class="text-bg-dark p-2" id="tall" style="display: none;">
191+
<div class="text-bg-dark p-short" id="tall" style="display: none;">
192192
Tall body content to force the page to have a scrollbar.
193193
</div>
194194

‎js/tests/visual/toast.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<div class="container-fluid">
1818
<h1>Toast <small>Bootstrap Visual Test</small></h1>
1919

20-
<div class="row mt-3">
20+
<div class="row mt-tall">
2121
<div class="col-md-12">
2222
<button id="btnShowToast" class="btn btn-primary">Show toast</button>
2323
<button id="btnHideToast" class="btn btn-primary">Hide toast</button>
@@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
2828
<div class="notifications">
2929
<div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
3030
<div class="toast-header">
31-
<span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
31+
<span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
3232
<strong class="me-auto">Bootstrap</strong>
3333
<small>11 mins ago</small>
3434
</div>
@@ -39,10 +39,10 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
3939

4040
<div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
4141
<div class="toast-header">
42-
<span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
42+
<span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
4343
<strong class="me-auto">Bootstrap</strong>
4444
<small class="text-body-secondary">2 seconds ago</small>
45-
<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
45+
<button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
4646
</div>
4747
<div class="toast-body">
4848
Heads up, toasts will stack automatically

‎js/tests/visual/tooltip.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,21 +63,21 @@ <h1>Tooltip <small>OUDS Web Visual Test</small></h1>
6363
<div class="col-sm-3">
6464
<div id="target" title="Test tooltip on transformed element"></div>
6565
</div>
66-
<div id="shadow" class="pt-5"></div>
66+
<div id="shadow" class="pt-huge"></div>
6767
</div>
6868
<div id="customContainer"></div>
6969

70-
<div class="row mt-4 border-top">
70+
<div class="row mt-tallest border-top">
7171
<hr>
7272
<div class="h4">Test Selector triggered tooltips</div>
7373
<div id="wrapperTriggeredBySelector">
74-
<div class="py-2 selectorButtonsBlock">
74+
<div class="py-short selectorButtonsBlock">
7575
<button type="button" class="btn btn-secondary bs-dynamic-tooltip" title="random title">Using title</button>
7676
<button type="button" class="btn btn-secondary bs-dynamic-tooltip" data-bs-title="random title">Using bs-title</button>
7777
</div>
7878

7979
</div>
80-
<div class="mt-3">
80+
<div class="mt-tall">
8181
<button type="button" class="btn btn-primary" onclick="duplicateButtons()">Duplicate above two buttons</button>
8282
</div>
8383
</div>

0 commit comments

Comments
 (0)