Fix/ radioButton alignments (#1999)

* Fix/ radioButton alignments

* deprecate contentOnRight

* conver isContentOnLeft to getter

* remove alignment

Author: lidord-wix

demo/src/screens/componentScreens/RadioButtonScreen.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {TouchableOpacity, ScrollView} from 'react-native';
+import {TouchableOpacity, ScrollView, StyleSheet} from 'react-native';
 import {Assets, Colors, View, Text, RadioButton, RadioGroup} from 'react-native-ui-lib'; //eslint-disable-line
 const starIcon = require('../../assets/icons/star.png');
 
@@ -11,10 +11,10 @@ const COLORS = {
 
 export default class RadioButtonScreen extends Component {
   static colors = COLORS;
-  
+
   constructor(props) {
     super(props);
-    
+
     this.state = {
       color: undefined,
       messageType: undefined,
@@ -89,10 +89,10 @@ export default class RadioButtonScreen extends Component {
             <Text marginB-20 text60 $textDefault>
               Alignments
             </Text>
-            {this.renderRadioButtonWithImageAndText('right-icon', 'Text on right')}
-            {this.renderRadioButtonWithImageAndText('left-icon', 'Text on left', true)}
-            {this.renderRadioButton('left-content', 'Content on left', true)}
-            {this.renderRadioButton('right-content', 'Content on right', {contentOnRight: true})}
+            {this.renderRadioButtonWithImageAndText('left-icon', 'Text on right')}
+            {this.renderRadioButtonWithImageAndText('right-icon', 'Text on left', true)}
+            {this.renderRadioButton('right-content', 'Content on right', true)}
+            {this.renderRadioButton('left-content', 'Content on left', {contentOnLeft: true})}
             <Text marginT-10>You chose: {this.state.textSide}</Text>
           </RadioGroup>
 
@@ -116,6 +116,8 @@ export default class RadioButtonScreen extends Component {
               onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
               label="Individual Radio Button (with style)"
               labelStyle={{fontSize: 16, fontWeight: 'bold'}}
+              contentOnLeft
+              containerStyle={styles.contentOnLeft}
             />
           </View>
           <TouchableOpacity
@@ -124,7 +126,12 @@ export default class RadioButtonScreen extends Component {
             accessible={false}
           >
             <View row centerV>
-              <RadioButton selected={this.state.individualValue} label="Individual Radio Button (wrapped)"/>
+              <RadioButton
+                contentOnLeft
+                containerStyle={styles.contentOnLeft}
+                selected={this.state.individualValue}
+                label="Individual Radio Button (wrapped)"
+              />
             </View>
           </TouchableOpacity>
           <View row centerV marginT-10>
@@ -133,6 +140,8 @@ export default class RadioButtonScreen extends Component {
               selected={this.state.disabledValue}
               onPress={() => this.setState({disabledValue: !this.state.disabledValue})}
               label="Disabled Radio Button"
+              contentOnLeft
+              containerStyle={styles.contentOnLeft}
             />
           </View>
           <View row centerV marginT-10>
@@ -141,10 +150,19 @@ export default class RadioButtonScreen extends Component {
               selected={this.state.disabledSelectedValue}
               onPress={() => this.setState({disabledSelectedValue: !this.state.disabledSelectedValue})}
               label="Disabled Selected Radio Button"
+              contentOnLeft
+              containerStyle={styles.contentOnLeft}
             />
           </View>
         </ScrollView>
       </View>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  contentOnLeft: {
+    flex: 1,
+    justifyContent: 'space-between'
+  }
+});

src/components/radioButton/index.tsx

@@ -73,9 +73,13 @@ export type RadioButtonProps = RadioGroupContextProps &
      */
     iconOnRight?: boolean;
     /**
-     * Should the content be rendered right to the button
+     * @deprecated The content is on right by default, for content on left use 'contentOnLeft'
      */
     contentOnRight?: boolean;
+    /**
+     * Should the content be rendered left to the button
+     */
+    contentOnLeft?: boolean;
     /**
      * Additional styling for the container
      */
@@ -127,6 +131,11 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     }
   }
 
+  get isContentOnLeft() {
+    const {contentOnLeft, contentOnRight} = this.props;
+    return contentOnLeft || contentOnRight;
+  }
+
   animate() {
     const {selected} = this.props;
     const {opacityAnimationValue, scaleAnimationValue} = this.state;
@@ -217,10 +226,10 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
   }
 
   renderLabel() {
-    const {label, labelStyle, contentOnRight} = this.props;
+    const {label, labelStyle} = this.props;
     return (
       label && (
-        <Text marginL-10={!contentOnRight} marginR-10={contentOnRight} $textDefault style={labelStyle}>
+        <Text marginL-10={!this.isContentOnLeft} marginR-10={this.isContentOnLeft} $textDefault style={labelStyle}>
           {label}
         </Text>
       )
@@ -250,7 +259,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
   }
 
   render() {
-    const {onPress, onValueChange, contentOnRight, containerStyle, ...others} = this.props;
+    const {onPress, onValueChange, containerStyle, ...others} = this.props;
     const Container = onPress || onValueChange ? TouchableOpacity : View;
 
     return (
@@ -264,10 +273,10 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
         onPress={this.onPress}
         {...this.getAccessibilityProps()}
       >
-        {!contentOnRight && this.renderButton()}
+        {!this.isContentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}
-        {contentOnRight && this.renderButton()}
+        {this.isContentOnLeft && this.renderButton()}
       </Container>
     );
   }

src/components/radioButton/radioButton.api.json

@@ -40,10 +40,14 @@
       "description": "Should the icon be on the right side of the label",
       "default": "false"
     },
-    {"name": "contentOnRight", "type": "boolean", "description": "Should the content be rendered right to the button"},
+    {
+      "name": "contentOnRight",
+      "type": "boolean",
+      "description": "Deprecated. The content is on right by default, for content on left use 'contentOnLeft'",
+      "deprecated": true
+    },
+    {"name": "contentOnLeft", "type": "boolean", "description": "Should the content be rendered left to the button"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Additional styling for the container"}
   ],
-  "snippet": [
-    "<RadioButton value={null$1} label={'Default'$2}/>"
-  ]
+  "snippet": ["<RadioButton value={null$1} label={'Default'$2}/>"]
 }