chore(merge main): patched commit → 7d9aa9d (#1829)

Co-authored-by: Louis-Maxime Piton <[email protected]>
Orange-OpenSource · Feb 16, 2023 · 1e9872d · 1e9872d
1 parent 7cee089
commit 1e9872d
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 57 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "41.0 kB"
+      "maxSize": "41.25 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -79,7 +79,6 @@
   .nav-link {
     padding: subtract(1rem, var(--#{$prefix}nav-tabs-border-width)) subtract(var(--#{$prefix}nav-tabs-link-padding-x), var(--#{$prefix}nav-tabs-border-width)); // Boosted mod
     margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
-    background: none;
     border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
     border-width: var(--#{$prefix}nav-tabs-link-border-width); // Boosted mod
     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
@@ -116,19 +115,6 @@
   }
 }
 
-// Boosted mod
-.nav-tabs-light {
-  // scss-docs-start nav-tabs-light-css-vars
-  --#{$prefix}nav-tabs-border-width: #{calc($nav-tabs-border-width * .5)};
-  --#{$prefix}nav-tabs-border-color: #{$gray-500};
-  --#{$prefix}nav-tabs-link-hover-color: #{$accessible-orange};
-  --#{$prefix}nav-tabs-link-border-width: 0 0 calc(var(--#{$prefix}nav-tabs-border-width) * 4); // stylelint-disable-line function-disallowed-list
-  --#{$prefix}nav-tabs-link-hover-border-color: transparent;
-  --#{$prefix}nav-tabs-link-active-border-color: #{$accessible-orange};
-  // scss-docs-end nav-tabs-light-css-vars
-}
-// End mod
-
 //
 // Pills
 //
@@ -144,8 +130,6 @@
   .nav-link {
     padding-right: var(--#{$prefix}nav-pills-padding-x); // Boosted mod
     padding-left: var(--#{$prefix}nav-pills-padding-x); // Boosted mod
-    background: none;
-    border: 0;
     @include border-radius(var(--#{$prefix}nav-pills-border-radius));
 
     &:disabled {
@@ -168,6 +152,67 @@
   // End mod
 }
 
+//
+// Underline
+//
+
+.nav-underline {
+  // scss-docs-start nav-underline-css-vars
+  --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+  --#{$prefix}nav-underline-border-color: #{$nav-underline-border-color}; // Boosted mod
+  --#{$prefix}nav-underline-border-radius: #{$nav-underline-border-radius}; // Boosted mod
+  --#{$prefix}nav-underline-link-padding-x: #{$nav-underline-link-padding-x}; // Boosted mod
+  --#{$prefix}nav-underline-link-hover-color: #{$nav-underline-link-hover-color}; // Boosted mod
+  --#{$prefix}nav-underline-link-hover-bg: transparent; // Boosted mod
+  --#{$prefix}nav-underline-link-border-width: #{$nav-underline-link-border-width}; // Boosted mod
+  --#{$prefix}nav-underline-link-hover-border-color: transparent; // Boosted mod
+  --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+  --#{$prefix}nav-underline-link-active-bg: #{$nav-underline-link-active-bg}; // Boosted mod
+  --#{$prefix}nav-underline-link-active-border-color: #{$nav-underline-link-active-border-color}; // Boosted mod
+  // scss-docs-end nav-underline-css-vars
+
+  gap: var(--#{$prefix}nav-underline-gap);
+  border-bottom: var(--#{$prefix}nav-underline-border-width) solid var(--#{$prefix}nav-underline-border-color); // Boosted mod
+
+  // Boosted mod
+  // Bigger gap between elements from lg breakpoint
+  @include media-breakpoint-up(lg) {
+    --#{$prefix}nav-underline-gap: #{$nav-underline-gap-lg};
+  }
+
+  .nav-link {
+    padding: subtract(1rem, var(--#{$prefix}nav-underline-border-width)) subtract(var(--#{$prefix}nav-underline-link-padding-x), var(--#{$prefix}nav-underline-border-width)); // Boosted mod
+    margin-bottom: calc(-1 * var(--#{$prefix}nav-underline-border-width)); // stylelint-disable-line function-disallowed-list
+    border: var(--#{$prefix}nav-underline-border-width) solid transparent;
+    border-width: var(--#{$prefix}nav-underline-link-border-width);
+    @include border-top-radius(var(--#{$prefix}nav-underline-border-radius));
+
+    &:hover {
+      color: var(--#{$prefix}nav-underline-link-hover-color);
+      background-color: var(--#{$prefix}nav-underline-link-hover-bg);
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      isolation: isolate;
+      border-color: var(--#{$prefix}nav-underline-link-hover-border-color);
+    }
+
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}nav-link-disabled-color);
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: var(--#{$prefix}nav-underline-link-active-color);
+    background-color: var(--#{$prefix}nav-underline-link-active-bg);
+    border-color: var(--#{$prefix}nav-underline-link-active-border-color);
+  }
+  // End mod
+}
+
 
 //
 // Justified variants

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1342,10 +1342,22 @@ $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
 $nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg`
 
-$nav-pills-padding-x:               $nav-tabs-link-padding-x !default; // Boosted mod
+$nav-pills-padding-x:               1.8125rem !default; // Boosted mod
 $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
+
+$nav-underline-gap:                       0 !default; // Boosted mod: instead of 1rem
+$nav-underline-gap-lg:                    $spacer * .5 !default; // Boosted mod
+$nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod: instead of .125rem
+$nav-underline-border-color:              $gray-500 !default; // Boosted mod
+$nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // Boosted mod
+$nav-underline-link-active-color:         var(--#{$prefix}emphasis-color) !default;
+$nav-underline-link-padding-x:            1.8125rem !default; // Boosted mod
+$nav-underline-link-hover-color:          $accessible-orange !default; // Boosted mod
+$nav-underline-link-border-width:         0 0 calc(var(--#{$prefix}nav-underline-border-width) * 4) !default;  /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+$nav-underline-link-active-bg:            var(--#{$prefix}body-bg) !default; // Boosted mod
+$nav-underline-link-active-border-color:  $accessible-orange !default; // Boosted mod
 // scss-docs-end nav-variables
 
 

diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md
@@ -151,15 +151,18 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
 </ul>
 {{< /example >}}
 
-<!-- Boosted mod -->
-### Tabs light
+### Pills
+
+Take that same HTML, but use `.nav-pills` instead:
 
-Nav tabs light only differ visually, with a full width bottom border and a different active state.
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it is a button component in the Orange Design System specifications.
+{{< /ods-incompatibility-alert >}}
 
 {{< example >}}
-<ul class="nav nav-tabs nav-tabs-light">
+<ul class="nav nav-pills">
   <li class="nav-item">
-    <a class="nav-link active" href="#" aria-current="page">Active</a>
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
@@ -173,6 +176,28 @@ Nav tabs light only differ visually, with a full width bottom border and a diffe
 </ul>
 {{< /example >}}
 
+### Underline
+
+Take that same HTML, but use `.nav-underline` instead:
+
+{{< example >}}
+<ul class="nav nav-underline">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+{{< /example >}}
+
+<!-- Boosted mod -->
 ### Nested tabs
 
 {{< added-in "5.2.0" >}}
@@ -197,7 +222,7 @@ Nav tabs light is nested in a tab for adding a level of depth in information org
 
 <div class="tab-content" id="nav-tabs-content">
   <div class="tab-pane-with-nested-tab fade show active" id="tab1-content" role="tabpanel" aria-labelledby="nav-tab1">
-    <ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-tabs nav-tabs-light mt-0">
+    <ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
       <li class="nav-item" role="presentation">
         <a class="nav-link active" id="nav-linkA" href="#linkA" data-bs-toggle="tab" data-bs-target="#linkA" role="tab" aria-current="page">Link A</a>
       </li>
@@ -211,7 +236,7 @@ Nav tabs light is nested in a tab for adding a level of depth in information org
         <a class="nav-link disabled" id="nav-linkD" data-bs-toggle="tab" data-bs-target="#linkD" role="tab">Link D</a>
       </li>
     </ul>
-    <div class="tab-content border-0" id="nav-tabs-light-content">
+    <div class="tab-content border-0">
       <div class="tab-pane fade show active" id="linkA" role="tabpanel" aria-labelledby="nav-linkA">Content of Link A</div>
       <div class="tab-pane" id="linkB" role="tabpanel" aria-labelledby="nav-linkB">Content of Link B</div>
       <div class="tab-pane" id="linkC" role="tabpanel" aria-labelledby="nav-linkC">Content of Link C</div>
@@ -223,34 +248,8 @@ Nav tabs light is nested in a tab for adding a level of depth in information org
   <div class="tab-pane" id="tab4-content" role="tabpanel" aria-labelledby="nav-tab4">Content of Tab 4</div>
 </div>
 {{< /example >}}
-
 <!-- End mod -->
 
-### Pills
-
-Take that same HTML, but use `.nav-pills` instead:
-
-{{< ods-incompatibility-alert >}}
-This variant should not be used because it is a button component in the Orange Design System specifications.
-{{< /ods-incompatibility-alert >}}
-
-{{< example >}}
-<ul class="nav nav-pills">
-  <li class="nav-item">
-    <a class="nav-link active" aria-current="page" href="#">Active</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link disabled">Disabled</a>
-  </li>
-</ul>
-{{< /example >}}
-
 ### Fill and justify
 
 Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
@@ -398,7 +397,7 @@ This variant should not be used because it is a button component in the Orange D
 
 {{< added-in "5.2.0" >}}
 
-As part of Boosted's evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, `.nav-tabs-light` and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+As part of Boosted's evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 On the `.nav` base class:
 
@@ -408,10 +407,6 @@ On the `.nav-tabs` modifier class:
 
 {{< scss-docs name="nav-tabs-css-vars" file="scss/_nav.scss" >}}
 
-On the `.nav-tabs-light` modifier class:
-
-{{< scss-docs name="nav-tabs-light-css-vars" file="scss/_nav.scss" >}}
-
 On the `.nav-pills` modifier class:
 
 {{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}}
@@ -420,6 +415,12 @@ On the `.tab-content` modifier class:
 
 {{< scss-docs name="tab-content-css-vars" file="scss/_nav.scss" >}}
 
+{{< added-in "5.3.0" >}}
+
+On the `.nav-underline` modifier class:
+
+{{< scss-docs name="nav-underline-css-vars" file="scss/_nav.scss" >}}
+
 ### Sass variables
 
 {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -59,8 +59,17 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 
   - <span class="badge text-warning-emphasis bg-warning">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
 
-- **Progress bars**
+- **Navs and tabs**
+  - <span class="badge bg-danger">Breaking</span> Based on Bootstrap, we've replaced "Tabs light" variant by "Underline" variant. It means that `.nav-tabs-light` is deprecated and doesn't exist anymore and so that the following modification must be done in your websites:
+
+    ```diff
+    - <ul class="nav nav-tabs nav-tabs-light">
+    + <ul class="nav nav-underline">
+    ```
 
+    It also means that the "Nested tabs" variant has been slightly modified to use this new class rather than `.nav-tabs` combined to `.nav-tabs-light`.
+
+- **Progress bars**
   - The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.
 
     While we recommend adopting the new markup for improved compatibility with all screen readers, note that the legacy progress bar structure will continue to work as before.
@@ -243,6 +252,18 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
       <li><code>--bs-link-decoration</code></li>
       <li><code>--bs-link-hover-color-rgb</code></li>
       <li><code>--bs-link-hover-decoration</code></li>
+      <li><code>--bs-nav-underline-border-color</code></li>
+      <li><code>--bs-nav-underline-border-radius</code></li>
+      <li><code>--bs-nav-underline-border-width</code></li>
+      <li><code>--bs-nav-underline-gap</code></li>
+      <li><code>--bs-nav-underline-link-active-bg</code></li>
+      <li><code>--bs-nav-underline-link-active-border-color</code></li>
+      <li><code>--bs-nav-underline-link-active-color</code></li>
+      <li><code>--bs-nav-underline-link-border-width</code></li>
+      <li><code>--bs-nav-underline-link-hover-border-color</code></li>
+      <li><code>--bs-nav-underline-link-hover-bg</code></li>
+      <li><code>--bs-nav-underline-link-hover-color</code></li>
+      <li><code>--bs-nav-underline-link-padding-x</code></li>
       <li><code>--bs-offcanvas-transition</code></li>
       <li><code>--bs-primary-bg-subtle</code></li>
       <li><code>--bs-primary-border-subtle</code></li>
@@ -329,6 +350,17 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
       <li><code>$list-group-hover-bg</code></li>
       <li><code>$mark-bg-inverted</code></li>
       <li><code>$mark-color-inverted</code></li>
+      <li><code>$nav-underline-border-color</code></li>
+      <li><code>$nav-underline-border-radius</code></li>
+      <li><code>$nav-underline-border-width</code></li>
+      <li><code>$nav-underline-gap</code></li>
+      <li><code>$nav-underline-gap-lg</code></li>
+      <li><code>$nav-underline-link-active-bg</code></li>
+      <li><code>$nav-underline-link-active-border-color</code></li>
+      <li><code>$nav-underline-link-active-color</code></li>
+      <li><code>$nav-underline-link-border-width</code></li>
+      <li><code>$nav-underline-link-hover-color</code></li>
+      <li><code>$nav-underline-link-padding-x</code></li>
       <li><code>$pre-color-inverted</code></li>
       <li><code>$primary-bg-subtle-dark</code></li>
       <li><code>$primary-bg-subtle</code></li>