Skip to content

Commit e6609b9

Browse files
dlechdlech
committed
firmware/installPybricksDialog: fix <div> inside <p>
fixes: Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. Also some other style tweaks while we are touching this.
1 parent 8989247 commit e6609b9

File tree

2 files changed

+99
-94
lines changed

2 files changed

+99
-94
lines changed

‎src/firmware/installPybricksDialog/InstallPybricksDialog.tsx‎

Lines changed: 88 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -154,28 +154,27 @@ const AcceptLicensePanel: React.VoidFunctionComponent<AcceptLicensePanelProps> =
154154

155155
return (
156156
<div className={dialogBody}>
157-
<div className="pb-firmware-installPybricksDialog-license">
158-
<div className="pb-firmware-installPybricksDialog-license-text">
159-
{data ? (
160-
<pre>{data.licenseText}</pre>
161-
) : (
162-
<NonIdealState
163-
icon={error ? 'error' : <Spinner />}
164-
description={
165-
error
166-
? i18n.translate('licensePanel.licenseText.error')
167-
: undefined
168-
}
169-
/>
170-
)}
171-
</div>
172-
<Checkbox
173-
label={i18n.translate('licensePanel.acceptCheckbox.label')}
174-
checked={licenseAccepted}
175-
onChange={(e) => onLicenseAcceptedChanged(e.currentTarget.checked)}
176-
disabled={!data}
177-
/>
157+
<div className="pb-firmware-installPybricksDialog-license-text">
158+
{data ? (
159+
<pre>{data.licenseText}</pre>
160+
) : (
161+
<NonIdealState
162+
icon={error ? 'error' : <Spinner />}
163+
description={
164+
error
165+
? i18n.translate('licensePanel.licenseText.error')
166+
: undefined
167+
}
168+
/>
169+
)}
178170
</div>
171+
<Checkbox
172+
className="pb-firmware-installPybricksDialog-license-checkbox"
173+
label={i18n.translate('licensePanel.acceptCheckbox.label')}
174+
checked={licenseAccepted}
175+
onChange={(e) => onLicenseAcceptedChanged(e.currentTarget.checked)}
176+
disabled={!data}
177+
/>
179178
</div>
180179
);
181180
};
@@ -349,82 +348,84 @@ const BootloaderModePanel: React.VoidFunctionComponent<BootloaderModePanelProps>
349348
return (
350349
<div className={dialogBody}>
351350
{hubHasUSB(hubType) && isLinux() && (
352-
<p>
353-
<Callout intent={Intent.WARNING} icon="warning-sign">
354-
{i18n.translate('bootloaderPanel.warning.linux')}{' '}
355-
<a
356-
href={pybricksUsbLinuxUdevRulesUrl}
357-
target="_blank"
358-
rel="noreferrer"
359-
>
360-
{i18n.translate('bootloaderPanel.warning.learnMore')}
361-
</a>
362-
<ExternalLinkIcon />
363-
</Callout>
364-
</p>
351+
<Callout intent={Intent.WARNING} icon="warning-sign">
352+
{i18n.translate('bootloaderPanel.warning.linux')}{' '}
353+
<a
354+
href={pybricksUsbLinuxUdevRulesUrl}
355+
target="_blank"
356+
rel="noreferrer"
357+
>
358+
{i18n.translate('bootloaderPanel.warning.learnMore')}
359+
</a>
360+
<ExternalLinkIcon />
361+
</Callout>
365362
)}
366363
{hubHasUSB(hubType) && isWindows() && (
367-
<p>
368-
<Callout intent={Intent.WARNING} icon="warning-sign">
369-
{i18n.translate('bootloaderPanel.warning.windows')}{' '}
370-
<a
371-
href={pybricksUsbDfuWindowsDriverInstallUrl}
372-
target="_blank"
373-
rel="noreferrer"
374-
>
375-
{i18n.translate('bootloaderPanel.warning.learnMore')}
376-
</a>
377-
<ExternalLinkIcon />
378-
</Callout>
379-
</p>
364+
<Callout intent={Intent.WARNING} icon="warning-sign">
365+
{i18n.translate('bootloaderPanel.warning.windows')}{' '}
366+
<a
367+
href={pybricksUsbDfuWindowsDriverInstallUrl}
368+
target="_blank"
369+
rel="noreferrer"
370+
>
371+
{i18n.translate('bootloaderPanel.warning.learnMore')}
372+
</a>
373+
<ExternalLinkIcon />
374+
</Callout>
380375
)}
381376

382-
<p>{i18n.translate('bootloaderPanel.instruction1')}</p>
383-
<ol>
384-
{hubHasUSB(hubType) && (
385-
<li>{i18n.translate('bootloaderPanel.step.disconnectUsb')}</li>
386-
)}
387-
388-
<li>{i18n.translate('bootloaderPanel.step.powerOff')}</li>
377+
<div className={Classes.RUNNING_TEXT}>
378+
<p>{i18n.translate('bootloaderPanel.instruction1')}</p>
379+
<ol>
380+
{hubHasUSB(hubType) && (
381+
<li>{i18n.translate('bootloaderPanel.step.disconnectUsb')}</li>
382+
)}
389383

390-
{/* City hub has power issues and requires disconnecting motors/sensors */}
391-
{hubType === Hub.City && (
392-
<li>{i18n.translate('bootloaderPanel.step.disconnectIo')}</li>
393-
)}
384+
<li>{i18n.translate('bootloaderPanel.step.powerOff')}</li>
394385

395-
<li>{i18n.translate('bootloaderPanel.step.holdButton', { button })}</li>
386+
{/* City hub has power issues and requires disconnecting motors/sensors */}
387+
{hubType === Hub.City && (
388+
<li>{i18n.translate('bootloaderPanel.step.disconnectIo')}</li>
389+
)}
396390

397-
{hubHasUSB(hubType) && (
398-
<li>{i18n.translate('bootloaderPanel.step.connectUsb')}</li>
399-
)}
391+
<li>
392+
{i18n.translate('bootloaderPanel.step.holdButton', { button })}
393+
</li>
400394

401-
<li>
402-
{i18n.translate('bootloaderPanel.step.waitForLight', {
403-
button,
404-
light,
405-
lightPattern,
406-
})}
407-
</li>
395+
{hubHasUSB(hubType) && (
396+
<li>{i18n.translate('bootloaderPanel.step.connectUsb')}</li>
397+
)}
408398

409-
<li>
410-
{i18n.translate(
411-
/* hubs with USB will keep the power on, but other hubs won't */
412-
hubHasUSB(hubType)
413-
? 'bootloaderPanel.step.releaseButton'
414-
: 'bootloaderPanel.step.keepHolding',
415-
{
399+
<li>
400+
{i18n.translate('bootloaderPanel.step.waitForLight', {
416401
button,
417-
},
418-
)}
419-
</li>
420-
</ol>
421-
<p>
422-
{i18n.translate('bootloaderPanel.instruction2', {
423-
flashFirmware: (
424-
<strong>{i18n.translate('flashFirmwareButton.label')}</strong>
425-
),
426-
})}
427-
</p>
402+
light,
403+
lightPattern,
404+
})}
405+
</li>
406+
407+
<li>
408+
{i18n.translate(
409+
/* hubs with USB will keep the power on, but other hubs won't */
410+
hubHasUSB(hubType)
411+
? 'bootloaderPanel.step.releaseButton'
412+
: 'bootloaderPanel.step.keepHolding',
413+
{
414+
button,
415+
},
416+
)}
417+
</li>
418+
</ol>
419+
<p>
420+
{i18n.translate('bootloaderPanel.instruction2', {
421+
flashFirmware: (
422+
<strong>
423+
{i18n.translate('flashFirmwareButton.label')}
424+
</strong>
425+
),
426+
})}
427+
</p>
428+
</div>
428429
</div>
429430
);
430431
};

‎src/firmware/installPybricksDialog/installPybricksDialog.scss‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,28 @@
55

66
.pb-firmware-installPybricksDialog {
77
&-body {
8-
min-height: bp.$pt-grid-size * 35;
9-
}
10-
11-
&-license {
8+
min-height: bp.$pt-grid-size * 40;
129
display: flex;
1310
flex-direction: column;
11+
align-items: flex-start;
1412
gap: bp.$pt-grid-size;
15-
min-height: inherit;
13+
}
1614

15+
&-license {
1716
&-text {
1817
flex-grow: 1;
18+
width: 100%;
1919
min-height: 0;
20-
max-height: bp.$pt-grid-size * 30;
20+
max-height: bp.$pt-grid-size * 35;
2121
overflow: auto;
2222

2323
& .#{bp.$ns}-non-ideal-state {
24-
min-height: bp.$pt-grid-size * 30;
24+
min-height: bp.$pt-grid-size * 35;
2525
}
2626
}
27+
28+
&-checkbox {
29+
margin-top: auto;
30+
}
2731
}
2832
}

0 commit comments

Comments
 (0)