Small and large buttons with icons - adjustments

[hannahiss]

Related issues

Closes #1122

Description

• set horizontal padding for small buttons to 13px instead of currently 10px - and not 15px (because in sketch horizontal padding in buttons includes 2px border). This has to be done for small buttons with or without icons
• set horizontal padding for large buttons to 18px instead of currently 20px - and not 20px (because in sketch horizontal padding in buttons includes 2px border). This has to be done for large buttons with or without icons
• set icon size in small buttons to 15px (.9375rem) instead of 16px (1rem) => do not lower icon of 1px vertically to preserve button size (30px)
• change existing icon with Solaris icon (same icon but not the same layout)

Motivation & Context

Differences between deisgn and reality in Boosted

Types of change

• Bug fix (non-breaking which fixes an issues)

Live previews

• https://deploy-preview-1611--boosted.netlify.app/docs/5.2/components/buttons/#with-icon

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• My change introduces changes to the migration guide
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	ea4bc7f
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6596d321a908680008af950a
😎 Deploy Preview	https://deploy-preview-1611--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 site configuration.

[hannahiss]

@julien-deramond
After a few tests and exchanges with LM and Isabelle, it seems that, for the small buttons:

• putting 15px for the icons can be problematic for centering, because the button is 30px, it doesn't fit. And in addition in the doc, users have to be told to put 0.9375rem instead of 1rem...
• if we try to lower the text by removing the 1px offset (which is line 29 of _buttons.scss), the icon also goes down. Then, if we add a padding-bottom of 1px on the icon, this icon decreases from the bottom, and we finish with the text well aligned and the icon at 15px... :-)

If this solution (remove the offset pixel + 1px padding-bottom only for small buttons) seems good to you, how to achieve it ? It would be necessary to modify the button creation mixin and I'm not sure about the good way to do this...

[hannahiss]

After spec review, it has been decided:

• to change icon size to 15px instead of 16px in all small buttons
• not to change the positioning of the text in small buttons (see Franco's comment on issue)*
• Franco clarified that if the icon cannot be aligned in the middle (odd size in pixels), the padding must be one pixel larger at the bottom than at the top

[louismaximepiton]

FWIW, the Quantity selector icons are 10px height and width for small buttons.

[hannahiss]

After last meeting with Franco about small buttons, he agreed visually on a version for small buttons with icons with:

• icon size 15px (.9375rem)
• do not lower icon of 1px vertically to preserve button size (30px) (as i used to be)
• change existing icon with Solaris icon (same icon but not the same layout, the one from Solaris having some space at the border of svg square) => icon result is smaller

But this version does not fit for icon buttons btn-icon: icon is not centered neither vertically nor horizontally

Other questions:

• We need to check svg quality with Franco - for rendering - and Julien - for size: the current version has been optimized with svgo => I find the result not so great in terms of quality rendering
• We need to check if other icons in Boosted sprite are to be changed too... And if there is some impact to this/these change(s)

[hannahiss]

Last discussion with Franco:
Even though we could achieve a correct design for small buttons with icons by changing the icon with the real Solaris one, it creates problems for the version with no text: the icon with 15px x 15px size cannot be centered, neither vertically (1px more at the bottom, but we already knew this) nor horizontally (1px more at right). Thus it seems not possible to change the size to 15px instead of 16px since it is not an even number.
Design card: "Dev. feedback >> Buttons with icons"

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[louismaximepiton]

FYI, Designers are working on implementing even px icons. For instance 16px instead of 15px. We might want them to finish first before implementing this PR.