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

Small and large buttons with icons - adjustments #1611

Draft
wants to merge 22 commits into
base: main
Choose a base branch
from
Draft

Small and large buttons with icons - adjustments #1611

Show file tree
Hide file tree
Changes from all 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
7 changes: 6 additions & 1 deletion scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
// End mod

// 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 @@ -256,6 +256,11 @@
// Boosted mod: icon button
.btn-icon {
padding: var(--#{$prefix}icon-spacing);

&.btn-sm {
padding-right: $btn-icon-padding-x-sm + .0625rem;
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 @@ -977,13 +977,13 @@ $btn-letter-spacing: $letter-spacing-base !default; // Boosted mod
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-padding-x-sm: $spacer * .65 !default; // Boosted mod
$btn-font-size-sm: $input-btn-font-size-sm !default;
$btn-line-height-sm: $line-height-sm !default; // Boosted mod
$btn-letter-spacing-sm: $letter-spacing-base !default; // Boosted mod

$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-padding-x-lg: $spacer * .9 !default; // Boosted mod
$btn-font-size-lg: $input-btn-font-size-lg !default;
$btn-line-height-lg: $h5-line-height !default; // Boosted mod
$btn-letter-spacing-lg: $letter-spacing-base * 2 !default; // Boosted mod
Expand Down
39 changes: 26 additions & 13 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 @@ -62,29 +62,29 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb

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 @@ -94,22 +94,35 @@ 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" 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-outline-secondary btn-sm">
<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-solaris"/>
</svg>
<span class="visually-hidden">Small button with icon only</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary btn-sm">
<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-optimized"/>
</svg>
<span class="visually-hidden">Small button with icon only</span>
</button>
<br>
<button type="button" class="btn btn-icon btn-outline-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-outline-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 @@ -119,22 +132,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
3 changes: 3 additions & 0 deletions site/content/docs/5.3/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -739,6 +739,9 @@ Color mode mechanism coming from Bootstrap is available from Boosted v5.3.0. How
- <span class="badge text-bg-success">New</span> Outlined button `.btn-outline-secondary` is now provided. It is basically `.btn-secondary` with default transparent background.
- <span class="badge text-bg-success">New</span> TikTok social button.

- **Buttons**
- <span class="badge bg-warning">Warning</span> Change icons size in small buttons from `1rem` to `.9375rem`.

- **Cards**
- Cards now have a `color` set on them to improve rendering across color modes.

Expand Down