Fix inset and padding on buttons with icons

[ganyicz]

Original PR

The scenario

When using a button with an icon, the padding is unbalanced

The lines represent the default padding without an icon

The problem

At this size, Heroicons come with inner padding of ~1px, pushing the icon ~2px from the edge (see 2nd and 3rd row)

We compensate for this on the default size, changing ps-4/pe-4 (16px) to ps-3/pe-3 (12px) when an icon is present (see 1st row)

The problem is that this is inconsistent:

1. We overcompensate by 2px on the default size
2. We do not compensate for this on the smaller sizes

The solution

1. Pull back the adjustment by 2px on the default size
2. Add the adjustment to the smaller sizes

---

UPDATE:

I realized the original padding may have been adjusted for chevron which seems to have double the inner padding than the rest of the icons. With the above adjustments, the chevron is now pushed inside from the edges.

Revision:

The scenario

Horizontal inset on a default size button doesn't correctly negate padding when an icon is present.

The problem

When an icon is present, we intentionally reduce the padding on the side with the icon. This is to compensate for the padding inside the heroicon svg. Without this adjustment, the padding on the side with the icon would look bigger than on the side without it.

($iconLeading ? 'ps-3' : 'ps-4') . ' ' . ($iconTrailing ? 'pe-3' : 'pe-4')

The problem is that inset doesn't account for this.

Additionally, the smaller sizes do not have this adjustment, which is why this bug only appears on the default size:

The solution

1. Add icon adjustment to smaller sizes
2. Make inset icon-aware on all sizes

Update

3. Reduce the gap on the xs size from gap-2 to gap-1