添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

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

Steps to reproduce

When using element.screenshot() Puppeteer produces different results in headless/non-headless mode. The headless screenshot is correct, the non-headless image captures the wrong screen region.

  • Puppeteer version: 10.2.0
  • Platform / OS version: MacOS BigSur (11.5.2)
  • URLs (if applicable): -
  • Node.js version: v14.15.4
  • What steps will reproduce the problem?

    Use the following test script to generate two screenshots:

    const puppeteer = require('puppeteer');
    async function test_screenshot(browser, name) {
      const page = await browser.newPage();
      await page.goto('https://google.com');
      await page.waitForSelector('.W2aPtb');
      const logo = await page.$('.W2aPtb');
      await logo.screenshot({path: name});
      await browser.close();
    // Testcase 1: Screenshot in headless mode.
    (async () => {
      const browser = await puppeteer.launch({ headless: true });
      await test_screenshot(browser, 'image-headless.png');
    })();
    // Testcase 2: Screenshot in non-headless mode.
    (async () => {
      const browser = await puppeteer.launch({ headless: false });
      await test_screenshot(browser, 'image-not-headless.png');
    })();

    Result

    The above snippet should result in identical two images, but the result is the following:

    image-headless.png (correct)

    image-non-headless.png (wrong)
    Image dimensions are correct, but the snap-region is too far down/right

    Comparison:

    I also encountered this issue. The offset appears to be equal to the displacement of the viewport from the top-left corner of the physical display. (Or, at least that's how it appears when using a single-monitor X11 setup). If I move the window to align the viewport with the screen's corner, the screenshot captures the correct region.

    I believe it has been broken since puppeteer v10.2.0, due to the following change:

    https://github.com/puppeteer/puppeteer/pull/7390/files#diff-3c9735f4a6d946de9c02aef89aa2feb6d3dfd8c7f524aeaffed3967e52a85560L426

    Prior to this, puppeteer used the similar layoutViewport property, which (as far as I've tested) produced pageX and pageY values of 0 (in the absence of scrolling). This change switched to using cssLayoutViewport , which (as far as I've tested) sets pageX and pageY to the displacement of the viewport from the corner of the screen (in the absence of scrolling). When scrolling is involved, these values both seem to increase by the scrolled amount (though, the intended and actual metric is unclear to me).

    These pageX and pageY values are subsequently added to the clipping position ( clip.x , clip.y ), hence why the screenshot region is misaligned.

    When running in a headless environment, this displacement from the corner of the screen appears irrelevant, with pageX and pageY equal to 0 (in the absence of scrolling), hence why it works fine in a headless setup.

    I'm not familiar with the intended semantics of layoutViewport and cssLayoutViewport . Their documentation is slightly confusing:

    https://chromedevtools.github.io/devtools-protocol/1-3/Page/#method-getLayoutMetrics
    https://chromedevtools.github.io/devtools-protocol/1-3/Page/#type-LayoutViewport

    offset relative to the document (CSS pixels)

    I would have assumed that should mean zero when there is no scrolling involved, as the document would be placed exactly where the physical viewport is. It's very unclear to me how scrolling when zoomed should affect this value.

    I'm not certain as to whether this is a bug originating from puppeteer, the dev tools protocol, or chromium.

    UPDATE:
    I solved this by waiting a little bit, I used a function

    function delay(time) {
        return new Promise(function(resolve) { 
            setTimeout(resolve, time)
        });
    

    then before I take the screenshot, I waited some seconds, then the page somehow fixed itself.

    ============== END UPDATE ==============

    I'm using version 19.1.1

    only when headless is false, I get the correct screenshot.

    (Wrong [headles => true] : What I get)

    (Correct [headles => false] : What I want )
    I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained](puppeteer/puppeteer#7514 (comment)). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff](https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more](https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff](https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png)

    I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo ### Bug Fixes * **Anchor:** comments Anchor's inner_ref usage ([ #1919 ]( #1919 )) ([ 7653316 ]( 7653316 )) * **Autocomplete:** pass status props to SubmitButton ([ #2004 ]( #2004 )) ([ fb89114 ]( fb89114 )) * **Badge:** enhance semantic / accessibility and inherit skeleton from provider ([ #1967 ]( #1967 )) ([ 5a870a7 ]( 5a870a7 )) * **Button:** remove left and right padding of tertiary button ([ 5919c79 ]( 5919c79 )) * **Button:** support rel property ([ #1990 ]( #1990 )) ([ ad029f2 ]( ad029f2 )) * **Dl:** ensure horizontal wrap no matter what available space ([ #1965 ]( #1965 )) ([ ab15893 ]( ab15893 )) * fix breadcumb alignment after tertiary button changes ([ 2989af1 ]( 2989af1 )) * fix pagination alignment after tertiary button changes ([ ce6e5ea ]( ce6e5ea )) * **InfoCard:** enhance accessibility + set max width of 60ch ([ #1977 ]( #1977 )) ([ 5a4f344 ]( 5a4f344 )) * remove `maintained node versions` from .browserslistrc ([ #1917 ]( #1917 )) ([ 9cb43c4 ]( 9cb43c4 )), closes [ #1912 ]( #1912 ) * **Timeline:** use ordered list element ([ #1962 ]( #1962 )) ([ 2b77b8e ]( 2b77b8e )) * upgrade Stylelint from v13 to v15 ([ #1995 ]( #1995 )) ([ 21a1cdb ]( 21a1cdb )) * remove web components and vue support ( #1946 ) ([ baa4ca3 ]( baa4ca3 )), closes [ #1946 ]( #1946 ) * re-define Media Query Breakpoints and layout width ( #1373 ) ([ 73d1b77 ]( 73d1b77 )), closes [ #1373 ]( #1373 ) * v10 ([ 514becd ]( 514becd )) ### Features * **Anchor:** deprecate property target_blank_title ([ #1882 ]( #1882 )) ([ 8c6448d ]( 8c6448d )) * build pure component css packages (without deps) ([ #1928 ]( #1928 )) ([ 5a7e111 ]( 5a7e111 )) * **build:** replace node-sass with dart-sass ([ #1934 ]( #1934 )) ([ ba3fed2 ]( ba3fed2 )) * **Checkbox:** deprecate default_state property ([ #1863 ]( #1863 )) ([ e5fb21e ]( e5fb21e )) * deprecate StepIndicator v1 ([ #1840 ]( #1840 )) ([ c0d9518 ]( c0d9518 )) * **DrawerList:** remove use_drawer_on_mobile & enable_closest_observer ([ #1879 ]( #1879 )) ([ e56c925 ]( e56c925 )) * **Dropdown:** remove deprecated selected_item property ([ #1870 ]( #1870 )) ([ 5321b3a ]( 5321b3a )) * **Element:** deprecate css, class, inner_ref, skeleton_method ([ #1859 ]( #1859 )) ([ 7b9554d ]( 7b9554d )) * **FormRow:** remove indent feature ([ #1975 ]( #1975 )) ([ 5c58e39 ]( 5c58e39 )) * **FormStatus:** remove deprecated status property ([ #1914 ]( #1914 )) ([ 3c867b5 ]( 3c867b5 )) * **GlobalStatus:** deprecate AddStatus & Set ([ #1891 ]( #1891 )) ([ bf382fd ]( bf382fd )) * **H:** deprecate is and style_type properties ([ #1856 ]( #1856 )) ([ c9fb5a6 ]( c9fb5a6 )) * **Helpers:** deprecate .dnb-sr-only--inline & .dnb-not-sr-only ([ #1865 ]( #1865 )) ([ d84a49f ]( d84a49f )) * include all type definitions in repo ([ #1996 ]( #1996 )) ([ 3a93c5a ]( 3a93c5a )) * **InputMasked:** ATTENTION! make allowLeadingZeroes default to true ([ #1126 ]( #1126 )) ([ bb2edca ]( bb2edca )) * **Modal, Dialog, Drawer:** remove closeButtonAttributes ([ #1926 ]( #1926 )) ([ 82cd99d ]( 82cd99d )) * **Modal:** remove deprecated mode prop ([ #1993 ]( #1993 )) ([ 86c8adc ]( 86c8adc )) * **Modal:** remove deprecated trigger_ props ([ #1918 ]( #1918 )) ([ 2eced1b ]( 2eced1b )) * new browserslist config for es6 builds ([ #1833 ]( #1833 )) ([ ab57b84 ]( ab57b84 )) * **Number:** Removes component ([ #1924 ]( #1924 )) ([ aeaadc0 ]( aeaadc0 )) * **P:** deprecate style_type property ([ #1855 ]( #1855 )) ([ 74bc0ea ]( 74bc0ea )) * **P:** remove deprecated class dnb-p--ingress ([ #1872 ]( #1872 )) ([ 04e4632 ]( 04e4632 )) * remove support for internet explorer ([ #1807 ]( #1807 )) ([ fbfd636 ]( fbfd636 )) * replace visual test driver to jest-image-snapshot and Firefox (Playwright) ([ #1945 ]( #1945 )) ([ fcc9348 ]( fcc9348 )), closes [/github.com/ puppeteer/puppeteer/issues/7514 #issuecomment-1005917527]( https://github.com//github.com/puppeteer/puppeteer/issues/7514/issues/issuecomment-1005917527 ) [/github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39]( https://github.com//github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js/issues/L39 ) * **ScrollView:** add interactive=auto to observe the content ([ #1984 ]( #1984 )) ([ 988390c ]( 988390c )) * **Section:** deprecate style_type signal-orange ([ #1886 ]( #1886 )) ([ 661d976 ]( 661d976 )) * **SkipContent:** add new component to skip large contents when using tab key ([ #1981 ]( #1981 )) ([ c44ef28 ]( c44ef28 )) * **Slider:** deprecate use_scrollwheel ([ #1889 ]( #1889 )) ([ 639df46 ]( 639df46 )) * **Slider:** remove deprecated onInit prop ([ #1909 ]( #1909 )) ([ 0595a53 ]( 0595a53 )) * **Slider:** remove dnb-range styling ([ #1890 ]( #1890 )) ([ 1d2693c ]( 1d2693c )) * **Space:** add conditional reset class: `dnb-space__reset` ([ #1961 ]( #1961 )) ([ a79bb2a ]( a79bb2a )) * **SpacingUtils:** deprecate createStyleObject ([ #1892 ]( #1892 )) ([ cadf378 ]( cadf378 )) * **Switch:** deprecate default_state property ([ #1864 ]( #1864 )) ([ da2c568 ]( da2c568 )) * **Table:** deprecate sticky_offset ([ #1883 ]( #1883 )) ([ 5a242a1 ]( 5a242a1 )) * **Tags:** removed deprecated comments ([ #1857 ]( #1857 )) ([ 9af5268 ]( 9af5268 )) * **Timeline:** deprecate name and date props ([ #1884 ]( #1884 )) ([ a95db13 ]( a95db13 )) * **Typography:** removed deprecated comments ([ #1858 ]( #1858 )) ([ 1fd2b48 ]( 1fd2b48 )) ### Reverts * Revert "chore(Table): remove deprecated selectors ( #1902 )" ( #1968 ) ([ b43bb4f ]( b43bb4f )), closes [ #1902 ]( #1902 ) [ #1968 ]( #1968 ) ### BREAKING CHANGES * **Modal:** - Modal: Remove deprecated `mode` prop – it will default to `custom` mode. Use rather the `Dialog` or the `Drawer` component. * Remove support for Web Components and Vue * re-define Media Query Breakpoints and layout width * Read the docs about migration: https://eufemia.dnb.no/uilib/about-the-lib/releases/eufemia/v10-info * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo ### ⚠ BREAKING CHANGES * **Modal:** - Modal: Remove deprecated `mode` prop – it will default to `custom` mode. Use rather the `Dialog` or the `Drawer` component. * Remove support for Web Components and Vue * re-define Media Query Breakpoints and layout width * Read the docs about migration: https://eufemia.dnb.no/uilib/about-the-lib/releases/eufemia/v10-info ### breaking * v10 ([ be59f35 ]( be59f35 )) * remove web components and vue support ( #1946 ) ([ 1d15c93 ]( 1d15c93 )), closes [ #1946 ]( #1946 ) * re-define Media Query Breakpoints and layout width ( #1373 ) ([ db2c963 ]( db2c963 )), closes [ #1373 ]( #1373 ) ### 🐛 Bug Fixes * **Anchor:** comments Anchor's inner_ref usage ([ #1919 ]( #1919 )) ([ f97a8b9 ]( f97a8b9 )) * **Autocomplete:** pass status props to SubmitButton ([ #2004 ]( #2004 )) ([ 59d64b8 ]( 59d64b8 )) * **Badge:** enhance semantic / accessibility and inherit skeleton from provider ([ #1967 ]( #1967 )) ([ f74b8e3 ]( f74b8e3 )) * **Button:** remove left and right padding of tertiary button ([ 0984910 ]( 0984910 )) * **Button:** support rel property ([ #1990 ]( #1990 )) ([ 1f4b5a9 ]( 1f4b5a9 )) * **Dl:** ensure horizontal wrap no matter what available space ([ #1965 ]( #1965 )) ([ 907c1b4 ]( 907c1b4 )) * fix breadcumb alignment after tertiary button changes ([ a6a7600 ]( a6a7600 )) * fix pagination alignment after tertiary button changes ([ 21a8ed9 ]( 21a8ed9 )) * **InfoCard:** enhance accessibility + set max width of 60ch ([ #1977 ]( #1977 )) ([ 88ae6f7 ]( 88ae6f7 )) * remove `maintained node versions` from .browserslistrc ([ #1917 ]( #1917 )) ([ 346d99f ]( 346d99f )), closes [ #1912 ]( #1912 ) * **Timeline:** use ordered list element ([ #1962 ]( #1962 )) ([ dcf8fd9 ]( dcf8fd9 )) * upgrade Stylelint from v13 to v15 ([ #1995 ]( #1995 )) ([ c6ec59b ]( c6ec59b )) ### ✨ Features * **Anchor:** deprecate property target_blank_title ([ #1882 ]( #1882 )) ([ ee893bb ]( ee893bb )) * build pure component css packages (without deps) ([ #1928 ]( #1928 )) ([ 8dbd3a4 ]( 8dbd3a4 )) * **build:** replace node-sass with dart-sass ([ #1934 ]( #1934 )) ([ 697f2be ]( 697f2be )) * **Checkbox:** deprecate default_state property ([ #1863 ]( #1863 )) ([ 618e7a6 ]( 618e7a6 )) * deprecate StepIndicator v1 ([ #1840 ]( #1840 )) ([ 0cbfb13 ]( 0cbfb13 )) * **DrawerList:** remove use_drawer_on_mobile & enable_closest_observer ([ #1879 ]( #1879 )) ([ c3c50cd ]( c3c50cd )) * **Dropdown:** remove deprecated selected_item property ([ #1870 ]( #1870 )) ([ 4731c0f ]( 4731c0f )) * **Element:** deprecate css, class, inner_ref, skeleton_method ([ #1859 ]( #1859 )) ([ d66642c ]( d66642c )) * **FormRow:** remove indent feature ([ #1975 ]( #1975 )) ([ 07418bd ]( 07418bd )) * **FormStatus:** remove deprecated status property ([ #1914 ]( #1914 )) ([ c28ed21 ]( c28ed21 )) * **GlobalStatus:** deprecate AddStatus & Set ([ #1891 ]( #1891 )) ([ 09fb3d9 ]( 09fb3d9 )) * **H:** deprecate is and style_type properties ([ #1856 ]( #1856 )) ([ 6208d9a ]( 6208d9a )) * **Helpers:** deprecate .dnb-sr-only--inline & .dnb-not-sr-only ([ #1865 ]( #1865 )) ([ 8d73d6f ]( 8d73d6f )) * include all type definitions in repo ([ #1996 ]( #1996 )) ([ fe9347d ]( fe9347d )) * **InputMasked:** ATTENTION! make allowLeadingZeroes default to true ([ #1126 ]( #1126 )) ([ 4c738d6 ]( 4c738d6 )) * **Modal, Dialog, Drawer:** remove closeButtonAttributes ([ #1926 ]( #1926 )) ([ 5d1a775 ]( 5d1a775 )) * **Modal:** remove deprecated mode prop ([ #1993 ]( #1993 )) ([ 2204d49 ]( 2204d49 )) * **Modal:** remove deprecated trigger_ props ([ #1918 ]( #1918 )) ([ 88790b9 ]( 88790b9 )) * new browserslist config for es6 builds ([ #1833 ]( #1833 )) ([ 1341695 ]( 1341695 )) * **Number:** Removes component ([ #1924 ]( #1924 )) ([ 024373b ]( 024373b )) * **P:** deprecate style_type property ([ #1855 ]( #1855 )) ([ febe82a ]( febe82a )) * **P:** remove deprecated class dnb-p--ingress ([ #1872 ]( #1872 )) ([ bc9799c ]( bc9799c )) * remove support for internet explorer ([ #1807 ]( #1807 )) ([ a175f6d ]( a175f6d )) * replace visual test driver to jest-image-snapshot and Firefox (Playwright) ([ #1945 ]( #1945 )) ([ f95d547 ]( f95d547 )), closes [/github.com/ puppeteer/puppeteer/issues/7514 #issuecomment-1005917527]( https://github.com/dnbexperience//github.com/puppeteer/puppeteer/issues/7514/issues/issuecomment-1005917527 ) [/github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39]( https://github.com/dnbexperience//github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js/issues/L39 ) * **ScrollView:** add interactive=auto to observe the content ([ #1984 ]( #1984 )) ([ 6bca0fe ]( 6bca0fe )) * **Section:** deprecate style_type signal-orange ([ #1886 ]( #1886 )) ([ 97e0d40 ]( 97e0d40 )) * **SkipContent:** add new component to skip large contents when using tab key ([ #1981 ]( #1981 )) ([ 9607418 ]( 9607418 )) * **Slider:** deprecate use_scrollwheel ([ #1889 ]( #1889 )) ([ be4c5ed ]( be4c5ed )) * **Slider:** remove deprecated onInit prop ([ #1909 ]( #1909 )) ([ 0129d99 ]( 0129d99 )) * **Slider:** remove dnb-range styling ([ #1890 ]( #1890 )) ([ 7242797 ]( 7242797 )) * **Space:** add conditional reset class: `dnb-space__reset` ([ #1961 ]( #1961 )) ([ e310b65 ]( e310b65 )) * **SpacingUtils:** deprecate createStyleObject ([ #1892 ]( #1892 )) ([ 4c804da ]( 4c804da )) * **Switch:** deprecate default_state property ([ #1864 ]( #1864 )) ([ de21dff ]( de21dff )) * **Table:** deprecate sticky_offset ([ #1883 ]( #1883 )) ([ d76de14 ]( d76de14 )) * **Tags:** removed deprecated comments ([ #1857 ]( #1857 )) ([ 1ad76b2 ]( 1ad76b2 )) * **Timeline:** deprecate name and date props ([ #1884 ]( #1884 )) ([ dfb2284 ]( dfb2284 )) * **Typography:** removed deprecated comments ([ #1858 ]( #1858 )) ([ 7a5336f ]( 7a5336f )) ### 📝 Documentation * add change log about v10 ([ 811b07b ]( 811b07b )) * add info about the tertiary button "visual" breaking change ([ a4e0032 ]( a4e0032 )) * **Dropdown:** remove selected_key in events on_change & on_select ([ #2001 ]( #2001 )) ([ 9e45682 ]( 9e45682 )) * Move Modal to Dialog/Drawer conversion docs to v10 migration ([ #1921 ]( #1921 )) ([ 492ed9b ]( 492ed9b )) * **ProgressIndicator:** removes props min_time and variant ([ #1997 ]( #1997 )) ([ 86e9cd8 ]( 86e9cd8 )) * refactor contribution guide getting started ([ #2008 ]( #2008 )) ([ e9d5e27 ]( e9d5e27 )) * remove outdated info ([ #1940 ]( #1940 )) ([ 99517f1 ]( 99517f1 )) * **Spacing:** minor improvement to space example ([ #1992 ]( #1992 )) ([ 80c5f1a ]( 80c5f1a )) * **Table:** add info about the needed CSS class in v10 ([ #1923 ]( #1923 )) ([ 336de44 ]( 336de44 )) * update docs about CSS formatting and styling ([ #1964 ]( #1964 )) ([ 04a0013 ]( 04a0013 )) * update v10 change log ([ #1983 ]( #1983 )) ([ 1f53c26 ]( 1f53c26 )) * update v10-info ([ #1998 ]( #1998 )) ([ c2c8c5c ]( c2c8c5c )) * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo ### ⚠ BREAKING CHANGES * **Modal:** - Modal: Remove deprecated `mode` prop – it will default to `custom` mode. Use rather the `Dialog` or the `Drawer` component. * Remove support for Web Components and Vue * re-define Media Query Breakpoints and layout width * Read the docs about migration: https://eufemia.dnb.no/uilib/about-the-lib/releases/eufemia/v10-info * remove web components and vue support ( #1946 ) ([ baa4ca3 ]( baa4ca3 )), closes [ #1946 ]( #1946 ) * re-define Media Query Breakpoints and layout width ( #1373 ) ([ 73d1b77 ]( 73d1b77 )), closes [ #1373 ]( #1373 ) * v10 ([ 514becd ]( 514becd )) ### 🐛 Bug Fixes * **Anchor:** comments Anchor's inner_ref usage ([ #1919 ]( #1919 )) ([ 7653316 ]( 7653316 )) * **Autocomplete:** pass status props to SubmitButton ([ #2004 ]( #2004 )) ([ fb89114 ]( fb89114 )) * **Badge:** enhance semantic / accessibility and inherit skeleton from provider ([ #1967 ]( #1967 )) ([ 5a870a7 ]( 5a870a7 )) * **Button:** remove left and right padding of tertiary button ([ 5919c79 ]( 5919c79 )) * **Button:** support rel property ([ #1990 ]( #1990 )) ([ ad029f2 ]( ad029f2 )) * **Dl:** ensure horizontal wrap no matter what available space ([ #1965 ]( #1965 )) ([ ab15893 ]( ab15893 )) * fix breadcumb alignment after tertiary button changes ([ 2989af1 ]( 2989af1 )) * fix pagination alignment after tertiary button changes ([ ce6e5ea ]( ce6e5ea )) * **InfoCard:** enhance accessibility + set max width of 60ch ([ #1977 ]( #1977 )) ([ 5a4f344 ]( 5a4f344 )) * remove `maintained node versions` from .browserslistrc ([ #1917 ]( #1917 )) ([ 9cb43c4 ]( 9cb43c4 )), closes [ #1912 ]( #1912 ) * **Timeline:** use ordered list element ([ #1962 ]( #1962 )) ([ 2b77b8e ]( 2b77b8e )) * upgrade Stylelint from v13 to v15 ([ #1995 ]( #1995 )) ([ 21a1cdb ]( 21a1cdb )) ### ✨ Features * **Anchor:** deprecate property target_blank_title ([ #1882 ]( #1882 )) ([ 8c6448d ]( 8c6448d )) * build pure component css packages (without deps) ([ #1928 ]( #1928 )) ([ 5a7e111 ]( 5a7e111 )) * **build:** replace node-sass with dart-sass ([ #1934 ]( #1934 )) ([ ba3fed2 ]( ba3fed2 )) * **Checkbox:** deprecate default_state property ([ #1863 ]( #1863 )) ([ e5fb21e ]( e5fb21e )) * deprecate StepIndicator v1 ([ #1840 ]( #1840 )) ([ c0d9518 ]( c0d9518 )) * **DrawerList:** remove use_drawer_on_mobile & enable_closest_observer ([ #1879 ]( #1879 )) ([ e56c925 ]( e56c925 )) * **Dropdown:** remove deprecated selected_item property ([ #1870 ]( #1870 )) ([ 5321b3a ]( 5321b3a )) * **Element:** deprecate css, class, inner_ref, skeleton_method ([ #1859 ]( #1859 )) ([ 7b9554d ]( 7b9554d )) * **FormRow:** remove indent feature ([ #1975 ]( #1975 )) ([ 5c58e39 ]( 5c58e39 )) * **FormStatus:** remove deprecated status property ([ #1914 ]( #1914 )) ([ 3c867b5 ]( 3c867b5 )) * **GlobalStatus:** deprecate AddStatus & Set ([ #1891 ]( #1891 )) ([ bf382fd ]( bf382fd )) * **H:** deprecate is and style_type properties ([ #1856 ]( #1856 )) ([ c9fb5a6 ]( c9fb5a6 )) * **Helpers:** deprecate .dnb-sr-only--inline & .dnb-not-sr-only ([ #1865 ]( #1865 )) ([ d84a49f ]( d84a49f )) * include all type definitions in repo ([ #1996 ]( #1996 )) ([ 3a93c5a ]( 3a93c5a )) * **InputMasked:** ATTENTION! make allowLeadingZeroes default to true ([ #1126 ]( #1126 )) ([ bb2edca ]( bb2edca )) * **Modal, Dialog, Drawer:** remove closeButtonAttributes ([ #1926 ]( #1926 )) ([ 82cd99d ]( 82cd99d )) * **Modal:** remove deprecated mode prop ([ #1993 ]( #1993 )) ([ 86c8adc ]( 86c8adc )) * **Modal:** remove deprecated trigger_ props ([ #1918 ]( #1918 )) ([ 2eced1b ]( 2eced1b )) * new browserslist config for es6 builds ([ #1833 ]( #1833 )) ([ ab57b84 ]( ab57b84 )) * **Number:** Removes component ([ #1924 ]( #1924 )) ([ aeaadc0 ]( aeaadc0 )) * **P:** deprecate style_type property ([ #1855 ]( #1855 )) ([ 74bc0ea ]( 74bc0ea )) * **P:** remove deprecated class dnb-p--ingress ([ #1872 ]( #1872 )) ([ 04e4632 ]( 04e4632 )) * remove support for internet explorer ([ #1807 ]( #1807 )) ([ fbfd636 ]( fbfd636 )) * replace visual test driver to jest-image-snapshot and Firefox (Playwright) ([ #1945 ]( #1945 )) ([ fcc9348 ]( fcc9348 )), closes [/github.com/ puppeteer/puppeteer/issues/7514 #issuecomment-1005917527]( https://github.com/dnbexperience//github.com/puppeteer/puppeteer/issues/7514/issues/issuecomment-1005917527 ) [/github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39]( https://github.com/dnbexperience//github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js/issues/L39 ) * **ScrollView:** add interactive=auto to observe the content ([ #1984 ]( #1984 )) ([ 988390c ]( 988390c )) * **Section:** deprecate style_type signal-orange ([ #1886 ]( #1886 )) ([ 661d976 ]( 661d976 )) * **SkipContent:** add new component to skip large contents when using tab key ([ #1981 ]( #1981 )) ([ c44ef28 ]( c44ef28 )) * **Slider:** deprecate use_scrollwheel ([ #1889 ]( #1889 )) ([ 639df46 ]( 639df46 )) * **Slider:** remove deprecated onInit prop ([ #1909 ]( #1909 )) ([ 0595a53 ]( 0595a53 )) * **Slider:** remove dnb-range styling ([ #1890 ]( #1890 )) ([ 1d2693c ]( 1d2693c )) * **Space:** add conditional reset class: `dnb-space__reset` ([ #1961 ]( #1961 )) ([ a79bb2a ]( a79bb2a )) * **SpacingUtils:** deprecate createStyleObject ([ #1892 ]( #1892 )) ([ cadf378 ]( cadf378 )) * **Switch:** deprecate default_state property ([ #1864 ]( #1864 )) ([ da2c568 ]( da2c568 )) * **Table:** deprecate sticky_offset ([ #1883 ]( #1883 )) ([ 5a242a1 ]( 5a242a1 )) * **Tags:** removed deprecated comments ([ #1857 ]( #1857 )) ([ 9af5268 ]( 9af5268 )) * **Timeline:** deprecate name and date props ([ #1884 ]( #1884 )) ([ a95db13 ]( a95db13 )) * **Typography:** removed deprecated comments ([ #1858 ]( #1858 )) ([ 1fd2b48 ]( 1fd2b48 )) ### 📝 Documentation * add change log about v10 ([ 8cbf228 ]( 8cbf228 )) * add info about the tertiary button "visual" breaking change ([ 4df8d93 ]( 4df8d93 )) * **Dropdown:** remove selected_key in events on_change & on_select ([ #2001 ]( #2001 )) ([ c540619 ]( c540619 )) * Move Modal to Dialog/Drawer conversion docs to v10 migration ([ #1921 ]( #1921 )) ([ cb43cf4 ]( cb43cf4 )) * **NumberFormat:** fix info docs ([ #2009 ]( #2009 )) ([ 30a529a ]( 30a529a )) * **ProgressIndicator:** removes props min_time and variant ([ #1997 ]( #1997 )) ([ f734a1a ]( f734a1a )) * refactor contribution guide getting started ([ #2008 ]( #2008 )) ([ 94d5f43 ]( 94d5f43 )) * remove outdated info ([ #1940 ]( #1940 )) ([ eb93445 ]( eb93445 )) * **Spacing:** minor improvement to space example ([ #1992 ]( #1992 )) ([ 5b71585 ]( 5b71585 )) * **Table:** add info about the needed CSS class in v10 ([ #1923 ]( #1923 )) ([ c724175 ]( c724175 )) * update docs about CSS formatting and styling ([ #1964 ]( #1964 )) ([ ab2dd40 ]( ab2dd40 )) * update v10 change log ([ #1983 ]( #1983 )) ([ bd41665 ]( bd41665 )) * update v10-info ([ #1998 ]( #1998 )) ([ 9ae40f1 ]( 9ae40f1 )) * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * feat: replace jest visual test driver to jest-image-snapshot * chore: add .jest-image-snapshot-touched-files to .gitignore * chore: remove outdated deps update limitation * chore: refactor/align script commands * chore: remove screenshot as a part of the description * chore: remove all old snapshots * feat: ensure page and ScrollView is not scrolling * feat: refactor setupPageScreenshot * chore: rename testPageScreenshot to makeScreenshot * chore: upload diff images to GitHub Action as an artifact * chore: convert from puppeteer to playwright Background: I tried these versions of puppeteer: 8 to 15 + 19 Version 8, 9 and 10 did work fine. While version 10.2.0 has a change in its method of calculating page offsets. Here is it [better explained]( puppeteer/puppeteer#7514 (comment) ). This change leads to a negative side effect so snapshots differ from when run on CI macOS vs local macOS. A typical comparison looks then as so: ![avatar-src-have-to-match-png-image-of-local-src snap-diff]( https://user-images.githubusercontent.com/1501870/213706793-3b41d185-0782-4088-ba72-7d5eb7b54b94.png ) I also see that "jest-image-snapshot" has not so many "parameters" to tweak. We basically have `failureThreshold`. Before we had [several more]( https://github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39 ). When running our local generated snapshots on the CI, we typical get this: ![button-icon-have-to-match-icon-button snap-diff]( https://user-images.githubusercontent.com/1501870/214040509-b0345bed-0d88-4653-93df-e7f650524bd8.png ) * chore: align visual test and update snapshots Align Dialog Align Paragraph Align Anchor (new) Align Hr Align Lists Align Typography Align Heading Align Autocomplete Align Avatar Align Badge Align Breadcrumb Align Button Align Checkbox Align Drawer Align Dropdown Align FormLabel Align FormRow and FormSet Align FormStatus Align GlobalError Align GlobalStatus Align HelpButton Align Icon Algin InfoCard Align Input Align Modal Align NumberFormat Align Pagination Align ProgressIndicator Align Radio button Align Seciton Align Skeleton Align Slider Align Space Align StepIndicator Align switch Align Tabs Align Tag Align Textarea Align Timeline Align ToggleButton Align Tooltip Align Upload Align VisuallyHidden Align Image Align Blockquote Align DrawerList Align DatePicker Align Table Align PaymentCard Align HelperClasses Align Logo * **Anchor:** Anchor was moved form `/elements` to `/components` * **StylisPlugin:** Stylis plugin, `import stylisPlugin from '@dnb/eufemia/style/stylis'`, has been removed. * - The package dnb-theme-ui was renamed to ui-theme-basis. - The package dnb-ui-components was renamed and moved inside a theme /style/themes/theme-ui/ui-theme-components.*. - dnb-ui-tags was renamed and moved form /style/dnb-ui-tags.* to /style/themes/theme-ui/ui-theme-tags.*. * SCSS mixin was renamed from `fakeFocus` to `focusRing` as well as `removeFakeFocus` to `removeFocusRing`. * - CSS Packages such as `dnb-ui-basis` and `dnb-ui-core` do not contain the fonts anymore. Fonts are now only a part of a theme file, such as: `/style/themes/theme-ui/dnb-theme-ui.*`. - The CSS package `dnb-ui-fonts` is moved inside a theme folder `/themes/theme-ui` * The DNB font is moved inside a subfolder in /assets/fonts/dnb/... * **Modal:** - Modal: Remove deprecated `mode` prop – it will default to `custom` mode. Use rather the `Dialog` or the `Drawer` component. * Remove support for Web Components and Vue * re-define Media Query Breakpoints and layout width * Read the docs about migration: https://eufemia.dnb.no/uilib/about-the-lib/releases/eufemia/v10-info * remove web components and vue support ( #1946 ) ([ ab7379e ]( ab7379e )), closes [ #1946 ]( #1946 ) * re-define Media Query Breakpoints and layout width ( #1373 ) ([ e0a11ce ]( e0a11ce )), closes [ #1373 ]( #1373 ) * v10 ([ b7d6348 ]( b7d6348 )) ### 💈 Style Changes * **Button:** smaller tertiary button focus effect for Sbanken ([ #2319 ]( #2319 )) ([ aa3ab7d ]( aa3ab7d )) * move :root vars into their component itself ([ #2102 ]( #2102 )) ([ 60a53fe ]( 60a53fe )) ### 🐛 Bug Fixes * **Accordion:** enhance TypeScript type definitions ([ 035c0fb ]( 035c0fb )) * **Anchor:** comments Anchor's inner_ref usage ([ #1919 ]( #1919 )) ([ b3623e9 ]( b3623e9 )) * **Anchor:** ensure id is passed down ([ #2016 ]( #2016 )) ([ e8efd09 ]( e8efd09 )) * **Autocomplete:** add HorizontalItem TypeScript type definition ([ f97f6ea ]( f97f6ea )) * **Badge:** enhance semantic / accessibility and inherit skeleton from provider ([ #1967 ]( #1967 )) ([ 42e20a7 ]( 42e20a7 )) * **Button:** align large icon size to be same as in Figma ([ #2239 ]( #2239 )) ([ 33e41e7 ]( 33e41e7 )) * **Button:** fix icon alignment issue when left positioned ([ #2371 ]( #2371 )) ([ 9250f15 ]( 9250f15 )) * **Button:** remove left and right padding of tertiary button ([ 88bec0c ]( 88bec0c )) * **DatePicker:** fix text prop for submit and cancel buttons ([ #2254 ]( #2254 )) ([ b5f1bfa ]( b5f1bfa )) * **DatePicker:** make focus handling on input work on second click ([ #2039 ]( #2039 )) ([ 7a66806 ]( 7a66806 )) * **Datepicker:** reset and cancel button gap ([ 6056009 ]( 6056009 )) * **DatePicker:** shortcut buttons ([ #2266 ]( #2266 )) ([ eb79f77 ]( eb79f77 )) * **Dialog:** make action buttons responsive ([ #2373 ]( #2373 )) ([ 3e1f146 ]( 3e1f146 )) * **Dl:** ensure horizontal wrap no matter what available space ([ #1965 ]( #1965 )) ([ 8e5729a ]( 8e5729a )) * **DrawerList:** enhance TypeScript definition types ([ 5f7fd54 ]( 5f7fd54 )) * **Dropdown:** enhance TypeScript definition types ([ 514f6fa ]( 514f6fa )) * enhance scrollbar appearance ([ #2046 ]( #2046 )) ([ 237331a ]( 237331a )) * fix breadcumb alignment after tertiary button changes ([ 9f4a9a6 ]( 9f4a9a6 )) * fix pagination alignment after tertiary button changes ([ 037a391 ]( 037a391 )) * **GlobalStatus:** enhance TypeScript definition types ([ dc58836 ]( dc58836 )) * **Heading:** enhance TypeScript definition types ([ c3c736b ]( c3c736b )) * **Icon:** enhance alignment when used in paragraphs ([ #2368 ]( #2368 )) ([ 78cc1e4 ]( 78cc1e4 )) * **IconPrimary:** correct ts file extension usage ([ #2289 ]( #2289 )) ([ ad485bc ]( ad485bc )) * **InfoCard:** enhance accessibility + set max width of 60ch ([ #1977 ]( #1977 )) ([ e2075f3 ]( e2075f3 )) * **InputMasked:** expose inner_ref input element when useRef is used ([ #2042 ]( #2042 )) ([ b52bbe0 ]( b52bbe0 )) * **InputMasked:** fix integerLimit issue when combined with decimals ([ #2338 ]( #2338 )) ([ 04c30e9 ]( 04c30e9 )) * **InputMasked:** on custom mask – avoid interaction stall after focus ([ #2269 ]( #2269 )) ([ aa0300f ]( aa0300f )) * make docs/portal Windows compatible by properly handle backslashes and newlines ([ #2038 ]( #2038 )) ([ 1196819 ]( 1196819 )) * **MediaQuery:** enhance TypeScript types ([ d93bd54 ]( d93bd54 )) * **Modal:** make children accept function with close method in parameters ([ #2015 ]( #2015 )) ([ bacc1f1 ]( bacc1f1 )) * **NumberFormat:** fix tooltip theme inheritance ([ #2354 ]( #2354 )) ([ ddffa58 ]( ddffa58 )) * **NumberFormat:** hide screen reader only text from being copied as HTML ([ #2240 ]( #2240 )) ([ 26b6039 ]( 26b6039 )) * omit showing Tooltip after Dialog or Drawer got closed ([ #2375 ]( #2375 )) ([ 1c41dfe ]( 1c41dfe )) * **Pagination:** enhance Pagination and InfinityScroller TypeScript definitions ([ 5a7de9d ]( 5a7de9d )) * **Pagination:** fix hover style state after click to be emerald-green ([ #2032 ]( #2032 )) ([ 2c399e8 ]( 2c399e8 )) * remove `maintained node versions` from .browserslistrc ([ #1917 ]( #1917 )) ([ 3e9b0d8 ]( 3e9b0d8 )), closes [ #1912 ]( #1912 ) * remove FormRow context support from /elements ([ #2031 ]( #2031 )) ([ 6560a80 ]( 6560a80 )) * **ScrollView:** avoid usage of useLayoutEffect during SSR ([ #2012 ]( #2012 )) ([ 6246afc ]( 6246afc )) * **Skeleton:** add Skeleton.Exclude types ([ b9512ff ]( b9512ff )) * **StepIndicator:** fix TypeScript spacing types ([ c304d47 ]( c304d47 )) * **Timeline:** use ordered list element ([ #1962 ]( #1962 )) ([ bfc3004 ]( bfc3004 )) * **ToggleButton:** fixes error when pressing enter ([ #2183 ]( #2183 )) ([ da95ee4 ]( da95ee4 )) * upgrade Stylelint from v13 to v15 ([ #1995 ]( #1995 )) ([ b4ca07c ]( b4ca07c )) * **VisuallyHidden:** force properties to overcome unwanted CSS specificity ([ #2366 ]( #2366 )) ([ ed088de ]( ed088de )) ### ✨ Features * **Accordion:** export type AccordionIconPosition ([ ff05f9f ]( ff05f9f )) * add shared Theme component and useTheme hook ([ #2112 ]( #2112 )) ([ 9f88b71 ]( 9f88b71 )) * **Anchor:** add `scrollToHash` feature ([ #2290 ]( #2290 )) ([ 246eaa9 ]( 246eaa9 )), closes [ #2286 ]( #2286 ) * **Anchor:** always show focus when `dnb-anchor--focus` is used ([ #2364 ]( #2364 )) ([ 541e889 ]( 541e889 )) * **Anchor:** create styles for Sbanken ([ #2250 ]( #2250 )) ([ 208e891 ]( 208e891 )) * **Anchor:** deprecate property target_blank_title ([ #1882 ]( #1882 )) ([ 065321e ]( 065321e )) * **Anchor:** move from elements to components ([ #2275 ]( #2275 )) ([ fdb5680 ]( fdb5680 )) * **Anchor:** remove horizontal padding ([ #2365 ]( #2365 )) ([ 106c02f ]( 106c02f )) * **Anchor:** Sbanken styling, added icon props ([ #2318 ]( #2318 )) ([ c6dcd03 ]( c6dcd03 )) * **Autocomplete:** export AutocompleteData type ([ #2299 ]( #2299 )) ([ 0315b14 ]( 0315b14 )) * **Autocomplete:** export AutocompleteOptionsRender type ([ #2300 ]( #2300 )) ([ becf345 ]( becf345 )) * build pure component css packages (without deps) ([ #1928 ]( #1928 )) ([ 0af6b60 ]( 0af6b60 )) * **build:** replace node-sass with dart-sass ([ #1934 ]( #1934 )) ([ 87f918f ]( 87f918f )) * **Button:** export type ButtonIcon ([ bb4d70e ]( bb4d70e )) * **Button:** sbanken styling ([ #2273 ]( #2273 )) ([ f53faa0 ]( f53faa0 )) * **Checkbox:** deprecate default_state property ([ #1863 ]( #1863 )) ([ a022de3 ]( a022de3 )) * deprecate StepIndicator v1 ([ #1840 ]( #1840 )) ([ 33d6fc2 ]( 33d6fc2 )) * **Dialog:** adds ReactNode as type for texts ([ #2294 ]( #2294 )) ([ 5a18768 ]( 5a18768 )) * **DrawerList:** remove use_drawer_on_mobile & enable_closest_observer ([ #1879 ]( #1879 )) ([ e1bcfb0 ]( e1bcfb0 )) * **Dropdown:** export DropdownData type ([ #2298 ]( #2298 )) ([ 81a0619 ]( 81a0619 )) * **Dropdown:** remove deprecated selected_item property ([ #1870 ]( #1870 )) ([ ac509ca ]( ac509ca )) * **Element:** deprecate css, class, inner_ref, skeleton_method ([ #1859 ]( #1859 )) ([ 5ef5292 ]( 5ef5292 )) * expose package version ([ #2327 ]( #2327 )) ([ 2a51dfc ]( 2a51dfc )) * **FormRow:** remove indent feature ([ #1975 ]( #1975 )) ([ 9c69439 ]( 9c69439 )) * **FormStatus:** remove deprecated status property ([ #1914 ]( #1914 )) ([ 75fe76c ]( 75fe76c )) * **GlobalError:** add new styles (no illustrations anymore) ([ #2381 ]( #2381 )) ([ cf18ccd ]( cf18ccd )) * **GlobalStatus:** add possibility for a custom message (replace `global_status_id` with `globalStatus` prop) ([ #2351 ]( #2351 )) ([ 551d87e ]( 551d87e )) * **GlobalStatus:** deprecate AddStatus & Set ([ #1891 ]( #1891 )) ([ 680b2c8 ]( 680b2c8 )) * **H:** deprecate is and style_type properties ([ #1856 ]( #1856 )) ([ 41c2ae8 ]( 41c2ae8 )) * **HelpButton:** remove `modal_props` in favour of `render` ([ #2333 ]( #2333 )) ([ f95e249 ]( f95e249 )) * **Helpers:** deprecate .dnb-sr-only--inline & .dnb-not-sr-only ([ #1865 ]( #1865 )) ([ 7789778 ]( 7789778 )) * **Icons:** add new icons `handshake`, `heavy_equipment`, `id_card`, `investment_account`, `keyfigures`, `portfolio_analytics`, `sea_transport`, `shield_lock`, `file_zip`, `bus`, `building_shopping`, `handshake`, `heavy_equipment` ([ #2178 ]( #2178 )) ([ 5e57d0d ]( 5e57d0d )) * **Icons:** move all icons assets to `dnb` subfolder: assets/icons/dnb/*.svg ([ #2187 ]( #2187 )) ([ 15b19b7 ]( 15b19b7 )) * **Icons:** remove iOS (PDF) icons library support ([ #2170 ]( #2170 )) ([ 6063ff3 ]( 6063ff3 )) * include all type definitions in repo ([ #1996 ]( #1996 )) ([ a5d07fe ]( a5d07fe )) * **InputMasked:** ATTENTION! make allowLeadingZeroes default to true ([ #1126 ]( #1126 )) ([ dfddc3a ]( dfddc3a )) * **Logo:** Add brand and variant params for Sbanken logo ([ #2271 ]( #2271 )) ([ 577e9b4 ]( 577e9b4 )) * **Modal, Dialog, Drawer:** remove closeButtonAttributes ([ #1926 ]( #1926 )) ([ 80c69ee ]( 80c69ee )) * **Modal:** remove deprecated mode prop ([ #1993 ]( #1993 )) ([ 7769b77 ]( 7769b77 )) * **Modal:** remove deprecated trigger_ props ([ #1918 ]( #1918 )) ([ 0582254 ]( 0582254 )) * move `dnb-ui-fonts` package inside `/style/themes/theme-ui/` ([ 9dfa3d6 ]( 9dfa3d6 )) * move `dnb-ui-tags` to themes ([ #2140 ]( #2140 )) ([ 0a49595 ]( 0a49595 )) * move `properties.scss` into theme ui ([ #2035 ]( #2035 )) ([ dce2a3a ]( dce2a3a )) * move browser assets to dnb subfolder ([ #2083 ]( #2083 )) ([ e0cf868 ]( e0cf868 )) * move DNB font in subfolder ([ fdb05f3 ]( fdb05f3 )) * move DNB icons to subfolder (with v9 compatibility) ([ #2200 ]( #2200 )) ([ fd23310 ]( fd23310 )) * move dnb image assets to own subfolder ([ #2099 ]( #2099 )) ([ 4101cca ]( 4101cca )) * new browserslist config for es6 builds ([ #1833 ]( #1833 )) ([ 0f02859 ]( 0f02859 )) * **Number:** Removes component ([ #1924 ]( #1924 )) ([ 5ecb3aa ]( 5ecb3aa )) * **Pagination:** replace `page` with `pageNumber` ([ 3d538da ]( 3d538da )) * **PaymentCard:** new card designs & new products ([ #2264 ]( #2264 )) ([ 2e3d790 ]( 2e3d790 )) * **PaymentCard:** rename type Metalic to Metallic ([ #2226 ]( #2226 )) ([ 00c30ea ]( 00c30ea )) * **P:** deprecate style_type property ([ #1855 ]( #1855 )) ([ f45e60c ]( f45e60c )) * **P:** remove deprecated class dnb-p--ingress ([ #1872 ]( #1872 )) ([ 2837e8e ]( 2837e8e )) * remove support for internet explorer ([ #1807 ]( #1807 )) ([ 44b3803 ]( 44b3803 )) * rename SCSS mixin `fakeFocus` to `focusRing` ([ #2110 ]( #2110 )) ([ 47b5e47 ]( 47b5e47 )) * replace visual test driver to jest-image-snapshot and Firefox (Playwright) ([ #1945 ]( #1945 )) ([ 6402aa5 ]( 6402aa5 )), closes [/github.com/ puppeteer/puppeteer/issues/7514 #issuecomment-1005917527]( https://github.com/dnbexperience//github.com/puppeteer/puppeteer/issues/7514/issues/issuecomment-1005917527 ) [/github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39]( https://github.com/dnbexperience//github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js/issues/L39 ) * **ScrollView:** add interactive=auto to observe the content ([ #1984 ]( #1984 )) ([ cc8d37a ]( cc8d37a )) * **Section:** deprecate style_type signal-orange ([ #1886 ]( #1886 )) ([ 9e8dd3f ]( 9e8dd3f )) * simplify CSS packages/themes structure ([ c1a7894 ]( c1a7894 )) * **Skeleton:** removes style_type prop ([ #2095 ]( #2095 )) ([ 3e0f4ce ]( 3e0f4ce )) * **SkipContent:** add new component to skip large contents when using tab key ([ #1981 ]( #1981 )) ([ 78dd384 ]( 78dd384 )) * **Slider:** deprecate use_scrollwheel ([ #1889 ]( #1889 )) ([ ead0a49 ]( ead0a49 )) * **Slider:** remove deprecated onInit prop ([ #1909 ]( #1909 )) ([ 3b72e9b ]( 3b72e9b )) * **Slider:** remove dnb-range styling ([ #1890 ]( #1890 )) ([ 839edd5 ]( 839edd5 )) * **Space:** add conditional reset class: `dnb-space__reset` ([ #1961 ]( #1961 )) ([ 0de26fe ]( 0de26fe )) * **SpacingUtils:** deprecate createStyleObject ([ #1892 ]( #1892 )) ([ 385d6d3 ]( 385d6d3 )) * **StylisPlugin:** removes stylis plugin ([ #2156 ]( #2156 )) ([ 8c96969 ]( 8c96969 )) * **Switch:** deprecate default_state property ([ #1864 ]( #1864 )) ([ 03a6bd0 ]( 03a6bd0 )) * **Table:** deprecate sticky_offset ([ #1883 ]( #1883 )) ([ 57c10d0 ]( 57c10d0 )) * **Tags:** removed deprecated comments ([ #1857 ]( #1857 )) ([ 9c17d75 ]( 9c17d75 )) * **Theme:** add `darkMode` and `contrastMode` props ([ #2355 ]( #2355 )) ([ 04b350e ]( 04b350e )) * **Theming:** add `VisibilityByTheme` as a shared component ([ #2280 ]( #2280 )) ([ 2592658 ]( 2592658 )) * **Timeline:** deprecate name and date props ([ #1884 ]( #1884 )) ([ 74f56b1 ]( 74f56b1 )) * **Typography:** add `--line-height-lead` property ([ #2237 ]( #2237 )) ([ 8dc9ed8 ]( 8dc9ed8 )) * **Typography:** remove small prop from paragraph (p) ([ #2234 ]( #2234 )) ([ 06c5ba5 ]( 06c5ba5 )) * **Typography:** removed deprecated comments ([ #1858 ]( #1858 )) ([ 0916cde ]( 0916cde )) * **Typography:** Use text color on typography for Sbanken ([ #2363 ]( #2363 )) ([ f06291a ]( f06291a )) * use CSS vars in focus-ring (`fakeFocus`) ([ #2109 ]( #2109 )) ([ b0649d5 ]( b0649d5 )) ### 📝 Documentation * **Accordion:** improve docs of group & allow_close_all ([ #2070 ]( #2070 )) ([ 2790302 ]( 2790302 )) * add change log about v10 ([ bdba81b ]( bdba81b )) * add docs about how to maintain theming ([ #2097 ]( #2097 )) ([ 8bdfdb1 ]( 8bdfdb1 )) * add info about the tertiary button "visual" breaking change ([ 24bf0e7 ]( 24bf0e7 )) * add link to new Payment Card Figma file ([ #2117 ]( #2117 )) ([ 239c239 ]( 239c239 )) * add new styles flow diagram ([ 21e3b3c ]( 21e3b3c )) * Add Sbanken color table and -documentation ([ #2332 ]( #2332 )) ([ e4324f8 ]( e4324f8 )) * adds a dot to quick guide - designers ([ #2157 ]( #2157 )) ([ 3ba8a2e ]( 3ba8a2e )) * adds missing accents to values in docs ([ #2041 ]( #2041 )) ([ cc7460f ]( cc7460f )) * **Anchor:** fix console warning when using class ([ #2125 ]( #2125 )) ([ 85be7d5 ]( 85be7d5 )) * **Autocomplete:** minor spelling improvement in title ([ #2069 ]( #2069 )) ([ 6be0a77 ]( 6be0a77 )) * **Autocomplete:** minor spelling improvements ([ #2197 ]( #2197 )) ([ 3aa19a3 ]( 3aa19a3 )) * **Autocomplete:** refactor jsx examples to tsx ([ #2198 ]( #2198 )) ([ 6775dfb ]( 6775dfb )) * **Autocomplete:** update docs about the debounce method ([ #2138 ]( #2138 )) ([ e4e4865 ]( e4e4865 )) * **Avatar:** fixes broken properties table ([ #2030 ]( #2030 )) ([ b8c9ed4 ]( b8c9ed4 )) * **Best Practices:** adds a dot ([ #2151 ]( #2151 )) ([ 97e44aa ]( 97e44aa )) * **Best Practices:** adds links to children pages ([ #2161 ]( #2161 )) ([ 27d09a1 ]( 27d09a1 )) * **Breadcrumb:** improve event docs ([ 66aad32 ]( 66aad32 )) * capitalize component names in descriptions ([ #2162 ]( #2162 )) ([ 80fb3b2 ]( 80fb3b2 )) * **ColorsTable:** fixes color and hover effect ([ #2122 ]( #2122 )) ([ c82f570 ]( c82f570 )) * **Contact:** adds Joakim as contact ([ #2023 ]( #2023 )) ([ 43f9f47 ]( 43f9f47 )) * **Contribution Guide:** update legacy type definition handling ([ #2048 ]( #2048 )) ([ 2c16fd6 ]( 2c16fd6 )) * crate main doc for how to deal with brand ([ #2100 ]( #2100 )) ([ ae2416a ]( ae2416a )) * **CSS Styles:** fix console warning when using class ([ #2127 ]( #2127 )) ([ e903d69 ]( e903d69 )) * **Customization:** adds link to provider/context ([ #2160 ]( #2160 )) ([ 009e056 ]( 009e056 )) * **DatePicker:** refactor jsx examples to tsx ([ #2204 ]( #2204 )) ([ d2f1b42 ]( d2f1b42 )) * **Demo Apps:** fix console warning when using class ([ #2126 ]( #2126 )) ([ 74142e8 ]( 74142e8 )) * **DrawerList:** prevents change of direction when scrolling ([ #2233 ]( #2233 )) ([ cb4cbbd ]( cb4cbbd )) * **DrawerList:** refactor jsx examples to tsx ([ #2209 ]( #2209 )) ([ 65dff60 ]( 65dff60 )) * **DrawerList:** renamse fixedPosition to fixed_position ([ #2093 ]( #2093 )) ([ 8e9ae76 ]( 8e9ae76 )) * **Extension:** convert md to mdx files ([ #2026 ]( #2026 )) ([ ebc7988 ]( ebc7988 )) * fix outdated boolean usage ([ #2013 ]( #2013 )) ([ 99b816c ]( 99b816c )) * fix wrong Heading example about margin collapse ([ eb866a8 ]( eb866a8 )) * **Font Weights:** fix console warning when using class ([ #2132 ]( #2132 )) ([ 0fd9aa1 ]( 0fd9aa1 )) * **FormLabel:** improve description of vertical prop ([ #2098 ]( #2098 )) ([ 32020bd ]( 32020bd )) * **FormRow:** refactor jsx examples to tsx ([ #2219 ]( #2219 )) ([ 38fd221 ]( 38fd221 )) * **FormSet:** refactor jsx examples to tsx ([ #2208 ]( #2208 )) ([ db32e5f ]( db32e5f )) * **Fragments:** minor docs improvement ([ #2232 ]( #2232 )) ([ 151a800 ]( 151a800 )) * **Front Page:** minor text improvements ([ #2139 ]( #2139 )) ([ 5d9ad4d ]( 5d9ad4d )) * **getOffsetTop:** fix wrong docs and console.log usage ([ #2018 ]( #2018 )) ([ 9ba16b5 ]( 9ba16b5 )) * **GlobalStatus:** improve docs for id prop ([ #2067 ]( #2067 )) ([ 06e3ab1 ]( 06e3ab1 )) * **GlobalStatus:** refactor jsx examples to tsx ([ #2202 ]( #2202 )) ([ 91e4c05 ]( 91e4c05 )) * **Grid:** removes WIP ([ 350321c ]( 350321c )) * **Heading:** refactor jsx examples to tsx ([ #2205 ]( #2205 )) ([ 534294e ]( 534294e )) * **Helpers:** Adds info about dnb-unstyled-list in info page ([ #2171 ]( #2171 )) ([ 37251b5 ]( 37251b5 )) * **HTML Elements:** move mdx of unstyled and unsupported to elements.mdx ([ #2154 ]( #2154 )) ([ 0982c3e ]( 0982c3e )) * **Icon Details:** fix console warning when using class ([ #2128 ]( #2128 )) ([ 79760c5 ]( 79760c5 )) * **Icons:** link to v10 docs ([ #2182 ]( #2182 )) ([ 34c7184 ]( 34c7184 )) * **Input:** adds on_key_down event ([ #2062 ]( #2062 )) ([ ddbdff6 ]( ddbdff6 )) * **InputMasked:** refactor jsx examples to tsx ([ #2207 ]( #2207 )) ([ 1253896 ]( 1253896 )) * **Logos:** fix console warning in console ([ #2123 ]( #2123 )) ([ d4b5c4c ]( d4b5c4c )) * make click on anchor with hash work on first click ([ #2019 ]( #2019 )) ([ 85caef3 ]( 85caef3 )) * minor doc improvements ([ #2283 ]( #2283 )) ([ 654ae82 ]( 654ae82 )) * **Modal:** refactor jsx examples to tsx ([ #2218 ]( #2218 )) ([ 532a58f ]( 532a58f )) * Move Modal to Dialog/Drawer conversion docs to v10 migration ([ #1921 ]( #1921 )) ([ 9c6eed7 ]( 9c6eed7 )) * **Naming conventions:** fix console warning when using class ([ #2129 ]( #2129 )) ([ 46031d0 ]( 46031d0 )) * **NumberFormat:** fix info docs ([ #2009 ]( #2009 )) ([ af0e889 ]( af0e889 )) * **PaymentCard:** change imports of types to /payment-card ([ 41dc3ce ]( 41dc3ce )) * **Portal:** removes Modal's new status ([ #2312 ]( #2312 )) ([ c9d98dd ]( c9d98dd )) * **ProgressIndicator:** removes props min_time and variant ([ #1997 ]( #1997 )) ([ 26cce3f ]( 26cce3f )) * **ProgressIndicator:** Update size properties ([ a02a8fe ]( a02a8fe )) * **Radio:** improve event docs ([ 9383afb ]( 9383afb )) * refactor contribution guide getting started ([ #2008 ]( #2008 )) ([ 0a7cfdd ]( 0a7cfdd )) * remove `smoothscroll-polyfill` as a recommendation ([ #2020 ]( #2020 )) ([ bae2e89 ]( bae2e89 )) * remove docs about CSS vars polyfills ([ #2145 ]( #2145 )) ([ e423d2d ]( e423d2d )) * remove docs about importing from @dnb/eufemia/elements ([ #2173 ]( #2173 )) ([ 6d0bfed ]( 6d0bfed )) * remove outdated info ([ #1940 ]( #1940 )) ([ 0f77115 ]( 0f77115 )) * remove properties import from docs ([ #2034 ]( #2034 )) ([ a0aaffc ]( a0aaffc )) * removes cards and spaceholder indicator ([ #2061 ]( #2061 )) ([ f8abfb6 ]( f8abfb6 )) * **ScrollView:** controll -> control ([ #2225 ]( #2225 )) ([ 17db885 ]( 17db885 )) * **ScrollView:** refactor jsx examples to tsx ([ #2210 ]( #2210 )) ([ 1f97545 ]( 1f97545 )) * **ScrollView:** sets Description as header in docs ([ #2168 ]( #2168 )) ([ 2d05405 ]( 2d05405 )) * **Skeleton:** refactor jsx examples to tsx ([ #2203 ]( #2203 )) ([ dabdba6 ]( dabdba6 )) * **SkipContent:** hide Events tab ([ #2282 ]( #2282 )) ([ fcbe37b ]( fcbe37b )) * **SkipContent:** refactor jsx examples to tsx ([ #2211 ]( #2211 )) ([ df34f0c ]( df34f0c )) * **Space:** refactor jsx examples to tsx ([ #2199 ]( #2199 )) ([ de7645c ]( de7645c )) * **Space:** refactor jsx properties to tsx ([ #2216 ]( #2216 )) ([ ecb941e ]( ecb941e )) * **StepIndicator:** format Steps Parameters table ([ #2284 ]( #2284 )) ([ 884a09e ]( 884a09e )) * **Table:** add info about the needed CSS class in v10 ([ #1923 ]( #1923 )) ([ 407977e ]( 407977e )) * **Table:** enhance info about the component and possibilities ([ #2336 ]( #2336 )) ([ f376d1d ]( f376d1d )) * **Table:** improve event docs ([ e025745 ]( e025745 )) * **Table:** refactor jsx examples to tsx ([ #2206 ]( #2206 )) ([ f2d1c72 ]( f2d1c72 )) * **Tag:** improve event docs ([ 4a01c08 ]( 4a01c08 )) * **Timeline:** fix broken link to example ([ #2241 ]( #2241 )) ([ 418979b ]( 418979b )) * **ToggleButton:** improve event docs ([ a351019 ]( a351019 )) * **ToggleButton:** removes outdated label_position docs ([ #2141 ]( #2141 )) ([ a067f31 ]( a067f31 )) * **TypeScript:** remove outdated docs ([ #2124 ]( #2124 )) ([ 497b3c3 ]( 497b3c3 )) * **Typography:** fix console warning when using class ([ #2133 ]( #2133 )) ([ 3088447 ]( 3088447 )) * **Typography:** hast -> has ([ #2221 ]( #2221 )) ([ 3ae59d5 ]( 3ae59d5 )) * update docs about CSS formatting and styling ([ #1964 ]( #1964 )) ([ 9b85816 ]( 9b85816 )) * update v10 change log ([ #1983 ]( #1983 )) ([ 8235f50 ]( 8235f50 )) * update v10-info ([ #1998 ]( #1998 )) ([ 47fa420 ]( 47fa420 )) * **v10:** add docs for HelpButton's modal_props ([ #2314 ]( #2314 )) ([ 4e825ee ]( 4e825ee )) * **v10:** add example for updating import of properties ([ #2313 ]( #2313 )) ([ fdee6c3 ]( fdee6c3 )) * **v10:** adds examples for updating import of boolean props ([ 47f31f1 ]( 47f31f1 )) * **v10:** adds examples for updating imports to assets and fonts ([ f6adcef ]( f6adcef )) * **v10:** adds explicit examples for props that's changes type to boolean ([ #2292 ]( #2292 )) ([ 6b23682 ]( 6b23682 )) * **v10:** adds info about removal of closeButtonAttributes ([ #2296 ]( #2296 )) ([ 8859256 ]( 8859256 )) * **v10:** adds info about removal of closeButtonAttributes ([ #2296 ]( #2296 )) ([ b68b5bd ]( b68b5bd )) * **v10:** adds info about replacing white with default ([ #2295 ]( #2295 )) ([ c938f4d ]( c938f4d )) * **v10:** improve docs for EufemiaStyleImporter files ([ #2302 ]( #2302 )) ([ 9c0d692 ]( 9c0d692 )) * **v10:** improves docs of browser assets ([ c0c0a3c ]( c0c0a3c )) * **v10:** minor spelling improvement ([ #2301 ]( #2301 )) ([ 8105026 ]( 8105026 )) * **v10:** prop change for FormStatus of status to state ([ #2293 ]( #2293 )) ([ 0cc65be ]( 0cc65be )) * **v10:** where -> was ([ 44eeeb8 ]( 44eeeb8 ))