feat: add max width on native ul, ol and dl (#3277)

Author: MaxLardenois

scss/_breadcrumb.scss

@@ -9,9 +9,8 @@
   // End mod
   // scss-docs-end breadcrumb-css-vars
 
+  @include list-unstyled();
   display: flex;
-  padding: 0;
-  list-style: none;
   @include get-font-size("label-medium");
 
   .breadcrumb-item {

scss/_navbar.scss

@@ -207,15 +207,14 @@
   --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
   // scss-docs-end navbar-nav-css-vars
 
+  @include list-unstyled(); // OUDS mod
   display: flex;
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
   padding: var(--#{$prefix}navbar-nav-padding-top) var(--#{$prefix}navbar-nav-padding-x) var(--#{$prefix}navbar-nav-padding-bottom); // OUDS mod
   margin-bottom: 0;
   @include font-size(var(--#{$prefix}navbar-nav-font-size)); // OUDS mod
   line-height: var(--#{$prefix}navbar-nav-line-height, $line-height-base); // OUDS mod
   letter-spacing: var(--#{$prefix}navbar-nav-letter-spacing, $letter-spacing-base); // OUDS mod
-  @include list-unstyled(); // OUDS mod
-
   // OUDS mod: Handle .nav-link and .nav-icon slightly differently than Bs
   .nav-link {
     position: relative;

scss/_reboot.scss

@@ -200,6 +200,7 @@ address {
 ol,
 ul,
 dl {
+  max-width: var(--#{$prefix}font-max-width-body-medium);
   margin-top: 0;
   margin-bottom: 1rem;
 }

scss/mixins/_lists.scss

@@ -2,6 +2,7 @@
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
 @mixin list-unstyled {
+  max-width: initial;
   padding-left: 0;
   list-style: none;
 }

site/src/content/docs/components/bullet-list.mdx

@@ -288,7 +288,7 @@ Add `.fw-normal` to the top `ul` to use a normal font weight.
 
 ### Unstyled
 
-Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
+Remove the default `list-style`, left margin and `max-width` on lists (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
 
 <Example code={`<ul class="list-unstyled">
     <li>This is a list.</li>
@@ -321,7 +321,7 @@ Remove a list's bullets and apply some light `margin` with a combination of two
 Only use this where you can not add a class to `<ul>` and `<ol>`.
 </Callout>
 
-All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
+All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`, they also have a `max-width` set to `--bs-font-max-width-body-medium`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
 
 <Example showMarkup={false} code={`<ul>
     <li>All lists have their top margin removed</li>

site/src/content/docs/migrations/migration-from-boosted.mdx

@@ -102,6 +102,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to
 
 - <span class="tag tag-small rounded-none tag-positive">New</span> `.bullet-list`, `.bullet-list-default-color`, `.bullet-list-tick` and `.bullet-list-bare` classes have been added.
 - <span class="tag tag-small rounded-none tag-negative">Breaking</span> `.bullet-list` is mandatory for a full Bullet list component as defined in OUDS.
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> Native `<ul>`, `<ol>` and `<dl>` now have a `max-width` set to the variable `--bs-font-max-width-body-medium`.
 
 ### Close button
 

site/src/content/docs/migrations/migration.mdx

@@ -54,6 +54,10 @@ toc: true
 
 - <span class="tag tag-small rounded-none tag-negative">Breaking</span> `.btn-rounded` has been replaced by a global `.use-rounded-corner-buttons`. Read more in our [buttons page]([[docsref:/components/buttons#rounded]]).
 
+### Reboot
+
+- <span class="tag tag-small rounded-none tag-warning">Warning</span> Native `<ul>`, `<ol>` and `<dl>` now have a `max-width` set to the variable `--bs-font-max-width-body-medium`.
+
 ### Utilities
 
 #### Background

site/src/scss/_toc.scss

@@ -17,10 +17,8 @@
     @include get-font-size("label-medium"); // OUDS mod: instead of `.875rem`
 
     ul {
-      padding-left: 0;
-      margin-bottom: 0;
-      list-style: none;
       @include list-unstyled(); // OUDS mod
+      margin-bottom: 0;
 
       ul {
         padding-left: 1rem;