feat(Card): add mode plain

[EldarMuhamethanov]

• close [Feature][Card]: plain режим отображения компонента #7513

---

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

Описание

Нужно добавить mode="plain" для компонента Card.

Release notes

Улучшения

• Card: добавлен mode "plain"

[github-actions]

size-limit report 📦

Path	Size
JS	382.63 KB (+0.01% 🔺)
JS (gzip)	122.43 KB (+0.02% 🔺)
JS (brotli)	101.41 KB (+0.05% 🔺)
JS import Div (tree shaking)	1.47 KB (0%)
CSS	342.22 KB (+0.01% 🔺)
CSS (gzip)	49.33 KB (+0.02% 🔺)
CSS (brotli)	39.98 KB (+0.08% 🔺)

[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 660a5c0

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.36%. Comparing base (47187e8) to head (660a5c0).
Report is 8 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7824   +/-   ##
=======================================
  Coverage   95.36%   95.36%           
=======================================
  Files         376      376           
  Lines       11043    11044    +1     
  Branches     3664     3665    +1     
=======================================
+ Hits        10531    10532    +1     
  Misses        512      512           

Flag	Coverage Δ
unittests	95.36% <100.00%> (+<0.01%)	⬆️

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.

[qurle]

Добавим в стайлгайд?

[EldarMuhamethanov]

Добавим в стайлгайд?

Поскольку у карточки нет ни бордеров ни теней, то ее просто видно не будет на обычном фоне. Только разве под нее добавлять какой-то фон особенный, а если добавлять то какой?

[qurle]

Можно так

или как в дизайне через шахматы

[EldarMuhamethanov]

@qurle Добавил пример в styleguide

[qurle]

Там очепятка в инлайновом стиле и шапка другая...
Давайте вот так, если вам оки

<View activePanel="card">
  <Panel id="card">
    <PanelHeader>Card</PanelHeader>
    <Group>
      <Group mode="plain" header={<Header size="s">Стандартный стиль</Header>}>
        <CardGrid size="l">
          <Card>
            <div style={{ height: 96 }} />
          </Card>
        </CardGrid>
      </Group>
      <Group mode="plain" header={<Header size="s">Стандартный фон с обводкой</Header>}>
        <CardGrid size="l">
          <Card mode="outline-tint">
            <div style={{ height: 96 }} />
          </Card>
        </CardGrid>
      </Group>
      
    </Group>
    <Group style={{ background: 'var(--vkui--color_background_secondary)' }}>
      <Group mode="plain" header={<Header  size="s">Светлый фон без обводки и тени</Header>}>
        <CardGrid size="l">
          <Card mode="plain">
            <div style={{ height: 96 }} />
          </Card>
        </CardGrid>
      </Group>
      <Group mode="plain" header={<Header size="s">Светлый фон с обводкой</Header>}>
        <CardGrid size="l">
          <Card mode="outline">
            <div style={{ height: 96 }} />
          </Card>
        </CardGrid>
      </Group>
      <Group mode="plain" header={<Header size="s">Светлый фон с тенью</Header>}>
        <CardGrid size="l">
          <Card mode="shadow">
            <div style={{ height: 96 }} />
          </Card>
        </CardGrid>
      </Group>
    </Group>
  </Panel>
</View>

[qurle]

У меня не обновилось по ссылке сверху, но в общем-то доверяю

[EldarMuhamethanov]

У меня не обновилось по ссылке сверху, но в общем-то доверяю

Странно, что не обновилось по ссылке, но локально обновилось)