-
Notifications
You must be signed in to change notification settings - Fork 38
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
Conversation
🦋 Changeset detectedLatest commit: 42fe976 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
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 |
Coverage Report
File Coverage
|
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.
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
Co-authored-by: Tobias Barsnes <[email protected]>
Co-authored-by: Tobias Barsnes <[email protected]>
Co-authored-by: Tobias Barsnes <[email protected]>
Co-authored-by: Tobias Barsnes <[email protected]>
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.
Make sure to add a changeset!
Component looks good, but lets do some last doc updates before we merge 🚀
Co-authored-by: Tobias Barsnes <[email protected]>
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>
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>
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>
Modal.Close
be a compound component? 🤔autoFocus
sometimes not working #1177