diff --git a/packages/vkui/src/components/Card/Card.e2e-playground.tsx b/packages/vkui/src/components/Card/Card.e2e-playground.tsx index 1acea4982d..cd0f6af79e 100644 --- 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 index 3405ac198f..9a769af03b 100644 --- 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 index a83f93c6c8..f891654ec0 100644 --- 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, HasRootRef { - 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 (
diff --git a/packages/vkui/src/components/Card/Readme.md b/packages/vkui/src/components/Card/Readme.md index 84042acd7c..0962ece653 100644 --- a/packages/vkui/src/components/Card/Readme.md +++ b/packages/vkui/src/components/Card/Readme.md @@ -24,6 +24,16 @@ + С внутренней обводкой и дефолтным фоном} + > + + +
+ + + diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-android-chromium-dark-1-snap.png index df0519d115..52720f73e0 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:56331cb871869c0923e60b7ecae868da9619bd34d4f558db86e3755d74041f25 -size 9904 +oid sha256:1bac2519cbfbeaefb54568a98424498327178fd357f4e09ea57a2a7117252e42 +size 12996 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-android-chromium-light-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-android-chromium-light-1-snap.png index 682bc33b2a..7d177c53f6 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8e4d7f0dd33cf69433b980356171bb8149a09eb311cb8fa5e6ca2fdf2a437cb2 -size 9646 +oid sha256:dd769dc6ed9ad3da857dd7e048a29187bb57f34a16842e614ffce293ea59fdf2 +size 12493 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-dark-1-snap.png index bacae38b2e..a0c40c6104 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:06ca1283d38de9598397d81dce692890ec96e1cb37794121c6685d834df37e16 -size 9428 +oid sha256:97db836dd8153be7065da5ce79c5611e90ff030914bcb583782a2cbd6261bdbd +size 12392 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-light-1-snap.png index 5961547353..3e94f2f355 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:950bcb422b6294658aa8813167aac01296d53cd405a8eb60af996ff2cdabc8cb -size 9130 +oid sha256:c74ff71ef973c13135fa16866f499d5623ebc7daa0974a78bf1437555c22cf7a +size 11836 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-chromium-dark-1-snap.png index d3f85d908f..32bedbde85 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:01784483b68ab8f921300142371f1c9e724e4bfe764d952c7f4a1fade574f982 -size 7582 +oid sha256:841e1ab9b555f76dc10a84e2768b6c3be6cb4b3781d41e6664fccdb9af813533 +size 10328 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-chromium-light-1-snap.png index b0cc5ca395..b87d1ea9f2 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4cb2deadc56354b73e0e1cde21c974a9d7ff50beeb43cd652f250f582172c6d4 -size 7655 +oid sha256:5a62606c9b5bbb13d60fbfa3c43078449f45d902b58a8ba353ad9167b71d6cdf +size 10416 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-dark-1-snap.png index 7904f42c46..58b9084bcc 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ea6fb4860684cc6aec7fe9110d20dafeb368325bc972224c56f9f6f353fbcb5a -size 7354 +oid sha256:ba0097ba95b8cca9b9c838c3e5310c505b331eca4715e3ef965318fdcd3c1e1c +size 9920 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-light-1-snap.png index 51247c3a20..8e9f79e17b 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a0c0bdf595381a6c9f13702910ab24d31b1708b802f5204fb061a18f340f197 -size 8264 +oid sha256:95aef4fe1a51b9fe41f9ec350ca49c2650270fb6bc0cecacc11a443869e7cc7c +size 11677 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-dark-1-snap.png index 68e11fdd17..4bedc0378c 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:29be9349264a6bd6491c2094d5538d85f58dbb97b37ef262d1f83f89ccdd1d02 -size 6935 +oid sha256:aeaa9f6d0881bf7b71a25bea7544bfc7ac91ca1796e8e70c22170a01de595a5c +size 9531 diff --git a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-light-1-snap.png index cc407f8bf0..dd968cd1b6 100644 --- a/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Card/__image_snapshots__/card-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b616b87dfc7dce7e24389177f8809c712fc8a6d3352aaed2b084524ac68983fa -size 7120 +oid sha256:5ac287050a120e1b4616f763e9429c61d1efcf4e3ce5835b1018e69fc9f02553 +size 9735 diff --git a/packages/vkui/src/components/Tappable/Tappable.module.css b/packages/vkui/src/components/Tappable/Tappable.module.css index 40eb4c4215..39c34c702c 100644 --- a/packages/vkui/src/components/Tappable/Tappable.module.css +++ b/packages/vkui/src/components/Tappable/Tappable.module.css @@ -119,6 +119,10 @@ https://github.com/VKCOM/VKUI/pull/3641 } } +.Tappable.Tappable--borderRadiusInherit { + border-radius: inherit; +} + /** * Animations */ diff --git a/packages/vkui/src/components/Tappable/Tappable.tsx b/packages/vkui/src/components/Tappable/Tappable.tsx index 6a204e7210..9eb320f14d 100644 --- a/packages/vkui/src/components/Tappable/Tappable.tsx +++ b/packages/vkui/src/components/Tappable/Tappable.tsx @@ -87,6 +87,11 @@ export interface TappableProps focusVisibleMode?: LiteralUnion; onEnter?(outputEvent: MouseEvent): void; onLeave?(outputEvent: MouseEvent): void; + /** + * Задает border-radius элементу + * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular` + */ + borderRadiusMode?: 'auto' | 'inherit'; } interface Wave { @@ -195,6 +200,7 @@ export const Tappable = ({ onLeave, className, hovered: hoveredProp, + borderRadiusMode = 'auto', ...props }: TappableProps) => { Component = Component || ((props.href ? 'a' : 'div') as React.ElementType); @@ -330,6 +336,7 @@ export const Tappable = ({ opacity: styles['Tappable--active-opacity'], }[activeMode], focusVisible && styles['Tappable--focus-visible'], + borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'], ); const handlers: RootComponentProps = {