-
Notifications
You must be signed in to change notification settings - Fork 33
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(forms): implement support for async form submission and autosave feature #3378
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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. |
41fca1d
to
c3ee057
Compare
c3ee057
to
55a75f8
Compare
85c09b6
to
cc26f36
Compare
cc26f36
to
2ebdc54
Compare
2ebdc54
to
5f1b4bd
Compare
Just a comment to the feedback you wanted 😄 If we do have the ability to check if the function is async or not(and if it does not complicate the code too much), then I think we should go for that approach, instead extra async suffix. I agree with the sentiment that it would be messy with so many extra props, and boilerplate to make it work. Also doing a check instead of adding extra props lends itself to a better developer experience too 🙏 |
5f1b4bd
to
dbe2fdd
Compare
dbe2fdd
to
9cfbc8f
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me from testing in the portal 🔥
...ystem-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubmitIndicator/info.mdx
Outdated
Show resolved
Hide resolved
...ortal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx
Show resolved
Hide resolved
packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs.ts
Outdated
Show resolved
Hide resolved
9cfbc8f
to
ae7860e
Compare
a5add51
to
c7211d5
Compare
ee277a6
to
36c3428
Compare
36c3428
to
89ba9a0
Compare
7270142
to
aa79f21
Compare
7bacff9
to
c6163da
Compare
c6163da
to
14a1135
Compare
14a1135
to
28c6509
Compare
… feature Update docs regarding the naming change Align types regarding the naming change Make the code refactoring regarding the naming change
28c6509
to
a947ffa
Compare
## [10.23.0](v10.22.0...v10.23.0) (2024-03-19) ### 📝 Documentation * **a11y:** add additions related to forms and best practices ([#3385](#3385)) ([416bc21](416bc21)) * **Field.Number:** add info about accessibility regarding step controls ([#3369](#3369)) ([9ee99dd](9ee99dd)) * **forms:** list all sub-components and API in extended features ([#3382](#3382)) ([938bf88](938bf88)) * minor spelling improvements ([#3361](#3361)) ([8ab1a92](8ab1a92)) ### 🐛 Bug Fixes * **Field.Selection:** add error styling to `button` and `radio` variant ([#3389](#3389)) ([b8093c3](b8093c3)) * **PhoneNumber:** fix `must be string` message ([#3362](#3362)) ([c92d061](c92d061)) * **Table:** fix type error when using array of elements ([#3372](#3372)) ([a4d3126](a4d3126)) * **Tag:** delete and backspace key press for removable tag ([#3375](#3375)) ([96e6bbf](96e6bbf)) ### ✨ Features * **Anchor:** Sbanken style based on icon ([#3377](#3377)) ([7cf88a3](7cf88a3)) * **Breadcrumb:** implement new styles and swap out Button with Anchor for the DNB UI ([#3368](#3368)) ([c182230](c182230)) * **Button:** refactor button css ([#3359](#3359)) ([78258c9](78258c9)) * **Card:** add `filled`, `responsive` and `title` props to support a Table and a ScrollView as a child ([#3380](#3380)) ([0a419cc](0a419cc)) * **DatePicker:** Add partial dates ([#3346](#3346)) ([0f6a7d5](0f6a7d5)) * **debounce:** enhance TypeScript support by returning the given function type ([#3379](#3379)) ([d689f09](d689f09)) * **debounce:** return async function if one was given as the input ([#3366](#3366)) ([00cd860](00cd860)) * **Form.SubmitButton:** add submit indicator support ([#3370](#3370)) ([5f3101d](5f3101d)) * **Form.SubmitIndicator:** add indicator for async operations ([#3367](#3367)) ([e32ea40](e32ea40)) * **forms:** implement support for async form submission and autosave feature ([c023c32](c023c32)) * **forms:** implement support for async form submission and autosave feature ([#3378](#3378)) ([5bfbe30](5bfbe30)) * **FormStatus:** remove hover color, so it does not change its color anymore ([#3351](#3351)) ([245f327](245f327)) * **Radio, Checkbox:** enlarge bounding area (clickable/touchable area) ([#3352](#3352)) ([667726b](667726b)) * show error in console when Eufemia CSS and JS versions do not match ([#3371](#3371)) ([a5ef0bd](a5ef0bd)) * **Tag:** add variants clickable, addable and removable (deprecate `onDelete`) ([#3364](#3364)) ([6131139](6131139)) * **useData:** enhance data update and sync logic ([a947ffa](a947ffa)) * **useData:** support data handling without id when nested inside Form.Handler ([#3393](#3393)) ([4eecc5e](4eecc5e)) * **useError:** add support to use it without an id when nested inside Form.Handler ([#3394](#3394)) ([02b95d1](02b95d1)) * **useFieldProps:** add support for data-attributes and replace `ariaAttributes` with `htmlAttributes` ([#3383](#3383)) ([55bb817](55bb817)) * **useFieldProps:** rename useDataValue to useFieldProps ([#3381](#3381)) ([123a543](123a543))
🎉 This PR is included in version 10.23.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This PR adds a couple of new event names for the
Form.Handler
;onSubmitAsync
andonChangeAsync
will lets you make "async" operations very easily. It will handle the form state for you (disable all input fields) and show an indicator.onChange
event handler is used, it will behave similar as described above (showing an indicator on the corresponding field label).Feedback wanted:
Async
on the onSubmit and onChange events for theForm.Handler
?onChange
and thevalidator
andonBlurValidator
, because it would be too messy to have so many extra properties.Update: We are going for only using
async
function as the on/off switch for the async form behavior.Additional