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

Jump to bottom

Small and large buttons with icons - adjustments #1611

Draft
wants to merge 22 commits into
base: main
Choose a base branch
from
+37 −16
Draft

Small and large buttons with icons - adjustments #1611

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
65ebe89
Change buttons labels
hannahiss Nov 10, 2022
d697511
Change horizontal paddings of small and large buttons (with or withou…
hannahiss Nov 10, 2022
e32f265
revert boosted-utilities.css.map and boosted-utilities.rtl.css.map
hannahiss Nov 10, 2022
f6d2fa6
Merge branch 'main' into main-his-buttons-with-icons
julien-deramond Nov 16, 2022
d1c128b
Revert dist/css files
julien-deramond Nov 16, 2022
cf73821
Use Button instead of "Medium button"
hannahiss Dec 12, 2022
818dba7
Merge branch 'main' into main-his-buttons-with-icons
hannahiss Jan 6, 2023
1a12412
Change buttons with icons labels to avoid same labels on different bu…
hannahiss Jan 9, 2023
8d343d9
Merge branch 'main' into main-his-buttons-with-icons
hannahiss Jan 12, 2023
314006e
set icon to 15px and add 1px to bottom padding on .btn-icon.btn-sm to…
hannahiss Jan 13, 2023
744a2a0
use $spacer to adjust btn-lg padding + change doc about icon size in …
hannahiss Jan 13, 2023
2b6b127
changes after review: add 1 px padding-right, change $btn-padding-* i…
hannahiss Jan 16, 2023
09e19bc
Merge branch 'main' into main-his-buttons-with-icons
hannahiss Feb 8, 2023
b8aced7
try with another svg icon for success
hannahiss Feb 8, 2023
881818d
passing success2 through svgo
hannahiss Feb 8, 2023
75a66dc
testing with svg from solaris and svg from solaris optimized with svgo
hannahiss Feb 10, 2023
90d5aae
Merge branch 'main' into main-his-buttons-with-icons
hannahiss Mar 6, 2023
46066f4
Merge branch 'main' into main-his-buttons-with-icons
hannahiss Mar 27, 2023
becadb3
remove multiple versions of buttons (test)
hannahiss Mar 29, 2023
6ef8f4f
Merge branch 'main' into main-his-buttons-with-icons
hannahiss Mar 29, 2023
1e18fee
Change icon success in Boosted-sprite with real Solaris icon
hannahiss Mar 29, 2023
ea4bc7f
Merge branch 'main' into main-his-buttons-with-icons
louismaximepiton Jan 4, 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
6 changes: 5 additions & 1 deletion scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
}

// Boosted mod: with icon
&:not(.btn-icon) > svg {
&:not(.btn-icon):not(.btn-sm) > svg {
hannahiss marked this conversation as resolved.
Show resolved Hide resolved
transform: translateY(1px);
}
// End mod
Expand Down Expand Up @@ -216,6 +216,10 @@
// Boosted mod: icon button
.btn-icon {
padding: var(--#{$boosted-prefix}icon-spacing);

&.btn-sm {
padding-bottom: $btn-icon-padding-x-sm + .0625rem;
hannahiss marked this conversation as resolved.
Show resolved Hide resolved
}
}
// End mod

Expand Down
4 changes: 2 additions & 2 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -909,11 +909,11 @@ $input-btn-focus-width: $focus-visible-outer-offset !default; // Boosted m
$input-btn-focus-box-shadow: null !default; // Boosted mod

$input-btn-padding-y-sm: $spacer * .25 !default;
$input-btn-padding-x-sm: $spacer * .5 !default;
$input-btn-padding-x-sm: $spacer * .65 !default;
hannahiss marked this conversation as resolved.
Show resolved Hide resolved
$input-btn-font-size-sm: $font-size-sm !default;

$input-btn-padding-y-lg: .8125rem !default;
$input-btn-padding-x-lg: $spacer !default;
$input-btn-padding-x-lg: $spacer * .9 !default;
$input-btn-font-size-lg: $font-size-lg !default;

$input-btn-border-width: var(--#{$prefix}border-width) !default;
Expand Down
26 changes: 13 additions & 13 deletions site/content/docs/5.2/components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,29 +31,29 @@ Boosted includes several predefined button styles, each serving its own semantic

The recommended way of using an icon in a button is [an embedded SVG]({{< docsref "/extend/icons" >}}). You need to:

- set its dimensions to `1.25rem` to match button size—except for `.btn-sm` where you should use `1rem`,
- set its dimensions to `1.25rem` to match button size—except for `.btn-sm` where you should use `.9375rem`,
- 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.

{{< example >}}
<button type="button" class="btn btn-primary btn-sm">
<svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
<svg width=".9375rem" height=".9375rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
Primary
Small button
</button>
<button type="button" class="btn btn-primary">
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
Primary
Button
</button>
<button type="button" class="btn btn-primary btn-lg">
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
Primary
Large button
</button>
{{< /example >}}

Expand All @@ -63,22 +63,22 @@ 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-secondary btn-sm">
<svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
<svg width=".9375rem" height=".9375rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
<span class="visually-hidden">Secondary</span>
<span class="visually-hidden">Small button with icon only</span>
</button>
<button type="button" class="btn btn-icon btn-secondary">
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
<span class="visually-hidden">Secondary</span>
<span class="visually-hidden">Button with icon only</span>
</button>
<button type="button" class="btn btn-icon btn-secondary btn-lg">
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
<span class="visually-hidden">Secondary</span>
<span class="visually-hidden">Large button with icon only</span>
</button>
{{< /example >}}

Expand All @@ -88,22 +88,22 @@ 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" focusable="false" class="overflow-visible">
<svg width=".9375rem" height=".9375rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
<span class="visually-hidden">No outline</span>
<span class="visually-hidden">Small button with icon only and no outline</span>
</button>
<button type="button" class="btn btn-icon btn-no-outline">
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
<span class="visually-hidden">No outline</span>
<span class="visually-hidden">Button with icon only and 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" focusable="false" class="overflow-visible">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
</svg>
<span class="visually-hidden">No outline</span>
<span class="visually-hidden">Large button with icon only and no outline</span>
</button>
{{< /example >}}

Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.2/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz

- <span class="badge text-warning-emphasis bg-warning">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/alerts#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.

##### Buttons

- <span class="badge bg-warning">Warning</span> Change icons size in small buttons (`.btn-icon.btn-sm`) to `.9375rem`
hannahiss marked this conversation as resolved.
Show resolved Hide resolved

#### List group

- List group item variants are now styled via CSS variables.
Expand Down