Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing overflow-visible on some icon button examples #2701

Merged
merged 8 commits into from
Oct 14, 2024
Merged

Missing overflow-visible on some icon button examples #2701

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
adf887e
Missing overflow-visible on some icon button examples
hannahiss Aug 21, 2024
4d2c20b
Merge branch 'main' into main-his-missing-overflow-visible
hannahiss Sep 9, 2024
32aab4e
Merge branch 'main' into main-his-missing-overflow-visible
hannahiss Oct 1, 2024
3f9593d
remove overflow-visible on SVGs
hannahiss Oct 1, 2024
fb55090
Merge branch 'main' into main-his-missing-overflow-visible
julien-deramond Oct 11, 2024
e063766
Add missing migration note
julien-deramond Oct 11, 2024
eed8c64
Merge branch 'main' into main-his-missing-overflow-visible
julien-deramond Oct 14, 2024
6707b2d
Merge branch 'main' into main-his-missing-overflow-visible
julien-deramond Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 8 additions & 7 deletions site/content/docs/5.3/components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/5.3/components/orange-navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading