Fix issue with transparent color swatch as square (#3260)

Author: ethanshar

demo/src/screens/componentScreens/ColorSwatchScreen.tsx

@@ -60,22 +60,26 @@ export default class ColorSwatchScreen extends Component {
 
     return (
       <ScrollView>
-        <View flex center useSafeArea>
+        <View flex center paddingT-s5>
           <Text margin-5 text60>
             Single ColorSwatch
           </Text>
-          <View row>
+          <View row spread gap-15>
             <View>
               <ColorSwatch selected={selected} onPress={this.onPress}/>
             </View>
-            <View>
-              <ColorSwatch color={Colors.$backgroundMajorLight}/>
-              <Text text90R>Disabled</Text>
-            </View>
             <View>
               <ColorSwatch unavailable onPress={this.unavailableOnPress} color={Colors.yellow10}/>
               <Text text90R>Unavailable</Text>
             </View>
+            <View>
+              <ColorSwatch transparent/>
+              <Text text90R>Transparent</Text>
+            </View>
+            <View center>
+              <ColorSwatch style={{borderRadius: 0}} transparent/>
+              <Text text90R>Square</Text>
+            </View>
           </View>
 
           <Text marginT-20 text60>

src/components/colorSwatch/assets/transparentSwatch/TransparentSwatch.png

@@ -19,7 +19,6 @@
     {"name": "onPress", "type": "(value: string, colorInfo: ColorInfo) => void", "description": "Callback from press event"},
     {"name": "index", "type": "number", "description": "The index of the Swatch if in array"},
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"},
     {"name": "unavailable", "type": "boolean", "description": "Is the initial state is unavailable"},
     {"name": "size", "type": "number", "description": "Color Swatch size"}
   ],

src/components/colorSwatch/assets/transparentSwatch/[email protected]

@@ -1,7 +1,7 @@
 import React, {PureComponent} from 'react';
 import {StyleSheet, Animated, Easing, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import Assets from '../../assets';
-import {BorderRadiuses, Colors} from '../../style';
+import {Colors} from '../../style';
 import {asBaseComponent, BaseComponentInjectedProps, Constants, ColorsModifiers} from '../../commons/new';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
@@ -228,14 +228,15 @@ function createStyles({color = Colors.grey30}) {
       backgroundColor: color,
       borderWidth: color === 'transparent' ? undefined : 1,
       borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2),
-      margin: SWATCH_MARGIN
+      margin: SWATCH_MARGIN,
+      overflow: 'hidden'
     },
     transparentImage: {
       ...StyleSheet.absoluteFillObject,
       width: DEFAULT_SIZE,
       height: DEFAULT_SIZE,
       borderWidth: 1,
-      borderRadius: BorderRadiuses.br100,
+      // borderRadius: BorderRadiuses.br100,
       borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2)
     },
     unavailable: {