Skip to content

Commit d74d937

Browse files
ninamarinaninamarina
authored
fix(checkbox): DP-137343 fix label clickable area (#708)
1 parent a730f39 commit d74d937

File tree

8 files changed

+328
-326
lines changed

8 files changed

+328
-326
lines changed

‎apps/dialtone-documentation/docs/components/checkbox.md‎

Lines changed: 102 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,11 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-checkbox--de
88
figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Components-7?node-id=8921%3A21160&viewport=-351%2C484%2C0.54&t=xHutRjwo1o5zMTgT-11
99
---
1010
<code-well-header>
11-
<div class="d-checkbox-group">
12-
<div class="d-checkbox__input">
13-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckExample1" id="Dialtone-CheckExample1" />
14-
</div>
15-
<div class="d-checkbox__copy">
16-
<label class="d-checkbox__label" for="Dialtone-CheckExample1">Checkbox label</label>
17-
</div>
18-
</div>
11+
<dt-checkbox
12+
name="default"
13+
value="Value"
14+
label="Checkbox label"
15+
/>
1916
</code-well-header>
2017

2118
<!-- <component-combinator component-name="DtCheckbox" /> -->
@@ -59,38 +56,34 @@ Checkboxes are an easily understandable way to indicate that users can select on
5956

6057
<code-well-header>
6158
<fieldset class="d-input-group__fieldset d-stack8">
62-
<div class="d-checkbox-group">
63-
<div class="d-checkbox__input">
64-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckExample1" id="Dialtone-CheckExample1" />
65-
</div>
66-
<div class="d-checkbox__copy">
67-
<label class="d-checkbox__label" for="Dialtone-CheckExample1">Checkbox label</label>
68-
</div>
69-
</div>
70-
<div class="d-checkbox-group">
71-
<div class="d-checkbox__input">
72-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckExample2" id="Dialtone-CheckExample2" checked />
73-
</div>
74-
<div class="d-checkbox__copy">
75-
<label class="d-checkbox__label" for="Dialtone-CheckExample2">Checkbox label</label>
76-
</div>
77-
</div>
78-
<div class="d-checkbox-group d-checkbox-group--disabled">
79-
<div class="d-checkbox__input">
80-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckExample3" id="Dialtone-CheckExample3" disabled />
81-
</div>
82-
<div class="d-checkbox__copy">
83-
<label class="d-checkbox__label" for="Dialtone-CheckExample3">Disabled checkbox label</label>
84-
</div>
85-
</div>
86-
<div class="d-checkbox-group d-checkbox-group--disabled">
87-
<div class="d-checkbox__input">
88-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckExample4" id="Dialtone-CheckExample4" disabled checked />
89-
</div>
90-
<div class="d-checkbox__copy">
91-
<label class="d-checkbox__label" for="Dialtone-CheckExample4">Disabled checkbox label</label>
92-
</div>
93-
</div>
59+
<!-- Default -->
60+
<dt-checkbox
61+
name="default"
62+
value="Value"
63+
label="Checkbox label"
64+
/>
65+
<!-- Checked -->
66+
<dt-checkbox
67+
name="checked"
68+
value="Value"
69+
label="Checkbox label"
70+
checked
71+
/>
72+
<!-- Disabled -->
73+
<dt-checkbox
74+
name="disabled"
75+
value="Value"
76+
label="Disabled Checkbox label"
77+
disabled
78+
/>
79+
<!-- Disabled Checked -->
80+
<dt-checkbox
81+
name="disabled-checked"
82+
value="Value"
83+
label="Disabled Checkbox label"
84+
checked
85+
disabled
86+
/>
9487
</fieldset>
9588
</code-well-header>
9689

@@ -181,22 +174,21 @@ showHtmlWarning />
181174

182175
<code-well-header>
183176
<fieldset class="d-input-group__fieldset d-stack8">
184-
<div class="d-checkbox-group">
185-
<div class="d-checkbox__input">
186-
<input class="d-checkbox d-checkbox--indeterminate" type="checkbox" name="Checkbox-IndeterminateExample1" id="Checkbox-IndeterminateExample1" />
187-
</div>
188-
<div class="d-checkbox__copy">
189-
<label class="d-checkbox__label" for="Checkbox-IndeterminateExample1">Indeterminate checkbox using custom class</label>
190-
</div>
191-
</div>
192-
<div class="d-checkbox-group">
193-
<div class="d-checkbox__input">
194-
<input class="d-checkbox d-checkbox--indeterminate" type="checkbox" name="Checkbox-IndeterminateExample2" id="Checkbox-IndeterminateExample2" disabled />
195-
</div>
196-
<div class="d-checkbox__copy">
197-
<label class="d-checkbox__label" for="Checkbox-IndeterminateExample2">Indeterminate disabled checkbox</label>
198-
</div>
199-
</div>
177+
<dt-checkbox
178+
name="indeterminate"
179+
value="Value"
180+
label="Indeterminate checkbox"
181+
indeterminate
182+
/>
183+
<!-- Indeterminate disabled -->
184+
<dt-checkbox
185+
name="indeterminate-disabled"
186+
value="Value"
187+
label="Indeterminate checkbox disabled"
188+
checked
189+
disabled
190+
indeterminate
191+
/>
200192
</fieldset>
201193
</code-well-header>
202194

@@ -252,30 +244,21 @@ showHtmlWarning />
252244
<code-well-header>
253245
<fieldset class="d-input-group__fieldset d-stack8">
254246
<legend class="d-label">Call Blocking & Spam Protection</legend>
255-
<div class="d-checkbox-group">
256-
<div class="d-checkbox__input">
257-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupAExample1" id="Dialtone-CheckGroupAExample1" />
258-
</div>
259-
<div class="d-checkbox__copy">
260-
<label class="d-checkbox__label" for="Dialtone-CheckGroupAExample1">Anonymous callers</label>
261-
</div>
262-
</div>
263-
<div class="d-checkbox-group">
264-
<div class="d-checkbox__input">
265-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupAExample2" id="Dialtone-CheckGroupAExample2" />
266-
</div>
267-
<div class="d-checkbox__copy">
268-
<label class="d-checkbox__label" for="Dialtone-CheckGroupAExample2">Block callers not already in contacts list</label>
269-
</div>
270-
</div>
271-
<div class="d-checkbox-group">
272-
<div class="d-checkbox__input">
273-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupAExample3" id="Dialtone-CheckGroupAExample3" />
274-
</div>
275-
<div class="d-checkbox__copy">
276-
<label class="d-checkbox__label" for="Dialtone-CheckGroupAExample3">Block callers with a high spam score</label>
277-
</div>
278-
</div>
247+
<dt-checkbox
248+
name="option1"
249+
value="Value"
250+
label="Anonymous callers"
251+
/>
252+
<dt-checkbox
253+
name="option2"
254+
value="Value"
255+
label="Block callers not already in contacts list"
256+
/>
257+
<dt-checkbox
258+
name="option3"
259+
value="Value"
260+
label="Block callers with a high spam score"
261+
/>
279262
</fieldset>
280263
</code-well-header>
281264

@@ -360,36 +343,24 @@ showHtmlWarning />
360343
<code-well-header>
361344
<fieldset class="d-input-group__fieldset d-stack8">
362345
<legend class="d-label">Call Blocking & Spam Protection</legend>
363-
<div class="d-checkbox-group">
364-
<div class="d-checkbox__input">
365-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupBExample1" id="Dialtone-CheckGroupBExample1" />
366-
</div>
367-
<div class="d-checkbox__copy">
368-
<label class="d-checkbox__label" for="Dialtone-CheckGroupBExample1">Anonymous callers
369-
<div class="d-description">Select how phone numbers you don't know should be handled.</div>
370-
</label>
371-
</div>
372-
</div>
373-
<div class="d-checkbox-group">
374-
<div class="d-checkbox__input">
375-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupBExample2" id="Dialtone-CheckGroupBExample2" />
376-
</div>
377-
<div class="d-checkbox__copy">
378-
<label class="d-checkbox__label" for="Dialtone-CheckGroupBExample2">Block callers not already in contacts list
379-
<div class="d-description">You get enough calls. Free up some of your time.</div>
380-
</label>
381-
</div>
382-
</div>
383-
<div class="d-checkbox-group">
384-
<div class="d-checkbox__input">
385-
<input class="d-checkbox" type="checkbox" name="Dialtone-CheckGroupBExample3" id="Dialtone-CheckGroupBExample3" />
386-
</div>
387-
<div class="d-checkbox__copy">
388-
<label class="d-checkbox__label" for="Dialtone-CheckGroupBExample3">Block callers with a high spam score
389-
<div class="d-description">We'll only let the legitimate callers through to bother you.</div>
390-
</label>
391-
</div>
392-
</div>
346+
<dt-checkbox
347+
name="option1"
348+
value="Value"
349+
label="Anonymous callers"
350+
description="Select how phone numbers you dont know should be handled."
351+
/>
352+
<dt-checkbox
353+
name="option2"
354+
value="Value"
355+
label="Block callers not already in contacts list"
356+
description="You get enough calls. Free up some of your time."
357+
/>
358+
<dt-checkbox
359+
name="option3"
360+
value="Value"
361+
label="Block callers with a high spam score"
362+
description="We will only let the legitimate callers through to bother you."
363+
/>
393364
</fieldset>
394365
</code-well-header>
395366

@@ -480,36 +451,27 @@ showHtmlWarning />
480451
<code-well-header>
481452
<fieldset class="d-input-group__fieldset d-stack8">
482453
<legend class="d-label">Call Blocking & Spam Protection</legend>
483-
<div class="d-checkbox-group">
484-
<div class="d-checkbox__input">
485-
<input class="d-checkbox d-checkbox--warning" type="checkbox" name="Dialtone-CheckGroupBExample1" id="Dialtone-CheckGroupCExample1" />
486-
</div>
487-
<div class="d-checkbox__copy">
488-
<label class="d-checkbox__label" for="Dialtone-CheckGroupCExample1">Anonymous callers
489-
<div class="d-validation-message d-validation-message--warning">Select how phone numbers you don't know should be handled.</div>
490-
</label>
491-
</div>
492-
</div>
493-
<div class="d-checkbox-group">
494-
<div class="d-checkbox__input">
495-
<input class="d-checkbox d-checkbox--error" type="checkbox" name="Dialtone-CheckGroupCExample2" id="Dialtone-CheckGroupCExample2" />
496-
</div>
497-
<div class="d-checkbox__copy">
498-
<label class="d-checkbox__label" for="Dialtone-CheckGroupCExample2">Block callers not already in contacts list
499-
<div class="d-validation-message d-validation-message--error">You get enough calls. Free up some of your time.</div>
500-
</label>
501-
</div>
502-
</div>
503-
<div class="d-checkbox-group">
504-
<div class="d-checkbox__input">
505-
<input class="d-checkbox d-checkbox--success" type="checkbox" name="Dialtone-CheckGroupCExample3" id="Dialtone-CheckGroupCExample3" />
506-
</div>
507-
<div class="d-checkbox__copy">
508-
<label class="d-checkbox__label" for="Dialtone-CheckGroupCExample3">Block callers with a high spam score
509-
<div class="d-validation-message d-validation-message--success">We'll only let the legitimate callers through to bother you.</div>
510-
</label>
511-
</div>
512-
</div>
454+
<dt-checkbox
455+
name="option1"
456+
value="Value"
457+
label="Anonymous callers"
458+
validation-state="warning"
459+
:messages="[{ message: `Select how phone numbers you dont know should be handled.`, type: `warning` }]"
460+
/>
461+
<dt-checkbox
462+
name="option2"
463+
value="Value"
464+
label="Block callers not already in contacts list"
465+
validation-state="error"
466+
:messages="[{ message: `You get enough calls. Free up some of your time.`, type: `error` }]"
467+
/>
468+
<dt-checkbox
469+
name="option3"
470+
value="Value"
471+
label="Block callers with a high spam score"
472+
validation-state="success"
473+
:messages="[{ message: `We will only let the legitimate callers through to bother you.`, type: `success` }]"
474+
/>
513475
</fieldset>
514476
</code-well-header>
515477

‎packages/dialtone-css/lib/build/less/components/radio-checkbox.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,12 @@
159159
cursor: pointer;
160160
}
161161

