feat(Forms): add Iterate.Array feature and merge useField and useValue to one hook useDataValue #2635

henit · 2023-09-11T11:44:50Z

Dynamic data handler component for arrays, making it simple to render fields on the screen based on a varying number of elements in a data set consisting of array elements.

vercel · 2023-09-11T11:44:55Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2023 10:23am

tujoworker

Nice work 🚀 – just some comments ✨

...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/advanced-blocks/Iterate/Array.mdx

...gn-system-portal/src/docs/uilib/extensions/forms/advanced-blocks/Iterate/ArrayPushButton.mdx

...-portal/src/docs/uilib/extensions/forms/advanced-blocks/Iterate/ArrayRemoveElementButton.mdx

packages/dnb-eufemia/src/extensions/forms/Iterate/__tests__/Array.test.tsx

packages/dnb-eufemia/src/extensions/forms/Iterate/ArrayRemoveElementButton.tsx

packages/dnb-eufemia/src/extensions/forms/Iterate/ArrayPushButton.tsx

tujoworker · 2023-09-11T12:07:53Z

packages/dnb-eufemia/src/extensions/forms/Iterate/ArrayPushButton.tsx

+  const iterateElementContext = useContext(IterateElementContext)
+  const { handlePush } = iterateElementContext ?? {}
+
+  const { text, value, pushValue, handleChange, children } =


Suggested change

const { text, value, pushValue, handleChange, children } =

const { text, value, pushValue, handleChange, children, ...rest } =

So we can send along HTML attributes like aria-*.

This could mix things up a bit, since useDataValue adds a few optional props and callbacks, such as onFocus, which would then end up being sent to Button. There is also optional callbacks like handleChange and onChange in separate callbacks (explained in code comments) which would both be sent to Button. I would suggest extending some function to pick area-tags or similar sets of properties like it is done for spacing props here, to ensure only intended props are passed into sub components.

Kind of a discussion between whitelisting and blacklisting

From my experience, we NEED to allow everything to be forwarded to the button. In that case we need to know all the properties from a nested component and remove them, or destruct them.

We could forward everything, but then it would have to be from the received props (direct to the component, not those received through useDataValue), and then override the specific props from useDataValue that we know it will have overridden, like the click event. Otherwise the Button will receive a lot of props from logic inside useDataValue that is not made for the Button component. It might ignore them, but it might be similar names intended fir different use cases, which could lead to problems. However, if the ArrayPushButton extend the props of Button, and pass them directly (not through the hook) and just use specific props from the hook, it will not cause that problem.

Yes! Sure, that's right. I probably did comment on the wrong place about the rest props 🙏

Fixed now ✅
ad80ce3

codesandbox-ci · 2023-09-11T12:11:28Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 564d6e4:

Sandbox	Source
eufemia-starter	Configuration

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/advanced-blocks/Iterate.mdx

langz · 2023-09-11T15:03:17Z

Seems to be a slight "vertical misalignment" between the input field and the button in one of the ArrayRemoveElementButton demos. https://eufemia-git-feat-forms-array-eufemia.vercel.app/uilib/extensions/forms/advanced-blocks/Iterate/ArrayRemoveElementButton/#object-elements
Not sure if this is just in the example(not so important) or some "actual component code".

https://eufemia-git-feat-forms-array-eufemia.vercel.app/uilib/extensions/forms/advanced-blocks/Iterate/ArrayRemoveElementButton/#object-elements

I was able to see the "same" in the "Array demo With DataContext and add/remove buttons" https://eufemia-git-feat-forms-array-eufemia.vercel.app/uilib/extensions/forms/advanced-blocks/Iterate/Array/demos/#with-datacontext-and-addremove-buttons

https://eufemia-git-feat-forms-array-eufemia.vercel.app/uilib/extensions/forms/advanced-blocks/Iterate/Array/demos/#with-datacontext-and-addremove-buttons

langz · 2023-09-11T15:10:50Z

I seem to get quite a lot of issues/warnings in the console with labels that are not connected to an existing id of "form field".
Again, not 100% sure if this is "just demo/example code" or if it's the "actual implementation", but could be worth looking at 🙏
See screenshot:

Quite a few of the issues/warnings is fixed as part of #2634, so please rebase with latest main, but I do see a few of them(like "Accounts" in the screenshot above) coming from this PR.

langz

Looks good, I've added a few comments that could be worth looking into.

Great work 🚀 🎸

langz · 2023-09-12T08:00:05Z

...dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx

@@ -1,4 +1,4 @@
-### Standard input component props
+### Standard data value component props

 | Property               | Type                | Description                                                                                                                                                                                                                                                                    |
 | ---------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |


