Revert Icon clipped fix (#754)

* Revert "Fix icons from being cut off/clipped (#749)"

This reverts commit f5338ca.

* v48.4.7

Author: YoussefHenna

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "48.4.6",
+  "version": "48.4.7",
   "private": true,
   "main": "__generated__/AppEntry.js",
   "scripts": {
@@ -16,8 +16,8 @@
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "48.4.6",
-    "@draftbit/ui": "48.4.6",
+    "@draftbit/maps": "48.4.7",
+    "@draftbit/ui": "48.4.7",
     "@expo/dev-server": "0.1.123",
     "@expo/webpack-config": "^18.0.1",
     "@react-navigation/drawer": "^5.12.9",

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "48.4.6",
+  "version": "48.4.7",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": ["packages/*", "example"],

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "48.4.6",
+  "version": "48.4.7",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",

packages/core/src/components/Checkbox/Checkbox.tsx

@@ -92,7 +92,7 @@ const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
       accessibilityState={{ disabled }}
       accessibilityRole="button"
       accessibilityLiveRegion="polite"
-      style={[styles.container, style]}
+      style={[styles.container, style, { width: size, height: size }]}
     >
       <Icon
         style={styles.icon}

packages/core/src/components/IconButton.tsx

@@ -52,6 +52,8 @@ const IconButton: React.FC<React.PropsWithChildren<Props>> = ({
           styles.container,
           {
             opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
+            width: size,
+            height: size,
             alignItems: "center",
             justifyContent: "center",
           },

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/maps",
-  "version": "48.4.6",
+  "version": "48.4.7",
   "description": "Map Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -39,7 +39,7 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/ui": "48.4.6",
+    "@draftbit/ui": "48.4.7",
     "@teovilla/react-native-web-maps": "^0.9.1",
     "lodash.isequal": "^4.5.0",
     "react-native-maps": "1.3.2"

packages/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/native",
-  "version": "48.4.5",
+  "version": "48.4.7",
   "description": "Draftbit UI Components that Depend on Native Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",

packages/native/src/components/Icon.tsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { ViewProps, StyleProp, ImageStyle, Platform } from "react-native";
+import {
+  View,
+  StyleSheet,
+  ViewProps,
+  StyleProp,
+  ImageStyle,
+  Platform,
+} from "react-native";
 
 // This must use require to work in both web as a published project and in Snack
 const VectorIcons = require("@expo/vector-icons");
@@ -28,25 +35,24 @@ const Icon: React.FC<React.PropsWithChildren<Props>> = ({
   const IconSet = VectorIcons[iconSet];
 
   return (
-    <IconSet
-      {...rest}
-      name={name}
-      color={color}
-      size={size}
-      style={[
-        {
-          ...Platform.select({
-            web: {
-              cursor: "pointer",
-              userSelect: "none",
-            },
-          }),
-        },
-        ,
-        style,
-      ]}
-    />
+    <View style={[styles.container, { width: size, height: size }, style]}>
+      <IconSet {...rest} name={name} color={color} size={size} />
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    ...Platform.select({
+      web: {
+        cursor: "pointer",
+        userSelect: "none",
+      },
+    }),
+  },
+});
+
 export default Icon;

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/ui",
-  "version": "48.4.6",
+  "version": "48.4.7",
   "description": "Draftbit UI Library",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -43,8 +43,8 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/core": "48.4.6",
-    "@draftbit/native": "48.4.5",
+    "@draftbit/core": "48.4.7",
+    "@draftbit/native": "48.4.7",
     "react-native-reanimated": "~2.14.4"
   },
   "eslintIgnore": [