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

fix(Modal): api alignment #2440

Merged
merged 26 commits into from
Sep 25, 2024
Merged

fix(Modal): api alignment #2440

merged 26 commits into from
Sep 25, 2024

Conversation

eirikbacker
Copy link
Contributor

@eirikbacker eirikbacker commented Sep 17, 2024

Copy link

changeset-bot bot commented Sep 17, 2024

🦋 Changeset detected

Latest commit: 42fe976

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@digdir/designsystemet-css Patch
@digdir/designsystemet-react Patch
@digdir/designsystemet Patch
@digdir/designsystemet-theme Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Sep 17, 2024

Preview deployments for this pull request:

Storybook - 25. Sep 2024 - 12:19

Theme - 25. Sep 2024 - 12:19

Copy link
Contributor

github-actions bot commented Sep 17, 2024

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 61.4% 4153 / 6763
🔵 Statements 61.4% 4153 / 6763
🔵 Functions 86.29% 170 / 197
🔵 Branches 75.23% 553 / 735
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
packages/react/src/components/Modal/Modal.tsx 89.55% 66.66% 66.66% 89.55% 58-59, 61-62, 66-68
packages/react/src/components/Modal/ModalContext.tsx 100% 100% 100% 100%
packages/react/src/components/Modal/ModalFooter.tsx 42.85% 100% 0% 42.85% 16, 18-23, 25
packages/react/src/components/Modal/ModalHeader.tsx 100% 50% 100% 100%
packages/react/src/components/Modal/ModalTrigger.tsx 100% 66.66% 100% 100%
Generated in workflow #14

@eirikbacker eirikbacker marked this pull request as ready for review September 23, 2024 07:40
@eirikbacker eirikbacker changed the title fix(Modal): start api alignment fix(Modal): api alignment Sep 23, 2024
@eirikbacker eirikbacker self-assigned this Sep 23, 2024
Copy link
Member

@Barsnes Barsnes left a comment

Choose a reason for hiding this comment

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

Quick review first with some changes that needs to be made

Question for review: Should Modal.Close be a compound component? 🤔

Hm, it would be nice, that way they can easier if they want to have a close button or not.
A drawback is forgetting to add the close button, but this should be noticed pretty quickly in development

packages/react/src/components/Modal/Modal.tsx Outdated Show resolved Hide resolved
packages/react/src/components/Modal/Modal.tsx Outdated Show resolved Hide resolved
packages/react/src/components/Modal/Modal.mdx Outdated Show resolved Hide resolved
packages/react/src/components/Modal/Modal.mdx Outdated Show resolved Hide resolved
packages/react/src/components/Modal/Modal.mdx Outdated Show resolved Hide resolved
packages/react/src/components/Modal/ModalHeader.tsx Outdated Show resolved Hide resolved
packages/react/src/components/Modal/Modal.mdx Show resolved Hide resolved
@eirikbacker eirikbacker requested a review from Barsnes September 24, 2024 15:20
Copy link
Member

@Barsnes Barsnes left a comment

Choose a reason for hiding this comment

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

Make sure to add a changeset!

Component looks good, but lets do some last doc updates before we merge 🚀

packages/react/src/components/Modal/Modal.stories.tsx Outdated Show resolved Hide resolved
packages/react/src/components/Modal/Modal.stories.tsx Outdated Show resolved Hide resolved
packages/react/src/components/Modal/Modal.stories.tsx Outdated Show resolved Hide resolved
@eirikbacker eirikbacker requested a review from Barsnes September 25, 2024 09:12
@eirikbacker eirikbacker merged commit 1002d87 into next Sep 25, 2024
7 checks passed
@eirikbacker eirikbacker deleted the fix/modal-api branch September 25, 2024 11:06
Barsnes pushed a commit that referenced this pull request Oct 8, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to next, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`next` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `next`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @digdir/[email protected]

### Minor Changes

