fix(quantity selector): focus state rendering in error (#2099)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

js/src/quantity-selector.js

@@ -26,7 +26,7 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 const SELECTOR_STEP_UP_BUTTON = '[data-bs-step="up"]'
 const SELECTOR_STEP_DOWN_BUTTON = '[data-bs-step="down"]'
 const SELECTOR_COUNTER_INPUT = '[data-bs-step="counter"]'
-const SELECTOR_QUANTITY_SELECTOR = '.input-group.quantity-selector'
+const SELECTOR_QUANTITY_SELECTOR = '.quantity-selector'
 
 /**
  * Class definition

js/tests/unit/quantity-selector.spec.js

@@ -81,7 +81,7 @@ describe('QuantitySelector', () => {
 
   it('should take care of element either passed as a CSS selector or DOM element (Step Up button)', () => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
@@ -102,7 +102,7 @@ describe('QuantitySelector', () => {
 
   it('should take care of element either passed as a CSS selector or DOM element (Step Down button)', () => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
@@ -123,7 +123,7 @@ describe('QuantitySelector', () => {
 
   it('should increment by one step on click on Step Up button', () => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
@@ -150,7 +150,7 @@ describe('QuantitySelector', () => {
 
   it('should decrement by one step on click on Step Down button', () => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
@@ -177,7 +177,7 @@ describe('QuantitySelector', () => {
 
   it('should increment a decimal value by 0.5 step on click on Step Up button and round it', () => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.25" min="0" max="10" step="0.5" data-bs-round="1" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
@@ -200,7 +200,7 @@ describe('QuantitySelector', () => {
 
   it('should decrement a decimal value by 1 step on click on Step Down button but not resulting as a negative value', () => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
@@ -225,7 +225,7 @@ describe('QuantitySelector', () => {
 
   it('should increment a decimal value by 1 step on click on Step Up button but not resulting as a negative value', () => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="8.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
@@ -250,7 +250,7 @@ describe('QuantitySelector', () => {
 
   it('should disable click on Step Down button on load to prevent a value out of range', done => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
@@ -278,7 +278,7 @@ describe('QuantitySelector', () => {
 
   it('should disable click on Step Up button on load to prevent a value out of range', done => {
     fixtureEl.innerHTML = [
-      '<div class="input-group quantity-selector">',
+      '<div class="quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
       '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',

scss/_variables.scss

@@ -2354,7 +2354,7 @@ $sticker-content-max-width-lg:          $sticker-size-lg * .7071067812 !default;
 //// Quantity selector
 // scss-docs-start quantity-selector
 $quantity-selector-width:                 7.5rem !default;
-$quantity-selector-sm-width:              5.5rem !default;
+$quantity-selector-sm-width:              5.625rem !default;
 
 $quantity-selector-btn-padding-x:         add($btn-icon-padding-x, 2px) !default;
 $quantity-selector-btn-padding-x-sm:      add($btn-icon-padding-x-sm, 2px) !default;
@@ -2372,8 +2372,8 @@ $quantity-selector-icon-remove-sm:        $remove-icon-sm !default;
 $quantity-selector-icon-remove-height:    .125rem !default;
 $quantity-selector-icon-sm-remove-height: .125rem !default;
 
-$quantity-selector-input-max-width:       2.625rem !default;
-$quantity-selector-input-sm-max-width:    2.5rem !default;
+$quantity-selector-input-max-width:       2.5rem !default;
+$quantity-selector-input-sm-max-width:    1.875rem !default;
 // scss-docs-end quantity-selector
 
 //// Footer

scss/forms/_quantity-selector.scss

@@ -1,8 +1,13 @@
 .quantity-selector {
+  display: flex;
+  flex-wrap: wrap;
   width: $quantity-selector-width;
 
   .form-control {
     max-width: $quantity-selector-input-max-width;
+    // Add 20% security padding so the input's text isn't clipped when focused
+    padding-right: calc(#{$input-padding-x} * .8); // stylelint-disable-line function-disallowed-list
+    padding-left: calc(#{$input-padding-x} * .8); // stylelint-disable-line function-disallowed-list
     text-align: center;
     @include transition(none);
     appearance: textfield;
@@ -31,22 +36,48 @@
       @include button-icon($quantity-selector-icon-remove, $size: $quantity-selector-icon-width $quantity-selector-icon-remove-height, $pseudo: "after");
       order: -1;
       padding-right: $quantity-selector-btn-padding-x;
-      border-right: none;
+      border-right-width: 0;
+
+      &:focus {
+        &[data-focus-visible-added] { // stylelint-disable-line selector-no-qualifying-type
+          padding-right: subtract(#{$quantity-selector-btn-padding-x}, var(--#{$prefix}border-width));
+          border-right-width: var(--#{$prefix}border-width);
+        }
+      }
 
       &.btn-sm { // stylelint-disable-line selector-no-qualifying-type
         @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");
         padding-right: $quantity-selector-btn-padding-x-sm;
+
+        &:focus {
+          &[data-focus-visible-added] { // stylelint-disable-line selector-no-qualifying-type
+            padding-right: subtract(#{$quantity-selector-btn-padding-x-sm}, var(--#{$prefix}border-width));
+          }
+        }
       }
     }
 
     &:last-of-type {
       @include button-icon($quantity-selector-icon-add, $size: $quantity-selector-icon-width $quantity-selector-icon-add-height, $pseudo: "after");
       padding-left: $quantity-selector-btn-padding-x;
-      border-left: none;
+      border-left-width: 0;
+
+      &:focus {
+        &[data-focus-visible-added] { // stylelint-disable-line selector-no-qualifying-type
+          padding-left: subtract(#{$quantity-selector-btn-padding-x}, var(--#{$prefix}border-width));
+          border-left-width: var(--#{$prefix}border-width);
+        }
+      }
 
       &.btn-sm { // stylelint-disable-line selector-no-qualifying-type
         @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");
         padding-left: $quantity-selector-btn-padding-x-sm;
+
+        &:focus {
+          &[data-focus-visible-added] { // stylelint-disable-line selector-no-qualifying-type
+            padding-left: subtract(#{$quantity-selector-btn-padding-x-sm}, var(--#{$prefix}border-width));
+          }
+        }
       }
     }
   }

scss/mixins/_forms.scss

@@ -105,12 +105,9 @@
       }
     }
 
-    // Boosted mod: Remove border on input for form element QuantitySelector
+    // Boosted mod: Change border-color when on error for form element QuantitySelector
     .quantity-selector .form-control {
       @include form-validation-state-selector($state) {
-        border-right: none;
-        border-left: none;
-
         // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
         & ~ button {
           border-color: $border-color;

site/content/docs/5.3/forms/quantity-selector.md

@@ -22,7 +22,7 @@ Value will vary between the values defined for the `min` and `max` attributes (n
 `step` attribute is also customizable and define the interval between values.
 
 {{< example >}}
-<div class="input-group quantity-selector">
+<div class="quantity-selector">
   <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
   <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
     <span class="visually-hidden">Step down</span>
@@ -38,7 +38,7 @@ Value will vary between the values defined for the `min` and `max` attributes (n
 Set small size using the contextual class `.quantity-selector-sm`.
 
 {{< example >}}
-<div class="input-group quantity-selector quantity-selector-sm">
+<div class="quantity-selector quantity-selector-sm">
   <input type="number" id="inputQuantitySelectorSm" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
   <button type="button" class="btn btn-icon btn-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="down">
     <span class="visually-hidden">Step down</span>
@@ -54,7 +54,7 @@ Set small size using the contextual class `.quantity-selector-sm`.
 Add the `disabled` boolean attribute on quantity selector elements to give it a grayed out appearance and remove pointer events.
 
 {{< example >}}
-<div class="input-group quantity-selector">
+<div class="quantity-selector">
   <input type="number" id="inputQuantitySelectorDisabled" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
   <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
     <span class="visually-hidden">Step down</span>

site/content/docs/5.3/forms/validation.md

@@ -284,7 +284,7 @@ Validation styles are available for the following form controls and components:
 
   <div class="mb-3">
     <label for="inputQuantitySelector" class="form-label">Quantity selector</label>
-    <div class="input-group quantity-selector w-100">
+    <div class="quantity-selector w-100">
       <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="11" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
       <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
         <span class="visually-hidden">Step down</span>

site/content/docs/5.3/migration.md

@@ -27,6 +27,10 @@ If you need more details about the changes, please refer to the [v5.3.3 release]
   - <span class="badge text-bg-success">New</span> List group with badges has been added to Orange Design System specifications and can now be used in your websites.
   - <span class="badge text-bg-warning">Warning</span> List group font weight is now bold by default. Please check that it doesn't break your design.
 
+### Forms
+
+- <span class="badge text-bg-warning">Warning</span> Quantity selector has been updated to ensure a proper visible focus state and the `.input-group` class has been removed. Make sure to incorporate these changes into your websites.
+
 ### CSS and Sass variables
 
 - <details class="mb-2">