fix(styles): refactor checkbox to use a square not an icon for tristate

[InnaAtanasova]

Related Issue

none

Description

Checkbox was using icon for the square that represents the tri-state. This was causing a lot of alignment issues and the new set of icons changed the look of this icon so we can no longer rely on it for the tri-state.

BREAKING CHANGE:

• Checkbox: introduced a new element with a class .fd-checkbox__label-container that is necessary for the fake focus and the new way of implementing the tri-state.

Before:

<label class="fd-checkbox__label">
    <span class="fd-checkbox__text">Apple</span>
</label>

Now:

<label class="fd-checkbox__label">
    <div class="fd-checkbox__label-container">
        <span class="fd-checkbox__text">Apple</span>
    </div>
</label>

• Checkbox: introduced a new modifier class for the label .fd-checkbox__label--required for when the Checkbox is a required element. It replaces the .fd-from-label--required modifier class.

Before:

<input type="checkbox" class="fd-checkbox">
<label class="fd-checkbox__label fd-form-label--required">
    <span class="fd-checkbox__text">Required Checkbox</span>
</label>

Now:

<input type="checkbox" class="fd-checkbox">
<label class="fd-checkbox__label fd-checkbox__label--required">
    <span class="fd-checkbox__text">Required Checkbox</span>
</label>

Please check whether the PR fulfills the following requirements

1. The output matches the design specs

• All values are in rem
• Text elements follow the truncation rules
• hover state of the element follow design spec
• focus state of the element follow design spec
• active state of the element follow design spec
• selected state of the element follow design spec
• selected hover state of the element follow design spec
• pressed state of the element follow design spec
• Responsiveness rules - the component has modifier classes for all breakpoints
• Includes Compact/Cosy/Tablet design
• RTL support

2. The code follows fundamental-styles code standards and style

• only one top level fd-* class is used in the file
• BEM naming convention is used
• Mixins are used for repeatable code (fd-rtl, fd-ellipsis, fd-flex, fd-selected, fd-focus, ect.)
• A11y support - keyboard support, screenreader support, proper ARIA attributes, etc.
• fd-reset() mixin is applied to all elements
• Variables are used, if some value is used more than twice.
• Checked if current components can be reused, instead of having new code.

3. Testing

• tested Storybook examples with "CSS Resources" normalize option
• tested Storybook examples with "CSS Resources" unnormalize option
• Verified all styles in IE11
• Updated tests
• last commit message should have [ci visual] so it can trigger chromatic visual regression (e.g. test: run chromatic visual regression [ci visual])

4. Documentation

• Storybook documentation has been created/updated
• Breaking Changes wiki has been updated in case of breaking changes.

[netlify]

✔️ Deploy Preview for fundamental-styles ready!

🔨 Explore the source changes: 6ffd58d

🔍 Inspect the deploy log: https://app.netlify.com/sites/fundamental-styles/deploys/618ace0c9659d600076242af

😎 Browse the preview: https://deploy-preview-2905--fundamental-styles.netlify.app