Skip to content

Commit 0dd3bbd

Browse files
gjulivangjulivan
committed
chore: update styling
1 parent 77d8a91 commit 0dd3bbd

File tree

4 files changed

+91
-92
lines changed

4 files changed

+91
-92
lines changed

‎packages/pluggableWidgets/checkbox-radio-selection-web/src/CheckboxRadioSelection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function CheckboxRadioSelection(props: CheckboxRadioSelectionCont
2222
};
2323

2424
return (
25-
<div className="widget-checkbox-radio-selection">
25+
<div className={`widget-checkbox-radio-selection`}>
2626
{selector.status === "unavailable" ? (
2727
<Placeholder />
2828
) : selector.type === "single" ? (

‎packages/pluggableWidgets/checkbox-radio-selection-web/src/components/CheckboxSelection/CheckboxSelection.tsx

Lines changed: 38 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,56 +25,50 @@ export function CheckboxSelection({
2525

2626
return (
2727
<div
28-
className={classNames("widget-checkbox-radio-selection-checkbox", {
28+
className={classNames("widget-checkbox-radio-selection-list", {
2929
"widget-checkbox-radio-selection-readonly": isReadOnly,
3030
[`widget-checkbox-radio-selection-readonly-${readOnlyStyle}`]: isReadOnly
3131
})}
32+
role="group"
33+
aria-labelledby={`${inputId}-label`}
34+
aria-required={ariaRequired?.value}
3235
>
33-
<div
34-
className="widget-checkbox-radio-selection-checkbox-list"
35-
role="group"
36-
aria-labelledby={`${inputId}-label`}
37-
aria-required={ariaRequired?.value}
38-
>
39-
{options.map((optionId, index) => {
40-
const isSelected = currentIds.includes(optionId);
41-
const checkboxId = `${inputId}-checkbox-${index}`;
36+
{options.map((optionId, index) => {
37+
const isSelected = currentIds.includes(optionId);
38+
const checkboxId = `${inputId}-checkbox-${index}`;
4239

43-
return (
44-
<div
45-
key={optionId}
46-
className={classNames("widget-checkbox-radio-selection-checkbox-item", {
47-
"widget-checkbox-radio-selection-checkbox-item-selected": isSelected
48-
})}
40+
return (
41+
<div
42+
key={optionId}
43+
className={classNames("widget-checkbox-radio-selection-item", "checkbox-item", {
44+
"widget-checkbox-radio-selection-item-selected": isSelected
45+
})}
46+
>
47+
<input
48+
type="checkbox"
49+
id={checkboxId}
50+
name={name}
51+
value={optionId}
52+
checked={isSelected}
53+
disabled={isReadOnly}
54+
tabIndex={tabIndex}
55+
onChange={e => handleChange(optionId, e.target.checked)}
56+
/>
57+
<CaptionContent
58+
onClick={(e: MouseEvent<HTMLDivElement>) => {
59+
e.preventDefault();
60+
e.stopPropagation();
61+
e.nativeEvent.stopImmediatePropagation();
62+
handleChange(optionId, !isSelected);
63+
}}
64+
htmlFor={checkboxId}
4965
>
50-
<input
51-
type="checkbox"
52-
id={checkboxId}
53-
name={name}
54-
value={optionId}
55-
checked={isSelected}
56-
disabled={isReadOnly}
57-
tabIndex={tabIndex}
58-
onChange={e => handleChange(optionId, e.target.checked)}
59-
/>
60-
<CaptionContent
61-
onClick={(e: MouseEvent<HTMLDivElement>) => {
62-
e.preventDefault();
63-
e.stopPropagation();
64-
e.nativeEvent.stopImmediatePropagation();
65-
handleChange(optionId, !isSelected);
66-
}}
67-
htmlFor={checkboxId}
68-
>
69-
{selector.caption.render(optionId)}
70-
</CaptionContent>
71-
</div>
72-
);
73-
})}
74-
{options.length === 0 && (
75-
<div className="widget-checkbox-radio-selection-no-options">No options available</div>
76-
)}
77-
</div>
66+
{selector.caption.render(optionId)}
67+
</CaptionContent>
68+
</div>
69+
);
70+
})}
71+
{options.length === 0 && <div className="widget-checkbox-radio-selection-no-options">{`<...>`}</div>}
7872
</div>
7973
);
8074
}

‎packages/pluggableWidgets/checkbox-radio-selection-web/src/components/RadioSelection/RadioSelection.tsx

Lines changed: 40 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -25,57 +25,51 @@ export function RadioSelection({
2525

2626
return (
2727
<div
28-
className={classNames("widget-checkbox-radio-selection-radio", {
28+
className={classNames("widget-checkbox-radio-selection-list", {
2929
"widget-checkbox-radio-selection-readonly": isReadOnly,
3030
[`widget-checkbox-radio-selection-readonly-${readOnlyStyle}`]: isReadOnly
3131
})}
32+
role="radiogroup"
33+
aria-labelledby={`${inputId}-label`}
34+
aria-required={ariaRequired?.value}
3235
>
33-
<div
34-
className="widget-checkbox-radio-selection-radio-list"
35-
role="radiogroup"
36-
aria-labelledby={`${inputId}-label`}
37-
aria-required={ariaRequired?.value}
38-
>
39-
{options.map((optionId, index) => {
40-
const isSelected = currentId === optionId;
41-
const radioId = `${inputId}-radio-${index}`;
42-
return (
43-
<div
44-
key={optionId}
45-
className={classNames("widget-checkbox-radio-selection-radio-item", {
46-
"widget-checkbox-radio-selection-radio-item-selected": isSelected
47-
})}
36+
{options.map((optionId, index) => {
37+
const isSelected = currentId === optionId;
38+
const radioId = `${inputId}-radio-${index}`;
39+
return (
40+
<div
41+
key={optionId}
42+
className={classNames("widget-checkbox-radio-selection-item", "radio-item", {
43+
"widget-checkbox-radio-selection-item-selected": isSelected
44+
})}
45+
>
46+
<input
47+
type={selector.controlType}
48+
id={radioId}
49+
name={name}
50+
value={optionId}
51+
checked={isSelected}
52+
disabled={isReadOnly}
53+
tabIndex={tabIndex}
54+
onChange={handleChange}
55+
/>
56+
<CaptionContent
57+
onClick={(e: MouseEvent<HTMLDivElement>) => {
58+
e.preventDefault();
59+
e.stopPropagation();
60+
e.nativeEvent.stopImmediatePropagation();
61+
if (!isReadOnly) {
62+
selector.setValue(optionId);
63+
}
64+
}}
65+
htmlFor={radioId}
4866
>
49-
<input
50-
type={selector.controlType}
51-
id={radioId}
52-
name={name}
53-
value={optionId}
54-
checked={isSelected}
55-
disabled={isReadOnly}
56-
tabIndex={tabIndex}
57-
onChange={handleChange}
58-
/>
59-
<CaptionContent
60-
onClick={(e: MouseEvent<HTMLDivElement>) => {
61-
e.preventDefault();
62-
e.stopPropagation();
63-
e.nativeEvent.stopImmediatePropagation();
64-
if (!isReadOnly) {
65-
selector.setValue(optionId);
66-
}
67-
}}
68-
htmlFor={radioId}
69-
>
70-
{selector.caption.render(optionId)}
71-
</CaptionContent>
72-
</div>
73-
);
74-
})}
75-
{options.length === 0 && (
76-
<div className="widget-checkbox-radio-selection-no-options">No options available</div>
77-
)}
78-
</div>
67+
{selector.caption.render(optionId)}
68+
</CaptionContent>
69+
</div>
70+
);
71+
})}
72+
{options.length === 0 && <div className="widget-checkbox-radio-selection-no-options">{`<...>`}</div>}
7973
</div>
8074
);
8175
}

‎packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelection.scss

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
&-readonly {
77
&.widget-checkbox-radio-selection-readonly-text {
8-
.widget-checkbox-radio-selection-radio-item {
8+
.radio-item {
99
display: none;
1010

1111
&.widget-checkbox-radio-selection-radio-item-selected {
@@ -19,6 +19,17 @@
1919
}
2020
}
2121

22+
&-list {
23+
display: flex;
24+
flex-direction: column;
25+
}
26+
27+
&-item {
28+
input {
29+
vertical-align: middle;
30+
}
31+
}
32+
2233
label {
2334
font-weight: inherit;
2435
}

0 commit comments

Comments
 (0)