Fix quantity selector focus state

[MewenLeHo]

Related issues

Coming from the separation of old #1949 PR into two distinct, more comprehensible and easier to review/maintain PR.
This PR is coming alongside with the work on the insufficient contrast in form error state (PR #2090) and was needed after the suggestions made by our design team during Spec meeting - June, 13.

Description

When on error and focused, we must keep the wole borders for the input in the middle and for the buttons.
So we must go from this:

to this:

(same for buttons)

Motivation & Context

Improve a11y and design unity.

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

• https://deploy-preview-2099--boosted.netlify.app/docs/5.3/forms/quantity-selector/
• https://deploy-preview-2099--boosted.netlify.app/docs/5.3/forms/validation/#supported-elements

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with responsive display

Development

• My change follows the developer guide
• (NA) I have added JavaScript unit tests to cover my changes
• (NA) I have added SCSS unit tests to cover my changes

Documentation

• (NA) My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• (NA) My change introduces changes to the migration guide
• (NA) My new component is added in Storybook
• (NA) My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	7320d57
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6544f795200b6d0008787975
😎 Deploy Preview	https://deploy-preview-2099--boosted.netlify.app/docs/5.3/forms/validation
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[julien-deramond]

FYI #2090 is merged, I've rebased this PR. First dev review can be started.

[Aniort]

NICE, ok 👌

[louismaximepiton]

LGTM 🚀

[Franco-Riccitelli]

Looks good to me.

[MewenLeHo]

Isn't it possible to have the input square? Right now, it's 42x40 (and 32x30 for the small variant).

In the Dev Tool, just setting a max-width: 40px does the trick, but maybe it's not that simple within the context of everything.

It's possible to keep the center input square at 40*40px.
But I would not recommend to do it using a max-width: 40px rule on it because if you do it the whole component will be smaller than the requested 120px:

I would rather find a way to override this rule for input groups to do it and remove the negative margins to make everything looks perfectly squared:

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: calc(var(--bs-border-width) * -1);
}

=> see commit e1aa6c8

[louismaximepiton]

$quantity-selector-sm-width should be 5.625rem (90px) instead of 5.5rem
also if we change $quantity-selector-input-max-width: 2.5rem (2.625rem atm) and $quantity-selector-input-sm-max-width: 1.875rem (2.5rem atm) it could avoid the flex-shrink in the comment below
What would you think about these modifications ?

[MewenLeHo]

$quantity-selector-sm-width should be 5.625rem (90px) instead of 5.5rem also if we change $quantity-selector-input-max-width: 2.5rem (2.625rem atm) and $quantity-selector-input-sm-max-width: 1.875rem (2.5rem atm) it could avoid the flex-shrink in the comment below What would you think about these modifications ?

I just pushed one commit without the .input-group to test it. It looks good to me but I am wondering if breaking change is too much or not... 🤔

(We can just revert the last commit if it's too much)

[louismaximepiton]

One more thing and we're GTG.
On the .input-group side, I think it'd be fine since it corrects a small shift we had. Any thoughts @julien-deramond ?

[louismaximepiton]

👌

[julien-deramond]

After clicking in the area where the value is set to "12", the value is a little bit truncated:

This is probably due to:

IDK if it's possible but might try to have a 20x20 area but reduce the left and right padding

Edit: tried something with a9afefa