[OUDS] fix(buttons): Avoid shrinking icon in buttons with text and icon

[hannahiss]

Types of change

• Non-breaking change
• Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Context & Motivation

When the screen is narrow and the text is long, in buttons with text plus icons, the icons may be compressed. This can be seen on the homepage in mobile mode, see image below.

Description

Add missing flex-shrink: 0 CSS property to avoid shrinking icon.
(NB: I checked the other components, they all seem ok, including link with icon which already has this property)

Checklists

• I have read the contributing guidelines
• My change follows the developer guide
• My change pass all tests
• My change is compatible with a responsive display
• I have added tests (Javascript unit test or visual) to cover my changes
• My change introduces changes to the documentation that I have updated accordingly
  • Title and DOM structure is correct
  • Links have been updated (title changes impact links)
  • CSS for the documentation
• I have checked all states and combinations of the component with my change
• I have checked all the impacts for the other components and core behavior (grid, reboot, utilities)

Checklist (for Core Team only)

• The changes need to be in the migration guide
• The changes are well displayed in Storybook (be careful if example order has changed for DSM)
• The changes are compatible with RTL
• Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

• Code review
• Design review
• A11y review
• Commit on ouds/main following conventional commit

Live previews

• https://deploy-preview-3335--boosted.netlify.app/
• https://deploy-preview-3335--boosted.netlify.app/docs/components/buttons#text-and-icon

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	68f2f9b
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6985bf2cd8ccea0008ae7489
😎 Deploy Preview	https://deploy-preview-3335--boosted.netlify.app
📱 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 project configuration.

[louismaximepiton]

LGTM

[vprothais]

Thank you for the fix.
Don't we have also an issue regarding the width of the button ? Since the text wrap, it takes less width and the space between the icon and the text and on the right side is greater than the one defined. It is linked to the flex I think.