Clay: ClayAlert space between icon and text

[dgarciasarai]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Is there an example you can provide via codesandbox.com?

https://codesandbox.io/s/jolly-visvesvaraya-hlxcg?file=/src/App.js

What are the steps to reproduce?

Create a default ClayAlert in a React app (it doesn't matter if the alert variant is stripe)

What is the expected result?

Lexicon define the space between the icon and the text as 8px:

When adding a ClayAlert in React, the space is 17px:

• 8px for element with classes autofit-col inline-item-before
• 4px for element with classes autofit-col autofit-col-expand
• 5px for <strong class="lead"></strong> element

Environment

| Tech | Version |
| ----- | ------- |
| Clay | v3 |
| React | 16.12.0 |
| Use in module | analytics-reports-web |
| Bug | https://issues.liferay.com/browse/LPS-113812 |

[pat270]

Just leaving a note, we can remove inline-item-before and not output <strong class="lead"></strong> if there is no lead text. Those changes should provide the desired outcome.

[bryceosterhaus]

@dgarciasarai just sent a PR for this fix. Release of this should be Thursday.

[dgarciasarai]

Thanks!!!