Skip to content
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): add Form.Card with different default appearance than Card (use Form.Card in forms instead of Card) #4318

Merged
merged 10 commits into from
Nov 22, 2024

Conversation

tujoworker
Copy link
Member

@tujoworker tujoworker commented Nov 21, 2024

With this we introduce Form.Card a new wrapper component for Card. It defaults to true on outset and stack. So when using it, it automatically gives the needed styles for classical forms.

Here are the docs.

Screenshot 2024-11-21 at 20 04 43

We also need to set a higher gap between the Wizard sidebar and its content:

Screenshot 2024-11-21 at 22 13 51

Copy link

vercel bot commented Nov 21, 2024

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

Name Status Preview Comments Updated (UTC)
eufemia 🛑 Canceled (Inspect) Nov 22, 2024 7:56am

Copy link

codesandbox-ci bot commented Nov 21, 2024

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.

@tujoworker tujoworker changed the title feat(Forms): add Form.Card with different default appearance than Card feat(Forms): add Form.Card with different default appearance than Card (use Form.Card in forms instead of Card) Nov 21, 2024
@langz

This comment was marked as outdated.

@tujoworker

This comment was marked as resolved.

@tujoworker tujoworker marked this pull request as ready for review November 22, 2024 07:05
@langz

This comment was marked as resolved.

@tujoworker
Copy link
Member Author

After this PR is merged, do we still support using a Card inside of a form, in the same way we did before? Meaning it will look the same, etc.

Yes.

Or will we only support Form.Card inside of a form?

No – Form.Card does only ensure more consistent and easier usage to get the correct "classical" form look.

If we still will support Card, do we have or need to have any screenshot tests and/or tests for this scenario?

We still have some for the card component. I think we have covered what we need to cover.

Copy link
Contributor

@langz langz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work 🥇

@langz langz merged commit 7bbc0ca into main Nov 22, 2024
10 checks passed
@langz langz deleted the feat/forms-card branch November 22, 2024 08:09
tujoworker pushed a commit that referenced this pull request Nov 22, 2024
## [10.57.0](v10.56.0...v10.57.0) (2024-11-22)

### 📝 Documentation

* **Field.Upload:** adds `asyncFileHandler` property ([#4288](#4288)) ([fb09758](fb09758))
* **Field.Upload:** adds asyncFileHandler property ([7ccdabd](7ccdabd))

### 🐛 Bug Fixes

* **Forms:** align Value.SummaryList when Value.* has no label ([#4311](#4311)) ([b6621c2](b6621c2))
* **Forms:** ensure fields inside composition share submit indicator ([#4309](#4309)) ([e726e20](e726e20))
* **Forms:** safeguard errorMessages to avoid infinite loops when not wrapped in useMemo ([#4305](#4305)) ([f14bacc](f14bacc))
* **Forms:** show indicator with async onBlurValidator call when `validateInitially` is used ([#4303](#4303)) ([c585491](c585491))
* **Icon:** ensure icon name is rendered as `data-testid` ([#4304](#4304)) ([235b823](235b823))

### ✨ Features

* **Card, Section:** add `outset` property for moderate layout breakout ([#4317](#4317)) ([6008d9a](6008d9a))
* **DrawerList, Dropdown, Autocomplete, Field.Selection, Field.ArraySelection:** disabled options ([#4154](#4154)) ([8786d5d](8786d5d))
* **Field.Upload:** adds support for async and sync fn in `fileHandler` ([#4294](#4294)) ([2cc816a](2cc816a))
* **Forms:** add `Form.Card` with different default appearance than Card (use `Form.Card` in forms instead of Card) ([#4318](#4318)) ([7bbc0ca](7bbc0ca))
* **Forms:** add `labelSrOnly` to Value.* components ([#4319](#4319)) ([46f68ae](46f68ae)), closes [#4311](#4311)
* **Forms:** deprecate `validator` in favor of `onChangeValidator` ([#4314](#4314)) ([5a06b2e](5a06b2e))
* **Typography:** add general `.dnb-t` helper classes and add typography props to Span ([#4235](#4235)) ([9dfe66d](9dfe66d))
@tujoworker
Copy link
Member Author

🎉 This PR is included in version 10.57.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging this pull request may close these issues.

2 participants