fix(Card): api and a11y #2509
Merged
fix(Card): api and a11y #2509
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 5885549 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 |
|
Preview deployments for this pull request: Storybook - Storefront - Theme - |
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||
Barsnes
reviewed
Sep 25, 2024
Barsnes
reviewed
Sep 30, 2024
Barsnes
previously requested changes
Oct 1, 2024
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
- Implements `Card.Block` to simplify API and make it more robust - Allows putting content directly inside `<Card>` - Allows putting `<a>` inside a heading instead of using `isLink` - following https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html for better accessibility - Supports `<Card asChild><a></a></Card>` as an escape hatch for those who really needs the whole card to be a link - Supports `<Card asChild><button></button></Card>` - Have verified new concept with Øyvind - and will replicate this API for Modal: #2522 - Have verified that Card should have same border color regardless of link or not with Lasse
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Card.Blockto simplify API and make it more robust<Card><a>inside a heading instead of usingisLink- following https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html for better accessibility<Card asChild><a></a></Card>as an escape hatch for those who really needs the whole card to be a link<Card asChild><button></button></Card>