Unneeded padding on warning component?

[NickColley]

Noticed that the govuk-warning-text__text element has padding left that includes an extra 15px to compensate for a negative margin left (see below, dotted outline added by me to show boundary of component). Seems like this could be removed and the padding decreased, but there must be a reason for it?

Originally posted by @andysellick in alphagov/govuk-design-system-backlog#71 (comment)

[36degrees]

For reference, it looks like this was copied from Elements.

[NickColley]

@andysellick I believe this was done to allow for multiple lines:

[36degrees]

Yep, but removing the negative margin and reducing the padding appears to be the same:

- margin-left: -$govuk-gutter-half;
- padding-left: 65px;
+ padding-left: 50px;

[NickColley]

That's weird, I've asked Andy if he wants to do a PR for this... If he's busy I'll turn this into a good first timer issue.

[andysellick]

I am busy, but I'd like to contribute (if only to experience the process) so I'll try to raise a PR soon (also it's not a huge change). Thanks!

[NickColley]

@andysellick will leave this open for you when you get a second then.

[stevenaproctor]

@NickColley @36degrees Do you think the icon should be vertically aligned to the middle of the paragraph, like in the example, or the top or the paragraph?

[NickColley]

@stevenaproctor the content used there is really extreme and silly, so not sure in practice if that part of the design should be changed.

If you think we can improve it though, feel free to open another issue with some more real world example content, and what you think it should look like and we can consider it.

[stevenaproctor]

@NickColley I just think it scans better if the icon is at the top of the paragraph. You would naturally scan left to right, not left, down, up, right...if you see what I mean.