Do we need to have a specific prop for data-testid(it's listed as a property in this file)? 😅
Or can we remove it?

Also opened a related PR: #2641

I was not able to comment on the line below, hence commenting here.

henit · 2023-09-12T08:12:27Z

Seems to be a slight "vertical misalignment" between the input field and the button in one of the ArrayRemoveElementButton demos. https://eufemia-git-feat-forms-array-eufemia.vercel.app/uilib/extensions/forms/advanced-blocks/Iterate/ArrayRemoveElementButton/#object-elements Not sure if this is just in the example(not so important) or some "actual component code".
https://eufemia-git-feat-forms-array-eufemia.vercel.app/uilib/extensions/forms/advanced-blocks/Iterate/ArrayRemoveElementButton/#object-elements
I was able to see the "same" in the "Array demo With DataContext and add/remove buttons" https://eufemia-git-feat-forms-array-eufemia.vercel.app/uilib/extensions/forms/advanced-blocks/Iterate/Array/demos/#with-datacontext-and-addremove-buttons
https://eufemia-git-feat-forms-array-eufemia.vercel.app/uilib/extensions/forms/advanced-blocks/Iterate/Array/demos/#with-datacontext-and-addremove-buttons

The first one (Remove avenger buttons) is because they are put horizontally using Layout.Row which is flex-first aligned by default both horizontally and vertically directions, so since the button is a bit taller than the text field, they are aligned top. It can be overridden with <Layout.Row align="center" /> producing this result:

In the second example you sent, it is centered in a row containing the name/birth year inputs, but not the one below (with Nick Fury), so it has produced the expected result:

## [10.9.0](v10.8.0...v10.9.0) (2023-09-13) ### 📝 Documentation * **Dialog:** Dialog.Actions to Dialog.Action ([#2621](#2621)) ([9292305](9292305)) * **Forms:** restructure docs ([#2615](#2615)) ([ee24eba](ee24eba)) * **Modal:** updates components that inherits ModalPropTypes as camel case ([#2618](#2618)) ([beacaba](beacaba)) * **PaymentCard:** removes unused maker docs ([#2619](#2619)) ([dfeb6d5](dfeb6d5)) * **v10:** changes to PaymentCard's height & width ([#2643](#2643)) ([6985287](6985287)) ### ✨ Features * **Blockquote:** fix sbanken styling, added small screen version ([#2639](#2639)) ([d63d30d](d63d30d)) * **Forms:** add `Form.Handler` component ([#2644](#2644)) ([82873c7](82873c7)) * **Forms:** add Iterate.Array feature and merge useField and useValue to one hook useDataValue ([#2635](#2635)) ([b056994](b056994)) * **Forms:** merge FieldGroup into FieldBlock ([#2645](#2645)) ([56a1867](56a1867)) * **Heading:** remove font ligatures for sbanken headings ([#2614](#2614)) ([06c126f](06c126f)) * **PaymentCard:** updates height and weight to reflect Figma sketches ([#2617](#2617)) ([418fd2e](418fd2e)) * **ProgressIndicator:** Sbanken styling ([#2631](#2631)) ([03de0e3](03de0e3)) * **Skeleton:** Sbanken styling ([#2622](#2622)) ([fbc0083](fbc0083)) * **Tooltip:** Sbanken styling ([#2640](#2640)) ([f358b0a](f358b0a)), closes [#2622](#2622) [#2631](#2631) ### 🐛 Bug Fixes * **Dialog:** select whole input on focus given by focusSelector ([#2655](#2655)) ([a04f99a](a04f99a)), closes [#2652](#2652) * **Forms:** add polyfill for structuredClone ([#2636](#2636)) ([f00da48](f00da48)) * **Forms:** focus InputMasked when clicking label ([#2632](#2632)) ([3233326](3233326)) * **Forms:** remove FirstName, LastName and InfoCardSection ([#2627](#2627)) ([a2106cc](a2106cc)) * **MaskedInput:** make cleanedValue contain leading zeroes ([#2610](#2610)) ([86ad122](86ad122)) * **ProgressIndicator:** ensure correct positioning inside its boundary ([#2623](#2623)) ([0592961](0592961)) * **Section:** omit usage of nullish operator (??) to still support Storybook v4 ([#2646](#2646)) ([9a2e52f](9a2e52f)) * **useMedia:** ensure this hook works in StrictMode ([#2630](#2630)) ([74ebed9](74ebed9))

tujoworker · 2023-09-13T21:29:26Z

🎉 This PR is included in version 10.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

tujoworker changed the title ~~Iterate.Array feature, useField and useValue merged to useDataValue~~ feat(Forms): add Iterate.Array feature and merge useField and useValue to one hook useDataValue Sep 11, 2023

vercel bot had a problem deploying to Preview September 11, 2023 11:48 Failure

vercel bot deployed to Preview September 11, 2023 12:09 View deployment

tujoworker approved these changes Sep 11, 2023

View reviewed changes

vercel bot deployed to Preview September 11, 2023 12:24 View deployment

henit force-pushed the feat/forms-array branch from 2e8c4d8 to 34aaeca Compare September 11, 2023 13:39

vercel bot deployed to Preview September 11, 2023 13:44 View deployment

vercel bot deployed to Preview September 11, 2023 14:04 View deployment

langz reviewed Sep 11, 2023

View reviewed changes

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/advanced-blocks/Iterate.mdx Show resolved Hide resolved

vercel bot deployed to Preview September 11, 2023 15:04 View deployment

langz approved these changes Sep 11, 2023

View reviewed changes

henit force-pushed the feat/forms-array branch from 73dbb33 to ad80ce3 Compare September 12, 2023 07:54

vercel bot deployed to Preview September 12, 2023 07:59 View deployment

langz reviewed Sep 12, 2023

View reviewed changes

henit added 6 commits September 12, 2023 10:54

Iterate.Array feature, useField and useValue merged to useDataValue

2391286

Cleanup

d618ce0

Things are prettier now

92f3eb0

Fix lint issue

9808463

Forward all non-data-value props to button in iterate button components

e700b55

Cleanup

3a6cb54

henit force-pushed the feat/forms-array branch from ad80ce3 to 3a6cb54 Compare September 12, 2023 10:07

Prettier

564d6e4

henit force-pushed the feat/forms-array branch from 2a535eb to 564d6e4 Compare September 12, 2023 10:15

vercel bot deployed to Preview September 12, 2023 10:23 View deployment

henit merged commit b056994 into main Sep 12, 2023

henit deleted the feat/forms-array branch September 12, 2023 10:43

tujoworker added the released label Sep 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Forms): add Iterate.Array feature and merge useField and useValue to one hook useDataValue #2635

