fix: drop unused .overflow-visible when used with SVGs in some components (#2701)

In Badge, Buttons, Orange navbar, and Form example

---------

Co-authored-by: Julien Déramond <[email protected]>

Author: hannahiss

site/content/docs/5.3/components/badge.md

@@ -67,7 +67,7 @@ Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >
 
 {{< example >}}
 <a href="#" class="position-relative">
-  <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
+  <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
   </svg>
   <span class="visually-hidden">Shopping basket</span>

site/content/docs/5.3/components/buttons.md

@@ -65,11 +65,12 @@ The recommended way of using an icon in a button is [an embedded SVG]({{< docsre
 - set its dimensions to `1.25rem` to  match button size—except for `.btn-sm` where you should use `1rem`,
 - apply `.me-1` on it to get consistent spacing,
 - fill it using `currentColor` to respect button color scheme,
-- finally add `.overflow-visible` utility to prevent SVG content from being cropped.
+
+Please note that if you experience a problem with a cropped SVG, we recommend using the `.overflow-visible` utility on the SVG to fix its rendering.
 
 {{< example >}}
 <button type="button" class="btn btn-primary btn-sm">
-  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" class="me-1 overflow-visible">
+  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" class="me-1">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   Primary
@@ -81,7 +82,7 @@ The recommended way of using an icon in a button is [an embedded SVG]({{< docsre
   Primary
 </button>
 <button type="button" class="btn btn-primary btn-lg">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" class="me-1 overflow-visible">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" class="me-1">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   Primary
@@ -94,7 +95,7 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur
 
 {{< example >}}
 <button type="button" class="btn btn-icon btn-outline-secondary btn-sm">
-  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
+  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
@@ -106,7 +107,7 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur
   <span class="visually-hidden">Secondary</span>
 </button>
 <button type="button" class="btn btn-icon btn-outline-secondary btn-lg">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
@@ -119,7 +120,7 @@ Use `.btn-no-outline` to get a borderless button as default state, and a consist
 
 {{< example >}}
 <button type="button" class="btn btn-icon btn-no-outline btn-sm">
-  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
+  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">No outline</span>
@@ -131,7 +132,7 @@ Use `.btn-no-outline` to get a borderless button as default state, and a consist
   <span class="visually-hidden">No outline</span>
 </button>
 <button type="button" class="btn btn-icon btn-no-outline btn-lg">
-  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true">
    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
   </svg>
   <span class="visually-hidden">No outline</span>

site/content/docs/5.3/components/orange-navbar.md

@@ -180,15 +180,15 @@ An additional navbar (with text or icon items) can be added on the right of the
         <ul class="navbar-nav flex-row">
           <li class="nav-item">
             <a href="#" class="nav-link nav-icon">
-              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
+              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true">
                 <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#search" />
               </svg>
               <span class="visually-hidden">Search</span>
             </a>
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link nav-icon">
-              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
+              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true">
                 <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#buy" />
               </svg>
               <span class="visually-hidden">Basket</span>
@@ -364,7 +364,7 @@ You can add a search input into your Global header.
         <ul class="navbar-nav flex-row">
           <li class="nav-item d-lg-none">
             <a href="#" class="nav-link nav-icon">
-              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
+              <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true">
                 <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#search" />
               </svg>
               <span class="visually-hidden">Search</span>