<box>: use fixed icon width for seamless style boxes

[damithc]

Current:

It's better if the vertical bar appears at the same position in all variations?

[yash-chowdhary]

I tried applying a fixed width to the icon-wrapper class. That way, even the non-seamless style boxes will have their content aligned.
I used em units because we allow sizing of icons.
This is what it looks like using a width of 1em with different icon sizes -

• icon-size= "2x"

• icon-size= "3x"

When the size of the icon gets larger in the non-seamless box, the width is quite apparent (when the icon itself is not a very wide one, like fa-exclamation).
However, a smaller width (e.g. .7em) distorts the vertical-bar for large-sized icons as seen here -

width: 1em gives the best results, without any distortion of the vertical divider. I feel that we can compromise on the width being quite obvious if we want to maintain alignment, as it enhances readability.

Can I get some feedback on this?

[damithc]

Can I get some feedback on this?

I'm OK with it. Let's wait to hear from some others though.

[nbriannl]

Would it be possible to center align the icon relative to the wrapper?

[yash-chowdhary]

Would it be possible to center align the icon relative to the wrapper?

Yup. Here's how it'll look like -

[damithc]

Looks like this PR affected another feature #1123 (comment)

[yash-chowdhary]

Looking into it 👍