From faced98ec86f4612d1d614596fdaef5d9355e9da Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 29 Nov 2024 15:53:45 +0100 Subject: [PATCH 01/10] :wheelchair: Remove the custom helptext-as-tooltip styling This aligns the implementation again with default project. The help text is the only way to specify crucial information/context or requirements for a given form field, and thus should be visible. Tooltips serve a different purpose - they can provide additional, informational, context but may not hide essential information for accessibility reasons. Unfortunately, the Django admin doesn't have a mechanism for using both flavours of information. --- src/openforms/scss/admin/_admin_theme.scss | 1 - src/openforms/scss/admin/_tooltip.scss | 113 --------------------- 2 files changed, 114 deletions(-) delete mode 100644 src/openforms/scss/admin/_tooltip.scss diff --git a/src/openforms/scss/admin/_admin_theme.scss b/src/openforms/scss/admin/_admin_theme.scss index e8f89a92fd..974f052e57 100644 --- a/src/openforms/scss/admin/_admin_theme.scss +++ b/src/openforms/scss/admin/_admin_theme.scss @@ -8,7 +8,6 @@ DO NOT PUT ANY TARGET APP-SPECIFIC RULES HERE. @use './themes/dark' as dark-theme; @use './themes/light' as light-theme; -@use './tooltip'; @import 'microscope-sass/lib/bem'; diff --git a/src/openforms/scss/admin/_tooltip.scss b/src/openforms/scss/admin/_tooltip.scss deleted file mode 100644 index 892434b194..0000000000 --- a/src/openforms/scss/admin/_tooltip.scss +++ /dev/null @@ -1,113 +0,0 @@ -/** - * Replace the form field help text with a tooltip icon by default, - * displaying the content on hover. - * - * Appearance/variables can be tweaked in ../vars.scss. - * - * The django markup (since 4.2) is typically of the form: - * - *
- * - *
- * - *
- *
...
- *
- *
- * - * The implementation uses the :has pseudo selector to target the relevant nodes, so - * that we don't have to override the django field templates/markup. Modern browsers - * support this, on old browsers this will degrade to the default django admin styles. - * - * There are a number of cases to consider when applying this CSS: - * - * - form row with a single field or multiple fields (.fieldBox selector present or not) - * - form field with or without validation errors - complicated by the above. - * - * They require specific attention to the styling. - */ - -// ensure that we *only* display the tooltip icon in the 'normal' state -div.help { - cursor: help; - block-size: var(--of-admin-tooltip-size); - inline-size: var(--of-admin-tooltip-size); - - background-image: url(../admin/img/icon-unknown.svg); - background-repeat: no-repeat; - background-size: var(--of-admin-tooltip-size); - margin-inline: 0 !important; - margin-block: 0 !important; - padding-inline: 0 !important; - padding-block: 0 !important; - - position: relative; // provides an anchor for the nested div absolute positioning - - // the actual content is nested in a div, so we can easily hide it by default - > div { - display: none; - } - - // On hover of the icon, we display the real help text content. - &:hover { - background-image: none; - - > div { - display: block; - position: absolute; - top: 1px; - z-index: 10; - - block-size: auto; - inline-size: max-content; - max-inline-size: 300px; - padding-block: 5px 3px; - padding-inline: 5px 5px; - - background-color: var(--of-admin-tooltip-background-color); - border: solid 1px var(--of-admin-tooltip-border-color); - - color: var(--of-admin-tooltip-color); - } - } -} - -// Unsure why Django hides the overflow here :/ -.form-row:has(.help) { - overflow: visible; -} - -// field on a single form row with multiple fields, without validation errors -div:has(> .fieldBox + .help) { - display: grid; - grid-template-columns: auto var(--of-admin-tooltip-size); - column-gap: 2px; - - // move the margin right (djagno's styles) from fieldbox to the parent so that the - // tooltip is not too far away - margin-right: 20px; - > .fieldBox { - margin-right: 0; - } -} - -// field on a single form row with multiple fields, with validation errors -div:has(> .errorlist + .fieldBox + .help) { - // split the 1-row, 2-columns up into 2-rows, 2 columns and make sure the top - // row is assigned to the validation errors. - // The rest of the styles are shared with the regular fieldBox styles. - grid-template-areas: - 'errors errors' - 'field tooltip'; - - > .errorlist { - grid-area: errors; - margin-bottom: 0; - } -} - -// field, alone on single form row (with/without validation errors) -div:has(> .help):not(:has(> .fieldBox)) { - display: flex; - column-gap: 2px; -} From d03bd0b722e34edc8fe70394f37ee16b8de90151 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 29 Nov 2024 16:01:29 +0100 Subject: [PATCH 02/10] :alien: Fix markup of checkboxes with help text Left-over from the Django 4.2 upgrade where the HTML was changed. This ensures the help text is below the checkbox, rather than next to it with some awkward horizontal space between. --- .../js/components/admin/forms/Inputs.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/openforms/js/components/admin/forms/Inputs.js b/src/openforms/js/components/admin/forms/Inputs.js index 97a4584763..5089fce694 100644 --- a/src/openforms/js/components/admin/forms/Inputs.js +++ b/src/openforms/js/components/admin/forms/Inputs.js @@ -102,19 +102,23 @@ const Checkbox = ({name, label, helpText, noVCheckbox = false, ...extraProps}) = name = prefix ? `${prefix}-${name}` : name; const idFor = disabled ? undefined : `id_${name}`; return ( -
- {' '} - - {helpText ? ( + <> +
+ {' '} + +
+ {helpText && (
{helpText}
- ) : null} -
+ )} + ); }; From 12d6d51e8d6f63c8b1d58c3c6e68a0fa18135743 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 29 Nov 2024 16:06:45 +0100 Subject: [PATCH 03/10] :lipstick: Allow long words to wrap in steps nav Without wrapping, the delete icon cannot be reached to delete a step because the step name is pushing it behind the form step details. --- .../js/components/admin/form_design/FormStepsNav.js | 6 +++++- src/openforms/scss/components/admin/_list.scss | 7 +++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/openforms/js/components/admin/form_design/FormStepsNav.js b/src/openforms/js/components/admin/form_design/FormStepsNav.js index 5add066c80..e32bd62f10 100644 --- a/src/openforms/js/components/admin/form_design/FormStepsNav.js +++ b/src/openforms/js/components/admin/form_design/FormStepsNav.js @@ -52,7 +52,11 @@ const FormStepNavItem = ({ onClick={() => onReorder('down')} /> - diff --git a/src/openforms/scss/components/admin/_list.scss b/src/openforms/scss/components/admin/_list.scss index 0f018c9ea6..8f099b3ef0 100644 --- a/src/openforms/scss/components/admin/_list.scss +++ b/src/openforms/scss/components/admin/_list.scss @@ -36,6 +36,13 @@ align-items: center; } } + + &__item-text { + &--allow-wrap { + word-break: break-all; + overflow-wrap: anywhere; + } + } } .list__item--active { From a96894485bfae628391ac1c1161a2433af31e771 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 29 Nov 2024 16:14:40 +0100 Subject: [PATCH 04/10] :fire: Delete obsoleted .admin-fieldset styling This used to be required to deal with styling from rjsf, but that dependency has been removed so we can stick to the normal Django styling instead. --- .../admin/form_design/DataRemoval.js | 2 +- .../admin/form_design/PaymentFields.js | 1 - .../admin/form_design/PriceLogic.js | 1 - .../admin/form_design/ProductFields.js | 1 - .../admin/form_design/RegistrationFields.js | 1 - .../logic/actions/dmn/DMNActionConfig.js | 4 ++-- .../ServiceFetchConfigurationForm.js | 4 ---- .../scss/components/builder/_builder.scss | 22 ------------------- 8 files changed, 3 insertions(+), 33 deletions(-) diff --git a/src/openforms/js/components/admin/form_design/DataRemoval.js b/src/openforms/js/components/admin/form_design/DataRemoval.js index 1eb1e06bbd..f0804cc834 100644 --- a/src/openforms/js/components/admin/form_design/DataRemoval.js +++ b/src/openforms/js/components/admin/form_design/DataRemoval.js @@ -41,7 +41,7 @@ const DataRemoval = ({submissionsRemovalOptions, onChange}) => { } = submissionsRemovalOptions; return ( -
+
{ return (
{ const productChoices = products.map(product => [product.url, product.name]); return (
} > diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.js b/src/openforms/js/components/admin/form_design/RegistrationFields.js index d2aa9bcde5..bd27150d90 100644 --- a/src/openforms/js/components/admin/form_design/RegistrationFields.js +++ b/src/openforms/js/components/admin/form_design/RegistrationFields.js @@ -85,7 +85,6 @@ const BackendFields = ({index = 0, backend, availableBackends = [], onChange, on return (
{backend.name || backend.key} diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.js index ebb0982d80..3dc1b3d461 100644 --- a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.js +++ b/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.js @@ -194,7 +194,7 @@ const DMNActionConfig = ({initialValues, onSave}) => { > {formik => (
-
+
{ /> } > -
+
diff --git a/src/openforms/js/components/admin/form_design/variables/ServiceFetchConfigurationForm.js b/src/openforms/js/components/admin/form_design/variables/ServiceFetchConfigurationForm.js index 1f40e27b2e..dccb2891f9 100644 --- a/src/openforms/js/components/admin/form_design/variables/ServiceFetchConfigurationForm.js +++ b/src/openforms/js/components/admin/form_design/variables/ServiceFetchConfigurationForm.js @@ -60,7 +60,6 @@ const ServiceFetchConfigurationForm = ({formik, selectExisting = false}) => { description="Service fetch configuration modal basic fieldset title" /> } - extraClassName="admin-fieldset" > { description="Service fetch configuration modal data extraction fieldset title" /> } - extraClassName="admin-fieldset" > { description="Service fetch configuration try it out tabpanel full request fieldset title" /> } - extraClassName="admin-fieldset" > {/* TODO https://github.com/open-formulieren/open-forms/issues/2777 */} @@ -367,7 +364,6 @@ const ServiceFetchConfigurationForm = ({formik, selectExisting = false}) => { description="Service fetch configuration try it out tabpanel data extraction fieldset title" /> } - extraClassName="admin-fieldset" > {/* TODO https://github.com/open-formulieren/open-forms/issues/2777 */} diff --git a/src/openforms/scss/components/builder/_builder.scss b/src/openforms/scss/components/builder/_builder.scss index 531646cf19..0a96fcc0d7 100644 --- a/src/openforms/scss/components/builder/_builder.scss +++ b/src/openforms/scss/components/builder/_builder.scss @@ -157,28 +157,6 @@ div.flatpickr-calendar.open { } } -// rjsf styling competing with bootstrap, competing with django admin..... -.admin-fieldset { - margin-bottom: 0; - - .form-row { - &, - * { - box-sizing: border-box !important; - } - } - - .form-row { - display: block; - margin-left: 0; - margin-right: 0; - - ul.errorlist { - padding-left: 0px; - } - } -} - .gu-transit { // #748 client requested increased contrast for this element // here we clobber formio's compiled 0.2 opacity of the drag-and-drop target indicator From 921692744c4e0fc4793d2035289a3d4422f1d7fe Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 29 Nov 2024 22:56:20 +0100 Subject: [PATCH 05/10] :art: Remove duplicated MS Graph stories/plugin options --- .../form_design/RegistrationFields.stories.js | 28 ------------------- 1 file changed, 28 deletions(-) diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js index 726b9cc2fa..a7d07d6d04 100644 --- a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js +++ b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js @@ -389,25 +389,6 @@ export default { type: 'object', }, }, - { - id: 'microsoft-graph', - label: 'Microsoft Graph (OneDrive/SharePoint)', - schema: { - type: 'object', - properties: { - folderPath: { - type: 'string', - minLength: 1, - title: 'maplocatie', - }, - driveId: { - type: 'string', - minLength: 1, - title: 'drive-ID', - }, - }, - }, - }, ], configuredBackends: [], onChange: fn(), @@ -650,15 +631,6 @@ export const ConfiguredBackends = { backend: 'exception-demo', options: {extraLine: 'Filled out option'}, }, - { - key: 'backend9', - name: 'MS Graph', - backend: 'microsoft-graph', - options: { - folderPath: '/formSubmissions', - driveId: 'myDrive', - }, - }, { key: 'backend10', name: 'Camunda', From 4469fc0c79e821e61693c5a04d1d7f75c0c69e34 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 29 Nov 2024 22:58:06 +0100 Subject: [PATCH 06/10] :coffin: Remove unused uiSchema prop --- .../js/components/admin/form_design/RegistrationFields.js | 1 - .../js/components/admin/form_design/registrations/index.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.js b/src/openforms/js/components/admin/form_design/RegistrationFields.js index bd27150d90..306ef1670d 100644 --- a/src/openforms/js/components/admin/form_design/RegistrationFields.js +++ b/src/openforms/js/components/admin/form_design/RegistrationFields.js @@ -53,7 +53,6 @@ const BackendOptionsFormRow = ({backendType = null, currentOptions = {}, onChang /> } schema={backendType.schema} - uiSchema={BACKEND_OPTIONS_FORMS[backendType.id]?.uiSchema || {}} formData={currentOptions} onChange={({formData}) => onChange({target: {name: `form.registrationBackends.${index}.options`, value: formData}}) diff --git a/src/openforms/js/components/admin/form_design/registrations/index.js b/src/openforms/js/components/admin/form_design/registrations/index.js index dafbebd58f..c5de3f8053 100644 --- a/src/openforms/js/components/admin/form_design/registrations/index.js +++ b/src/openforms/js/components/admin/form_design/registrations/index.js @@ -13,7 +13,6 @@ import ZGWOptionsForm from './zgw'; /** * @typedef {{ * form: React.FC, - * uiSchema?: Object, * onStepEdit?: (...args: any) => Object | null, * onUserDefinedVariableEdit?: (...args: any) => Object | null, * configurableFromVariables?: boolean | (options: Object) => boolean, From c5b9cdff0864e07363583deb185753b9ed106ca9 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 29 Nov 2024 23:02:23 +0100 Subject: [PATCH 07/10] :technologist: Set up correct Django DOM structure for representative styling --- .../admin/form_design/RegistrationFields.stories.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js index a7d07d6d04..a6daaf6baa 100644 --- a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js +++ b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js @@ -25,7 +25,16 @@ import RegistrationFields from './RegistrationFields'; export default { title: 'Form design / Registration / RegistrationFields', - decorators: [ValidationErrorsDecorator, FormDecorator], + decorators: [ + ValidationErrorsDecorator, + FormDecorator, + // provide necessary django elements to get the right styling + Story => ( + + + + ), + ], component: RegistrationFields, args: { availableBackends: [ From 5ca2b7d03cdad436d2f1846b987eb98ac12d0943 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Mon, 9 Dec 2024 17:48:55 +0100 Subject: [PATCH 08/10] :white_check_mark: Update stories with decorator for admin form styling --- .../form_design/RegistrationFields.stories.js | 12 ++---------- .../authentication/LoAOverrideOption.stories.js | 8 ++++++++ .../admin/form_design/story-decorators.js | 14 ++++++++++++++ .../ServiceFetchConfigurationForm.stories.js | 8 ++++++-- .../js/components/admin/forms/Field.stories.js | 9 +++++++++ .../js/components/admin/forms/Fieldset.stories.js | 3 +++ .../js/components/admin/forms/Inputs.stories.js | 9 +++++++++ 7 files changed, 51 insertions(+), 12 deletions(-) diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js index a6daaf6baa..6ab9f34a03 100644 --- a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js +++ b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js @@ -16,6 +16,7 @@ import { mockRoleTypesGet as mockZGWApisRoleTypesGet, } from 'components/admin/form_design/registrations/zgw/mocks'; import { + AdminChangeFormDecorator, FormDecorator, ValidationErrorsDecorator, } from 'components/admin/form_design/story-decorators'; @@ -25,16 +26,7 @@ import RegistrationFields from './RegistrationFields'; export default { title: 'Form design / Registration / RegistrationFields', - decorators: [ - ValidationErrorsDecorator, - FormDecorator, - // provide necessary django elements to get the right styling - Story => ( -
- - - ), - ], + decorators: [ValidationErrorsDecorator, FormDecorator, AdminChangeFormDecorator], component: RegistrationFields, args: { availableBackends: [ diff --git a/src/openforms/js/components/admin/form_design/authentication/LoAOverrideOption.stories.js b/src/openforms/js/components/admin/form_design/authentication/LoAOverrideOption.stories.js index d40cf737af..c40f03290e 100644 --- a/src/openforms/js/components/admin/form_design/authentication/LoAOverrideOption.stories.js +++ b/src/openforms/js/components/admin/form_design/authentication/LoAOverrideOption.stories.js @@ -1,10 +1,18 @@ import {expect, within} from '@storybook/test'; +import {AdminChangeFormDecorator} from 'components/admin/form_design/story-decorators'; + import LoAOverrideOption from './LoAOverrideOption'; export default { title: 'Form design/ Authentication / LoA override option', component: LoAOverrideOption, + decorators: [AdminChangeFormDecorator], + parameters: { + adminChangeForm: { + wrapFieldset: true, + }, + }, }; export const Default = { diff --git a/src/openforms/js/components/admin/form_design/story-decorators.js b/src/openforms/js/components/admin/form_design/story-decorators.js index fad8d5f766..52cf23441d 100644 --- a/src/openforms/js/components/admin/form_design/story-decorators.js +++ b/src/openforms/js/components/admin/form_design/story-decorators.js @@ -1,7 +1,9 @@ import {fn} from '@storybook/test'; import {Form, Formik} from 'formik'; +import {Fragment} from 'react'; import {FeatureFlagsContext, FormContext} from 'components/admin/form_design/Context'; +import Fieldset from 'components/admin/forms/Fieldset'; import {ReactSelectContext} from 'components/admin/forms/ReactSelect'; import {ValidationErrorsProvider} from 'components/admin/forms/ValidationErrors'; import {ModalContext} from 'components/admin/modals'; @@ -29,6 +31,18 @@ export const FormLogicDecorator = (Story, {args}) => ( ); +// provide necessary django elements to get the right styling +export const AdminChangeFormDecorator = (Story, {parameters}) => { + const Wrapper = parameters?.adminChangeForm?.wrapFieldset ? Fieldset : Fragment; + return ( +
+ + + +
+ ); +}; + export const FormDecorator = (Story, {args}) => ( { @@ -25,7 +29,7 @@ const Template = ({initialValues = {}, selectExisting}) => { export default { title: 'Form design/Service Fetch/ServiceFetchConfigurationForm', - decorators: [FormLogicDecorator], + decorators: [FormLogicDecorator, AdminChangeFormDecorator], component: ServiceFetchConfigurationForm, render: Template.bind({}), diff --git a/src/openforms/js/components/admin/forms/Field.stories.js b/src/openforms/js/components/admin/forms/Field.stories.js index e53e6724a5..cffe2af65f 100644 --- a/src/openforms/js/components/admin/forms/Field.stories.js +++ b/src/openforms/js/components/admin/forms/Field.stories.js @@ -1,3 +1,5 @@ +import {AdminChangeFormDecorator} from 'components/admin/form_design/story-decorators'; + import Field from './Field'; import {TextInput} from './Inputs'; @@ -5,6 +7,13 @@ export default { title: 'Admin/Django/Field', component: Field, + decorators: [AdminChangeFormDecorator], + parameters: { + adminChangeForm: { + wrapFieldset: true, + }, + }, + args: { children: , }, diff --git a/src/openforms/js/components/admin/forms/Fieldset.stories.js b/src/openforms/js/components/admin/forms/Fieldset.stories.js index b492809357..5e969b40eb 100644 --- a/src/openforms/js/components/admin/forms/Fieldset.stories.js +++ b/src/openforms/js/components/admin/forms/Fieldset.stories.js @@ -1,3 +1,5 @@ +import {AdminChangeFormDecorator} from 'components/admin/form_design/story-decorators'; + import Field from './Field'; import Fieldset from './Fieldset'; import FormRow from './FormRow'; @@ -23,6 +25,7 @@ export default { title: 'Admin/Django/Fieldset', component: Fieldset, render, + decorators: [AdminChangeFormDecorator], argTypes: { children: { diff --git a/src/openforms/js/components/admin/forms/Inputs.stories.js b/src/openforms/js/components/admin/forms/Inputs.stories.js index d2242c8535..0a4dfa976e 100644 --- a/src/openforms/js/components/admin/forms/Inputs.stories.js +++ b/src/openforms/js/components/admin/forms/Inputs.stories.js @@ -1,5 +1,7 @@ import flatpickr from 'flatpickr'; +import {AdminChangeFormDecorator} from 'components/admin/form_design/story-decorators'; + import { Checkbox, DateInput, @@ -20,6 +22,13 @@ export const CheckboxStory = { name: 'Checkbox', render: args => , + decorators: [AdminChangeFormDecorator], + parameters: { + adminChangeForm: { + wrapFieldset: true, + }, + }, + args: { name: 'Checkbox', label: 'Checkbox', From 796dcc88e4a883d5436e3ab3da000b027af4f544 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Mon, 9 Dec 2024 22:45:36 +0100 Subject: [PATCH 09/10] :alien: Fix Django 4.2 admin form field markup The fieldboxes/multiple fields on a row was broken since the Django 4.2 upgrade because the markup changed extensively. The markup now again matches a vanilla Django admin. Fielboxes are slightly different since they gain additional wrappers, and the layout of the errors relative to the input/help text changes. --- ...NlObjectsApiVariableConfigurationEditor.js | 37 +++++------ .../objectsapi/fields/DocumentTypes.js | 2 +- .../js/components/admin/forms/Field.js | 66 +++++++++++-------- .../js/components/admin/forms/FormRow.js | 12 +++- .../components/admin/forms/FormRow.stories.js | 18 +++-- .../js/components/admin/forms/Inputs.js | 10 +-- 6 files changed, 77 insertions(+), 68 deletions(-) diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js index f6b5f624c4..86e8ffec86 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js @@ -135,25 +135,24 @@ export const AddressNlEditor = ({ return ( <> - - - } - helpText={ - - } - checked={specificTargetPaths} - onChange={onSpecificTargetPathsChange} - /> - + + } + helpText={ + + } + checked={specificTargetPaths} + onChange={onSpecificTargetPathsChange} + disabled={!!mappedVariable.targetPath} + /> return ( - + <> + {label && ( + + )} + {modifiedChildren} +
+ ); + + const errorsMarkup = hasErrors && ( + + {formattedErrors} + + ); + + const helpMarkup = helpText && ( +
+
{helpText}
+
+ ); - return ( + return fieldBox ? ( +
+ {errorsMarkup} + {fieldInputMarkup} + {helpMarkup} +
+ ) : ( <> - {!fieldBox && hasErrors ? ( - - {formattedErrors} - - ) : null} -
- {fieldBox && hasErrors ? ( - - {formattedErrors} - - ) : null} - -
- {label && ( - - )} - {modifiedChildren} -
- - {helpText ? ( -
-
{helpText}
-
- ) : null} + {errorsMarkup} +
+ {fieldInputMarkup} + {helpMarkup}
); diff --git a/src/openforms/js/components/admin/forms/FormRow.js b/src/openforms/js/components/admin/forms/FormRow.js index 50b88f0f2e..a5ab2d5108 100644 --- a/src/openforms/js/components/admin/forms/FormRow.js +++ b/src/openforms/js/components/admin/forms/FormRow.js @@ -10,10 +10,13 @@ const FormRow = ({fields = [], children}) => { let hasErrors = false; const validationErrors = useContext(ValidationErrorContext); + let hasAnyFieldBox = false; // process (validation) errors here const processedChildren = React.Children.map(children, child => { // check if it *looks* like a field - let {name, errors} = child.props; + let {name, errors, fieldBox = false} = child.props; + if (fieldBox) hasAnyFieldBox = true; + if (!name) return child; const childErrors = validationErrors @@ -45,7 +48,12 @@ const FormRow = ({fields = [], children}) => { {errors: processedChildren.length === 1 && hasErrors}, ...fieldClasses ); - return
{processedChildren}
; + const inner = hasAnyFieldBox ? ( +
{processedChildren}
+ ) : ( + processedChildren + ); + return
{inner}
; }; FormRow.propTypes = { diff --git a/src/openforms/js/components/admin/forms/FormRow.stories.js b/src/openforms/js/components/admin/forms/FormRow.stories.js index 2193fdaa4a..004353abde 100644 --- a/src/openforms/js/components/admin/forms/FormRow.stories.js +++ b/src/openforms/js/components/admin/forms/FormRow.stories.js @@ -1,20 +1,18 @@ +import {AdminChangeFormDecorator} from 'components/admin/form_design/story-decorators'; + import Field from './Field'; -import Fieldset from './Fieldset'; import FormRow from './FormRow'; import {TextInput} from './Inputs'; -const FormDecorator = Story => ( -
-
- -
-
-); - export default { title: 'Admin/Django/FormRow', component: FormRow, - decorators: [FormDecorator], + decorators: [AdminChangeFormDecorator], + parameters: { + adminChangeForm: { + wrapFieldset: true, + }, + }, }; export const SingleField = { diff --git a/src/openforms/js/components/admin/forms/Inputs.js b/src/openforms/js/components/admin/forms/Inputs.js index 5089fce694..7cec193bbe 100644 --- a/src/openforms/js/components/admin/forms/Inputs.js +++ b/src/openforms/js/components/admin/forms/Inputs.js @@ -102,12 +102,8 @@ const Checkbox = ({name, label, helpText, noVCheckbox = false, ...extraProps}) = name = prefix ? `${prefix}-${name}` : name; const idFor = disabled ? undefined : `id_${name}`; return ( - <> -
+
+
{' '}
)} - +
); }; From 3bc48aaa252c24ce7f3e78eca09301124bf4478b Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Tue, 10 Dec 2024 08:54:29 +0100 Subject: [PATCH 10/10] :rotating_light: Address proptype warnings in DMNActionConfig component --- .../logic/actions/dmn/DMNParametersForm.js | 2 ++ src/openforms/js/components/admin/forms/Field.js | 12 +++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js index da394dcf0c..92a357e9d4 100644 --- a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js +++ b/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js @@ -194,6 +194,7 @@ const DMNParametersForm = () => { loading={loading} name="inputMapping" directionIcon={