Skip to content

Commit

Permalink
BREAKING CHANGE(web): Rename message to validationText in Form Fi…
Browse files Browse the repository at this point in the history 
…elds #DS-676

 ## Migration Guide

Instead of the `Component__message` class, use `Component__validationText`.
This applies to Checkbox, TextArea, and TextField components.

- `<span class="Checkbox__message" …>` → `<span class="Checkbox__validationText" …>`
- `<div class="TextField__message" …>` → `<div class="TextField__validationText" …>`
- `<div class="TextArea__message" …>` → `<div class="TextArea__validationText" …>`

Also, the demos of Checkbox, RadioField, Select, TextArea, and TextField components
have been unified and improved.

Please refer back to these instructions or reach out to our team
if you encounter any issues during migration.
  • Loading branch information
@crishpeen @literat
crishpeen authored and literat committed Jul 21, 2023
1 parent 9887171 commit 44a9fd7
Show file tree
Hide file tree
Showing 20 changed files with 1,214 additions and 1,045 deletions.
83 changes: 34 additions & 49 deletions packages/web/src/scss/components/CheckboxField/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,45 @@
## Basic usage:

```html
<label for="checkboxfield0" class="CheckboxField">
<input type="checkbox" id="checkboxfield0" class="CheckboxField__input" />
<label for="checkboxFieldDefault" class="CheckboxField">
<input type="checkbox" id="checkboxFieldDefault" class="CheckboxField__input" name="default" />
<span class="CheckboxField__text">
<span class="CheckboxField__label">Checkbox unselected</span>
<span class="CheckboxField__label">Checkbox Label</span>
</span>
</label>
```

## Required input:

```html
<label for="checkboxfield1" class="CheckboxField">
<input type="checkbox" id="checkboxfield1" class="CheckboxField__input" required />
<label for="checkboxFieldRequired" class="CheckboxField">
<input type="checkbox" id="checkboxFieldRequired" class="CheckboxField__input" name="required" required />
<span class="CheckboxField__text">
<span class="CheckboxField__label CheckboxField__label--required">Label of required input</span>
<span class="CheckboxField__label CheckboxField__label--required">Checkbox Label</span>
</span>
</label>
```

## Additional message:
## Validation State with Validation Text:

See Validation state [dictionary][dictionary-validation].

