- {fieldBox && hasErrors ? (
-
- {formattedErrors}
-
- ) : null}
-
-
- {label && (
-
- )}
- {modifiedChildren}
-
-
- {helpText ? (
-
- ) : null}
+ {errorsMarkup}
+
+ {fieldInputMarkup}
+ {helpMarkup}
>
);
@@ -123,7 +131,17 @@ Field.propTypes = {
helpText: PropTypes.node,
required: PropTypes.bool,
errors: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.array])),
+ PropTypes.arrayOf(
+ PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.array,
+ // react-intl message
+ PropTypes.shape({
+ defaultMessage: PropTypes.any,
+ id: PropTypes.string,
+ }),
+ ])
+ ),
PropTypes.string,
]),
fieldBox: PropTypes.bool,
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/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 97a4584763..7cec193bbe 100644
--- a/src/openforms/js/components/admin/forms/Inputs.js
+++ b/src/openforms/js/components/admin/forms/Inputs.js
@@ -102,18 +102,18 @@ const Checkbox = ({name, label, helpText, noVCheckbox = false, ...extraProps}) =
name = prefix ? `${prefix}-${name}` : name;
const idFor = disabled ? undefined : `id_${name}`;
return (
-
-
{' '}
-
- {helpText ? (
+
+
+ {' '}
+
+
+ {helpText && (
- ) : null}
+ )}
);
};
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',
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;
-}
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 {
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