fix: fix inline text

[montezume]

Summary

The isInline prop is currently broken for Text components.

Inline seems to be some sort of reserved word in stage 2 of postcss-preset-env. That's as far as my investigation got. If you switch to stage 3, then this doesn't happen. However, this doesn't happen in our webpack build, only in our rollup build.

when we build ui-kit with webpack (for storybook), it takes the following css

.inline {
  display: inline-block;
}

and it turns it into something like this

{
 inline: 'inline_mod_blah'
}

when we build ui-kit with webpack (for production), it takes the following css

.inline {
  display: inline-block;
}

and it turns it into something like this

{
 inline-left: 'inline_mod_blah',
 inline-right: 'inline_mod_blah',
}

It must be some sort of reserved word or something. I don't think it's worth further investigation.

Approach

Rename css class to text-inline.

[dferber90]

🙄 What a weird issue

[montezume]

@dferber90 🤣

[tdeekens]

So odd.