fix(Button): content shorthand as element was not truncating the text inside

[mnajdova]

This PR fixed #520 - truncating the content of the button, even if it is provided as a element.

Prev:

content:

Fixed:

content:

Not, sure if we want to, but I tried fixing the issue for the children API as well, by adding this styling on the root, but unfortunately display: 'inline-flex', cannot be used with textOverflow: 'ellipsis'. I tried replacing inline-flex with inline-block, but there were lots of regressions, I tried fixing them but it is not something trivial (basically, I tried replacing alignItems: 'center' and justifyContent: 'center', with verticalAlign: 'middle', then I had to add float for the icon on order for it to be correctly align with the content, but still there are lots of regressions... If there is some proposal, please let me know, and I will try them...) But yes, the most important thing is whether we want to support this for the children API, if we don't then the changes in this PR are enough for fixing the existing issue.

[kuzhelov]

I would leave Children API for future discussion - there are several reasons for why it seems to be right thing to do, the most appealing one, to my mind, is that

• we are not exposing any prop that will guarantee truncated content for the Button at the moment (like truncateContent). In that case, yes, we would need to worry about default styling approach that would guarantee this effect
• client is not limited to introduce truncation effect by herself - actually, children API suggests that content will be rendered as is, so, if necessary, truncate/no-overflow styles could be provided by client then