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 - +
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

- +
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. `} /> +### Sizes + +Buttons are available in two sizes. Add `.btn-small` to have a smaller button. Default size is medium. + +Default + + + + + + + + `} /> + ### 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