Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs > Components > Buttons > With icon: Fix horizontal padding (small + large sizes) + labels #1122

Open
3 tasks done
isabellechanclou opened this issue Feb 28, 2022 · 3 comments · May be fixed by #1611
Open
3 tasks done
Assignees
Labels

Comments

@isabellechanclou
Copy link
Member

isabellechanclou commented Feb 28, 2022

Prerequisites

Describe the issue

Buttons with icon have a different padding than the one indicated on Orange Design System (https://system.design.orange.com/0c1af118d/p/278ebc-standard-buttons/b/247486). Concerned :

  • Small secondary button: padding left and right equals 12px (10px padding + 2px border) in Boosted instead of 15px (13px padding + 2px border) in ODS

  • Large secondary button: padding left and right equals 22px (20px padding + 2px border) in Boosted instead of 20px (18px padding + 2px border) in ODS

⚠️ Not true anymore (=> see Update below): After talking about that with Cyriaque Billard, it appears that buttons with icon + label don't exist in 3 sizes in the Orange Design System, so those components shouldn't be uses in this context. See Issue Docs > Components > Buttons > With icon: Add "not in ODS" alert message #1125 - Closed because no more needed (see below)

⚠️⚠️ True "but" (=> see Update below): update with info given by Cyriaque Billard (March 1st 2022):

I gave a wrong information to you regarding the sizes that we provide for some buttons in the Web UI Kit. The correct info is:

  • Button with label, button with icon+label are provided in Small, Medium, and Large sizes in the Web UI Kit. But it is not reflected in the DSM and in Zeplin. We will correct that. In the meantime I can give you the specifications. => Issue Docs > Components > Buttons > With icon: Add "not in ODS" alert message #1125 no more need and therefore closed
  • Other buttons are provided at Medium size only.

Specifications:

  • All the values for the typo are identical to the buttons without icons.
    image

⚠️⚠️⚠️ Update with last info given by Cyriaque Billard (November 10th 2022):
The changes that have to be made are :

  • set icon size in small buttons to 15px instead of 16px (1rem) and change comment above (icons sizes are always a multiple of 5)
  • 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
  • slightly lower small buttons padding (try 1px lower). This has to be done for small buttons with or without icons
  • do not change anything else because it already seems ok

Reduced test cases

NA

What operating system(s) are you seeing the problem on?

Windows, macOS

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Boosted are you using?

v5.1.0

@hannahiss
Copy link
Member

So this issue is not fixable ?
Also, buttons with icon examples in boosted doc are labelled "Secondary" but have primary style, which is confusing : https://boosted.netlify.app/docs/5.1/components/buttons/#with-icon

@isabellechanclou
Copy link
Member Author

I updated this card description (see "Update" part) which make the point possible to fix.
Regarding the button's label, you're totally right and yes the labels have to be changed. 2 possibilities for that:
1- replacing "Secondary" by "Primary"
2- replacing "Secondary" respectively by "Small button", "Medium button" and "Large button" as it is done in the "Sizes" paragraph even though we are not in this paragraph.
I tend to prefer this 2nd solution... I you have an opinion...

@isabellechanclou isabellechanclou changed the title Docs > Components > Buttons > With icon: Fix horizontal padding (small + large sizes) Docs > Components > Buttons > With icon: Fix horizontal padding (small + large sizes) + labels Mar 21, 2022
@hannahiss hannahiss self-assigned this Nov 10, 2022
@hannahiss hannahiss linked a pull request Nov 10, 2022 that will close this issue
7 tasks
@Franco-Riccitelli
Copy link

I have checked the vertical positioning of the labels for Buttons with Icons and Labels across all three sizes using the example on the Boosted page ( https://boosted.orange.com/docs/5.2/components/buttons/#with-icon ).
I measured the distance between the baseline of the label to the bottom of the button and they are the same as the Web UI kit sizes. No changes are needed for the vertical positioning of the labels on these buttons.
Screenshot 2023-01-12 at 9 27 13 am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants