From 6abc0824da3f57ba9cbc46cac5de793f689e4930 Mon Sep 17 00:00:00 2001
From: Dylan <dylc2770@gmail.com>
Date: Wed, 14 Oct 2020 14:59:08 +0200
Subject: [PATCH] feat: add Icon alignment for tabs

---
 src/components/tab.js  |  3 ++-
 src/components/tabs.js | 42 +++++++++++++++++++++++++++++++++++++-----
 src/prefabs/tab.js     | 16 ++++++++++++++++
 3 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/components/tab.js b/src/components/tab.js
index 34047a7df..09dd772c1 100644
--- a/src/components/tab.js
+++ b/src/components/tab.js
@@ -7,7 +7,7 @@
     const { Typography, Box } = window.MaterialUI.Core;
     const { env, useText } = B;
     const isDev = env === 'dev';
-    const { label, icon, disabled, disableRipple } = options;
+    const { label, icon, disabled, disableRipple, iconAlignment } = options;
     const { value, tabData, setTabData } = parent;
     const isActive = value === index;
 
@@ -56,6 +56,7 @@
           [`icon${index}`]: icon,
           [`disabled${index}`]: disabled,
           [`disableRipple${index}`]: disableRipple,
+          [`iconAlignment${index}`]: iconAlignment,
         });
       }
     }, [setTabData, tabData, label, icon, disabled, disableRipple]);
diff --git a/src/components/tabs.js b/src/components/tabs.js
index 2370141a5..14d6270a5 100644
--- a/src/components/tabs.js
+++ b/src/components/tabs.js
@@ -43,17 +43,39 @@
             const {
               label = tabData[`label${index}`] || [`Tab`],
               icon = tabData[`icon${index}`] || 'None',
+              iconAlignment = tabData[`iconAlignment${index}`] || 'top',
               disabled = tabData[`disabled${index}`] || false,
               disableRipple = tabData[`disableRipple${index}`] || false,
             } = isDev ? {} : options;
 
+            function flexTranslator() {
+              switch (iconAlignment) {
+                case 'top':
+                  return 'column';
+                case 'right':
+                  return 'row-reverse';
+                case 'bottom':
+                  return 'column-reverse';
+                case 'left':
+                default:
+                  return 'row';
+              }
+            }
+
             return (
               <Tab
-                label={useText(label)}
-                icon={
-                  icon && icon !== 'None'
-                    ? React.createElement(Icons[icon])
-                    : undefined
+                label={
+                  <div
+                    className={classes.labelWrapper}
+                    style={{ flexDirection: flexTranslator() }}
+                  >
+                    <div className={classes.iconWrapper}>
+                      {icon && icon !== 'None'
+                        ? React.createElement(Icons[icon])
+                        : undefined}
+                    </div>
+                    <div>{useText(label)}</div>
+                  </div>
                 }
                 disabled={disabled}
                 disableRipple={disableRipple}
@@ -125,6 +147,16 @@
           '!important',
         ],
       },
+      labelWrapper: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+      iconWrapper: {
+        marginLeft: 5,
+        marginRight: 5,
+        display: 'flex',
+        alignItems: 'center',
+      },
       empty: {
         display: 'flex',
         alignItems: 'center',
diff --git a/src/prefabs/tab.js b/src/prefabs/tab.js
index ce2e8f638..8d272c3c8 100644
--- a/src/prefabs/tab.js
+++ b/src/prefabs/tab.js
@@ -1276,6 +1276,22 @@
             ],
           },
         },
+        {
+          label: 'Icon Alignment',
+          key: 'iconAlignment',
+          value: 'top',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Left', value: 'left' },
+              { name: 'Top', value: 'top' },
+              { name: 'Right', value: 'right' },
+              { name: 'Bottom', value: 'bottom' },
+            ],
+          },
+        },
         {
           type: 'TOGGLE',
           label: 'Disabled',