Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 09:36:27 +00:00
Code Issues Releases Activity

firmware/installPybricksDialog: fix <div> inside <p>

Browse Source 
fixes:

    Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

Also some other style tweaks while we are touching this.
This commit is contained in:
David Lechner
2022-07-27 16:22:46 -05:00
parent 89892476a5
commit e6609b9054
2 changed files with 105 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
+93 -92
View File
@@ -154,28 +154,27 @@ const AcceptLicensePanel: React.VoidFunctionComponent<AcceptLicensePanelProps> =
return (
<div className={dialogBody}>
<div className="pb-firmware-installPybricksDialog-license">
<div className="pb-firmware-installPybricksDialog-license-text">
{data ? (
<pre>{data.licenseText}</pre>
) : (
<NonIdealState
icon={error ? 'error' : <Spinner />}
description={
error
? i18n.translate('licensePanel.licenseText.error')
: undefined
}
/>
)}
</div>
<Checkbox
label={i18n.translate('licensePanel.acceptCheckbox.label')}
checked={licenseAccepted}
onChange={(e) => onLicenseAcceptedChanged(e.currentTarget.checked)}
disabled={!data}
/>
<div className="pb-firmware-installPybricksDialog-license-text">
{data ? (
<pre>{data.licenseText}</pre>
) : (
<NonIdealState
icon={error ? 'error' : <Spinner />}
description={
error
? i18n.translate('licensePanel.licenseText.error')
: undefined
}
/>
)}
</div>
<Checkbox
className="pb-firmware-installPybricksDialog-license-checkbox"
label={i18n.translate('licensePanel.acceptCheckbox.label')}
checked={licenseAccepted}
onChange={(e) => onLicenseAcceptedChanged(e.currentTarget.checked)}
disabled={!data}
/>
</div>
);
};
@@ -349,82 +348,84 @@ const BootloaderModePanel: React.VoidFunctionComponent<BootloaderModePanelProps>
return (
<div className={dialogBody}>
{hubHasUSB(hubType) && isLinux() && (
<p>
<Callout intent={Intent.WARNING} icon="warning-sign">
{i18n.translate('bootloaderPanel.warning.linux')}{' '}
<a
href={pybricksUsbLinuxUdevRulesUrl}
target="_blank"
rel="noreferrer"
>
{i18n.translate('bootloaderPanel.warning.learnMore')}
</a>
<ExternalLinkIcon />
</Callout>
</p>
<Callout intent={Intent.WARNING} icon="warning-sign">
{i18n.translate('bootloaderPanel.warning.linux')}{' '}
<a
href={pybricksUsbLinuxUdevRulesUrl}
target="_blank"
rel="noreferrer"
>
{i18n.translate('bootloaderPanel.warning.learnMore')}
</a>
<ExternalLinkIcon />
</Callout>
)}
{hubHasUSB(hubType) && isWindows() && (
<p>
<Callout intent={Intent.WARNING} icon="warning-sign">
{i18n.translate('bootloaderPanel.warning.windows')}{' '}
<a
href={pybricksUsbDfuWindowsDriverInstallUrl}
target="_blank"
rel="noreferrer"
>
{i18n.translate('bootloaderPanel.warning.learnMore')}
</a>
<ExternalLinkIcon />
</Callout>
</p>
<Callout intent={Intent.WARNING} icon="warning-sign">
{i18n.translate('bootloaderPanel.warning.windows')}{' '}
<a
href={pybricksUsbDfuWindowsDriverInstallUrl}
target="_blank"
rel="noreferrer"
>
{i18n.translate('bootloaderPanel.warning.learnMore')}
</a>
<ExternalLinkIcon />
</Callout>
)}
<p>{i18n.translate('bootloaderPanel.instruction1')}</p>
<ol>
{hubHasUSB(hubType) && (
<li>{i18n.translate('bootloaderPanel.step.disconnectUsb')}</li>
)}
<li>{i18n.translate('bootloaderPanel.step.powerOff')}</li>
{/* City hub has power issues and requires disconnecting motors/sensors */}
{hubType === Hub.City && (
<li>{i18n.translate('bootloaderPanel.step.disconnectIo')}</li>
)}
<li>{i18n.translate('bootloaderPanel.step.holdButton', { button })}</li>
{hubHasUSB(hubType) && (
<li>{i18n.translate('bootloaderPanel.step.connectUsb')}</li>
)}
<li>
{i18n.translate('bootloaderPanel.step.waitForLight', {
button,
light,
lightPattern,
})}
</li>
<li>
{i18n.translate(
/* hubs with USB will keep the power on, but other hubs won't */
hubHasUSB(hubType)
? 'bootloaderPanel.step.releaseButton'
: 'bootloaderPanel.step.keepHolding',
{
button,
},
<div className={Classes.RUNNING_TEXT}>
<p>{i18n.translate('bootloaderPanel.instruction1')}</p>
<ol>
{hubHasUSB(hubType) && (
<li>{i18n.translate('bootloaderPanel.step.disconnectUsb')}</li>
)}
</li>
</ol>
<p>
{i18n.translate('bootloaderPanel.instruction2', {
flashFirmware: (
<strong>{i18n.translate('flashFirmwareButton.label')}</strong>
),
})}
</p>
<li>{i18n.translate('bootloaderPanel.step.powerOff')}</li>
{/* City hub has power issues and requires disconnecting motors/sensors */}
{hubType === Hub.City && (
<li>{i18n.translate('bootloaderPanel.step.disconnectIo')}</li>
)}
<li>
{i18n.translate('bootloaderPanel.step.holdButton', { button })}
</li>
{hubHasUSB(hubType) && (
<li>{i18n.translate('bootloaderPanel.step.connectUsb')}</li>
)}
<li>
{i18n.translate('bootloaderPanel.step.waitForLight', {
button,
light,
lightPattern,
})}
</li>
<li>
{i18n.translate(
/* hubs with USB will keep the power on, but other hubs won't */
hubHasUSB(hubType)
? 'bootloaderPanel.step.releaseButton'
: 'bootloaderPanel.step.keepHolding',
{
button,
},
)}
</li>
</ol>
<p>
{i18n.translate('bootloaderPanel.instruction2', {
flashFirmware: (
<strong>
{i18n.translate('flashFirmwareButton.label')}
</strong>
),
})}
</p>
</div>
</div>
);
};
src/firmware/installPybricksDialog/installPybricksDialog.scss
+12 -8
View File
@@ -5,24 +5,28 @@
.pb-firmware-installPybricksDialog {
&-body {
min-height: bp.$pt-grid-size * 35;
min-height: bp.$pt-grid-size * 40;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: bp.$pt-grid-size;
}
&-license {
display: flex;
flex-direction: column;
gap: bp.$pt-grid-size;
min-height: inherit;
&-text {
flex-grow: 1;
width: 100%;
min-height: 0;
max-height: bp.$pt-grid-size * 30;
max-height: bp.$pt-grid-size * 35;
overflow: auto;
& .#{bp.$ns}-non-ideal-state {
min-height: bp.$pt-grid-size * 30;
min-height: bp.$pt-grid-size * 35;
}
}
&-checkbox {
margin-top: auto;
}
}
}