fix(styles): add option to wrap long label for checkbox and radio button

[InnaAtanasova]

Related Issue

Closes none

Description

By default, long checkbox and radio button labels should truncate with ellipsis. Currently this behaviour is not working (a bug). For checkbox the fix was easy, achieved only with css.
For radio button the fix required breaking changes as the label is a flex container and in order for the ellipsis to work on the text, the text should be wrapped in an element.
For more information regarding this flex issue please check: https://stackoverflow.com/questions/51351137/css-text-overflow-ellipsis-not-working-in-grid-flex

• added modifier class to the label to allow text wrap on a new line to chow the whole text: fd-checkbox__label--wrap and fd-radio__label--wrap

BREAKING CHANGE:
Radio Button: added a child element for the label.

Before:

<div class="fd-form-item">
    <input type="radio" class="fd-radio" id="radio1" name="radio1">
    <label class="fd-radio__label" for="radio1">
         Text
     </label>
</div>

After:

<div class="fd-form-item">
    <input type="radio" class="fd-radio" id="radio1" name="radio1">
    <label class="fd-radio__label" for="radio1">
         <span class="fd-radio__text">Text</span>
     </label>
</div>

[netlify]

✅ Deploy Preview for fundamental-styles ready!

Name	Link
🔨 Latest commit	8f53ad3
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-styles/deploys/64516a6879cb7c0008207f17
😎 Deploy Preview	https://deploy-preview-4501--fundamental-styles.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.