feat(lib): migrate breakpoints from infix to prefix

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.css",
-      "maxSize": "75.75 kB"
+      "maxSize": "82.0 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "72.25 kB"
+      "maxSize": "78.25 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-grid.css",

.stylelintrc.json

@@ -8,6 +8,10 @@
     {
       "files": "**/*.scss",
       "rules": {
+        "selector-class-pattern": [
+          "^([\\a-z0-9 ]*(-[a-z0-9]+)*:)?([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+          { "message": "Expected class selector \"%s\" to be kebab-case (with optional breakpoint prefix)" }
+        ],
         "declaration-property-value-disallowed-list": {
           "border": "none",
           "outline": "none"

js/tests/integration/index.html

@@ -29,21 +29,21 @@ <h1>Hello, world!</h1>
           <div class="carousel-inner">
             <div class="carousel-item">
               <img class="d-block w-100" alt="First slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22400%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20800%20400%22%3E%3Cpath%20fill%3D%22%23777%22%20d%3D%22M0%200h800v400H0z%22%2F%3E%3Ctext%20x%3D%22285.922%22%20y%3D%22217.7%22%20fill%3D%22%23555%22%20font-family%3D%22Helvetica%2Cmonospace%22%20font-size%3D%2240pt%22%20font-weight%3D%22400%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" />
-              <div class="carousel-caption d-none d-md-block">
+              <div class="carousel-caption d-none md:d-block">
                 <h5>First slide label</h5>
                 <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
               </div>
             </div>
             <div class="carousel-item active">
               <img class="d-block w-100" alt="Second slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22400%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20800%20400%22%3E%3Cpath%20fill%3D%22%23777%22%20d%3D%22M0%200h800v400H0z%22%2F%3E%3Ctext%20x%3D%22285.922%22%20y%3D%22217.7%22%20fill%3D%22%23555%22%20font-family%3D%22Helvetica%2Cmonospace%22%20font-size%3D%2240pt%22%20font-weight%3D%22400%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" />
-              <div class="carousel-caption d-none d-md-block">
+              <div class="carousel-caption d-none md:d-block">
                 <h5>Second slide label</h5>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               </div>
             </div>
             <div class="carousel-item">
               <img class="d-block w-100" alt="Third slide" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22400%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20800%20400%22%3E%3Cpath%20fill%3D%22%23777%22%20d%3D%22M0%200h800v400H0z%22%2F%3E%3Ctext%20x%3D%22285.922%22%20y%3D%22217.7%22%20fill%3D%22%23555%22%20font-family%3D%22Helvetica%2Cmonospace%22%20font-size%3D%2240pt%22%20font-weight%3D%22400%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" />
-              <div class="carousel-caption d-none d-md-block">
+              <div class="carousel-caption d-none md:d-block">
                 <h5>Third slide label</h5>
                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
               </div>

js/tests/visual/dropdown.html

@@ -10,7 +10,7 @@
     <div class="container-fluid">
       <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
-      <nav class="navbar navbar-expand-md bg-always-white" data-bs-theme="light">
+      <nav class="navbar md:navbar-expand bg-always-white" data-bs-theme="light">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -60,7 +60,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       </ul>
 
       <div class="row">
-        <div class="col-sm-12 mt-2xlarge">
+        <div class="sm:col-12 mt-2xlarge">
           <div class="dropdown">
             <button type="button" class="btn btn-default" 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-2xlarge">
+        <div class="sm:col-12 mt-2xlarge">
           <div class="btn-group dropup">
             <button type="button" class="btn btn-default 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-2xlarge">
+        <div class="sm:col-12 mt-2xlarge">
           <div class="btn-group dropup">
             <a href="#" class="btn btn-default">Dropup split align end</a>
             <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-default 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-2xlarge">
+        <div class="sm:col-12 mt-2xlarge">
           <div class="btn-group dropend">
             <a href="#" class="btn btn-default">Dropend split</a>
             <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-default 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-2xlarge">
+        <div class="sm:col-3 mt-2xlarge">
           <div class="btn-group dropdown">
             <button type="button" class="btn btn-default">Dropdown reference</button>
             <button type="button" class="btn btn-default 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-2xlarge">
+        <div class="sm:col-3 mt-2xlarge">
           <div class="dropdown">
             <button class="btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
               Dropdown menu without Popper

js/tests/visual/modal.html

@@ -13,7 +13,7 @@
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-always-black" data-bs-theme="dark">
+    <nav class="navbar lg:navbar-expand navbar-dark bg-always-black" data-bs-theme="dark">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>

js/tests/visual/scrollspy.html

@@ -10,7 +10,7 @@
     </style>
   </head>
   <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
-    <nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top" data-bs-theme="dark">
+    <nav class="navbar md:navbar-expand navbar-dark bg-always-black fixed-top" data-bs-theme="dark">
       <a class="navbar-brand text-always-on-black" href="#">Scrollspy test</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

js/tests/visual/toast.html

@@ -18,7 +18,7 @@
       <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
       <div class="row mt-large">
-        <div class="col-md-12">
+        <div class="md:col-12">
           <button id="btnShowToast" class="btn btn-strong">Show toast</button>
           <button id="btnHideToast" class="btn btn-strong">Hide toast</button>
         </div>

js/tests/visual/tooltip.html

@@ -60,7 +60,7 @@ <h1>Tooltip <small>OUDS Web Visual Test</small></h1>
         </p>
       </div>
       <div class="row">
-        <div class="col-sm-3">
+        <div class="sm:col-3">
           <div id="target" title="Test tooltip on transformed element"></div>
         </div>
         <div id="shadow" class="pt-4xlarge"></div>

scss/_dropdown.scss

@@ -91,9 +91,9 @@
 
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $breakpoint-prefix: breakpoint-prefix($breakpoint, $grid-breakpoints);
 
-    .dropdown-menu#{$infix}-start {
+    .#{$breakpoint-prefix}dropdown-menu-start {
       --bs-position: start;
 
       &[data-bs-popper] {
@@ -102,14 +102,25 @@
       }
     }
 
-    .dropdown-menu#{$infix}-end {
+    .#{$breakpoint-prefix}dropdown-menu-end {
       --bs-position: end;
 
       &[data-bs-popper] {
         right: 0;
         left: auto;
       }
     }
