BREAKING CHANGE(web): Rename CheckboxField to Checkbox #DS-522

 ## Migration Guide

Rename and use `Checkbox` instead of `CheckboxField`.

- `<div class="CheckboxField" …>` → `<div class="Checkbox" …>`
- `.CheckboxField__*` → `.Checkbox__*`

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.

packages/web/src/scss/components/Checkbox/README.md

@@ -0,0 +1,95 @@
+# Checkbox
+
+## Basic usage:
+
+```html
+<label for="checkboxDefault" class="Checkbox">
+ <input type="checkbox" id="checkboxDefault" class="Checkbox__input" name="default" />
+ <span class="Checkbox__text">
+ <span class="Checkbox__label">Checkbox Label</span>
+ </span>
+</label>
+```
+
+## Required input:
+
+```html
+<label for="checkboxRequired" class="Checkbox">
+ <input type="checkbox" id="checkboxRequired" class="Checkbox__input" name="required" required />
+ <span class="Checkbox__text">
+ <span class="Checkbox__label Checkbox__label--required">Checkbox Label</span>
+ </span>
+</label>
+```
+
+## Validation State with Validation Text:
+
+See Validation state [dictionary][dictionary-validation].
+
+```html
+<label for="checkboxWarning" class="Checkbox Checkbox--warning">
+ <input type="checkbox" id="checkboxWarning" class="Checkbox__input" name="warning" />
+ <span class="Checkbox__text">
+ <span class="Checkbox__label">Checkbox Label</span>
+ <span class="Checkbox__validationText">Warning validation text</span>
+ </span>
+</label>
+
+<label for="checkboxDanger" class="Checkbox Checkbox--danger">
+ <input type="checkbox" id="checkboxDanger" class="Checkbox__input" name="danger" />
+ <span class="Checkbox__text">
+ <span class="Checkbox__label">Checkbox Label</span>
+ <ul class="Checkbox__validationText">
+ <li>First validation text</li>
+ <li>Second validation text</li>
+ </ul>
+ </span>
+</label>
+```
+
+## Hidden label:
+
+```html
+<label for="checkboxHiddenLabel" class="Checkbox">
+ <input type="checkbox" id="checkboxHiddenLabel" class="Checkbox__input" name="hiddenLabel" required />
+ <span class="Checkbox__text">
+ <span class="Checkbox__label Checkbox__label--hidden">Checkbox Label</span>
+ </span>
+</label>
+```
+
+## Helper Text:
+
+```html
+<label for="checkboxHelperText" class="Checkbox">
+ <input type="checkbox" id="checkboxHelperText" class="Checkbox__input" name="helperText" />
+ <span class="Checkbox__text">
+ <span class="Checkbox__label">Checkbox Label</span>
+ <span class="Checkbox__helperText">Helper text</span>
+ </span>
+</label>
+```
+
+## Disabled state:
+
+```html
+<label for="checkboxDisabled" class="Checkbox Checkbox--disabled">
+ <input type="checkbox" id="checkboxDisabled" class="Checkbox__input" name="disabled" disabled />
+ <span class="Checkbox__text">
+ <span class="Checkbox__label">Checkbox Label</span>
+ </span>
+</label>
+```
+
+## As an Item:
+
+```html
+<label for="checkboxItemDefault" class="Checkbox Checkbox--item">
+ <input type="checkbox" id="checkboxItemDefault" class="Checkbox__input" name="item" />
+ <span class="Checkbox__text">
+ <span class="Checkbox__label">Checkbox Label</span>
+ </span>
+</label>
+```
+
+[dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation

packages/web/src/scss/components/CheckboxField/_CheckboxField.scss → packages/web/src/scss/components/Checkbox/_Checkbox.scss

@@ -4,29 +4,29 @@
 @use '../../tools/form-fields' as form-fields-tools;
 @use '../../tools/svg';
 
-$_field-name: 'CheckboxField';
+$_field-name: 'Checkbox';
 
-.CheckboxField {
+.Checkbox {
  @include form-fields-tools.inline-field-root();
 }
 
-.CheckboxField__text {
+.Checkbox__text {
  margin-left: form-fields-theme.$spacing;
 }
 
-.CheckboxField__label {
+.Checkbox__label {
  @include form-fields-tools.inline-field-label();
 }
 
-.CheckboxField__label--hidden {
+.Checkbox__label--hidden {
  @include form-fields-tools.label-hidden();
 }
 
-.CheckboxField__label--required::after {
+.Checkbox__label--required::after {
  @include form-fields-tools.label-required();
 }
 
-.CheckboxField__input {
+.Checkbox__input {
  @include form-fields-tools.inline-field-input();
 
  flex-shrink: 0;
@@ -51,69 +51,69 @@ $_field-name: 'CheckboxField';
  }
 }
 
-.CheckboxField__validationText,
-.CheckboxField > .CheckboxField__text > [data-element='validation_text'] {
+.Checkbox__validationText,
+.Checkbox > .Checkbox__text > [data-element='validation_text'] {
  @include form-fields-tools.validation-text();
 }
 
-.CheckboxField__helperText {
+.Checkbox__helperText {
  @include form-fields-tools.helper-text();
 }
 
 @include form-fields-tools.input-field-validation-states($_field-name);
 
-.CheckboxField--disabled {
+.Checkbox--disabled {
  @include form-fields-tools.inline-field-root-disabled();
 }
 
-.CheckboxField--disabled .CheckboxField__label {
+.Checkbox--disabled .Checkbox__label {
  @include form-fields-tools.label-disabled();
 }
 
-.CheckboxField--disabled .CheckboxField__validationText {
+.Checkbox--disabled .Checkbox__validationText {
  @include form-fields-tools.validation-text-disabled();
 }
 
-.CheckboxField--disabled .CheckboxField__helperText {
+.Checkbox--disabled .Checkbox__helperText {
  @include form-fields-tools.helper-text-disabled();
 }
 
-.CheckboxField--disabled > .CheckboxField__input,
-.CheckboxField > .CheckboxField__input:disabled {
+.Checkbox--disabled > .Checkbox__input,
+.Checkbox > .Checkbox__input:disabled {
  @include form-fields-tools.input-disabled();
 }
 
-.CheckboxField--disabled > .CheckboxField__input:checked,
-.CheckboxField--disabled > .CheckboxField__input:indeterminate,
-.CheckboxField > .CheckboxField__input:disabled:checked,
-.CheckboxField > .CheckboxField__input:disabled:indeterminate {
+.Checkbox--disabled > .Checkbox__input:checked,
+.Checkbox--disabled > .Checkbox__input:indeterminate,
+.Checkbox > .Checkbox__input:disabled:checked,
+.Checkbox > .Checkbox__input:disabled:indeterminate {
  background-color: form-fields-theme.$input-color-disabled;
 }
 
-.CheckboxField--item {
+.Checkbox--item {
  @include form-fields-tools.item();
 }
 
-.CheckboxField--item.CheckboxField--disabled {
+.Checkbox--item.Checkbox--disabled {
  @include form-fields-tools.item-disabled();
 }
 
 // stylelint-disable-next-line selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item.
-.CheckboxField--item .CheckboxField__input:checked ~ .CheckboxField__text > .CheckboxField__label {
+.Checkbox--item .Checkbox__input:checked ~ .Checkbox__text > .Checkbox__label {
  @include form-fields-tools.item-label-checked();
 }
 
-.CheckboxField--item .CheckboxField__validationText {
+.Checkbox--item .Checkbox__validationText {
  @include form-fields-tools.item-validation-text();
 }
 
-.CheckboxField--item .CheckboxField__helperText {
+.Checkbox--item .Checkbox__helperText {
  @include form-fields-tools.item-helper-text();
 }
 
-.CheckboxField--item:not(.CheckboxField--disabled):hover .CheckboxField__validationText,
-.CheckboxField--item:not(.CheckboxField--disabled):active .CheckboxField__validationText,
-.CheckboxField--item:not(.CheckboxField--disabled):hover .CheckboxField__helperText,
-.CheckboxField--item:not(.CheckboxField--disabled):active .CheckboxField__helperText {
+.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__validationText,
+.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__validationText,
+.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__helperText,
+.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__helperText {
  color: inherit;
 }