diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e-playground.tsx b/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e-playground.tsx index 1dc14d03d7..da9a74f38d 100644 --- a/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e-playground.tsx +++ b/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e-playground.tsx @@ -31,6 +31,15 @@ export const SegmentedControlPlayground = (props: ComponentPlaygroundProps) => { size: ['m', 'l'], $adaptivity: 'y', }, + { + options: [ + [ + { label: 'vk', before: , value: 'vk' }, + { label: 'fb', before: , value: 'fb' }, + { label: 'google', before: , value: 'google' }, + ], + ], + }, ]} > {(props: SegmentedControlProps) => } diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControl.module.css b/packages/vkui/src/components/SegmentedControl/SegmentedControl.module.css index 81b19f905a..a060fe3df5 100644 --- a/packages/vkui/src/components/SegmentedControl/SegmentedControl.module.css +++ b/packages/vkui/src/components/SegmentedControl/SegmentedControl.module.css @@ -33,14 +33,6 @@ 0 3px 1px rgba(0, 0, 0, 0.04); } -.SegmentedControl__option { - position: relative; - flex: 1; - display: block; - margin: 0; - padding: 0; -} - /** * sizeY REGULAR */ diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx b/packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx index 5c25be2e79..dad92abcfd 100644 --- a/packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx +++ b/packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx @@ -20,6 +20,11 @@ export type SegmentedControlValue = string | number | undefined; export interface SegmentedControlOptionInterface extends Omit, 'label'> { + /** + * Вставляет элемент перед основным контентом. + * Рекомендуется использовать только иконки с размером 20 + */ + before?: React.ReactNode; label: React.ReactChild; value: SegmentedControlValue; } @@ -90,11 +95,10 @@ export const SegmentedControl = ({ }} /> )} - {options.map(({ label, className: optionClassName, ...optionProps }) => ( + {options.map(({ label, ...optionProps }) => ( onChange(optionProps.value)} diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.module.css b/packages/vkui/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.module.css index 1af687e58c..c084281e62 100644 --- a/packages/vkui/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.module.css +++ b/packages/vkui/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.module.css @@ -9,22 +9,17 @@ box-sizing: border-box; cursor: pointer; appearance: none; -} - -.SegmentedControlOption :global(.vkuiIcon) { - color: var(--vkui--color_icon_primary); + display: flex; + position: relative; + justify-content: center; + align-items: center; + flex: 1; } .SegmentedControlOption:not(.SegmentedControlOption--checked):hover { opacity: 0.5; } -.SegmentedControlOption__content { - display: flex; - align-content: center; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; - border-radius: inherit; +.SegmentedControlOption__before { + margin-right: 6px; } diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx b/packages/vkui/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx index be4901bd06..30beaf0cd8 100644 --- a/packages/vkui/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx +++ b/packages/vkui/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { classNames } from '@vkontakte/vkjs'; +import { classNames, hasReactNode } from '@vkontakte/vkjs'; import { useFocusVisible } from '../../../hooks/useFocusVisible'; import { callMultiple } from '../../../lib/callMultiple'; import { HasRef, HasRootRef } from '../../../types'; @@ -11,7 +11,9 @@ import styles from './SegmentedControlOption.module.css'; export interface SegmentedControlOptionProps extends React.InputHTMLAttributes, HasRootRef, - HasRef {} + HasRef { + before?: React.ReactNode; +} /** * @see https://vkcom.github.io/VKUI/#/SegmentedControl @@ -22,6 +24,7 @@ export const SegmentedControlOption = ({ style, children, getRootRef, + before, ...restProps }: SegmentedControlOptionProps) => { const { focusVisible, onBlur, onFocus } = useFocusVisible(); @@ -44,7 +47,10 @@ export const SegmentedControlOption = ({ onBlur={callMultiple(onBlur, restProps.onBlur)} onFocus={callMultiple(onFocus, restProps.onFocus)} /> - + {hasReactNode(before) && ( +
{before}
+ )} + {children} diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-android-chromium-dark-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-android-chromium-dark-1-snap.png index 586f736da1..ce9f033a01 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2eec32cd959ece1e7e37d82c615e48b2a149bbb167cc2292d8b8d703d4e5f79e -size 59188 +oid sha256:b65f1a026ec9dfe69a9ea34e8a31cf9ed87bed9ecaaee8db33f997dbcc193ee2 +size 78559 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-android-chromium-light-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-android-chromium-light-1-snap.png index 06343913cd..282d8ddf7f 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:abad41143d3ef06c584f6e6350ca1b93588fd03b9168b0c79dbad7535c997019 -size 60253 +oid sha256:62ea37c6e83306e89c31459c7828c649a558ffc2eabdb059036b88901a94306e +size 79572 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-ios-webkit-dark-1-snap.png index eb01ab7b6a..c75481099f 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ad4d48a4f55c043ae0e84fff8e9f33fbe25adb23449132f814cd0649e458e305 -size 52666 +oid sha256:56b0e5edf1807191543c026a5c3f9928fa9a17f2c70460e337f456a61a636097 +size 70379 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-ios-webkit-light-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-ios-webkit-light-1-snap.png index c168a54d7e..c770ceb992 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c98723096c0efc916c863011c176800e41fc2ce29a8d4e78cfc5af3aa73a48f0 -size 54047 +oid sha256:e555448da4336da9348c3679fdbd9ce8491f93f8396b35fe2e742fd995e565c7 +size 71788 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-chromium-dark-1-snap.png index cc04b419d9..a94a798609 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d94bc7880c41504f2a67b2da1ee8a8acb2c0833422a7a1cd8e2268ca13666f86 -size 37121 +oid sha256:f2fa25239268bdc83e49379b4fc91093e441cd6edcb228011740b5809ca6c330 +size 53284 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-chromium-light-1-snap.png index 786c9820a4..c0ba745f32 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d8dde0a43532688d2404df4054da94f5af4c1af75067df102249d9272c9b1577 -size 38385 +oid sha256:9900db4635cbec5135112bbf2686d620d3900a392649864d0b28e100da948943 +size 54840 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-firefox-dark-1-snap.png index 287a6fdff4..85840b070d 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a14341d4f330b4cec9e11e16aaccfa38c85be95838ffe70fcf5e027fad24dbf0 -size 59154 +oid sha256:ff6c14935ac1cfb96d76bdb0321299784618c4ff5a8c13a4d387c881192476a9 +size 82867 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-firefox-light-1-snap.png index f1c94e50aa..bb45174ade 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8bcbe20e34f1704bcbb36fba336daf88752f0d7ace10097640059508d9923ef1 -size 61250 +oid sha256:fd95e63e4233b5758eec878e9cf18317c78d976fc20a9e27b659933b08a93569 +size 85332 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-webkit-dark-1-snap.png index 965820fc2a..1d0d61d7c5 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5f742916c19ce3befbb088a2fdb867b1297d76cbcd0c861e1b70af0e1b70fd33 -size 32859 +oid sha256:dc7e0eb22d517cf095cc4905e7f7041948175fb85c3610c22053d25eee4d7b81 +size 47030 diff --git a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-webkit-light-1-snap.png index 601b6b91af..d5a42c6532 100644 --- a/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/SegmentedControl/__image_snapshots__/segmentedcontrol-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:01add6b05631c2e510385def3405a91f4c770e9448a1ce2209da8c9b651368b6 -size 34732 +oid sha256:8a9830a888ff870a94fd698f8b6c6625b83b0f2411df87ae506a4f3170c3e4ab +size 49596