Skip to content

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

@isabellechanclou

Description

@isabellechanclou

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions