Skip to content

Commit ea79db2

Browse files
tomassychratomassychra
committed
Feat(web): Validation state dictionary #DS-590
1 parent 8b3fe19 commit ea79db2

File tree

3 files changed

+96
-2
lines changed

3 files changed

+96
-2
lines changed

‎packages/web/src/scss/components/RadioField/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,27 @@ As an Item:
3939
<span class="RadioField__label">Item</span>
4040
</label>
4141
```
42+
43+
Wrapped with message
44+
45+
```html
46+
<label for="radiofield6" class="RadioField RadioField--item">
47+
<input type="radio" id="radiofield6" class="RadioField__input" />
48+
<span class="RadioField__text">
49+
<span class="RadioField__label">Item</span>
50+
<span class="RadioField__message">Message</span>
51+
</span>
52+
</label>
53+
```
54+
55+
Wrapped with danger message
56+
57+
```html
58+
<label for="radiofield7" class="RadioField RadioField--item RadioField--danger">
59+
<input type="radio" id="radiofield7" class="RadioField__input" />
60+
<span class="RadioField__text">
61+
<span class="RadioField__label">Item</span>
62+
<span class="RadioField__message">Message</span>
63+
</span>
64+
</label>
65+
```

‎packages/web/src/scss/components/RadioField/_RadioField.scss‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,21 @@
4646
}
4747
}
4848

49+
.RadioField__message {
50+
@include form-fields-tools.message();
51+
52+
margin-left: form-fields-theme.$spacing;
53+
}
54+
55+
.RadioField--item .RadioField__message {
56+
@include form-fields-tools.item-message();
57+
}
58+
59+
.RadioField--danger .RadioField__message {
60+
/* @deprecated: Replace with '$message-color-danger' after merge with DS-590 */
61+
color: form-fields-theme.$message-color-error;
62+
}
63+
4964
.RadioField__label {
5065
@include form-fields-tools.inline-field-label();
5166

@@ -56,6 +71,10 @@
5671
@include form-fields-tools.label-hidden();
5772
}
5873

74+
.RadioField__label--required::after {
75+
@include form-fields-tools.label-required();
76+
}
77+
5978
.RadioField--disabled {
6079
@include form-fields-tools.inline-field-root-disabled();
6180
}
@@ -64,6 +83,10 @@
6483
@include form-fields-tools.label-disabled();
6584
}
6685

86+
.RadioField--disabled .RadioField__message {
87+
@include form-fields-tools.message-disabled();
88+
}
89+
6790
.RadioField--disabled > .RadioField__input,
6891
.RadioField > .RadioField__input:disabled {
6992
border-color: form-fields-theme.$input-color-disabled;
@@ -86,7 +109,9 @@
86109
@include form-fields-tools.item-disabled();
87110
}
88111

89-
// stylelint-disable-next-line selector-max-class -- We need to override the default styles for the label in Item.
90-
.RadioField--item .RadioField__input:checked ~ .RadioField__label {
112+
// stylelint-disable selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item.
113+
.RadioField--item .RadioField__input:checked ~ .RadioField__label,
114+
.RadioField--item .RadioField__input:checked ~ .RadioField__text > .RadioField__label {
115+
// stylelint-enable selector-max-class, selector-max-compound-selectors, selector-max-specificity
91116
@include form-fields-tools.item-label-checked();
92117
}

‎packages/web/src/scss/components/RadioField/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,49 @@
3131
</label>
3232
</div>
3333

34+
<div class="docs-FormFieldGrid" style="padding-top: 2rem">
35+
<label for="radiofield_2_1" class="RadioField">
36+
<input type="radio" id="radiofield_2_1" name="example" class="RadioField__input" />
37+
<span class="RadioField__text">
38+
<span class="RadioField__label">Radio unselected</span>
39+
<span class="RadioField__message">Message</span>
40+
</span>
41+
</label>
42+
<label for="radiofield_2_2" class="RadioField RadioField--disabled">
43+
<input type="radio" id="radiofield_2_2" name="example" class="RadioField__input" />
44+
<span class="RadioField__text">
45+
<span class="RadioField__label">Radio disabled</span>
46+
<span class="RadioField__message">Message</span>
47+
</span>
48+
</label>
49+
<label for="radiofield_2_3" class="RadioField RadioField--danger">
50+
<input type="radio" id="radiofield_2_3" name="example" class="RadioField__input" />
51+
<span class="RadioField__text">
52+
<span class="RadioField__label">Radio danger</span>
53+
<span class="RadioField__message">Danger message</span>
54+
</span>
55+
</label>
56+
<label for="radiofield_2_4" class="RadioField RadioField--item">
57+
<input type="radio" id="radiofield_2_4" name="example" class="RadioField__input" />
58+
<span class="RadioField__text">
59+
<span class="RadioField__label">Radio item</span>
60+
<span class="RadioField__message">Message</span>
61+
</span>
62+
</label>
63+
<label for="radiofield_2_5" class="RadioField RadioField--item RadioField--disabled">
64+
<input type="radio" id="radiofield_2_5" name="example" class="RadioField__input" />
65+
<span class="RadioField__text">
66+
<span class="RadioField__label">Radio item disabled</span>
67+
<span class="RadioField__message">Disabled message</span>
68+
</span>
69+
</label>
70+
<label for="radiofield_2_6" class="RadioField RadioField--item RadioField--danger">
71+
<input type="radio" id="radiofield_2_6" name="example" class="RadioField__input" />
72+
<span class="RadioField__text">
73+
<span class="RadioField__label">Radio item danger</span>
74+
<span class="RadioField__message">Danger message</span>
75+
</span>
76+
</label>
77+
</div>
78+
3479
{{/layout/plain }}

0 commit comments

Comments
 (0)