diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 5368f2ec9f..25bcf520df 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -6,7 +6,7 @@
},
{
"path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
- "maxSize": "79.75 kB"
+ "maxSize": "80.0 kB"
},
{
"path": "./packages/orange/dist/css/ouds-web-grid.css",
@@ -34,7 +34,7 @@
},
{
"path": "./packages/orange/dist/css/ouds-web.css",
- "maxSize": "67.0 kB"
+ "maxSize": "67.25 kB"
},
{
"path": "./packages/orange/dist/css/ouds-web.min.css",
diff --git a/packages/migrate/src/migrate.spec.mjs b/packages/migrate/src/migrate.spec.mjs
index ab8407aaf0..74ce0d513a 100644
--- a/packages/migrate/src/migrate.spec.mjs
+++ b/packages/migrate/src/migrate.spec.mjs
@@ -97,7 +97,6 @@ describe('Migrate', () => {
'The badge component using class \'badge\' in tests/source-boosted.html needs to be updated to use the new component DOM. See: https://web.unified-design-system.orange.com/docs/components/badges',
'btn-close-white class has been removed in tests/source-boosted.html.',
'btn-social class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/components/buttons#button',
- 'btn-sm class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/components/buttons#button',
'placeholder-glow class is deprecated in tests/source-boosted.html. See: https://web.unified-design-system.orange.com/docs/components/skeleton',
'The tag component using class \'tag\' in tests/source-boosted.html needs to be updated to use the new component DOM. See: https://web.unified-design-system.orange.com/docs/components/tags#tag',
'ratio class is deprecated in tests/source-boosted.html.',
diff --git a/packages/migrate/src/replacements/boosted.mjs b/packages/migrate/src/replacements/boosted.mjs
index f9086e29be..a2ded173e9 100644
--- a/packages/migrate/src/replacements/boosted.mjs
+++ b/packages/migrate/src/replacements/boosted.mjs
@@ -40,7 +40,7 @@ export const boostedReplacements = [
[...warnForClass('btn-social', { link: 'https://web.unified-design-system.orange.com/docs/components/buttons#button' })],
[...warnForClass('btn-toggle', { link: 'https://web.unified-design-system.orange.com/docs/components/buttons#button' })],
['btn-outline-[a-z]+', 'btn-default'],
- [...warnForClass('btn-sm', { link: 'https://web.unified-design-system.orange.com/docs/components/buttons#button' })],
+ ['btn-sm', 'btn-small'],
[...warnForClass('btn-lg', { link: 'https://web.unified-design-system.orange.com/docs/components/buttons#button' })],
// Skeleton
diff --git a/packages/migrate/tests/__snapshots__/migrated-boosted.html b/packages/migrate/tests/__snapshots__/migrated-boosted.html
index 2dc57c1855..2f0c68e486 100644
--- a/packages/migrate/tests/__snapshots__/migrated-boosted.html
+++ b/packages/migrate/tests/__snapshots__/migrated-boosted.html
@@ -29,7 +29,7 @@
Test display and spacing
remove deprecated class
- remove deprecated class
+
diff --git a/packages/migrate/tests/source-boosted.html b/packages/migrate/tests/source-boosted.html
index a3965a56c9..a771f35911 100644
--- a/packages/migrate/tests/source-boosted.html
+++ b/packages/migrate/tests/source-boosted.html
@@ -29,7 +29,7 @@ Test display and spacing
remove deprecated class
- remove deprecated class
+
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 6c38389d43..47d9c80d68 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -159,7 +159,7 @@
}
}
-// OUDS mod: no .btn-sm, nor .btn-lg
+// OUDS mod: no .btn-sm, no .btn-lg
// The clickable button for toggling the menu
// Set the same inset shadow as the :active state
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index f32241c271..9e6c4588eb 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -211,6 +211,36 @@
max-height: $ouds-button-size-max-size-icon-only-default;
}
// End mod
+
+ &.btn-small {
+ --#{$prefix}btn-min-width: #{$ouds-button-size-min-width-small};
+ --#{$prefix}btn-min-height: #{$ouds-button-size-min-height-small};
+ --#{$prefix}btn-padding-start: #{$ouds-button-space-padding-inline-icon-none-small};
+ --#{$prefix}btn-padding-end: #{$ouds-button-space-padding-inline-icon-none-small};
+ --#{$prefix}btn-padding-y: #{$ouds-button-space-padding-block-small};
+ --#{$prefix}btn-icon-size: #{$ouds-button-size-icon-small};
+ --#{$prefix}btn-icon-gap: #{$ouds-button-space-column-gap-icon-small};
+ --#{$prefix}btn-loading-size: #{px-to-rem($ouds-button-size-progress-indicator-small)};
+
+ @include get-font-size("label-medium"); // OUDS mod
+
+ &:has(svg:not(.loader)),
+ &:has(img:not(.loader)),
+ &:has(.icon:not(.loader)) {
+ --#{$prefix}btn-padding-start: #{$ouds-button-space-padding-inline-icon-start-small};
+ --#{$prefix}btn-padding-end: #{$ouds-button-space-padding-inline-start-icon-end-small};
+ }
+
+ &.btn-icon.btn-icon { // Double the class selector to artificially increase the selector's specificity
+ --#{$prefix}btn-padding-start: #{$ouds-button-space-inset-icon-only-small};
+ --#{$prefix}btn-padding-end: #{$ouds-button-space-inset-icon-only-small};
+ --#{$prefix}btn-padding-y: #{$ouds-button-space-inset-icon-only-small};
+ --#{$prefix}btn-icon-gap: 0;
+ --#{$prefix}btn-icon-size: #{px-to-rem($ouds-button-size-icon-only-small)};
+
+ max-height: $ouds-button-size-max-size-icon-only-small;
+ }
+ }
}
.use-rounded-corner-buttons {
diff --git a/scss/forms/_quantity-selector.scss b/scss/forms/_quantity-selector.scss
index 1e9eea026c..aaade2ba0e 100644
--- a/scss/forms/_quantity-selector.scss
+++ b/scss/forms/_quantity-selector.scss
@@ -48,7 +48,7 @@
border-right-width: var(--#{$prefix}border-width);
}
- &.btn-sm { // stylelint-disable-line selector-no-qualifying-type
+ &.btn-small { // stylelint-disable-line selector-no-qualifying-type
padding-right: $quantity-selector-btn-padding-x-sm;
@include button-icon($quantity-selector-icon-remove-sm, $width: 1rem, $height: 1rem, $size: $quantity-selector-icon-sm-width $quantity-selector-icon-sm-remove-height, $pseudo: "after");
@@ -68,7 +68,7 @@
border-left-width: var(--#{$prefix}border-width);
}
- &.btn-sm { // stylelint-disable-line selector-no-qualifying-type
+ &.btn-small { // stylelint-disable-line selector-no-qualifying-type
padding-left: $quantity-selector-btn-padding-x-sm;
@include button-icon($quantity-selector-icon-add-sm, $width: 1rem, $height: 1rem, $size: $quantity-selector-icon-sm-width $quantity-selector-icon-sm-add-height, $pseudo: "after");
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
index 4333a2d331..661cd4d048 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css
@@ -6794,12 +6794,12 @@ textarea.form-control-lg {
padding-right: calc(calc(20px - var(--bs-border-width) + 2px) - var(--bs-border-width));
border-right-width: var(--bs-border-width);
}
-.quantity-selector button:first-of-type.btn-sm {
+.quantity-selector button:first-of-type.btn-small {
padding-right: calc(20px - var(--bs-border-width) + 2px);
min-width: 1rem;
min-height: 1rem;
}
-.quantity-selector button:first-of-type.btn-sm::after {
+.quantity-selector button:first-of-type.btn-small::after {
display: block;
min-width: inherit;
min-height: inherit;
@@ -6809,7 +6809,7 @@ textarea.form-control-lg {
mask: url("data:image/svg+xml, ") no-repeat 50%/0.625rem 0.125rem;
}
-.quantity-selector button:first-of-type.btn-sm:focus-visible {
+.quantity-selector button:first-of-type.btn-small:focus-visible {
padding-right: calc(calc(20px - var(--bs-border-width) + 2px) - var(--bs-border-width));
}
.quantity-selector button:last-of-type {
@@ -6832,12 +6832,12 @@ textarea.form-control-lg {
padding-left: calc(calc(20px - var(--bs-border-width) + 2px) - var(--bs-border-width));
border-left-width: var(--bs-border-width);
}
-.quantity-selector button:last-of-type.btn-sm {
+.quantity-selector button:last-of-type.btn-small {
padding-left: calc(20px - var(--bs-border-width) + 2px);
min-width: 1rem;
min-height: 1rem;
}
-.quantity-selector button:last-of-type.btn-sm::after {
+.quantity-selector button:last-of-type.btn-small::after {
display: block;
min-width: inherit;
min-height: inherit;
@@ -6847,7 +6847,7 @@ textarea.form-control-lg {
mask: url("data:image/svg+xml, ") no-repeat 50%/0.625rem 0.625rem;
}
-.quantity-selector button:last-of-type.btn-sm:focus-visible {
+.quantity-selector button:last-of-type.btn-small:focus-visible {
padding-left: calc(calc(20px - var(--bs-border-width) + 2px) - var(--bs-border-width));
}
@@ -8069,6 +8069,32 @@ ol.bullet-list > li > ol > li > ol > li::before {
--bs-btn-icon-size: 1.5rem;
max-height: 48px;
}
+.btn.btn-small, .btn-small.btn-close {
+ --bs-btn-min-width: 40px;
+ --bs-btn-min-height: 40px;
+ --bs-btn-padding-start: 24px;
+ --bs-btn-padding-end: 24px;
+ --bs-btn-padding-y: 10px;
+ --bs-btn-icon-size: 16px;
+ --bs-btn-icon-gap: 6px;
+ --bs-btn-loading-size: 1rem;
+ font-size: var(--bs-font-size-label-medium);
+ line-height: var(--bs-font-line-height-label-medium);
+ /* rtl:remove */
+ letter-spacing: var(--bs-font-letter-spacing-label-medium);
+}
+.btn.btn-small:has(svg:not(.loader)), .btn-small.btn-close:has(svg:not(.loader)), .btn.btn-small:has(img:not(.loader)), .btn-small.btn-close:has(img:not(.loader)), .btn.btn-small:has(.icon:not(.loader)), .btn-small.btn-close:has(.icon:not(.loader)) {
+ --bs-btn-padding-start: 16px;
+ --bs-btn-padding-end: 24px;
+}
+.btn.btn-small.btn-icon.btn-icon, .btn-small.btn-close {
+ --bs-btn-padding-start: 10px;
+ --bs-btn-padding-end: 10px;
+ --bs-btn-padding-y: 10px;
+ --bs-btn-icon-gap: 0;
+ --bs-btn-icon-size: 1.25rem;
+ max-height: 40px;
+}
.use-rounded-corner-buttons {
--bs-btn-border-radius: 8px !important;
diff --git a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
index dbcb466b09..9b622aa48f 100644
--- a/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
+++ b/scss/tests/snapshot-tests/__snapshots__/ouds-web.css
@@ -4794,12 +4794,12 @@ textarea.form-control-lg {
padding-right: calc(calc(20px - var(--bs-border-width) + 2px) - var(--bs-border-width));
border-right-width: var(--bs-border-width);
}
-.quantity-selector button:first-of-type.btn-sm {
+.quantity-selector button:first-of-type.btn-small {
padding-right: calc(20px - var(--bs-border-width) + 2px);
min-width: 1rem;
min-height: 1rem;
}
-.quantity-selector button:first-of-type.btn-sm::after {
+.quantity-selector button:first-of-type.btn-small::after {
display: block;
min-width: inherit;
min-height: inherit;
@@ -4809,7 +4809,7 @@ textarea.form-control-lg {
mask: url("data:image/svg+xml, ") no-repeat 50%/0.625rem 0.125rem;
}
-.quantity-selector button:first-of-type.btn-sm:focus-visible {
+.quantity-selector button:first-of-type.btn-small:focus-visible {
padding-right: calc(calc(20px - var(--bs-border-width) + 2px) - var(--bs-border-width));
}
.quantity-selector button:last-of-type {
@@ -4832,12 +4832,12 @@ textarea.form-control-lg {
padding-left: calc(calc(20px - var(--bs-border-width) + 2px) - var(--bs-border-width));
border-left-width: var(--bs-border-width);
}
-.quantity-selector button:last-of-type.btn-sm {
+.quantity-selector button:last-of-type.btn-small {
padding-left: calc(20px - var(--bs-border-width) + 2px);
min-width: 1rem;
min-height: 1rem;
}
-.quantity-selector button:last-of-type.btn-sm::after {
+.quantity-selector button:last-of-type.btn-small::after {
display: block;
min-width: inherit;
min-height: inherit;
@@ -4847,7 +4847,7 @@ textarea.form-control-lg {
mask: url("data:image/svg+xml, ") no-repeat 50%/0.625rem 0.625rem;
}
-.quantity-selector button:last-of-type.btn-sm:focus-visible {
+.quantity-selector button:last-of-type.btn-small:focus-visible {
padding-left: calc(calc(20px - var(--bs-border-width) + 2px) - var(--bs-border-width));
}
@@ -6058,6 +6058,32 @@ ol.bullet-list > li > ol > li > ol > li::before {
--bs-btn-icon-size: 1.5rem;
max-height: 48px;
}
+.btn.btn-small, .btn-small.btn-close {
+ --bs-btn-min-width: 40px;
+ --bs-btn-min-height: 40px;
+ --bs-btn-padding-start: 24px;
+ --bs-btn-padding-end: 24px;
+ --bs-btn-padding-y: 10px;
+ --bs-btn-icon-size: 16px;
+ --bs-btn-icon-gap: 6px;
+ --bs-btn-loading-size: 1rem;
+ font-size: var(--bs-font-size-label-medium);
+ line-height: var(--bs-font-line-height-label-medium);
+ /* rtl:remove */
+ letter-spacing: var(--bs-font-letter-spacing-label-medium);
+}
+.btn.btn-small:has(svg:not(.loader)), .btn-small.btn-close:has(svg:not(.loader)), .btn.btn-small:has(img:not(.loader)), .btn-small.btn-close:has(img:not(.loader)), .btn.btn-small:has(.icon:not(.loader)), .btn-small.btn-close:has(.icon:not(.loader)) {
+ --bs-btn-padding-start: 16px;
+ --bs-btn-padding-end: 24px;
+}
+.btn.btn-small.btn-icon.btn-icon, .btn-small.btn-close {
+ --bs-btn-padding-start: 10px;
+ --bs-btn-padding-end: 10px;
+ --bs-btn-padding-y: 10px;
+ --bs-btn-icon-gap: 0;
+ --bs-btn-icon-size: 1.25rem;
+ max-height: 40px;
+}
.use-rounded-corner-buttons {
--bs-btn-border-radius: 8px !important;
diff --git a/site/src/assets/tac.js b/site/src/assets/tac.js
index d39c575b10..9623d80edc 100644
--- a/site/src/assets/tac.js
+++ b/site/src/assets/tac.js
@@ -32,10 +32,10 @@
alert.setAttribute('data-bs-theme', 'dark')
- document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-default', 'lg:ms-small')
- alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-strong', 'sm:mx-small', 'lg:ms-auto', 'my-small', 'lg:my-none')
+ document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-default', 'btn-small', 'lg:ms-small')
+ alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-strong', 'btn-small', 'sm:mx-small', 'lg:ms-auto', 'my-small', 'lg:my-none')
alert.querySelector('.tarteaucitronAllow').innerHTML = tarteaucitron.lang.acceptAll
- alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-negative', 'sm:mx-small', 'my-small', 'lg:my-none')
+ alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-negative', 'btn-small', 'sm:mx-small', 'my-small', 'lg:my-none')
alert.querySelector('.tarteaucitronDeny').innerHTML = tarteaucitron.lang.denyAll
}, { once: true })
diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx
index 898c647645..544b0c3b3d 100644
--- a/site/src/content/docs/components/buttons.mdx
+++ b/site/src/content/docs/components/buttons.mdx
@@ -556,6 +556,39 @@ Loading state can also be combined with all kind of buttons, including icons.
Default
`} />
+### Sizes
+
+Buttons are available in two sizes. Add `.btn-small` to have a smaller button. Default size is medium.
+
+Default
+
+
+
+
+
+ Minimal
+
+
+
+
+
+
+ Brand
+
+
+
+
+ Negative
+
+
+
+ Strong
+
+
+
+ Downloading file 3
+ `} />
+
### Layout
#### Block buttons
diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx
index 0f2ae052d0..7e8dc977f6 100644
--- a/site/src/content/docs/getting-started/migration-from-boosted.mdx
+++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx
@@ -158,7 +158,8 @@ All responsive classes, helpers, and utilities have been updated accordingly to
- Breaking `.btn-no-outline` has been removed. You can use `.btn-minimal` instead.
- Breaking `.btn-social` and all its variants have been removed.
- Breaking `.btn-outline-*` have been removed. You can still have them using `$enable-bootstrap-compatibility`. They all look like `.btn-default`.
-- Warning `.btn-sm` and `.btn-lg` have been removed.
+- Warning `.btn-lg` has been removed.
+- Warning `.btn-sm` has been renamed to `.btn-small`.
- Breaking Loading buttons implementation has changed. You should now use the classes `.loading-indeterminate` and `.loading-determinate` and no more spinner borders.
diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx
index 80cee40331..959ab38ce7 100644
--- a/site/src/content/docs/getting-started/migration.mdx
+++ b/site/src/content/docs/getting-started/migration.mdx
@@ -17,6 +17,20 @@ toc: true
```
+## v1.5.0
+
+
+
+### Components
+
+#### Buttons
+
+- New `.btn-small` has been added. Read more in our [buttons page]([[docsref:/components/buttons#sizes]]).
+
+- Info Button component has been updated to 3.3.0. Read more in the [button design changelog](https://r.orange.fr/r/S-ouds-doc-button_changelog).
+
+- Info Navigation button component has been updated to 3.3.0. Read more in the [button design changelog](https://r.orange.fr/r/S-ouds-doc-button_changelog).
+
## v1.4.0