Specify text/icon spacing rather than reusing horizontal padding.

jameswilddev · Nov 24, 2021 · 813ed74 · 813ed74
1 parent 62f299b
commit 813ed74
Show file tree

Hide file tree

Showing 5 changed files with 649 additions and 12 deletions.
diff --git a/components/createButtonComponent/index.tsx b/components/createButtonComponent/index.tsx
@@ -104,20 +104,20 @@ export const createButtonComponent = (
 
   const leftIconBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    leftIconBase.paddingLeft = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    leftIconBase.paddingLeft = buttonStyle.iconSpacing;
   }
 
   const rightIconBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    rightIconBase.paddingRight = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    rightIconBase.paddingRight = buttonStyle.iconSpacing;
   }
 
   const leftAndRightIconsBase: TextStyle = {};
 
-  if (buttonStyle.horizontalPadding) {
-    leftAndRightIconsBase.paddingHorizontal = buttonStyle.horizontalPadding;
+  if (buttonStyle.iconSpacing) {
+    leftAndRightIconsBase.paddingHorizontal = buttonStyle.iconSpacing;
   }
 
   const styles = StyleSheet.create({

diff --git a/components/createButtonComponent/readme.md b/components/createButtonComponent/readme.md
@@ -13,6 +13,7 @@ const ExampleDropDown = createButtonComponent({
   fontSize: 16,
   horizontalPadding: 10,
   verticalPadding: 2,
+  iconSpacing: 5,
   default: {
     backgroundColor: `yellow`,
     color: `blue`,