feat(PanelHeaderButton): add Badge support in label prop

[BlackySoul]

• close [Feature]: Badge вложенный как label в PanelHeaderButton должен правильно позиционироваться  #6612

---

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

Описание

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

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

Изменения

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

Release notes

Улучшения

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

[github-actions]

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]

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]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit e013ff1

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

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

Additional details and impacted files

@@           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	Coverage Δ
unittests	95.18% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[andrey-medvedev-vk]

👍

[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 и т.д.

[Zaycevq]

👍🏽