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]>
Orange-OpenSource · Nov 12, 2024 · dcdbec7 · dcdbec7
1 parent cb37cef
commit dcdbec7
Show file tree

Hide file tree

Showing 83 changed files with 25,033 additions and 1,523 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "51.0 kB"
+      "maxSize": "61.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "47.75 kB"
+      "maxSize": "58.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
@@ -26,19 +26,19 @@
     },
     {
       "path": "./dist/css/ouds-web-utilities.css",
-      "maxSize": "14.25 kB"
+      "maxSize": "20.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.min.css",
-      "maxSize": "13.5 kB"
+      "maxSize": "19.75 kB"
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "49.0 kB"
+      "maxSize": "54.75 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "45.5 kB"
+      "maxSize": "51.5 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",

diff --git a/.cspell.json b/.cspell.json
@@ -80,7 +80,18 @@
     "navigations",
     "navs",
     "Neue",
+    "nhuge",
+    "njumbo",
+    "nmedium",
     "noindex",
+    "nshort",
+    "nshorter",
+    "nshortest",
+    "nsmash",
+    "nspacious",
+    "ntall",
+    "ntaller",
+    "ntallest",
     "Noto",
     "offcanvas",
     "offcanvases",
@@ -120,6 +131,7 @@
     "svgs",
     "tabbable",
     "tarteaucitron",
+    "tblrsexy",
     "textareas",
     "tiktok",
     "toggleable",
@@ -160,4 +172,4 @@
     "CHANGELOG.md"
   ],
   "useGitignore": true
-}
+}
diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html
@@ -11,15 +11,15 @@
     <title>Hello, world!</title>
   </head>
   <body>
-    <div class="container-fluid py-4">
+    <div class="container-fluid py-tallest">
       <h1>Hello, world!</h1>
 
-      <div class="mt-5">
-        <button type="button" class="btn btn-secondary mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+      <div class="mt-huge">
+        <button type="button" class="btn btn-secondary mb-tall" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
           Tooltip on top
         </button>
 
-        <div id="carouselExampleIndicators" class="carousel slide mt-2" data-bs-ride="carousel">
+        <div id="carouselExampleIndicators" class="carousel slide mt-short" data-bs-ride="carousel">
           <div class="carousel-indicators">
             <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button>
             <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active" aria-current="true" aria-label="Slide 2"></button>

diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
@@ -66,7 +66,7 @@ describe('Toast', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
           '<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
-          '  <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)
+          '  <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)
           '</div>'
         ].join('')
 
