new segemntTypography prop (#2929)

* new segemntTypography prop

* changed the name of the label style prop

* added exmaple, fixed review notes

* screen fixes

* changed custom typo

Author: adids1221

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
 import {StyleSheet} from 'react-native';
-import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses} from 'react-native-ui-lib';
+import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography} from 'react-native-ui-lib';
 
 const segments = {
   first: [{label: 'Left'}, {label: 'Right'}],
@@ -16,18 +16,21 @@ const segments = {
   ],
   forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Style'}],
   fifth: [{label: 'Full'}, {label: 'Width'}],
-  sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}]
+  sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
+  seventh: [{label: '$'}, {label: '%'}]
 };
 
 const SegmentedControlScreen = () => {
-
   const onChangeIndex = useCallback((index: number) => {
     console.warn('Index ' + index + ' of the second segmentedControl was pressed');
   }, []);
 
   return (
     <View flex bottom padding-page>
-      <View flex centerV>
+      <Text center text40 $textDefault>
+        Segmented Control
+      </Text>
+      <View flex marginT-s8>
         <View center>
           <SegmentedControl segments={segments.first}/>
           <SegmentedControl
@@ -53,18 +56,17 @@ const SegmentedControlScreen = () => {
             segmentsStyle={styles.customSegmentsStyle}
           />
         </View>
+        <SegmentedControl containerStyle={styles.container} segments={segments.fifth}/>
+        <SegmentedControl containerStyle={styles.container} segments={segments.sixth}/>
+        <Text marginT-s4 center>
+          Custom Typography
+        </Text>
         <SegmentedControl
           containerStyle={styles.container}
-          segments={segments.fifth}
-        />
-        <SegmentedControl
-          containerStyle={styles.container}
-          segments={segments.sixth}
+          segments={segments.seventh}
+          segmentLabelStyle={styles.customTypography}
         />
       </View>
-      <Text text40 $textDefault>
-        Segmented Control
-      </Text>
     </View>
   );
 };
@@ -79,6 +81,9 @@ const styles = StyleSheet.create({
   },
   customSegmentsStyle: {
     height: 50
+  },
+  customTypography: {
+    ...Typography.text80BO
   }
 });
 

src/components/segmentedControl/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useRef, useCallback} from 'react';
-import {StyleSheet, StyleProp, ViewStyle, LayoutChangeEvent} from 'react-native';
+import {StyleSheet, StyleProp, ViewStyle, TextStyle, LayoutChangeEvent} from 'react-native';
 import Reanimated, {
   Easing,
   useAnimatedReaction,
@@ -74,6 +74,10 @@ export type SegmentedControlProps = {
    * Additional style for the segment
    */
   segmentsStyle?: StyleProp<ViewStyle>;
+  /**
+   * Segment label style
+   */
+  segmentLabelStyle?: StyleProp<TextStyle>;
   /**
    * Additional spacing styles for the container
    */
@@ -102,6 +106,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     outlineWidth = BORDER_WIDTH,
     throttleTime = 0,
     segmentsStyle: segmentsStyleProp,
+    segmentLabelStyle,
     testID
   } = props;
   const animatedSelectedIndex = useSharedValue(initialIndex);
@@ -171,6 +176,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
           activeColor={activeColor}
           inactiveColor={inactiveColor}
           style={segmentsStyleProp}
+          segmentLabelStyle={segmentLabelStyle}
           {...segments?.[index]}
           testID={testID}
         />

src/components/segmentedControl/segment.tsx

@@ -4,8 +4,9 @@ import Reanimated, {useAnimatedStyle} from 'react-native-reanimated';
 import {Spacings, Typography} from '../../style';
 import {asBaseComponent} from '../../commons/new';
 import TouchableOpacity from '../touchableOpacity';
+import {SegmentedControlProps} from './index';
 
-export type SegmentedControlItemProps = {
+export type SegmentedControlItemProps = Pick<SegmentedControlProps, 'segmentLabelStyle'> & {
   /**
    * The label of the segment.
    */
@@ -72,6 +73,7 @@ const Segment = React.memo((props: SegmentProps) => {
     index,
     iconOnRight,
     style,
+    segmentLabelStyle,
     testID
   } = props;
 
@@ -116,7 +118,11 @@ const Segment = React.memo((props: SegmentProps) => {
     >
       {!iconOnRight && renderIcon()}
       {label && (
-        <Reanimated.Text fsTagName={'unmasked'} numberOfLines={1} style={[animatedTextStyle, Typography.text90]}>
+        <Reanimated.Text
+          fsTagName={'unmasked'}
+          numberOfLines={1}
+          style={[Typography.text90, segmentLabelStyle, animatedTextStyle]}
+        >
           {label}
         </Reanimated.Text>
       )}

src/components/segmentedControl/segmentedControl.api.json

@@ -19,6 +19,7 @@
     {"name": "segmentsStyle", "type": "ViewStyle", "description": "Additional style for the segments"},
     {"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"}
   ],
   "snippet": [