feat: version 1 #2130
Draft
feat: version 1 #2130
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
|
Preview deployments for this pull request: 📖 Storybook 🖥 Storefront See all deployments at https://dev.designsystemet.no |
This was referenced Jun 19, 2024
This was referenced Jun 25, 2024
This was referenced Jun 26, 2024
This was referenced Jun 27, 2024
Closed
This was referenced Jul 1, 2024
🦋 Changeset detectedLatest commit: 78cb359 The changes in this PR will be included in the next version bump. This PR includes no changesetsWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
- Using CSS to animate open/close - Changes `onFound` to `onToggle` for more streamlined API matching HTML spec - **Note:** You need to run `yarn` to see the implementation as this also updates `u-details`
Fixes white text and other color errors when changing to dark theme. Updated to target only stories Old: 
Resolves #2208 --------- Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
I created a new baseline file, as it seems like our `ds-reset` file will be removed soon. I am importing the new file under the layer `ds.baseline`, but this could also be imported in `ds.reset` part of #2454
- 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
Sicne we don't set the focus vars on `data-ds-color-mode`, the color of the focus border is never changed since it is only calculated on `:root`
this PR is only to reflect changes made in an older version in PR #2575
Fixes #2522 --------- Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
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/designsystemet-css@1.0.0-next.35 ### 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/designsystemet-react@1.0.0-next.35 ### 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/designsystemet-theme@1.0.0-next.35 ### 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>
resolves #2586 Also streamlines use of composes and data attrs on all typography components. Removes `baseline` layer and file. Renamed `utilities.css` to `base.css` Adds a story telling and showing that we change color and background
Closes #963 To better make use of visual tests: - "Avatar/In Dropdown" story renders with the dropdown open - Modals, comboboxes, dropdowns, and popovers are now opened automatically (when not in docs) through interaction tests - SkipLink: added a story showing the SkipLink when it has become visible - Switch: added examples of enabled and hovered switches - Added a default 1rem padding to stories, to account for normally overflowing content like focus styles, floating badges etc - Several stories have custom styling to ensure elements that have been removed from the normal layout flow (e.g. with absolute positioning) or are rendered outside the Story root element (e.g. with a React portal) are actually visible in the snapshots. To easier facilitate this, a global customStylesDecorator has been added, which adds styles configured through `parameters.customStyles`. This commit also replaces story-specific decorators which only added styling with `parameter.customStyles`, simplifying the stories a bit. Visual tests on 320px wide screen revealed a bug where Combobox was wider than the screen. This has been fixed. With the changes that open modals, add pseudo states etc, some new accessibility violations surfaced. - Fixed axe violation `svg-img-alt` in Dropdown stories - Disabled axe rule `color-contrast` when the pseudo-class :active is emulated through `storybook-addon-pseudo-states`, since we concluded that 4.5:1 text contrast during press actions is unnecessary There is also a `yarn patch` applied to support axe running on multiple root elements (to support portals) when run through the Storybook a11y addon "Accessibility" tab. The patch is only necessary for the GUI, not for the CI tests which are run using `test-storybook` Chromatic is run automatically for pull requests through Github Actions -- see `.github/workflows/test.yml`. If you want to trigger visual tests from your own machine, add (or edit) the file `apps/storybook/.env`. This file is in .gitignore and will not be committed. Add the following to `.env`: ``` CHROMATIC_PROJECT_TOKEN=<token> ``` Replace `<token>` with the token found [here](https://www.chromatic.com/manage?appId=66fe736b9d639fe6801bf130&setup=true), under "Setup Chromatic with this project token". Then run these commands: ``` yarn build:storybook yarn chromatic ``` You can also replace the last command with e.g. ``` yarn chromatic --no-only-changed --only-story-names "Komponenter/Modal/*" ``` ...to only run tests for the Modal components
…erged (#2599) This allows Chromatic to set the new baseline for main/next branches
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.
Changes:
CSS:
fdstodson classes and layersdata-ds-color-mode="light/dark/auto".lightis defaultdata-ds-typography="primary/secondary".primaryis default.React:
successcolorfirstandsecondwithaccent&neutralfirst, second, thirdwithbrand1, brand2, brand3portalis nowfalseby defaultinvertedprop. Usedata-ds-color-modeinvertedprop. Usedata-ds-color-modecolorprop withaccent&neutralAccordionHeadertoAccordionHeadingAccordiontoAccoridon.RootTabstoTabs.RootToggleGrouptoToggleGroup.RootPopovertoPopover.RootDropdownMenutoDropdownMenu.RootModal,Modal.Rootis now always requireddefaultvarianterrorelevateduseSynchronizedAnimationuseIsomorphicLayoutEffectuseMediaQueryRovingFocusRootRovingFocusItemTheme:
--fdsto--dson CSS variables.