Skip to content

Commit 2e08a78

Browse files
JadhavJeetjgonza16
authored and
daniele-zurico
committed
Form CheckBox design-system (#604)
* Form CheckBox design-system * MaterialTheme Checkbox * added display property * feat: refactor styles --------- Co-authored-by: U01A6369 <javier.gonzalez-moya@capgemini.com>
1 parent 68695c1 commit 2e08a78

15 files changed

+799
-147
lines changed

‎src/design-system/formcheckbox.css

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
.dcx-checkbox {
2+
column-gap: token('spacing-y-formcontrol');
3+
display: flex;
4+
align-items: center;
5+
flex-wrap: wrap;
6+
7+
& .dcx-hint {
8+
flex-basis: 100%;
9+
font-size: token('font-formcontrol_hint-size');
10+
line-height: token('font-formcontrol_hint-line-height');
11+
color: token('color-text-formcontrol_hint');
12+
padding-left: calc(
13+
token('font-formcontrol_label-line-height') +
14+
token('spacing-y-formcontrol')
15+
);
16+
}
17+
18+
& label {
19+
font-weight: token('font-weight-formcontrol_label');
20+
font-size: token('font-size-formcontrol_label');
21+
background: token('color-background-formcontrol_label');
22+
color: token('color-text-formcontrol_label');
23+
}
24+
25+
& input {
26+
appearance: none;
27+
background-color: token('color-background-formcontrol');
28+
margin: 0;
29+
color: currentColor;
30+
width: token('font-formcontrol_label-line-height');
31+
height: token('font-formcontrol_label-line-height');
32+
border-radius: token('border-radius-formcontrol');
33+
border-width: token('border-width-formcontrol');
34+
border-style: solid;
35+
border-color: token('border-color-formcontrol');
36+
display: grid;
37+
place-content: center;
38+
cursor: pointer;
39+
40+
&:focus {
41+
border-color: token('color-outline-formcontrol');
42+
border-width: calc(token('border-width-formcontrol') * 2);
43+
}
44+
45+
&:checked {
46+
border-color: token('color-outline-formcontrol');
47+
background-color: token('color-outline-formcontrol');
48+
}
49+
&:hover {
50+
border-color: token('color-outline-formcontrol');
51+
border-width: calc(token('border-width-formcontrol') * 2);
52+
opacity: 0.8;
53+
}
54+
55+
&:disabled {
56+
cursor: not-allowed;
57+
opacity: 0.5;
58+
&:hover {
59+
opacity: 0.5;
60+
border-radius: token('border-radius-formcontrol');
61+
border-width: token('border-width-formcontrol');
62+
border-style: solid;
63+
border-color: token('border-color-formcontrol');
64+
}
65+
}
66+
67+
&:disabled:hover {
68+
cursor: not-allowed;
69+
}
70+
71+
&::before {
72+
content: '';
73+
width: 0.8em;
74+
height: 0.8em;
75+
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
76+
transform: scale(0);
77+
transform-origin: bottom left;
78+
transition: 120ms transform ease-in-out;
79+
box-shadow: inset 1em 1em token('color-background-formcontrol_checkmark');
80+
}
81+
&:checked::before {
82+
transform: scale(1);
83+
}
84+
}
85+
86+
&.dcx-checkbox--error {
87+
& label {
88+
color: token('color-text-formcontrol_label-error');
89+
}
90+
& input {
91+
border-color: token('color-text-formcontrol_error');
92+
93+
&:focus {
94+
border-color: token('color-text-formcontrol_error');
95+
}
96+
97+
&:checked {
98+
border-color: token('color-text-formcontrol_error');
99+
background-color: token('color-text-formcontrol_error');
100+
}
101+
&:hover {
102+
border-color: token('color-text-formcontrol_error');
103+
}
104+
}
105+
}
106+
107+
&:has(input:disabled) {
108+
opacity: 0.5;
109+
cursor: not-allowed;
110+
}
111+
}

‎src/design-system/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@
1616
@import './keyboard-input.css';
1717
@import './preformattedText.css';
1818
@import './form-input.css';
19+
@import './formcheckbox.css';
1920
@import './radio-button-group.css';

‎src/design-system/radio-button-group.css

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323

2424
& legend {
2525
padding: token('spacing-x-formcontrol') 0;
26+
color: token('color-text-body');
2627
h1 {
2728
color: token('color-text-heading-level_1');
2829
padding: 0;

‎src/design-system/tokens.json

+1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"color-background-formcontrol_label-floating-filled": "#f5f5f5",
4949
"color-background-formcontrol_suffix": "transparent",
5050
"color-background-formcontrol_prefix": "transparent",
51+
"color-background-formcontrol_checkmark": "white",
5152
"color-background-highlight_body": "yellow",
5253
"color-background-pre_box": "transparent",
5354
"color-chevron-formcontrol": "#000",

‎src/formCheckbox/FormCheckbox.tsx

+4-13
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,8 @@ export const FormCheckbox = ({
3131
}) => {
3232
const containerClasses = classNames([
3333
itemClassName,
34-
{ 'dcx-checkbox-container--error': isError },
35-
]);
36-
37-
const checkboxClasses = classNames([
38-
inputClassName,
39-
{ 'dcx-checkbox-checkbox--error': isError },
40-
]);
41-
42-
const labelClasses = classNames([
43-
labelClassName,
44-
{ 'dcx-checkbox-label--error': isError },
34+
'dcx-checkbox',
35+
{ 'dcx-checkbox--error': isError },
4536
]);
4637

4738
return (
@@ -66,8 +57,8 @@ export const FormCheckbox = ({
6657
hint={hint}
6758
nested={nested}
6859
itemClassName={containerClasses}
69-
inputClassName={checkboxClasses}
70-
labelClassName={labelClasses}
60+
inputClassName={inputClassName}
61+
labelClassName={labelClassName}
7162
/>
7263
);
7364
};

‎src/formCheckbox/__test__/FormCheckbox.test.tsx

+4-12
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ describe('FormCheckbox', () => {
450450

451451
const checkbox: any = container.querySelector('#checkbox-item');
452452

453-
expect(checkbox.className.trim()).toBe('my-checkbox-class');
453+
expect(checkbox.className.trim()).toBe('my-checkbox-class dcx-checkbox');
454454
});
455455

456456
it('should style the checkbox input', () => {
@@ -510,13 +510,9 @@ describe('FormCheckbox', () => {
510510
/>
511511
);
512512

513-
const checkboxContainer = container.querySelector('.dcx-checkbox-container--error');
514-
const checkbox = container.querySelector('.dcx-checkbox-checkbox--error');
515-
const label = container.querySelector('.dcx-checkbox-label--error');
513+
const checkboxContainer = container.querySelector('.dcx-checkbox--error');
516514

517515
expect(checkboxContainer).toBeInTheDocument();
518-
expect(checkbox).toBeInTheDocument();
519-
expect(label).toBeInTheDocument();
520516

521517
});
522518

@@ -534,9 +530,7 @@ describe('FormCheckbox', () => {
534530
/>
535531
);
536532

537-
expect(container.querySelector('.dcx-checkbox-container--error')).toBeNull();
538-
expect(container.querySelector('.dcx-checkbox-checkbox--error')).toBeNull();
539-
expect(container.querySelector('.dcx-checkbox-label--error')).toBeNull();
533+
expect(container.querySelector('.dcx-checkbox--error')).toBeNull();
540534
});
541535

542536
it('should not apply error styling when isError is not provided', () => {
@@ -552,9 +546,7 @@ describe('FormCheckbox', () => {
552546
/>
553547
);
554548

555-
expect(container.querySelector('.dcx-checkbox-container--error')).toBeNull();
556-
expect(container.querySelector('.dcx-checkbox-checkbox--error')).toBeNull();
557-
expect(container.querySelector('.dcx-checkbox-label--error')).toBeNull();
549+
expect(container.querySelector('.dcx-checkbox--error')).toBeNull();
558550
});
559551

560552
});

0 commit comments

Comments
 (0)