Volto form block fixes #6370

robgietema · 2024-10-03T15:09:27Z

I signed and returned the Plone Contributor Agreement, and received and accepted an invitation to join a team in the Plone GitHub organization.
I verified there aren't other open pull requests for the same change.
I followed the guidelines in Contributing to Volto.
I succesfully ran code linting checks on my changes locally.
I succesfully ran unit tests on my changes locally.
I succesfully ran acceptance tests on my changes locally.
If needed, I added new tests for my changes.
If needed, I added documentation for my changes, either in the Storybook or narrative documentation.
I included a change log entry in my commits.

If your pull request closes an open issue, include the exact text below, immediately followed by the issue number. When your pull request gets merged, then that issue will close automatically.

Closes #

netlify · 2024-10-03T15:09:46Z

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	`e126278`
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/67d16d6ddd56220008c28f52

davisagli

Please add release notes and fix the lint errors and failing unit tests.

stevepiercy · 2024-10-17T08:49:23Z

This PR should also render its Storybook. We recently merged a PR that should fix the pull request preview build on Netlify:
#6410

The Netlify build currently fails to recognize changes in the most recent commit:
https://app.netlify.com/sites/plone-components/deploys/670fb4bff3f6740008e0d09f

This caused the object_browser widget loosing the mode and return props which got the default "multiple", "multiple" values even when "image", "single" was desired. As a consequence this broke the preview images.

davisagli

In general this has a lot of useful improvements, but still some rough edges and missing docs.

packages/volto/src/components/manage/Form/ModalForm.jsx

packages/volto/src/config/Blocks.jsx

packages/volto/src/helpers/FormValidation/FormValidation.jsx

packages/volto/src/components/theme/Widgets/HiddenWidget.test.jsx

packages/volto/src/components/manage/Widgets/index.tsx

packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx

packages/volto/src/components/manage/Form/Form.jsx

packages/volto/news/6370.feature

packages/volto/src/components/manage/Form/Form.jsx

davisagli · 2025-01-28T06:26:37Z

packages/volto/src/components/manage/Widgets/SchemaWidget.jsx

+        type: 'string',
+        title: intl.formatMessage(messages.queryParameterName),
+        description: intl.formatMessage(messages.queryParameterNameDescription),
+      },


I tried adding a queryParameterName to a field in a content type schema, but it doesn't do anything.

It's a property of the field which can be used by the actual view (or not). In this case the content type schema editing view doesn't use it but could in the future.

If it doesn't do anything, it's bad UX to show it when editing a content type schema in the schemaeditor.

I disagree, the schema widget is not tied to a specific form library and set of widgets. You can decide to use your own set of widgets which do make use of these values. This is not something new in Plone, there are plenty of fields on a content type or settings in the control panels which are not used by stock plone or shown in the ui but can be used if somebody wants that.

packages/volto/src/components/manage/Widgets/SchemaWidget.jsx

davisagli · 2025-01-28T06:28:20Z

packages/volto/src/components/manage/Widgets/SchemaWidget.jsx

+        placeholder: {
+          type: 'string',
+          title: intl.formatMessage(messages.placeholder),
+        },


I tried adding a placeholder to a text field in a content type schema, but it didn't show up when I edited the content type.

It's a property of the field which can be used by the widget (or not). In this case the current widget in Plone doesn't use the value but when you use a custom widget (react-aria-components for example) you can use those properties.

We can't just add properties to the schema editor that look useful but don't do anything. That's a recipe for frustration!

See above comment.

stevepiercy

Minor MyST enhancements.

docs/source/blocks/settings.md

sneridagh

Some small comments, humongous work! Congrats!

sneridagh · 2025-03-13T07:57:35Z

packages/volto/src/components/manage/Widgets/RadioGroupWidget.jsx

