Merge pull request #4873 from open-formulieren/a11y/reinstate-default…

…-tooltips Reinstate some default styling (tooltip, fieldsets)
open-formulieren · Dec 11, 2024 · 1ecc79f · 1ecc79f
2 parents 27a9852 + 3bc48aa
commit 1ecc79f
Show file tree

Hide file tree

Showing 27 changed files with 162 additions and 252 deletions.
diff --git 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 (
-    <Fieldset extraClassName="admin-fieldset">
+    <Fieldset>
       <FormRow>
         <Field
           name="form.submissionsRemovalOptions.successfulSubmissionsRemovalLimit"

diff --git 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')}
         />
       </div>
-      <button type="button" onClick={onActivate} className="button button--plain">
+      <button
+        type="button"
+        onClick={onActivate}
+        className="button button--plain list__item-text list__item-text--allow-wrap"
+      >
         {hasErrors ? <ErrorIcon text={iconTitle} extraClassname="icon icon--danger" /> : null}
         {name}
       </button>

diff --git a/src/openforms/js/components/admin/form_design/PaymentFields.js b/src/openforms/js/components/admin/form_design/PaymentFields.js
@@ -18,7 +18,6 @@ const PaymentFields = ({backends = [], selectedBackend = '', backendOptions = {}
 
   return (
     <Fieldset
-      extraClassName="admin-fieldset"
       title={
         <FormattedMessage
           description="Payment provider fieldset title"

diff --git a/src/openforms/js/components/admin/form_design/PriceLogic.js b/src/openforms/js/components/admin/form_design/PriceLogic.js
@@ -62,7 +62,6 @@ export const PriceLogic = ({variableKey, onFieldChange}) => {
 
   return (
     <Fieldset
-      extraClassName="admin-fieldset"
       title={
         <FormattedMessage
           description="Dynamic pricing fieldset title"

diff --git a/src/openforms/js/components/admin/form_design/ProductFields.js b/src/openforms/js/components/admin/form_design/ProductFields.js
@@ -32,7 +32,6 @@ const ProductFields = ({selectedProduct = null, onChange}) => {
   const productChoices = products.map(product => [product.url, product.name]);
   return (
     <Fieldset
-      extraClassName="admin-fieldset"
       title={<FormattedMessage description="Product fieldset title" defaultMessage="Product" />}
     >
       <FormRow>

diff --git 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}})
@@ -85,7 +84,6 @@ const BackendFields = ({index = 0, backend, availableBackends = [], onChange, on
   return (
     <Fieldset
       style={{'--of-add-another-text': `"${addAnotherMsg}"`}}
-      extraClassName="admin-fieldset"
       title={
         <>
           {backend.name || backend.key}

diff --git 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,7 +26,7 @@ import RegistrationFields from './RegistrationFields';
 
 export default {
   title: 'Form design / Registration / RegistrationFields',
-  decorators: [ValidationErrorsDecorator, FormDecorator],
+  decorators: [ValidationErrorsDecorator, FormDecorator, AdminChangeFormDecorator],
   component: RegistrationFields,
   args: {
     availableBackends: [
@@ -389,25 +390,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 +632,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',

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
@@ -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/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 => (
           <Form>
-            <fieldset className="admin-fieldset aligned">
+            <fieldset className="aligned">
               <div className="form-row form-row--no-bottom-line">
                 <Field
                   name="pluginId"
@@ -232,7 +232,7 @@ const DMNActionConfig = ({initialValues, onSave}) => {
                 />
               }
             >
-              <fieldset className="admin-fieldset aligned">
+              <fieldset className="aligned">
                 <div className="form-row form-row--no-bottom-line">
                   <DecisionDefinitionIdField />
                 </div>

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
@@ -194,6 +194,7 @@ const DMNParametersForm = () => {
             loading={loading}
             name="inputMapping"
             directionIcon={<FAIcon icon="arrow-right-long" aria-hidden="true" />}
+            variableName="formVariable"
             propertyChoices={dmnParams.inputs}
             propertyName="dmnVariable"
             propertyHeading={dmnVariableColumnLabel}
@@ -211,6 +212,7 @@ const DMNParametersForm = () => {
             loading={loading}
             name="outputMapping"
             directionIcon={<FAIcon icon="arrow-left-long" aria-hidden="true" />}
+            variableName="formVariable"
             propertyChoices={dmnParams.outputs}
             propertyName="dmnVariable"
             propertyHeading={dmnVariableColumnLabel}

diff --git 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,

diff --git a/...in/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js b/...in/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js
@@ -135,25 +135,24 @@ export const AddressNlEditor = ({
   return (
     <>
       <FormRow>
-        <Field name="specificTargetPaths" disabled={!!mappedVariable.targetPath}>
-          <Checkbox
-            name="specificTargetPathsCheckbox"
-            label={
-              <FormattedMessage
-                defaultMessage="Map specific subfields"
-                description="'Map specific subfields' checkbox label"
-              />
-            }
-            helpText={
-              <FormattedMessage
-                description="'Map specific subfields' checkbox help text"
-                defaultMessage="Whether to map the specific subfield of addressNl component"
-              />
-            }
-            checked={specificTargetPaths}
-            onChange={onSpecificTargetPathsChange}
-          />
-        </Field>
+        <Checkbox
+          name="specificTargetPathsCheckbox"
+          label={
+            <FormattedMessage
+              defaultMessage="Map specific subfields"
+              description="'Map specific subfields' checkbox label"
+            />
+          }
+          helpText={
+            <FormattedMessage
+              description="'Map specific subfields' checkbox help text"
+              defaultMessage="Whether to map the specific subfield of addressNl component"
+            />
+          }
+          checked={specificTargetPaths}
+          onChange={onSpecificTargetPathsChange}
+          disabled={!!mappedVariable.targetPath}
+        />
       </FormRow>
       <FormRow>
         <Field

diff --git a/...penforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js b/...penforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js
@@ -88,7 +88,7 @@ const DocumentType = ({name, label, loading, options, isDisabled, helpText}) =>
 
   return (
     <FormRow>
-      <Field name={name} label={label} helpText={helpText} noManageChildProps>
+      <Field name={name} label={label} helpText={helpText} disabled={isDisabled} noManageChildProps>
         <>
           <ReactSelect
             name={name}

diff --git 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}) => (
   </FormLogicContext.Provider>
 );
 
+// provide necessary django elements to get the right styling
+export const AdminChangeFormDecorator = (Story, {parameters}) => {
+  const Wrapper = parameters?.adminChangeForm?.wrapFieldset ? Fieldset : Fragment;
+  return (
+    <form>
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    </form>
+  );
+};
+
 export const FormDecorator = (Story, {args}) => (
   <FormContext.Provider
     value={{

diff --git 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"
           >
             <FormRow>
               <Field
@@ -239,7 +238,6 @@ const ServiceFetchConfigurationForm = ({formik, selectExisting = false}) => {
                 description="Service fetch configuration modal data extraction fieldset title"
               />
             }
-            extraClassName="admin-fieldset"
           >
             <FormRow>
               <Field
@@ -348,7 +346,6 @@ const ServiceFetchConfigurationForm = ({formik, selectExisting = false}) => {
                 description="Service fetch configuration try it out tabpanel full request fieldset title"
               />
             }
-            extraClassName="admin-fieldset"
           >
             <FormRow>
               {/* 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"
           >
             <FormRow>
               {/* TODO https://github.com/open-formulieren/open-forms/issues/2777 */}

diff --git a/...nforms/js/components/admin/form_design/variables/ServiceFetchConfigurationForm.stories.js b/...nforms/js/components/admin/form_design/variables/ServiceFetchConfigurationForm.stories.js
@@ -1,6 +1,10 @@
 import {useFormik} from 'formik';
 
-import {FormLogicDecorator} from '../story-decorators';
+import {
+  AdminChangeFormDecorator,
+  FormLogicDecorator,
+} from 'components/admin/form_design/story-decorators';
+
 import ServiceFetchConfigurationForm from './ServiceFetchConfigurationForm';
 
 const Template = ({initialValues = {}, selectExisting}) => {
@@ -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({}),