The button module from Skin was recently updated to support wrapping and overflow to match the way native HTML buttons work. In the scenario when buttons are given a fixed width, they may cause overflow for the buttons text, and in certain cases the text needs to be truncated. Truncation will force the button to single line of text and add the ellipsis. Although truncation is supported, in most cases it is the last resort and should be used sparingly.
This change would add:
a fixed attribute which would add class names based on the size of the button which was requested and fix the height accordingly.
a truncate attribute which would truncate the text based on a fixed width being applied, with a medium height button being the default case.
To note, the truncation class from Skin will not work in the case of the pill buttons, as their requirement is to fill two lines of space, then truncate as needed. CSS only allows a single line of text to add an ellipsis. Therefore, we will cover that scenario in a separate task related to the pills, and do so with JavaScript.
ianmcburnie
commented
5 years ago
Feature Request
Description
The button module from Skin was recently updated to support wrapping and overflow to match the way native HTML buttons work. In the scenario when buttons are given a fixed width, they may cause overflow for the buttons text, and in certain cases the text needs to be truncated. Truncation will force the button to single line of text and add the ellipsis. Although truncation is supported, in most cases it is the last resort and should be used sparingly.
This change would add:
fixedattribute which would add class names based on the size of the button which was requested and fix the height accordingly.truncateattribute which would truncate the text based on a fixed width being applied, with a medium height button being the default case.To note, the truncation class from Skin will not work in the case of the pill buttons, as their requirement is to fill two lines of space, then truncate as needed. CSS only allows a single line of text to add an ellipsis. Therefore, we will cover that scenario in a separate task related to the pills, and do so with JavaScript.
Context
Skin PR: https://github.com/eBay/skin/pull/401