@@ -99,7 +99,7 @@ describe('Toast', () => {
 
       fixtureEl.innerHTML = [
         '<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
-        '  <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)
+        '  <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)
         '</div>'
       ].join('')
 

diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
@@ -13,7 +13,7 @@ <h1>Collapse <small>Bootstrap Visual Test</small></h1>
       <div id="accordion" role="tablist">
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingOne">
-            <h5 class="mb-0">
+            <h5 class="mb-none">
               <a data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 Collapsible Group Item #1
               </a>
@@ -28,7 +28,7 @@ <h5 class="mb-0">
         </div>
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingTwo">
-            <h5 class="mb-0">
+            <h5 class="mb-none">
               <a class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                 Collapsible Group Item #2
               </a>
@@ -42,7 +42,7 @@ <h5 class="mb-0">
         </div>
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingThree">
-            <h5 class="mb-0">
+            <h5 class="mb-none">
               <a class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                 Collapsible Group Item #3
               </a>
@@ -56,7 +56,7 @@ <h5 class="mb-0">
         </div>
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingFour">
-            <h5 class="mb-0">
+            <h5 class="mb-none">
               <a class="collapsed" data-bs-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                 Collapsible Group Item with XSS in data-bs-parent
               </a>

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -39,7 +39,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
         </div>
       </nav>
 
-      <ul class="nav nav-pills mt-3">
+      <ul class="nav nav-pills mt-tall">
         <li class="nav-item">
           <a class="nav-link active" href="#">Active</a>
         </li>
@@ -60,7 +60,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       </ul>
 
       <div class="row">
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-12 mt-tallest">
           <div class="dropdown">
             <button type="button" class="btn btn-secondary" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
             <div class="dropdown-menu">
@@ -80,7 +80,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropup">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
             <ul class="dropdown-menu">
@@ -102,7 +102,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropup">
             <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">
@@ -124,7 +124,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropend">
             <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">
@@ -172,7 +172,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       </div>
 
       <div class="row">
-        <div class="col-sm-3 mt-4">
+        <div class="col-sm-3 mt-tallest">
           <div class="btn-group dropdown">
             <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">
@@ -185,7 +185,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </ul>
           </div>
         </div>
-        <div class="col-sm-3 mt-4">
+        <div class="col-sm-3 mt-tallest">
           <div class="dropdown">
             <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
               Dropdown menu without Popper

diff --git a/js/tests/visual/input.html b/js/tests/visual/input.html
@@ -13,26 +13,26 @@ <h1>Input <small>Bootstrap Visual Test</small></h1>
 
       <h2>No layout</h2>
 
-      <div class="mb-3">
+      <div class="mb-tall">
         Text
         <input class="form-control">
       </div>
-      <div class="mb-3">
+      <div class="mb-tall">
         Email
         <input type="email" class="form-control">
       </div>
-      <div class="mb-3">
+      <div class="mb-tall">
         Number
         <input type="number" class="form-control">
       </div>
-      <div class="mb-3">
+      <div class="mb-tall">
         Date
         <input type="date" class="form-control">
       </div>
 
       <h2>Flex</h2>
 
-      <div class="d-flex flex-wrap gap-3 mb-3">
+      <div class="d-flex flex-wrap gap-tall mb-tall">
         <div>
           Text
           <input class="form-control">
@@ -53,7 +53,7 @@ <h2>Flex</h2>
 
       <h2>Grid</h2>
 
-      <div class="row mb-3">
+      <div class="row mb-tall">
         <div class="col">
           Text
           <input class="form-control">

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -35,7 +35,7 @@
       </div>
     </nav>
 
-    <div class="container-fluid mt-3">
+    <div class="container-fluid mt-tall">
       <h1>Modal <small>Bootstrap Visual Test</small></h1>
 
       <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
@@ -59,7 +59,7 @@ <h4>Tooltips in a modal</h4>
               <div id="accordion" role="tablist">
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingOne">
-                    <h5 class="mb-0">
+                    <h5 class="mb-none">
                       <a data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                         Collapsible Group Item #1
                       </a>
@@ -74,7 +74,7 @@ <h5 class="mb-0">
                 </div>
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingTwo">
-                    <h5 class="mb-0">
+                    <h5 class="mb-none">
                       <a class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                         Collapsible Group Item #2
                       </a>
@@ -88,7 +88,7 @@ <h5 class="mb-0">
                 </div>
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingThree">
-                    <h5 class="mb-0">
+                    <h5 class="mb-none">
                       <a class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                         Collapsible Group Item #3
                       </a>
@@ -188,7 +188,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
 
       <br><br>
 
-      <div class="text-bg-dark p-2" id="tall" style="display: none;">
+      <div class="text-bg-dark p-short" id="tall" style="display: none;">
         Tall body content to force the page to have a scrollbar.
       </div>
 

diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
@@ -17,7 +17,7 @@
     <div class="container-fluid">
       <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
-      <div class="row mt-3">
+      <div class="row mt-tall">
         <div class="col-md-12">
           <button id="btnShowToast" class="btn btn-primary">Show toast</button>
           <button id="btnHideToast" class="btn btn-primary">Hide toast</button>
@@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
     <div class="notifications">
       <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
         <div class="toast-header">
-          <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
+          <span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small>11 mins ago</small>
         </div>
@@ -39,10 +39,10 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
       <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
-          <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
+          <span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">2 seconds ago</small>
-          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
+          <button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
         </div>
         <div class="toast-body">
           Heads up, toasts will stack automatically

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
@@ -63,21 +63,21 @@ <h1>Tooltip <small>OUDS Web Visual Test</small></h1>
         <div class="col-sm-3">
           <div id="target" title="Test tooltip on transformed element"></div>
         </div>
-        <div id="shadow" class="pt-5"></div>
+        <div id="shadow" class="pt-huge"></div>
       </div>
       <div id="customContainer"></div>
 
-      <div class="row mt-4 border-top">
+      <div class="row mt-tallest border-top">
         <hr>
         <div class="h4">Test Selector triggered tooltips</div>
         <div id="wrapperTriggeredBySelector">
-          <div class="py-2 selectorButtonsBlock">
+          <div class="py-short selectorButtonsBlock">
             <button type="button" class="btn btn-secondary bs-dynamic-tooltip" title="random title">Using title</button>
             <button type="button" class="btn btn-secondary bs-dynamic-tooltip" data-bs-title="random title">Using bs-title</button>
           </div>
 
         </div>
-        <div class="mt-3">
+        <div class="mt-tall">
           <button type="button" class="btn btn-primary" onclick="duplicateButtons()">Duplicate above two buttons</button>
         </div>
       </div>