162+
.d-checkbox__messages,
163+
.d-radio__messages {
164+
margin-top: var(--dt-space-200-negative);
165+
margin-left: var(--dt-space-550);
166+
}
167+
162168
.d-checkbox__description {
163169
display: flex;
164170
box-sizing: border-box;

‎packages/dialtone-vue2/components/checkbox/checkbox.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe('DtCheckbox Tests', () => {
3535
let input;
3636
let label;
3737
let description;
38-
let labelDescriptionContainer;
38+
let descriptionMessagesContainer;
3939

4040
const updateWrapper = () => {
4141
wrapper = mount(DtCheckbox, {
@@ -51,7 +51,7 @@ describe('DtCheckbox Tests', () => {
5151
input = wrapper.find('input');
5252
label = wrapper.find('[data-qa="checkbox-label"]');
5353
description = wrapper.find('[data-qa="checkbox-description"]');
54-
labelDescriptionContainer = wrapper.find('[data-qa="checkbox-label-description-container"]');
54+
descriptionMessagesContainer = wrapper.find('[data-qa="checkbox-description-messages"]');
5555
};
5656

5757
beforeAll(() => {
@@ -139,8 +139,8 @@ describe('DtCheckbox Tests', () => {
139139
expect(label.exists()).toBe(false);
140140
});
141141

142-
it('should remove the checkbox label/description container if neither is provided', () => {
143-
expect(labelDescriptionContainer.exists()).toBe(false);
142+
it('should remove the checkbox description/messages container if neither is provided', () => {
143+
expect(descriptionMessagesContainer.exists()).toBe(false);
144144
});
145145

146146
it('should keep the input checkbox', () => {

0 commit comments

Comments
 (0)