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