feat(Card): Add outline-tint mode (#5533)

* feat(Card): Add outline-tint mode
VKCOM · Aug 10, 2023 · 56617e6 · 56617e6
1 parent 38ec4d4
commit 56617e6
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 23 deletions.
diff --git a/packages/vkui/src/components/Card/Card.e2e-playground.tsx b/packages/vkui/src/components/Card/Card.e2e-playground.tsx
@@ -12,7 +12,7 @@ export const CardPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          mode: ['tint', 'shadow', 'outline'],
+          mode: ['tint', 'shadow', 'outline', 'outline-tint'],
         },
       ]}
     >

diff --git a/packages/vkui/src/components/Card/Card.module.css b/packages/vkui/src/components/Card/Card.module.css
@@ -17,7 +17,7 @@
   background: var(--vkui--color_background_modal);
 }
 
-.Card--mode-outline::after {
+.Card--withBorder::after {
   position: absolute;
   left: 0;
   top: 0;

diff --git a/packages/vkui/src/components/Card/Card.tsx b/packages/vkui/src/components/Card/Card.tsx
@@ -6,7 +6,7 @@ import styles from './Card.module.css';
 export interface CardProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
-  mode?: 'tint' | 'shadow' | 'outline';
+  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';
 }
 
 /**
@@ -19,6 +19,7 @@ export const Card = ({
   className,
   ...restProps
 }: CardProps) => {
+  const withBorder = mode === 'outline' || mode === 'outline-tint';
   return (
     <div
       {...restProps}
@@ -27,6 +28,7 @@ export const Card = ({
         styles['Card'],
         mode === 'outline' && styles['Card--mode-outline'],
         mode === 'shadow' && styles['Card--mode-shadow'],
+        withBorder && styles['Card--withBorder'],
         className,
       )}
     >

diff --git a/packages/vkui/src/components/Card/Readme.md b/packages/vkui/src/components/Card/Readme.md
@@ -24,6 +24,16 @@
           </Card>
         </CardGrid>
       </Group>
+      <Group
+        mode="plain"
+        header={<Header mode="secondary">С внутренней обводкой и дефолтным фоном</Header>}
+      >
+        <CardGrid size="l">
+          <Card mode="outline-tint">
+            <div style={{ height: 96 }} />
+          </Card>
+        </CardGrid>
+      </Group>
     </Group>
   </Panel>
 </View>

diff --git a/...i/src/components/Card/__image_snapshots__/card-android-chromium-dark-1-snap.png b/...i/src/components/Card/__image_snapshots__/card-android-chromium-dark-1-snap.png
diff --git a/.../src/components/Card/__image_snapshots__/card-android-chromium-light-1-snap.png b/.../src/components/Card/__image_snapshots__/card-android-chromium-light-1-snap.png
diff --git a/...es/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-dark-1-snap.png b/...es/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-dark-1-snap.png
diff --git a/...s/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-light-1-snap.png b/...s/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-light-1-snap.png
diff --git a/...kui/src/components/Card/__image_snapshots__/card-vkcom-chromium-dark-1-snap.png b/...kui/src/components/Card/__image_snapshots__/card-vkcom-chromium-dark-1-snap.png
diff --git a/...ui/src/components/Card/__image_snapshots__/card-vkcom-chromium-light-1-snap.png b/...ui/src/components/Card/__image_snapshots__/card-vkcom-chromium-light-1-snap.png
diff --git a/...vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-dark-1-snap.png b/...vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-dark-1-snap.png
diff --git a/...kui/src/components/Card/__image_snapshots__/card-vkcom-firefox-light-1-snap.png b/...kui/src/components/Card/__image_snapshots__/card-vkcom-firefox-light-1-snap.png
diff --git a/.../vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-dark-1-snap.png b/.../vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-dark-1-snap.png
diff --git a/...vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-light-1-snap.png b/...vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-light-1-snap.png