feat: add Icon alignment for tabs

bettyblocks · Oct 14, 2020 · 6abc082 · 6abc082
1 parent 715f7ee
commit 6abc082
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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',