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.

Sign up for GitHub

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

Jump to bottom

feat(Forms): add toolbarVariant="minimumOneItem" to Iterate.Toolbar for hiding buttons when there is only one item in the array #3919

Merged
merged 7 commits into from
Sep 12, 2024
Merged

feat(Forms): add toolbarVariant="minimumOneItem" to Iterate.Toolbar for hiding buttons when there is only one item in the array #3919

merged 7 commits into from
Sep 12, 2024

Conversation

tujoworker
Copy link
Member

@tujoworker tujoworker commented Sep 10, 2024 •
edited
Loading

Based on #3877

Quick example using the new Toolbar variant:

<Form.Handler>
  <Iterate.Array path="/countries" defaultValue={[null]}>
    <Iterate.ViewContainer toolbarVariant="minimumOneItem"
    >
      <Value.SelectCountry
        label="Land du er statsborger i"
        itemPath="/"
      />
    </Iterate.ViewContainer>

    <Iterate.EditContainer toolbarVariant="minimumOneItem"
    >
      <Field.SelectCountry
        label="Land du er statsborger i"
        itemPath="/"
        required
      />
    </Iterate.EditContainer>
  </Iterate.Array>

  <Iterate.PushButton
    path="/countries"
    pushValue={null}
    text="Legg til flere statsborgerskap"
  />
</Form.Handler>

@vercel Vercel
Copy link

vercel bot commented Sep 10, 2024 •
edited
Loading

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, 2024 11:14am

@tujoworker tujoworker mentioned this pull request Sep 10, 2024
Merged
@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Sep 10, 2024 •
edited
Loading

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 added a commit that referenced this pull request Sep 12, 2024
@tujoworker @langz
feat(Forms): auto-open iterate containers when validation errors and …
52326bf 
…make `Iterate.Toolbar` fully customizable (#3877)

- This PR allows a dev to fully customize the buttons for the edit and
view container toolbar.
- I also auto-opens the edit container, when there is a validation
error.
- A followup-up PR #3919 has been created.


Quick example of a fully customized Toolbar:

```tsx
<Form.Handler>
  <Iterate.Array path="/countries" defaultValue={[null]}>
    <Iterate.ViewContainer
      toolbar={
        <Iterate.Toolbar>
          {({ items }) => {
            if (items.length === 1) {
              return <Iterate.ViewContainer.EditButton />
            }
            return (
              <>
                <Iterate.ViewContainer.EditButton />
                <Iterate.ViewContainer.RemoveButton />
              </>
            )
          }}
        </Iterate.Toolbar>
      }
    >
      <Value.SelectCountry
        label="Land du er statsborger i"
        itemPath="/"
      />
    </Iterate.ViewContainer>

    <Iterate.EditContainer
      toolbar={
        <Iterate.Toolbar>
          {({ items }) => {
            if (items.length === 1) {
              return null
            }

            return (
              <>
                <Iterate.EditContainer.DoneButton />
                <Iterate.EditContainer.CancelButton />
              </>
            )
          }}
        </Iterate.Toolbar>
      }
    >
      <Field.SelectCountry
        label="Land du er statsborger i"
        itemPath="/"
        required
      />
    </Iterate.EditContainer>
  </Iterate.Array>

  <Iterate.PushButton
    path="/countries"
    pushValue={null}
    text="Legg til flere statsborgerskap"
  />
</Form.Handler>
```

---------

Co-authored-by: Anders <[email protected]>
@tujoworker tujoworker force-pushed the feat/iterate-toolbar-variant branch from 2dbea3f to dd48787 Compare September 12, 2024 09:36
@tujoworker tujoworker requested a review from langz September 12, 2024 09:36
@tujoworker tujoworker force-pushed the feat/iterate-toolbar-variant branch from dd48787 to 7dadc26 Compare September 12, 2024 09:39
@tujoworker tujoworker changed the title feat(Forms): add variant to Iterate.Toolbar for hiding the buttons when there is only one item in the array feat(Forms): add toolbarVariant="minimumOneItem" to Iterate.Toolbar for hiding the buttons when there is only one item in the array Sep 12, 2024
@tujoworker tujoworker changed the title feat(Forms): add toolbarVariant="minimumOneItem" to Iterate.Toolbar for hiding the buttons when there is only one item in the array feat(Forms): add toolbarVariant="minimumOneItem" to Iterate.Toolbar for hiding buttons when there is only one item in the array Sep 12, 2024
langz
langz approved these changes Sep 12, 2024
View reviewed changes
Copy link
Contributor

@langz langz left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Great great 👏

I'll add a demo using the new toolbar prop, as I like having something visual to look at(to better understand) than just reading.

EDIT: Added demos now in commit a81d62d

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx Outdated Show resolved Hide resolved
packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx Outdated Show resolved Hide resolved
packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx Outdated Show resolved Hide resolved
packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx Outdated Show resolved Hide resolved
@langz

This comment was marked as resolved.

Sign in to view
@tujoworker

This comment was marked as resolved.

Sign in to view
@tujoworker tujoworker merged commit 3367a77 into main Sep 12, 2024
10 checks passed
@tujoworker tujoworker deleted the feat/iterate-toolbar-variant branch September 12, 2024 11:50
tujoworker pushed a commit that referenced this pull request Sep 12, 2024
@semantic-release-bot
chore(release): 10.48.0 [skip ci]
e949422 
## [10.48.0](v10.47.0...v10.48.0) (2024-09-12)

### 🐛 Bug Fixes

* **countries:** Fixes wrong country code for Martinique [#3915](#3915) ([a9f86e4](a9f86e4))
* **countries:** Remove outdated countries [#3915](#3915) ([36ef5cf](36ef5cf))
* **Forms:** rename 'Macedonia' to 'North Macedonia' ([#3918](#3918)) ([a4eb8a4](a4eb8a4))
* **Forms:** rename "Hviterussland" to "Belarus" ([#3917](#3917)) ([702118a](702118a))
* removes outdated countries based on ISO 3166-1 alpha-2 ([#3916](#3916)) ([a045acd](a045acd))

### ✨ Features

* **Forms:** add `toolbarVariant="minimumOneItem"` to Iterate.Toolbar for hiding buttons when there is only one item in the array ([#3919](#3919)) ([3367a77](3367a77)), closes [#3877](#3877)
* **Forms:** add `validator` support to Iterate.Array ([#3926](#3926)) ([6fd439e](6fd439e))
* **Forms:** auto-open Form.Section container when fields have errors and add `validateInitially` prop  ([#3878](#3878)) ([9b49006](9b49006))
* **Forms:** auto-open iterate containers when validation errors and make `Iterate.Toolbar` fully customizable ([#3877](#3877)) ([52326bf](52326bf)), closes [#3919](#3919)
* **Forms:** show optional label when a field uses `required={false}` and add `labelSuffix` prop to each field ([#3921](#3921)) ([60e440a](60e440a))
* **Wizard:** add `preventNavigation` callback function to `onStepChange` ([#3924](#3924)) ([5ec2772](5ec2772))
@tujoworker
Copy link
Member Author

🎉 This PR is included in version 10.48.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
Reviewers

@langz langz langz approved these changes

Assignees
No one assigned
Labels
released
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@tujoworker @langz