- Fix crash when running CLI command `tokens build`:
([#2549](#2549))

    -   add --verbose option to `tokens build` for easier debugging
    -   `tokens build` crashed when run on result of `tokens create`

    Update tokens template used by CLI command `tokens create`

- removes `ingress`, renames `paragraph` to `body`, and adds `xl` size

### Patch Changes

- Make sure the internal order of sections in the CSS generated by the
CLI is deterministic, to avoid unnecessary git diffs
([#2560](#2560))

## @digdir/[email protected]

### Patch Changes

- Pagination:
([#2460](#2460))

    -   Remove attributes `currentPage` and `totalPages` on `Pagination`
    -   Replace `Pagination.Root` with `Paginaton`
- Replace `Pagination.Next`, `Pagination.Previous` and
`Pagination.Ellipsis` with `Paginaton.Button`
    -   Make `usePagination` return spreadable props for subcomponents
    -   Add support for `showPages` and `onChange` in `usePagination`

- Skiplink:
([#2577](#2577))

    -   Simplify DOM
    -   Add support for `forwardRef`

- Accordion: Animate open/close with CSS
([#2527](#2527))

    -   Replace onFound with onToggle

- Heading: ([#2525](#2525))

    -   Classes with data attributes
    -   Move base style to utility classes

-   Modal: ([#2440](#2440))

    -   Rename `Modal.Dialog` to `Modal`
    -   Rename `Modal.Root` to `Modal.Context`
    -   Replace `onInteractOutside` event with `backdropClose` boolean
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with
`closeButton` on `Modal`
    -   Add border to `Modal.Header` and `Modal.Footer`
    -   Remove `Modal.Content`
    -   Remove `onBeforeClose`
    -   Remove `subtitle` from `Modal.Header`

- Body/Paragraph
([#2529](#2529))

    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

- Ingress: Remove component
([#2515](#2515))

    -   Use `Paragraph variant='long'` instead

- Heading: Fix `md` heading size
([#2485](#2485))

-   Card: ([#2509](#2509))

    -   Allow `Card` with content placed directly inside
- Replace `Card.Header`, `Card.Content` and `Card.Footer` with
`Card.Block`
- Replace `isLink` with anchor-in-heading + `click` handler for better
accessibility

- Modal: Remove `Modal.Header` and `Modal.Footer`, replace with
`Modal.Block`
([#2583](#2583))

- SkipLink: Remove ds-sr-only class
([#2546](#2546))

- Paragraph: Add css classes and style with data attributes
([#2523](#2523))

-   Chip: ([#2493](#2493))
    -   Add `Chip.Button`
    -   Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
    -   Remove `Chip.Group`

## @digdir/[email protected]

### Patch Changes

- Pagination:
([#2460](#2460))

    -   Remove attributes `currentPage` and `totalPages` on `Pagination`
    -   Replace `Pagination.Root` with `Paginaton`
- Replace `Pagination.Next`, `Pagination.Previous` and
`Pagination.Ellipsis` with `Paginaton.Button`
    -   Make `usePagination` return spreadable props for subcomponents
    -   Add support for `showPages` and `onChange` in `usePagination`

- Skiplink:
([#2577](#2577))

    -   Simplify DOM
    -   Add support for `forwardRef`

- Accordion: Animate open/close with CSS
([#2527](#2527))

    -   Replace onFound with onToggle

- Heading: ([#2525](#2525))

    -   Classes with data attributes
    -   Move base style to utility classes

-   Modal: ([#2440](#2440))

    -   Rename `Modal.Dialog` to `Modal`
    -   Rename `Modal.Root` to `Modal.Context`
    -   Replace `onInteractOutside` event with `backdropClose` boolean
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with
`closeButton` on `Modal`
    -   Add border to `Modal.Header` and `Modal.Footer`
    -   Remove `Modal.Content`
    -   Remove `onBeforeClose`
    -   Remove `subtitle` from `Modal.Header`

- Body/Paragraph
([#2529](#2529))

    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

- Ingress: Remove component
([#2515](#2515))

    -   Use `Paragraph variant='long'` instead

-   Card: ([#2509](#2509))

    -   Allow `Card` with content placed directly inside
- Replace `Card.Header`, `Card.Content` and `Card.Footer` with
`Card.Block`
- Replace `isLink` with anchor-in-heading + `click` handler for better
accessibility

- Modal: Remove `Modal.Header` and `Modal.Footer`, replace with
`Modal.Block`
([#2583](#2583))

- SkipLink: Remove ds-sr-only class
([#2546](#2546))

- Paragraph: Add css classes and style with data attributes
([#2523](#2523))

-   Chip: ([#2493](#2493))
    -   Add `Chip.Button`
    -   Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
    -   Remove `Chip.Group`

## @digdir/[email protected]

### Patch Changes

- Body/Paragraph
([#2529](#2529))
    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
unekinn pushed a commit that referenced this pull request Oct 10, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to next, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`next` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `next`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @digdir/designsystemet@1.0.0-next.35

### Minor Changes

- Fix crash when running CLI command `tokens build`:
([#2549](#2549))

    -   add --verbose option to `tokens build` for easier debugging
    -   `tokens build` crashed when run on result of `tokens create`

    Update tokens template used by CLI command `tokens create`

- removes `ingress`, renames `paragraph` to `body`, and adds `xl` size

### Patch Changes

- Make sure the internal order of sections in the CSS generated by the
CLI is deterministic, to avoid unnecessary git diffs
([#2560](#2560))

## @digdir/[email protected]

### Patch Changes

- Pagination:
([#2460](#2460))

    -   Remove attributes `currentPage` and `totalPages` on `Pagination`
    -   Replace `Pagination.Root` with `Paginaton`
- Replace `Pagination.Next`, `Pagination.Previous` and
`Pagination.Ellipsis` with `Paginaton.Button`
    -   Make `usePagination` return spreadable props for subcomponents
    -   Add support for `showPages` and `onChange` in `usePagination`

- Skiplink:
([#2577](#2577))

    -   Simplify DOM
    -   Add support for `forwardRef`

- Accordion: Animate open/close with CSS
([#2527](#2527))

    -   Replace onFound with onToggle

- Heading: ([#2525](#2525))

    -   Classes with data attributes
    -   Move base style to utility classes

-   Modal: ([#2440](#2440))

    -   Rename `Modal.Dialog` to `Modal`
    -   Rename `Modal.Root` to `Modal.Context`
    -   Replace `onInteractOutside` event with `backdropClose` boolean
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with
`closeButton` on `Modal`
    -   Add border to `Modal.Header` and `Modal.Footer`
    -   Remove `Modal.Content`
    -   Remove `onBeforeClose`
    -   Remove `subtitle` from `Modal.Header`

- Body/Paragraph
([#2529](#2529))

    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

- Ingress: Remove component
([#2515](#2515))

    -   Use `Paragraph variant='long'` instead

- Heading: Fix `md` heading size
([#2485](#2485))

-   Card: ([#2509](#2509))

    -   Allow `Card` with content placed directly inside
- Replace `Card.Header`, `Card.Content` and `Card.Footer` with
`Card.Block`
- Replace `isLink` with anchor-in-heading + `click` handler for better
accessibility

- Modal: Remove `Modal.Header` and `Modal.Footer`, replace with
`Modal.Block`
([#2583](#2583))

- SkipLink: Remove ds-sr-only class
([#2546](#2546))

- Paragraph: Add css classes and style with data attributes
([#2523](#2523))

-   Chip: ([#2493](#2493))
    -   Add `Chip.Button`
    -   Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
    -   Remove `Chip.Group`

## @digdir/[email protected]

### Patch Changes

- Pagination:
([#2460](#2460))

    -   Remove attributes `currentPage` and `totalPages` on `Pagination`
    -   Replace `Pagination.Root` with `Paginaton`
- Replace `Pagination.Next`, `Pagination.Previous` and
`Pagination.Ellipsis` with `Paginaton.Button`
    -   Make `usePagination` return spreadable props for subcomponents
    -   Add support for `showPages` and `onChange` in `usePagination`

- Skiplink:
([#2577](#2577))

    -   Simplify DOM
    -   Add support for `forwardRef`

- Accordion: Animate open/close with CSS
([#2527](#2527))

    -   Replace onFound with onToggle

- Heading: ([#2525](#2525))

    -   Classes with data attributes
    -   Move base style to utility classes

-   Modal: ([#2440](#2440))

    -   Rename `Modal.Dialog` to `Modal`
    -   Rename `Modal.Root` to `Modal.Context`
    -   Replace `onInteractOutside` event with `backdropClose` boolean
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with
`closeButton` on `Modal`
    -   Add border to `Modal.Header` and `Modal.Footer`
    -   Remove `Modal.Content`
    -   Remove `onBeforeClose`
    -   Remove `subtitle` from `Modal.Header`

- Body/Paragraph
([#2529](#2529))

    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

- Ingress: Remove component
([#2515](#2515))

    -   Use `Paragraph variant='long'` instead

-   Card: ([#2509](#2509))

    -   Allow `Card` with content placed directly inside
- Replace `Card.Header`, `Card.Content` and `Card.Footer` with
`Card.Block`
- Replace `isLink` with anchor-in-heading + `click` handler for better
accessibility

- Modal: Remove `Modal.Header` and `Modal.Footer`, replace with
`Modal.Block`
([#2583](#2583))

- SkipLink: Remove ds-sr-only class
([#2546](#2546))

- Paragraph: Add css classes and style with data attributes
([#2523](#2523))

-   Chip: ([#2493](#2493))
    -   Add `Chip.Button`
    -   Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
    -   Remove `Chip.Group`

## @digdir/[email protected]

### Patch Changes

- Body/Paragraph
([#2529](#2529))
    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
unekinn pushed a commit that referenced this pull request Oct 11, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to next, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`next` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `next`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @digdir/designsystemet@1.0.0-next.35

### Minor Changes

- Fix crash when running CLI command `tokens build`:
([#2549](#2549))

    -   add --verbose option to `tokens build` for easier debugging
    -   `tokens build` crashed when run on result of `tokens create`

    Update tokens template used by CLI command `tokens create`

- removes `ingress`, renames `paragraph` to `body`, and adds `xl` size

### Patch Changes

- Make sure the internal order of sections in the CSS generated by the
CLI is deterministic, to avoid unnecessary git diffs
([#2560](#2560))

## @digdir/[email protected]

### Patch Changes

- Pagination:
([#2460](#2460))

    -   Remove attributes `currentPage` and `totalPages` on `Pagination`
    -   Replace `Pagination.Root` with `Paginaton`
- Replace `Pagination.Next`, `Pagination.Previous` and
`Pagination.Ellipsis` with `Paginaton.Button`
    -   Make `usePagination` return spreadable props for subcomponents
    -   Add support for `showPages` and `onChange` in `usePagination`

- Skiplink:
([#2577](#2577))

    -   Simplify DOM
    -   Add support for `forwardRef`

- Accordion: Animate open/close with CSS
([#2527](#2527))

    -   Replace onFound with onToggle

- Heading: ([#2525](#2525))

    -   Classes with data attributes
    -   Move base style to utility classes

-   Modal: ([#2440](#2440))

    -   Rename `Modal.Dialog` to `Modal`
    -   Rename `Modal.Root` to `Modal.Context`
    -   Replace `onInteractOutside` event with `backdropClose` boolean
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with
`closeButton` on `Modal`
    -   Add border to `Modal.Header` and `Modal.Footer`
    -   Remove `Modal.Content`
    -   Remove `onBeforeClose`
    -   Remove `subtitle` from `Modal.Header`

- Body/Paragraph
([#2529](#2529))

    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

- Ingress: Remove component
([#2515](#2515))

    -   Use `Paragraph variant='long'` instead

- Heading: Fix `md` heading size
([#2485](#2485))

-   Card: ([#2509](#2509))

    -   Allow `Card` with content placed directly inside
- Replace `Card.Header`, `Card.Content` and `Card.Footer` with
`Card.Block`
- Replace `isLink` with anchor-in-heading + `click` handler for better
accessibility

- Modal: Remove `Modal.Header` and `Modal.Footer`, replace with
`Modal.Block`
([#2583](#2583))

- SkipLink: Remove ds-sr-only class
([#2546](#2546))

- Paragraph: Add css classes and style with data attributes
([#2523](#2523))

-   Chip: ([#2493](#2493))
    -   Add `Chip.Button`
    -   Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
    -   Remove `Chip.Group`

## @digdir/[email protected]

### Patch Changes

- Pagination:
([#2460](#2460))

    -   Remove attributes `currentPage` and `totalPages` on `Pagination`
    -   Replace `Pagination.Root` with `Paginaton`
- Replace `Pagination.Next`, `Pagination.Previous` and
`Pagination.Ellipsis` with `Paginaton.Button`
    -   Make `usePagination` return spreadable props for subcomponents
    -   Add support for `showPages` and `onChange` in `usePagination`

- Skiplink:
([#2577](#2577))

    -   Simplify DOM
    -   Add support for `forwardRef`

- Accordion: Animate open/close with CSS
([#2527](#2527))

    -   Replace onFound with onToggle

- Heading: ([#2525](#2525))

    -   Classes with data attributes
    -   Move base style to utility classes

-   Modal: ([#2440](#2440))

    -   Rename `Modal.Dialog` to `Modal`
    -   Rename `Modal.Root` to `Modal.Context`
    -   Replace `onInteractOutside` event with `backdropClose` boolean
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with
`closeButton` on `Modal`
    -   Add border to `Modal.Header` and `Modal.Footer`
    -   Remove `Modal.Content`
    -   Remove `onBeforeClose`
    -   Remove `subtitle` from `Modal.Header`

- Body/Paragraph
([#2529](#2529))

    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

- Ingress: Remove component
([#2515](#2515))

    -   Use `Paragraph variant='long'` instead

-   Card: ([#2509](#2509))

    -   Allow `Card` with content placed directly inside
- Replace `Card.Header`, `Card.Content` and `Card.Footer` with
`Card.Block`
- Replace `isLink` with anchor-in-heading + `click` handler for better
accessibility

- Modal: Remove `Modal.Header` and `Modal.Footer`, replace with
`Modal.Block`
([#2583](#2583))

- SkipLink: Remove ds-sr-only class
([#2546](#2546))

- Paragraph: Add css classes and style with data attributes
([#2523](#2523))

-   Chip: ([#2493](#2493))
    -   Add `Chip.Button`
    -   Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
    -   Remove `Chip.Group`

## @digdir/[email protected]

### Patch Changes

- Body/Paragraph
([#2529](#2529))
    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

Modal has wrong padding-bottom when Footer is removed Modal autoFocus sometimes not working
2 participants