```html
<label for="checkboxfield2" class="CheckboxField">
<input type="checkbox" id="checkboxfield2" class="CheckboxField__input" />
<label for="checkboxFieldWarning" class="CheckboxField CheckboxField--warning">
<input type="checkbox" id="checkboxFieldWarning" class="CheckboxField__input" name="warning" />
<span class="CheckboxField__text">
<span class="CheckboxField__label">Checkbox unselected</span>
<span class="CheckboxField__message">Message</span>
<span class="CheckboxField__label">Checkbox Label</span>
<span class="CheckboxField__validationText">Warning validation text</span>
</span>
</label>
<label for="checkboxfield2" class="CheckboxField">
<input type="checkbox" id="checkboxfield2" class="CheckboxField__input" />

<label for="checkboxFieldDanger" class="CheckboxField CheckboxField--danger">
<input type="checkbox" id="checkboxFieldDanger" class="CheckboxField__input" name="danger" />
<span class="CheckboxField__text">
<span class="CheckboxField__label">Checkbox unselected</span>
<ul class="CheckboxField__message">
<li>Message</li>
<li>Message</li>
<span class="CheckboxField__label">Checkbox Label</span>
<ul class="CheckboxField__validationText">
<li>First validation text</li>
<li>Second validation text</li>
</ul>
</span>
</label>
Expand All @@ -47,62 +50,44 @@
## Hidden label:

```html
<label for="checkboxfield3" class="CheckboxField">
<input type="checkbox" id="checkboxfield3" class="CheckboxField__input" value="Filled" />
<label for="checkboxFieldHiddenLabel" class="CheckboxField">
<input type="checkbox" id="checkboxFieldHiddenLabel" class="CheckboxField__input" name="hiddenLabel" required />
<span class="CheckboxField__text">
<span class="CheckboxField__label CheckboxField__label--hidden">Label Hidden</span>
<span class="CheckboxField__label CheckboxField__label--hidden">Checkbox Label</span>
</span>
</label>
```

## Validation states:

See Validation state [dictionary][dictionary-validation].
## Helper Text:

```html
<label for="checkboxfield4_0" class="CheckboxField CheckboxField--danger">
<input type="checkbox" id="checkboxfield4_0" class="CheckboxField__input" checked />
<span class="CheckboxField__text">
<span class="CheckboxField__label">Checkbox with danger</span>
<span class="CheckboxField__message">Validation message</span>
</span>
</label>
<label for="checkboxfield4_1" class="CheckboxField CheckboxField--warning">
<input type="checkbox" id="checkboxfield4_1" class="CheckboxField__input" checked />
<span class="CheckboxField__text">
<span class="CheckboxField__label">Checkbox with warning</span>
<span class="CheckboxField__message">Validation message</span>
</span>
</label>
<label for="checkboxfield4_2" class="CheckboxField CheckboxField--success">
<input type="checkbox" id="checkboxfield4_2" class="CheckboxField__input" checked />
<label for="checkboxFieldHelperText" class="CheckboxField">
<input type="checkbox" id="checkboxFieldHelperText" class="CheckboxField__input" name="helperText" />
<span class="CheckboxField__text">
<span class="CheckboxField__label">Checkbox with success</span>
<span class="CheckboxField__message">Validation message</span>
<span class="CheckboxField__label">Checkbox Label</span>
<span class="CheckboxField__helperText">Helper text</span>
</span>
</label>
```

## Disabled state:

```html
<label for="checkboxfield5" class="CheckboxField CheckboxField--disabled">
<input type="checkbox" id="checkboxfield5" class="CheckboxField__input" disabled />
<label for="checkboxFieldDisabled" class="CheckboxField CheckboxField--disabled">
<input type="checkbox" id="checkboxFieldDisabled" class="CheckboxField__input" name="disabled" disabled />
<span class="CheckboxField__text">
<span class="CheckboxField__label CheckboxField__label--required">Label of input with indeterminate</span>
<span class="CheckboxField__message">Message</span>
<span class="CheckboxField__label">Checkbox Label</span>
</span>
</label>
```

## As an Item:

```html
<label for="checkboxfield6" class="CheckboxField CheckboxField--item">
<input type="checkbox" id="checkboxfield6" class="CheckboxField__input" />
<label for="checkboxFieldItemDefault" class="CheckboxField CheckboxField--item">
<input type="checkbox" id="checkboxFieldItemDefault" class="CheckboxField__input" name="item" />
<span class="CheckboxField__text">
<span class="CheckboxField__label CheckboxField__label--required">Item</span>
<span class="CheckboxField__message">Message</span>
<span class="CheckboxField__label">Checkbox Label</span>
</span>
</label>
```
Expand Down
20 changes: 10 additions & 10 deletions packages/web/src/scss/components/CheckboxField/_CheckboxField.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ $_field-name: 'CheckboxField';
}
}

.CheckboxField__message,
.CheckboxField__validationText,
.CheckboxField > .CheckboxField__text > [data-element='validator_message'] {
@include form-fields-tools.message();
@include form-fields-tools.validation-text();
}

.CheckboxField__helperText {
Expand All @@ -70,8 +70,8 @@ $_field-name: 'CheckboxField';
@include form-fields-tools.label-disabled();
}

.CheckboxField--disabled .CheckboxField__message {
@include form-fields-tools.message-disabled();
.CheckboxField--disabled .CheckboxField__validationText {
@include form-fields-tools.validation-text-disabled();
}

.CheckboxField--disabled .CheckboxField__helperText {
Expand Down Expand Up @@ -103,17 +103,17 @@ $_field-name: 'CheckboxField';
@include form-fields-tools.item-label-checked();
}

.CheckboxField--item .CheckboxField__message {
@include form-fields-tools.item-message();
.CheckboxField--item .CheckboxField__validationText {
@include form-fields-tools.item-validation-text();
}

.CheckboxField--item .CheckboxField__helperText {
@include form-fields-tools.item-helper-text();
}

.CheckboxField--item:hover .CheckboxField__message,
.CheckboxField--item:active .CheckboxField__message,
.CheckboxField--item:hover .CheckboxField__helperText,
.CheckboxField--item:active .CheckboxField__helperText {
.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 {
color: inherit;
}
Loading

0 comments on commit 44a9fd7

Please sign in to comment.