+ * @function RadioGroupWidget
+ * @returns {string} Markup of the component.
+ */
+class RadioGroupWidget extends Component {


sneridagh · 2025-03-13T08:02:00Z

packages/volto/src/components/manage/Widgets/__snapshots__/RadioGroupWidget.test.jsx.snap

+              id="fieldset-default-field-label-my-field"
+            >
+              My field
+            </label>


I don't see the vocabulary being passed in the test.

pnicolli

Huge and very very useful work, thanks!!!! Left a few notes with the goal of having this as polished as possible.

packages/volto/src/components/manage/Form/Form.jsx

pnicolli · 2025-03-13T09:50:02Z

packages/volto/src/components/manage/Form/Form.jsx

+                        basic
+                        secondary


I'm worried these props could be spread unknowingly to the final html <button> that is rendered, if the provided custom button does not handle them, and it is likely that this is the case because Button components are usually handling a bunch of props and assuming other props are standard html and just spread them in the html button. This causes annoying warnings in the browser console telling you you are using unknown attributes.

I would try to set these (and others like floated) only if a custom button is not provided, maybe by creating smaller preset buttons above, at line 740, or even outside of this component. Ideas or thoughts?

pnicolli · 2025-03-13T09:54:46Z

packages/volto/src/components/manage/Widgets/CheckboxGroupWidget.jsx

This is not a blocker for me, but I would honestly not create new components as class components ever again, unless there is a specific reason, for example asyncConnect which acts weird in function components.

pnicolli · 2025-03-13T09:55:29Z

packages/volto/src/components/manage/Widgets/CheckboxGroupWidget.jsx

+
+export const CheckboxGroupWidgetComponent = injectIntl(CheckboxGroupWidget);
+
+export default compose(


If we keep the class component here, I would remove the compose call here since there is only one function being composed

pnicolli · 2025-03-13T10:04:26Z

packages/volto/src/components/manage/Widgets/RadioGroupWidget.jsx

+
+export const RadioGroupWidgetComponent = injectIntl(RadioGroupWidget);
+
+export default compose(


Same here, I would remove the useless compose call here

pnicolli · 2025-03-13T10:23:19Z

packages/volto/src/config/Widgets.jsx

Do we also need views widgets for radiogroup, checkboxgroup and time widgets?

pnicolli · 2025-03-13T10:24:25Z

packages/volto/src/helpers/Utils/Utils.jsx

    .toLowerCase()
    .replace(/[\s-]+/g, '_')
    .replace(/[^\w]+/g, '');
+  let i = 1;
+
+  if (includes(slugs, slug)) {


I would also use standard js here instead of lodash

pnicolli · 2025-03-13T10:25:25Z

packages/volto/theme/themes/pastanaga/collections/form.overrides

@@ -54,6 +54,10 @@
  }
 }

+.ui.form .ui.checkbox {
+  margin: @8px 0;


@8px is a typo or is it a syntax I am not familiar with?

pnicolli · 2025-03-13T10:27:13Z

packages/volto/src/components/manage/Widgets/SchemaWidget.jsx

+map(
+  ['URL', 'Password', 'label_password_field', 'Email', 'label_email'],


I would start using standard js for these easy things, instead of using lodash. Nowadays we don't need lodash for these simple things like map. Also, since we are not really using the output from map here, I would suggest simply doing

['URL', 'Password', 'label_password_field', 'Email', 'label_email'].forEach

pnicolli · 2025-03-13T10:35:21Z

packages/volto/src/components/manage/Form/Form.jsx

@@ -927,6 +945,8 @@ class Form extends Component {
                        ),
                        ...map(item.fields, (field, index) => (
                          <Field
+                            widgets={this.props.widgets}
+                            component={this.props.component}


If I understand correctly, this.props.component is a Form component of some kind here, either the default or a provided one, so maybe this should not be passed to the Field component, right?

davisagli requested changes Oct 4, 2024

View reviewed changes

davisagli requested a review from sneridagh October 4, 2024 00:59

robgietema force-pushed the volto-form-block-fixes branch 2 times, most recently from 6d9bc8a to be53373 Compare November 5, 2024 12:55

robgietema force-pushed the volto-form-block-fixes branch from 988b47e to dd5a050 Compare December 20, 2024 18:55

robgietema and others added 23 commits December 20, 2024 11:55

Volto form block fixes.

8028feb

Add default value in schema editor.

43c107c

Add hidden widget.

87ef091

Add static text field.

dde6545

Add field factory utilities.

314da4f

Added extra widgets.

19df4be

Add disable enter setting.

b3abf4f

Fix translations.

7f210eb

Add placeholder and id editing.

59d9f74

Add text button option to forms.

57e76b4

Fix number field.

4fd40f6

Add file size and allowed types to file widget.

cf63ae6

Add default values for date fields.

bb23416

Add query parameter name.

a8a8795

Fix linting.

c2e4479

Add snapshots.

d18e93a

Revert number fix.

2a55b10

Add option for custom widgets in schemawidget.

cbf4e4e

Add support for custom form and button component in forms.

7f25133

Create unique slug for new fields in schemawidget.

9bdda5f

Fix broken call to getWidgetPropsFromTaggedValues

c8b7c94

This caused the object_browser widget loosing the mode and return props which got the default "multiple", "multiple" values even when "image", "single" was desired. As a consequence this broke the preview images.

Modal form improvements.

4bf6bb3

Fix static text widget label.

bce95d2

robgietema added 2 commits January 17, 2025 15:41

Add schema validators.

8524574

Only apply enhancers in form validation if schema is supplied.

4d0ec26

davisagli requested changes Jan 28, 2025

View reviewed changes

davisagli added the 04 type: enhancement label Jan 29, 2025

robgietema added 13 commits January 29, 2025 18:46

Typo.

5c691d1

Fix required fields when changing the shortname.

cd77295

Fix object browser when slate is used in a popup.

9f8e339

Fix deleting required field.

2bc1329

Fix required field.

ac40278

Merge remote-tracking branch 'origin/main' into volto-form-block-fixes

514bcd2

Fix test label.

f689611

Fixed typo.

7451e1a

Add changelog entry.

6d6147a

Add changelog entry.

f69739d

Review fixes.

20b0102

Add documentation for the disableEnter option for a block.

ae2dfc1

Add hidden widget snapshot.

6cb09b6

stevepiercy requested changes Mar 11, 2025

View reviewed changes

docs/source/blocks/settings.md Outdated Show resolved Hide resolved

docs/source/blocks/settings.md Outdated Show resolved Hide resolved

robgietema added 2 commits March 11, 2025 13:52

Docs enhancements.

8e18b7e

Fix snapshots for hidden widget tests.

86efaf9

stevepiercy requested changes Mar 11, 2025

View reviewed changes

docs/source/blocks/settings.md Outdated Show resolved Hide resolved

Fix docs.

1598675

sneridagh requested a review from a team March 12, 2025 10:36

robgietema and others added 3 commits March 12, 2025 11:45

Revert boolean required check.

610ab8f

Fix typescript return value for emailValidator (#6831)

28c23f7

Merge remote-tracking branch 'origin/main' into volto-form-block-fixes

e126278

sneridagh approved these changes Mar 13, 2025

View reviewed changes

sneridagh requested a review from a team March 13, 2025 08:07

pnicolli requested changes Mar 13, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Volto form block fixes #6370

Volto form block fixes #6370

robgietema commented Oct 3, 2024 •

edited

Loading

netlify bot commented Oct 3, 2024 •

edited

Loading

davisagli left a comment •

edited

Loading

stevepiercy commented Oct 17, 2024

davisagli left a comment

davisagli Jan 28, 2025

robgietema Mar 11, 2025

davisagli Mar 12, 2025

robgietema Mar 12, 2025

davisagli Jan 28, 2025

robgietema Mar 11, 2025

davisagli Mar 12, 2025

robgietema Mar 12, 2025

stevepiercy left a comment

sneridagh left a comment

sneridagh Mar 13, 2025

sneridagh Mar 13, 2025

pnicolli left a comment

pnicolli Mar 13, 2025

pnicolli Mar 13, 2025

pnicolli Mar 13, 2025

pnicolli Mar 13, 2025

pnicolli Mar 13, 2025

pnicolli Mar 13, 2025

pnicolli Mar 13, 2025

pnicolli Mar 13, 2025

pnicolli Mar 13, 2025


		export const CheckboxGroupWidgetComponent = injectIntl(CheckboxGroupWidget);

		export default compose(


		export const RadioGroupWidgetComponent = injectIntl(RadioGroupWidget);

		export default compose(

		map(
		['URL', 'Password', 'label_password_field', 'Email', 'label_email'],

Volto form block fixes #6370

Are you sure you want to change the base?

Volto form block fixes #6370

Conversation

robgietema commented Oct 3, 2024 • edited Loading

netlify bot commented Oct 3, 2024 • edited Loading

✅ Deploy Preview for plone-components canceled.

davisagli left a comment • edited Loading

Choose a reason for hiding this comment

stevepiercy commented Oct 17, 2024

davisagli left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stevepiercy left a comment

Choose a reason for hiding this comment

sneridagh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pnicolli left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

robgietema commented Oct 3, 2024 •

edited

Loading

netlify bot commented Oct 3, 2024 •

edited

Loading

davisagli left a comment •

edited

Loading