Segmented Control - Component label (#3212)

* added a label to the segmented control

* Added sanity tests

Author: nitzanyiz

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -18,7 +18,8 @@ const segments: Record<string, Array<SegmentedControlItemProps>> = {
   fifth: [{label: 'Full'}, {label: 'Width'}],
   sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
   seventh: [{label: '$'}, {label: '%'}],
-  eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}]
+  eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}],
+  ninth: [{label: 'with'}, {label: 'a'}, {label: 'label'}]
 };
 
 const SegmentedControlScreen = () => {
@@ -87,6 +88,15 @@ const SegmentedControlScreen = () => {
           style={styles.customStyle}
           segmentsStyle={styles.customSegmentsStyle}
         />
+        <Text marginT-s4 center>
+          With a label
+        </Text>
+        <SegmentedControl
+          containerStyle={styles.container}
+          segments={segments.ninth}
+          preset={screenPreset}
+          label="Control label"
+        />
       </View>
     </View>
   );

src/components/segmentedControl/__tests__/index.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import SegmentedControl, {type SegmentedControlProps} from '../index';
+
+const testSegmentes = [{label: 'Segmented 1'}, {label: 'Segmented 2'}, {label: 'Segmented 3'}, {label: 'Segmented 4'}];
+
+const TestCase = (props: Partial<SegmentedControlProps>) => {
+  return <SegmentedControl segments={testSegmentes} {...props}/>;
+};
+
+describe('SegmentedControl', () => {
+  it('should render', () => {
+    const renderTree = render(<TestCase/>);
+    expect(renderTree).toBeTruthy();
+  });
+  it('should render with a label', () => {
+    const renderTree = render(<TestCase label="Test Label"/>);
+    expect(renderTree.queryByText('Test Label')).toBeTruthy();
+  });
+});

src/components/segmentedControl/index.tsx

@@ -14,6 +14,7 @@ import {Constants, asBaseComponent} from '../../commons/new';
 import View from '../view';
 import Segment, {SegmentedControlItemProps} from './segment';
 import useSegmentedControlPreset from './useSegmentedControlPreset';
+import Text, {TextProps} from '../text';
 
 const CONTAINER_BORDER_WIDTH = 1;
 const TIMING_CONFIG = {
@@ -94,6 +95,14 @@ export type SegmentedControlProps = {
    * Preset type
    */
   preset?: Presets | `${Presets}`;
+  /**
+   * SegmentedControl label
+   */
+  label?: string;
+  /**
+   * Pass props for the SegmentedControl label
+   */
+  labelProps?: TextProps;
 };
 
 const nonAreUndefined = <T, >(array: Array<T | undefined>): array is Array<T> => {
@@ -130,7 +139,9 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     testID,
     iconTintColor,
     segmentDividerWidth,
-    segmentDividerColor
+    segmentDividerColor,
+    label,
+    labelProps
   } = useSegmentedControlPreset(props);
   const animatedSelectedIndex = useSharedValue(initialIndex);
   const segmentsStyle = useSharedValue([] as {x: number; width: number}[]);
@@ -233,6 +244,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     });
   return (
     <View style={containerStyle} testID={testID}>
+      {label && <Text bodySmall $textNeutralHeavy marginB-s1 {...labelProps}>{label}</Text>}
       <View row center onLayout={containerOnLayout} style={[styles.container, style, {borderRadius, backgroundColor}]}>
         <View
           reanimated

src/components/segmentedControl/segmentedControl.api.json

@@ -20,7 +20,9 @@
     {"name": "containerStyle", "type": "ViewStyle", "description": "Additional spacing styles for the container"},
     {"name": "style", "type": "ViewStyle", "description": "Custom style to inner container"},
     {"name": "segmentLabelStyle", "type": "TextStyle", "description": "Segment label style"},
-    {"name": "testID", "type": "string", "description": "Component test id"}
+    {"name": "testID", "type": "string", "description": "Component test id"},
+    {"name": "label", "type": "string", "description": "SegmentedControl label"},
+    {"name": "labelProps", "type": "TextProps", "description": "Pass props for the SegmentedControl label"}
   ],
   "snippet": [
     "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}]$1}/>"