feat(Forms): add Iterate.Array feature and merge useField and useValue to one hook useDataValue #2635

henit commented Sep 11, 2023 •

edited by tujoworker

Loading

vercel bot commented Sep 11, 2023 •

edited

Loading

tujoworker left a comment

tujoworker Sep 11, 2023

henit Sep 11, 2023

henit Sep 11, 2023

tujoworker Sep 11, 2023

henit Sep 11, 2023

tujoworker Sep 12, 2023 •

edited

Loading

henit Sep 12, 2023 •

edited

Loading

codesandbox-ci bot commented Sep 11, 2023 •

edited

Loading

langz commented Sep 11, 2023 •

edited

Loading

langz commented Sep 11, 2023 •

edited

Loading

langz left a comment

langz Sep 12, 2023 •

edited

Loading

henit commented Sep 12, 2023

tujoworker commented Sep 13, 2023

	const { text, value, pushValue, handleChange, children } =
	const { text, value, pushValue, handleChange, children, ...rest } =

feat(Forms): add Iterate.Array feature and merge useField and useValue to one hook useDataValue #2635

feat(Forms): add Iterate.Array feature and merge useField and useValue to one hook useDataValue #2635

Conversation

henit commented Sep 11, 2023 • edited by tujoworker Loading

vercel bot commented Sep 11, 2023 • edited Loading

tujoworker left a comment

Choose a reason for hiding this comment

tujoworker Sep 11, 2023

Choose a reason for hiding this comment

henit Sep 11, 2023

Choose a reason for hiding this comment

henit Sep 11, 2023

Choose a reason for hiding this comment

tujoworker Sep 11, 2023

Choose a reason for hiding this comment

henit Sep 11, 2023

Choose a reason for hiding this comment

tujoworker Sep 12, 2023 • edited Loading

Choose a reason for hiding this comment

henit Sep 12, 2023 • edited Loading

Choose a reason for hiding this comment

codesandbox-ci bot commented Sep 11, 2023 • edited Loading

langz commented Sep 11, 2023 • edited Loading

langz commented Sep 11, 2023 • edited Loading

langz left a comment

Choose a reason for hiding this comment

langz Sep 12, 2023 • edited Loading

Choose a reason for hiding this comment

henit commented Sep 12, 2023

tujoworker commented Sep 13, 2023

henit commented Sep 11, 2023 •

edited by tujoworker

Loading

vercel bot commented Sep 11, 2023 •

edited

Loading

tujoworker Sep 12, 2023 •

edited

Loading

henit Sep 12, 2023 •

edited

Loading

codesandbox-ci bot commented Sep 11, 2023 •

edited

Loading

langz commented Sep 11, 2023 •

edited

Loading

langz commented Sep 11, 2023 •

edited

Loading

langz Sep 12, 2023 •

edited

Loading