[ic-chip] Size small with icon needs padding

[gd2910]

Summary of the bug

The small size chip with icon needs more padding on the left

Sizes code example also needed for chip

📸 Screenshots or code

Additional info

Our code examples on the design site and in storybook only contain circular icons, we should look at varying this to catch unexpected sizing issues

[GCHQ-Developer-299]

Question for design: Should icons on small chips be a specific size (in this example, shrinking the icon would 'fix' the issue) - is there a specific padding that icons should have around them?

[mi6-577]

Icons should resize for smaller variants, in the same way checkbox resizes when small

[mi6-577]

Icon only buttons scale their images like this;

• Large = 24x24 padding:8px
• Default = 20x20 padding: 6px
• Small = 16x16 padding: 4px

However, the clickable surface to change state on an icon only button is as follows;

• Large = 40x40
• Medium = 32x32
• Small = 24x24

All icons on Chips currently are sized at 24x24 regardless of Chip size.

We can't make these smaller as the clickable area will also shrink, making them more difficult to use. We can't increase the size of the icons on Large and Medium sized Chips, because that distorts the edges and it becomes less of a lozenge shape - and would potentially be a breaking change.

[mi6-577]

Main parent container frame: Horizontal padding on all Chip type main parent containers is set to 8px - this is because designers could pick a squared icon to lead the chip, as such we need to ensure sufficient and consistent padding from the edges. Horizontal padding here manages the gap between the left edge of the chip and the icon or label and right edge of the chip and the trailing icon or label.

For all chip types, the horizontal gap between objects in this frame is 0px - because the inner frame controls the padding on either side of the Label - particularly useful if not displaying an icon.

Inner container frame: Horizontal padding on Static Chip inner container (containing label only) is as follows;

• Large: 8
• Medium: 6
• Small: 4 This manages the gap between the left and right and sides of the label and the next element of content. If no icon is displayed, it means the label sits neatly in the centre of the Chip without feeling pushed against the edge. There is only 1 number since the padding is the same on both left and right of the label.

Horizontal padding on Dismissible and Action Chip inner container is set slightly differently as it needs to include some padding to the left of the label (in case a leading icon is not displayed);

• Large: L=8, R=0
• Medium: L=6, R=0
• Small: L=4, R=0

Horizontal gap between objects for Dismissible and Action Chips inner container is set as follows;

• Large: 8px
• Medium: 6px
• Small: 4px This manages the gap between the label and the trailing icon.

Full details can be found on this Figma branch which will be merged once development has been completed. The guidance site Chip images have been updated and will need to be updated on the site as part of this change.