Feat/ Support subtitle in Modal.TopBar (#2594)

* Support subtitle in Modal.TopBar

* bodySmall

Author: lidord-wix

demo/src/screens/componentScreens/ModalScreen.tsx

@@ -63,6 +63,7 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
           <View bg-violet80 flex style={styles.page}>
             <Modal.TopBar
               title="another example"
+              subtitle="with a subtitle"
               onCancel={() => Alert.alert('cancel')}
               onDone={() => Alert.alert('done')}
               cancelIcon={null}

src/components/modal/TopBar.tsx

@@ -17,6 +17,14 @@ export interface ModalTopBarProps {
    * title custom style
    */
   titleStyle?: StyleProp<TextStyle>;
+  /**
+   * subtitle to display below the top bar title
+   */
+  subtitle?: string;
+  /**
+   * subtitle custom style
+   */
+  subtitleStyle?: StyleProp<TextStyle>;
   /**
    * done action props (Button props)
    */
@@ -162,22 +170,27 @@ class TopBar extends Component<ModalTopBarProps> {
   };
 
   render() {
-    const {title, titleStyle, includeStatusBar, containerStyle, useSafeArea} = this.props;
+    const {title, titleStyle, subtitle, subtitleStyle, includeStatusBar, containerStyle, useSafeArea} = this.props;
 
     return (
       <View style={containerStyle} useSafeArea={useSafeArea}>
         {includeStatusBar && <View style={styles.statusBar}/>}
         <View style={styles.container}>
-          <View row flex bottom paddingL-15 centerV>
+          <View row flex paddingL-15 centerV>
             {this.renderCancel()}
             {this.renderLeftButtons()}
           </View>
-          <View row flex-3 bottom centerH centerV>
+          <View flex-3 centerH centerV>
             <Text $textDefault accessible={!!title} numberOfLines={1} text70 style={[styles.title, titleStyle]}>
               {title}
             </Text>
+            {subtitle && (
+              <Text $textDefault accessible={!!subtitle} bodySmall numberOfLines={1} style={subtitleStyle}>
+                {subtitle}
+              </Text>
+            )}
           </View>
-          <View row flex bottom right paddingR-15 centerV>
+          <View row flex right paddingR-15 centerV>
             {this.renderRightButtons()}
             {this.renderDone()}
           </View>

src/components/modal/api/modalTopBar.api.json

@@ -7,6 +7,8 @@
   "props": [
     {"name": "title", "type": "string", "description": "Title to display in the center of the top bar"},
     {"name": "titleStyle", "type": "TextStyle", "description": "Title custom style"},
+    {"name": "subtitle", "type": "string", "description": "Subtitle to display below the top bar title"},
+    {"name": "subtitleStyle", "type": "TextStyle", "description": "Subtitle custom style"},
     {
       "name": "doneButtonProps",
       "type": "ButtonProps",