fix: drop unused .overflow-visible when used with SVGs in some comp…

…onents (#2701)

In Badge, Buttons, Orange navbar, and Form example

---------

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

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>