feat(PanelHeaderButton): add Badge support in label prop

[BlackySoul]

• close #6612

---

• [x] e2e-тесты
• [x] Дизайн-ревью
• [x] Release notes

Описание

Необходимо с соответствии с дизайном добавить поддержку Badge в PanelHeaderButton

Целевое решение: в версии v7 (оставила коммент) необходимо будет разграничить label и добавить св-во indicator, которое позволит убрать немного лапшу в css

Изменения

Получилась очень некрасивая портянка в CSS, пришлось добавить глобальный класс vkuiInternalBadge, потому что в дизайне сложные правила применения отступов. Попробовала попросить дизайн как-то покрутить, чтобы отступы были одинаковые, но ничего не получилось 😞

Release notes

Улучшения

• PanelHeaderButton: добавлена поддержка компонента Badge в label

[github-actions[bot]]

size-limit report 📦

Path	Size
JS	381.07 KB (-0.01% 🔽)
JS (gzip)	115.36 KB (+0.01% 🔺)
JS (brotli)	94.69 KB (+0.02% 🔺)
JS import Div (tree shaking)	1.45 KB (0%)
CSS	309.67 KB (+0.13% 🔺)
CSS (gzip)	39.75 KB (+0.15% 🔺)
CSS (brotli)	31.93 KB (+0.17% 🔺)

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[github-actions[bot]]

e2e tests

Playwright Report

[github-actions[bot]]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit e013ff12c8e71417cd5193311c1a6f85d088605a

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 95.18%. Comparing base (1155141) to head (e013ff1). Report is 24 commits behind head on master.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #7526 +/- ## ======================================= Coverage 95.18% 95.18% ======================================= Files 384 384 Lines 11225 11225 Branches 3682 3682 ======================================= Hits 10684 10684 Misses 541 541 ``` | [Flag](https://app.codecov.io/gh/VKCOM/VKUI/pull/7526/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=VKCOM) | Coverage Δ | | |---|---|---| | [unittests](https://app.codecov.io/gh/VKCOM/VKUI/pull/7526/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=VKCOM) | `95.18% <ø> (ø)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=VKCOM#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[SevereCloud]

Целевое решение: в версии v7 (оставила коммент) необходимо будет разграничить label и добавить св-во indicator, которое позволит убрать немного лапшу в css

Или можно сделать BadgedBox как в compose

[BlackySoul]

Целевое решение: в версии v7 (оставила коммент) необходимо будет разграничить label и добавить св-во indicator, которое позволит убрать немного лапшу в css

Или можно сделать BadgedBox как в compose

Типа вот такое API организовать?

<PanelHeader
  after={
    <BadgedBox
      badge={
        <Counter size="s" mode="prominent">
          <VisuallyHidden>Обновлений: </VisuallyHidden>
          21
        </Counter>
      }
    >
      <PanelHeaderButton onClick={noop}>
        <VisuallyHidden>Изображения</VisuallyHidden>
        <AdaptiveIconRenderer
          IconCompact={Icon24PictureOutline}
          IconRegular={Icon28PictureOutline}
        />
      </PanelHeaderButton>
    </BadgedBox>
  }
>
  Вторая панель
</PanelHeader>

[SevereCloud]

Типа вот такое API организовать?

Скорее обертку для иконки

<PanelHeaderButton onClick={noop}>
     <VisuallyHidden>Изображения</VisuallyHidden>

    <BadgedBox
      badge={
        <Counter size="s" mode="prominent">
          <VisuallyHidden>Обновлений: </VisuallyHidden>
          21
        </Counter>
      }
    >
        <AdaptiveIconRenderer
          IconCompact={Icon24PictureOutline}
          IconRegular={Icon28PictureOutline}
        />
    </BadgedBox>
</PanelHeaderButton>

Можно попробовать исхитрится и сделать отступы без использования глобальных классов, примерно так(размеры для m3, код мой):

.host {
  position: relative;
  inline-size: 24px;
  block-size: 24px;
}

.badge {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-inline-size: 12px;
  padding-inline-start: 12px;
  min-block-size: 12px;
  padding-block-end: 12px;
  inset-block-end: 0;
}

[BlackySoul]

Скорее обертку для иконки

<PanelHeaderButton onClick={noop}>
     <VisuallyHidden>Изображения</VisuallyHidden>

    <BadgedBox
      badge={
        <Counter size="s" mode="prominent">
          <VisuallyHidden>Обновлений: </VisuallyHidden>
          21
        </Counter>
      }
    >
        <AdaptiveIconRenderer
          IconCompact={Icon24PictureOutline}
          IconRegular={Icon28PictureOutline}
        />
    </BadgedBox>
</PanelHeaderButton>

Кажется, это будет не особо сочетаться с текущим API у компонентов PanelHeaderBack, PanelHeaderSubmit и т.д.