feat(lib): Bump button v3.3.0, expand button v3.2.0 and navigation button v3.3.0

.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",

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.',

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

packages/migrate/tests/__snapshots__/migrated-boosted.html

@@ -29,7 +29,7 @@ <h1 class="p-small mb-none lg:mb-none display-medium">Test display and spacing</
     <button class="btn-minimal"></button>
     <button class="btn-social">remove deprecated class</button>
     <button class="btn-default"></button>
-    <button class="btn-sm">remove deprecated class</button>
+    <button class="btn-small"></button>
 
     <!-- Helpers -->
     <div class="2xl:sticky-top"></div>

packages/migrate/tests/source-boosted.html

@@ -29,7 +29,7 @@ <h1 class="p-2 mb-0 mb-lg-0 display-2">Test display and spacing</h1>
     <button class="btn-info"></button>
     <button class="btn-social">remove deprecated class</button>
     <button class="btn-outline-primary"></button>
-    <button class="btn-sm">remove deprecated class</button>
+    <button class="btn-sm"></button>
 
     <!-- Helpers -->
     <div class="sticky-xxl-top"></div>

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 {
@@ -522,6 +552,7 @@
 
 .btn-previous::before,
 .btn-next::after {
+  flex-shrink: 0;
   width: var(--#{$prefix}btn-icon-size);
   height: var(--#{$prefix}btn-icon-size);
   background-color: currentcolor;

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");
 

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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'><path d='M0 0h10v2H0z'/></svg>") 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M10 4H6V0H4v4H0v2h4v4h2V6h4V4z'/></svg>") 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;
@@ -8295,6 +8321,7 @@ ol.bullet-list > li > ol > li > ol > li::before {
 
 .btn-previous::before,
 .btn-next::after {
+  flex-shrink: 0;
   width: var(--bs-btn-icon-size);
   height: var(--bs-btn-icon-size);
   background-color: currentcolor;

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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'><path d='M0 0h10v2H0z'/></svg>") 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M10 4H6V0H4v4H0v2h4v4h2V6h4V4z'/></svg>") 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;
@@ -6284,6 +6310,7 @@ ol.bullet-list > li > ol > li > ol > li::before {
 
 .btn-previous::before,
 .btn-next::after {
+  flex-shrink: 0;
   width: var(--bs-btn-icon-size);
   height: var(--bs-btn-icon-size);
   background-color: currentcolor;

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 })
 

site/src/content/docs/components/buttons.mdx

@@ -556,6 +556,39 @@ Loading state can also be combined with all kind of buttons, including icons.
     <button type="button" class="btn btn-default">Default</button>
   </div>`} />
 
+### Sizes
+
+Buttons are available in two sizes. Add `.btn-small` to have a smaller button.
+
+<Example buttonLabel="small buttons" code={`<button type="button" class="btn btn-default btn-small">Default</button>
+
+  <button type="button" class="btn btn-minimal btn-small">
+    <svg aria-hidden="true">
+      <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#heart-empty')}"/>
+    </svg>
+    Minimal
+  </button>
+
+  <button type="button" class="btn btn-brand btn-icon btn-small">
+    <svg aria-hidden="true">
+      <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#heart-empty')}"/>
+    </svg>
+    <span class="visually-hidden">Brand</span>
+  </button>
+
+  <button type="button" class="btn btn-negative btn-small">
+    <span class="icon si si-settings" aria-hidden="true"></span>
+    Negative
+  </button>
+
+  <button type="button" class="btn btn-strong loading-indeterminate btn-small" id="loading-btn-small" disabled>
+    Strong
+    <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="loader" aria-hidden="true">
+      <circle class="loader-inner" cx="20" cy="20" r="17"></circle>
+    </svg>
+    <span role="status" id="loading-btn-small-msg" class="visually-hidden">Downloading file 3</span>
+  </button>`} />
+
 ### Layout
 
 #### Block buttons
@@ -590,9 +623,24 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
     <button class="btn btn-default" type="button">Button</button>
   </div>`} />
 
-#### Disable text wrapping
+#### Text wrapping
 
-If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
+A button's text should not exceed one line, but will automatically wrap if necessary. It also natively supports `<br/>` tags to break the text into multiple lines. Read more about [text wrapping in a button](https://r.orange.fr/r/S-ouds-doc-button/t/b29aae8b37).
+
+If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for all buttons.
+
+<Example buttonLabel="buttons with wrapped text" class="bd-btn-example d-flex flex-column align-items-start" code={`<button class="btn btn-default" type="button">
+    <svg aria-hidden="true">
+      <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#heart-empty')}"/>
+    </svg>
+    The label remains centered in<br/>multiline mode with an icon
+  </button>
+  <button class="btn btn-default" type="button">
+    <svg aria-hidden="true">
+      <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#heart-empty')}"/>
+    </svg>
+    In small contexts the button text wraps automatically to adapt its behavior
+  </button>`} />
 
 ## [[comp]] Navigation button
 
@@ -730,3 +778,13 @@ Please refer to the [loading state section of the button component](#loading) fo
     <span role="status" id="loading-nav-btn-msg-3" class="visually-hidden">Loading next page</span>
   </button>`} />
 
+### Layout
+
+#### Text wrapping
+
+A button's text should not exceed one line, but will automatically wrap if necessary. It also natively supports `<br/>` tags to break the text into multiple lines. Read more about [text wrapping in a button](https://r.orange.fr/r/S-ouds-doc-navigation-button/t/99e6bc9526).
+
+If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
+
+<Example buttonLabel="navigation buttons with wrapped text" class="bd-btn-example d-flex flex-column align-items-start" code={`<button class="btn btn-default btn-next" type="button">The label remains centered in<br/>multiline mode with an icon</button>
+  <button class="btn btn-default btn-previous" type="button">In small contexts the button text wraps automatically to adapt its behavior</button>`} />

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
 - <span class="tag tag-small tag-negative"><span class="tag-status-icon"></span>Breaking</span> `.btn-no-outline` has been removed. You can use `.btn-minimal` instead.
 - <span class="tag tag-small tag-negative"><span class="tag-status-icon"></span>Breaking</span> `.btn-social` and all its variants have been removed.
 - <span class="tag tag-small tag-negative"><span class="tag-status-icon"></span>Breaking</span> `.btn-outline-*` have been removed. You can still have them using `$enable-bootstrap-compatibility`. They all look like `.btn-default`.
-- <span class="tag tag-small tag-warning"><span class="tag-status-icon"></span>Warning</span> `.btn-sm` and `.btn-lg` have been removed.
+- <span class="tag tag-small tag-warning"><span class="tag-status-icon"></span>Warning</span> `.btn-lg` has been removed.
+- <span class="tag tag-small tag-warning"><span class="tag-status-icon"></span>Warning</span> `.btn-sm` has been renamed to `.btn-small`.
 - <span class="tag tag-small tag-negative"><span class="tag-status-icon"></span>Breaking</span> Loading buttons implementation has changed. You should now use the classes `.loading-indeterminate` and `.loading-determinate` and no more spinner borders.
 <div class="ps-xlarge">