refactor(Breadcrumbs)!: use gap property for gaps between breadcrumbs items instead of paddings

[isqua]

I use the Breadcrumbs component next to the other components, and would like the breadcrumbs to be aligned relative to the other components on the left edge. But the Breadcrumbs has a little gap on the left:

It is because the padding property is used to create gaps between breadcrumbs items and diviers:

I also found an issue on this topic: #956

So I suggest to use the gap property for the parent of all items. This way there will be margins between the items, but the left and right items will not have an indentation.

Compare main branch preview and current branch preview

UPD: Please wait til I fix screenshot tests

[gravity-ui-bot]

Preview is ready.

[isqua]

@korvin89 as you asked me in a chat, I tried to update tests for the component. But I faced an issue. I run the command npm run playwright:docker:update locally on my Apple M1, and it fails with the error:

RollupError: Could not resolve "./../../../path/to/gravity-ui/uikit/src/components/Avatar/__tests__/stories.ts" from "playwright/playwright/index.tsx"

More detailed log here

> @gravity-ui/[email protected] playwright:docker:update
> docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.38.1-jammy /bin/bash -c 'npm ci && npm run playwright:update'

> @gravity-ui/[email protected] playwright:update
> npm run playwright -- -u

> @gravity-ui/[email protected] playwright
> playwright test --config=playwright/playwright.config.ts -u

Running 56 tests using 1 worker

vite v4.4.11 building for production...
✓ 4 modules transformed.
✓ built in 881ms
Could not resolve "./../../../path/to/gravity-ui/uikit/src/components/Avatar/__tests__/stories.ts" from "playwright/playwright/index.tsx"
file: /work/playwright/playwright/index.tsx
RollupError: Could not resolve "./../../../path/to/gravity-ui/uikit/src/components/Avatar/__tests__/stories.ts" from "playwright/playwright/index.tsx"

    at error (/work/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at ModuleLoader.handleInvalidResolvedId (/work/node_modules/rollup/dist/es/shared/node-entry.js:24860:24)
    at ModuleLoader.resolveDynamicImport (/work/node_modules/rollup/dist/es/shared/node-entry.js:24920:58)
    at /work/node_modules/rollup/dist/es/shared/node-entry.js:24807:32

  56 skipped
transforming (26) ../node_modules/@storybook/client-api/dist/entry.mjs
To open last HTML report run:

  npx playwright show-report

In CI all tests passed:

  1 skipped
  55 passed (27.8s)

But the job failed because of missed token:

Input required and not supplied: GITHUB_TOKEN

What should be the next step to get this PR merged?

[korvin89]

Hey @isqua! Here is a related issue #1266