Skip to content

Commit a04dd78

Browse files
committed
console: Update checkbox to handle descriptions better
1 parent ac3007a commit a04dd78

File tree

2 files changed

+32
-25
lines changed

2 files changed

+32
-25
lines changed

pkg/webui/components/checkbox/checkbox.js

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -104,22 +104,24 @@ const Checkbox = props => {
104104

105105
return (
106106
<label className={cls}>
107-
<span className={style.checkbox}>
108-
<input
109-
type="checkbox"
110-
ref={inputRef}
111-
name={name}
112-
readOnly={readOnly}
113-
autoFocus={autoFocus}
114-
onChange={handleChange}
115-
id={id}
116-
aria-describedby={rest['aria-describedby']}
117-
aria-invalid={rest['aria-invalid']}
118-
{...checkboxProps}
119-
/>
120-
<span className={style.checkmark} />
121-
</span>
122-
{label && <Message className={labelCls} content={label} />}
107+
<div>
108+
<span className={style.checkbox}>
109+
<input
110+
type="checkbox"
111+
ref={inputRef}
112+
name={name}
113+
readOnly={readOnly}
114+
autoFocus={autoFocus}
115+
onChange={handleChange}
116+
id={id}
117+
aria-describedby={rest['aria-describedby']}
118+
aria-invalid={rest['aria-invalid']}
119+
{...checkboxProps}
120+
/>
121+
<span className={style.checkmark} />
122+
</span>
123+
{label && <Message className={labelCls} content={label} />}
124+
</div>
123125
{children}
124126
</label>
125127
)

pkg/webui/console/containers/email-notifications-form/index.js

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -124,16 +124,21 @@ const InnerForm = initialValues => {
124124
disabled={isUnsubscribeAll || isAdminNotificationType(type)}
125125
value={isAdminNotificationType(type)}
126126
label={m[type]}
127-
className={classNames('mb-0', { 'mt-cs-s': index !== 0, 'mt-0': index === 0 })}
127+
className={classNames('mb-0 direction-column al-start', {
128+
'mt-cs-s': index !== 0,
129+
'mt-0': index === 0,
130+
})}
131+
children={
132+
isAdminNotificationType(type) && (
133+
<Message
134+
className={style.requiresAdminAction}
135+
component="div"
136+
content={m.requiresAdminAction}
137+
values={{ i: str => <i key="bold">{str}</i> }}
138+
/>
139+
)
140+
}
128141
/>
129-
{isAdminNotificationType(type) && (
130-
<Message
131-
className={style.requiresAdminAction}
132-
component="div"
133-
content={m.requiresAdminAction}
134-
values={{ i: str => <i key="bold">{str}</i> }}
135-
/>
136-
)}
137142
</div>
138143
))
139144

0 commit comments

Comments
 (0)