feat(SegmentedControl): add before (#5959)

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: <Icon24LogoVk />, value: 'vk' },
+              { label: 'fb', before: <Icon24LogoFacebook />, value: 'fb' },
+              { label: 'google', before: <Icon24LogoGoogle />, value: 'google' },
+            ],
+          ],
+        },
       ]}
     >
       {(props: SegmentedControlProps) => <SegmentedControl {...props} />}

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
  */

packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx

@@ -20,6 +20,11 @@ export type SegmentedControlValue = string | number | undefined;
 
 export interface SegmentedControlOptionInterface
   extends Omit<React.HTMLAttributes<HTMLElement>, '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 }) => (
           <SegmentedControlOption
             key={`${optionProps.value}`}
             {...optionProps}
-            className={classNames(styles['SegmentedControl__option'], optionClassName)}
             name={name ?? id}
             checked={value === optionProps.value}
             onChange={() => onChange(optionProps.value)}

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;
 }

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<HTMLInputElement>,
     HasRootRef<HTMLLabelElement>,
-    HasRef<HTMLInputElement> {}
+    HasRef<HTMLInputElement> {
+  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)}
       />
-      <Headline className={styles['SegmentedControlOption__content']} level="2" weight="2">
+      {hasReactNode(before) && (
+        <div className={styles['SegmentedControlOption__before']}>{before}</div>
+      )}
+      <Headline level="2" weight="2">
         {children}
       </Headline>
       <FocusVisible visible={focusVisible} mode="inside" />