feat: icons integration

[gabyzif]

This PR is an integration branch used for testing before merging it to main.

The main topic is Icons.

It handles the alignment of the text and icon inside the button:
PR 1
PR 2

The possibility to have an icon with a violet background and adds some missing svgs
PR 3

And it adds icon sizes
PR 4

As a result, in this realese users will be able to

• Align icon and button using the variant with-icon inside the button

args: {
    icon: <Icon name="siteMap" size="xl" />,
    children: ' ',
    type: 'default',
    shape: 'round',
    variant: 'with-icon',
  },

add a background color to the icon using the property type="background-solid"

const mpLogoWithBackground: IGlobalNavigationLogo = {
  label: 'Data Platform',
  icon: 'catalog',
  type: 'background-solid',
  onSuiteLogoClick: () => {
    alert('Going to mP Home!')
  },
}

and choose different sizes of the icons with some new sizes like

'xxxxl', 'xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'

[tibuurcio]

Good work! Left some suggestions.

[tibuurcio]

Not sure about ReactElement here, seems like it's good enough for the options we have (?) so let's go with that but we should look for a consistent usage of React types across the codebase.

[gabyzif]

ReactNode accepts a string and I want to enforce to use just one of the icons's name :)

Here is the difference detailed

[tibuurcio]

So this is still confusing for me. Let me try to explain:

We have an with-icon variant, which by only reading it implies we should use it whenever we have a button with an icon. But that's not the case, right? Because there's a case right now where we have an icon (old icons) and we don't use the variant. The variant was introduced to fix new icons only.

Conclusion: This variant is not actually being used for what its name describes.

So I was thinking, we should either have a better name OR add some comments to explain. But then something else came to mind. If we plan to discontinue this once we get rid of all the old icons, should we make a @deprecated comment? It's weird for something to be born already deprecated but I think it makes sense in this case.

Let me know how you feel about it.

[tibuurcio]

I would even go as far as renaming it as well. If we only need to use the variant to fix the problem for new icons while we don't get rid of the old ones, we could call it something like with-new-icon and leave a @deprecated comment explaining the differences between old/new icons. Once we swap all icons, we fix the styling problem and get rid of the variant alltogether.

[gabyzif]

done :)

[tibuurcio]

✨

[mparticle-automation]

🎉 This PR is included in version 1.15.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