general: Place dialog form labels on top of their fields #1804
Conversation
This allows for longer labels.
| @@ -207,7 +207,7 @@ const AdditionalOptions = ({ cacheMode, device, idPrefix, onValueChanged, busTyp | |||
| return ( | |||
| <ExpandableSection toggleText={ expanded ? _("Hide additional options") : _("Show additional options")} | |||
| onToggle={() => setExpanded(!expanded)} isExpanded={expanded} className="pf-v5-u-pt-lg"> | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
| @@ -584,7 +584,7 @@ export const AddDiskModalBody = ({ disk, idPrefix, isMediaInsertion, vm, vms, su | |||
| ); | |||
| } else if (isMediaInsertion) { | |||
| defaultBody = ( | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
| @@ -620,7 +620,7 @@ export const AddDiskModalBody = ({ disk, idPrefix, isMediaInsertion, vm, vms, su | |||
| } else { | |||
| defaultBody = ( | |||
| <> | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
| @@ -179,7 +179,7 @@ export class AddNIC extends React.Component { | |||
| const { idPrefix, vm } = this.props; | |||
|
|
|||
| const defaultBody = ( | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
| @@ -154,7 +154,7 @@ export class EditNICModal extends React.Component { | |||
| const { idPrefix, vm, network } = this.props; | |||
|
|
|||
| const defaultBody = ( | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
| @@ -154,7 +154,7 @@ export const VsockModal = ({ vm, vms, vmVsockNormalized, isVsockAttached, idPref | |||
| const vsockUsage = getVsockUsageMessage(vm.name, vm.connectionName, vms, auto, address); | |||
|
|
|||
| const body = ( | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
| @@ -197,7 +197,7 @@ export const WatchdogModal = ({ vm, isWatchdogAttached, isRemovable, idPrefix }) | |||
| }> | |||
| {needsShutdown()} | |||
| <WatchdogModalAlert dialogError={dialogError} /> | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
| @@ -182,7 +182,7 @@ export class CreateSnapshotModal extends React.Component { | |||
| const validationError = this.onValidate(); | |||
|
|
|||
| const body = ( | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
| @@ -167,7 +167,7 @@ export const MigrateDialog = ({ vm, connectionName }) => { | |||
| } | |||
|
|
|||
| const body = ( | |||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> | |||
| <Form onSubmit={e => e.preventDefault()}> | |||
There was a problem hiding this comment.
This added line is not executed by any test.
|
Cool experiment! Thanks! I looked at the diff @ https://github.com/cockpit-project/pixel-test-reference/compare/8ee2e589cb8448aaf4bd8cf07f22b3cbebc18739..35974bdda540bf95f58042085dbe9137254667b7 I don't know if we want to go all-in on side or top labelling or pick what fits best. We might want to default to top labelling and do side labelling for more complex forms like this? |
This allows for longer labels.
Pixel changes here.