+
+    @if $enable-bootstrap-compatibility {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      .dropdown-menu#{$infix}-start {
+        @extend .#{$breakpoint-prefix}dropdown-menu-start;
+      }
+
+      .dropdown-menu#{$infix}-end {
+        @extend .#{$breakpoint-prefix}dropdown-menu-end;
+      }
+    }
   }
 }
 // scss-docs-end responsive-breakpoints

scss/_list-group.scss

@@ -152,9 +152,9 @@
 
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $breakpoint-prefix: breakpoint-prefix($breakpoint, $grid-breakpoints);
 
-    .list-group-horizontal#{$infix} {
+    .#{$breakpoint-prefix}list-group-horizontal {
       flex-direction: row;
 
       > .list-group-item {
@@ -189,6 +189,12 @@
         }
       }
     }
+
+    @if $enable-bootstrap-compatibility {
+      .list-group-horizontal#{breakpoint-infix($breakpoint, $grid-breakpoints)} {
+        @extend .#{$breakpoint-prefix}list-group-horizontal;
+      }
+    }
   }
 }
 

scss/_maps.scss

@@ -88,7 +88,7 @@ $ouds-dimension-space-fixed: (
 // scss-docs-end ouds-maps-dimension-fixed
 
 // scss-docs-start gutters
-$gutters: $ouds-dimension-space-fixed !default; // instead of `$spacers`
+$gutters: $spacers !default;
 // scss-docs-end gutters
 
 $ouds-dimension-negative-space-fixed: (
@@ -445,9 +445,4 @@ $grid-gutter-widths: (
   3xl: $ouds-grid-3xl-column-gap // 40px
 ) !default;
 // scss-docs-end grid-gutters
-
-@if $enable-bootstrap-compatibility {
-  // Add Bootstrap gutters
-  $gutters: map-merge($gutters, $spacers);
-}
 // End mod

scss/_modal.scss

@@ -244,11 +244,11 @@
 
 // scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $postfix: if($infix != "", $infix + "-down", "");
+  $breakpoint-prefix-raw: breakpoint-prefix($breakpoint, $grid-breakpoints);
+  $breakpoint-prefix: if($breakpoint-prefix-raw != "", "#{css-escape-ident($breakpoint)}-down\\:", "");
 
   @include media-breakpoint-down($breakpoint) {
-    .modal-fullscreen#{$postfix} {
+    .#{$breakpoint-prefix}modal-fullscreen {
       width: 100vw;
       max-width: none;
       height: 100%;
@@ -269,6 +269,14 @@
         overflow-y: auto;
       }
     }
+
+    @if $enable-bootstrap-compatibility {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+      $postfix: if($infix != "", $infix + "-down", "");
+      .modal-fullscreen#{$postfix} {
+        @extend .#{$breakpoint-prefix}modal-fullscreen;
+      }
+    }
   }
 }
 // scss-docs-end modal-fullscreen-loop