fix:button group menu item height

shesha-reactjs/src/components/buttonGroupConfigurator/buttonGroupItem.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { IButtonGroupItem, IDynamicItem, isDynamicItem } from '@/providers/buttonGroupConfigurator/models';
-import { Button, Tooltip, Typography } from 'antd';
+import { Button, Flex, Tooltip, Typography } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import ShaIcon, { IconType } from '@/components/shaIcon';
 import { IConfigurableActionConfiguration, useDynamicActionsDispatcher, useSheshaApplication } from '@/providers';
@@ -114,7 +114,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
   return (
     <>
       {item.itemSubType === 'button' && (
-        <>
+        <Flex>
           <Button
             title={tooltip}
             type={buttonType}
@@ -134,7 +134,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
               <QuestionCircleOutlined className={styles.helpIcon} style={{ marginLeft: '2px' }} />
             </Tooltip>
           )}
-        </>
+        </Flex>
       )}
       {item.itemSubType === 'separator' && (<Text type="secondary">— separator —</Text>)}
       {isDynamicItem(item) && (<DynamicGroupDetails {...item} />)}

shesha-reactjs/src/components/buttonGroupConfigurator/utils.ts

@@ -1,7 +1,13 @@
 
 export const initialValues = (): any => {
     return {
-        background: { type: 'color' },
+        background: {
+            type: 'color',
+            repeat: 'no-repeat',
+            size: 'cover',
+            position: 'center',
+            gradient: { direction: 'to right' }
+        },
         font: { weight: '400', size: 14, align: 'center', type: 'Segoe UI' },
         dimensions: { width: 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' },
         border: {
@@ -11,6 +17,7 @@ export const initialValues = (): any => {
             border: { all: { width: '1px', style: 'solid' } },
             radius: { all: 8 }
         },
+        shadow: { spreadRadius: 0, blurRadius: 0, color: '#000', offsetX: 0, offsetY: 0 },
         stylingBox: '{"paddingLeft":"15","paddingBottom":"4","paddingTop":"4","paddingRight":"15"}',
     };
 };

shesha-reactjs/src/designer-components/button/buttonGroup/buttonGroup.tsx

@@ -241,7 +241,8 @@ export const ButtonGroupInner: FC<IButtonGroupProps> = (props) => {
         ...borderStyles,
         ...backgroundStyles,
         ...shadowStyles,
-        ...stylingBoxAsCSS
+        ...stylingBoxAsCSS,
+        ...jsStyle
     });
 
     const finalStyle = removeUndefinedProps({ ...additionalStyles });
@@ -361,7 +362,7 @@ export const ButtonGroupInner: FC<IButtonGroupProps> = (props) => {
                 <Menu
                     mode="horizontal"
                     items={menuItems}
-                    className={classNames(styles.shaResponsiveButtonGroup, `space-${spaceSize}`)}
+                    className={classNames(styles.shaResponsiveButtonGroup, styles.a, `space-${spaceSize}`)}
                     style={{ width: '30px' }}
                 />
             </div>

shesha-reactjs/src/designer-components/button/buttonGroup/settingsForm.ts

@@ -33,34 +33,6 @@ export const getSettings = (data: IButtonGroupComponentProps) => {
                                 },
                                 jsSetting: true,
                             })
-                            .addSettingsInputRow({
-                                id: 'type-default-value-s4gmBg31azZC0UjZjpfTm',
-                                parentId: 's4gmBg31azZC0UjZjpfTm',
-                                inputs: [
-                                    {
-                                        type: 'dropdown',
-                                        id: 'space-size-s4gmBg31azZC0UjZjpfTm',
-                                        propertyName: 'spaceSize',
-                                        label: 'Space Size',
-                                        tooltip: 'Enter default value of component. (formData, formMode, globalState) are exposed',
-                                        jsSetting: true,
-                                        dropdownOptions: [
-                                            {
-                                                label: 'Small',
-                                                value: 'small',
-                                            },
-                                            {
-                                                label: 'Middle',
-                                                value: 'middle',
-                                            },
-                                            {
-                                                label: 'Large',
-                                                value: 'large',
-                                            }
-                                        ],
-                                    },
-                                ],
-                            })
                             .addSettingsInputRow({
                                 id: '12d700d6-ed4d-49d5-9cfd-fe8f0060f3b6',
                                 parentId: 's4gmBg31azZC0UjZjpfTm',
@@ -128,6 +100,36 @@ export const getSettings = (data: IButtonGroupComponentProps) => {
                                 },
                                 components: [
                                     ...new DesignerToolbarSettings()
+
+                                        .addSettingsInputRow({
+                                            id: 'type-default-value-s4gmBg31azZC0UjZjpfTm',
+                                            parentId: 's4gmBg31azZC0UjZjpfTm',
+                                            readOnly: { _code: 'return  getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
+                                            inputs: [
+                                                {
+                                                    type: 'dropdown',
+                                                    id: 'space-size-s4gmBg31azZC0UjZjpfTm',
+                                                    propertyName: 'spaceSize',
+                                                    label: 'Gap',
+                                                    tooltip: 'Enter default value of component. (formData, formMode, globalState) are exposed',
+                                                    jsSetting: true,
+                                                    dropdownOptions: [
+                                                        {
+                                                            label: 'Small',
+                                                            value: 'small',
+                                                        },
+                                                        {
+                                                            label: 'Middle',
+                                                            value: 'middle',
+                                                        },
+                                                        {
+                                                            label: 'Large',
+                                                            value: 'large',
+                                                        }
+                                                    ],
+                                                },
+                                            ],
+                                        })
                                         .addCollapsiblePanel({
                                             id: 'dimensionsStyleCollapsiblePanel',
                                             propertyName: 'pnlDimensions',

shesha-reactjs/src/designer-components/button/buttonGroup/styles/styles.ts

@@ -1,10 +1,11 @@
 import { createStyles } from '@/styles';
 
 export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
-    const shaResponsiveButtonGroup = "sha-responsive-button-group";
-    const shaResponsiveButtonGroupInlineContainer = "sha-responsive-button-group-inline-container";
-    const shaButtonMenu = "sha-button-menu";
-    const a = css`
+  const shaResponsiveButtonGroup = "sha-responsive-button-group";
+  const shaResponsiveButtonGroupInlineContainer = "sha-responsive-button-group-inline-container";
+  const shaButtonMenu = "sha-button-menu";
+  const a = css`
+
         .${shaButtonMenu} {
             .${prefixCls}-menu-submenu.${prefixCls}-menu-submenu-popup & {
                 padding: unset !important;
@@ -18,28 +19,28 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
         }
     `;
 
-/*
-// Make sure that all the buttons in the popups are styled like links
-.${prefixCls}-menu-submenu.${prefixCls}-menu-submenu-popup {
-  .sha-button-menu {
-    padding: unset !important;
-    button {
-      color: var(--ant-primary-color) !important;
-      border-color: transparent !important;
-      background: transparent !important;
-      box-shadow: none !important;
+  /*
+  // Make sure that all the buttons in the popups are styled like links
+  .${prefixCls}-menu-submenu.${prefixCls}-menu-submenu-popup {
+    .sha-button-menu {
+      padding: unset !important;
+      button {
+        color: var(--ant-primary-color) !important;
+        border-color: transparent !important;
+        background: transparent !important;
+        box-shadow: none !important;
+      }
     }
   }
-}
-*/
+  */
 
-    const shaResponsiveButtonGroupContainer = cx("sha-responsive-button-group-container", css`
-        .${shaResponsiveButtonGroup} {
-          line-height: unset;
-          min-height: 30px;
-          .${prefixCls}-menu-item,
-          .${prefixCls}-menu-vertical,
-          .${prefixCls}-menu-submenu,
+  const shaResponsiveButtonGroupContainer = cx("sha-responsive-button-group-container", css`
+          .${shaResponsiveButtonGroup} {
+            line-height: unset;
+            min-height: 30px;
+            .${prefixCls}-menu-item,
+            .${prefixCls}-menu-vertical,
+            .${prefixCls}-menu-submenu,
           .${prefixCls}-menu-sub,
           .${prefixCls}-menu-item-only-child {
             padding: unset !important;
@@ -95,10 +96,10 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
           }
         }
   `);
-    return {
-        shaResponsiveButtonGroupContainer,
-        shaResponsiveButtonGroup,
-        shaResponsiveButtonGroupInlineContainer,
-        a,
-    };
-  });
+  return {
+    shaResponsiveButtonGroupContainer,
+    shaResponsiveButtonGroup,
+    shaResponsiveButtonGroupInlineContainer,
+    a,
+  };
+});

shesha-reactjs/src/designer-components/button/buttonGroup/utils.tsx

@@ -35,6 +35,7 @@ export const defaultStyles = (prev): IStyleType => {
       },
       radius: { all: 8 }
     },
+    shadow: { spreadRadius: 0, blurRadius: 0, color: '#000', offsetX: 0, offsetY: 0 },
     dimensions: { width: prev.block ? '100%' : 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' },
     stylingBox: '{"paddingLeft":"15","paddingBottom":"4","paddingTop":"4","paddingRight":"15"}',
   };
@@ -50,6 +51,6 @@ export const defaultContainerStyles = (prev): IStyleType => {
       borderType: 'all',
     },
     shadow: { spreadRadius: 0, blurRadius: 0, color: '#000', offsetX: 0, offsetY: 0 },
-    dimensions: { width: prev.block ? '100%' : 'auto', height: '32px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' }
+    dimensions: { width: prev.block ? '100%' : 'auto', height: 'auto', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' }
   };
 };

shesha-reactjs/src/designer-components/button/configurableButton/index.tsx

@@ -1,9 +1,8 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, CSSProperties } from 'react';
 import { Button, FormInstance } from 'antd';
 import { ShaIcon, IconType } from '@/components';
 import classNames from 'classnames';
 import { IButtonItem } from '@/providers/buttonGroupConfigurator/models';
-import { CSSProperties } from 'react';
 import { useConfigurableActionDispatcher } from '@/providers/configurableActionsDispatcher';
 import { useAvailableConstantsData } from '@/providers/form/utils';
 import { isNavigationActionConfiguration, useShaRouting, useTheme } from '@/index';

shesha-reactjs/src/designer-components/settingsInput/index.tsx

@@ -14,18 +14,20 @@ const SettingsInput: IToolboxComponent<ISettingsInputProps> = {
     Factory: ({ model }) => {
         const { label, dropdownOptions, buttonGroupOptions, hasUnits, propertyName: property, tooltip: description, readOnly } = model;
 
+
         return (
-            <SettingInput size='small'
-                label={label}
-                dropdownOptions={dropdownOptions}
-                buttonGroupOptions={buttonGroupOptions}
-                hasUnits={hasUnits} propertyName={property}
-                tooltip={description}
-                readOnly={readOnly}
-                jsSetting={model.jsSetting}
-                layout={model.layout}
-                {...model}
-                type={model.inputType} />
+            model.hidden ? null :
+                <SettingInput size='small'
+                    label={label}
+                    dropdownOptions={dropdownOptions}
+                    buttonGroupOptions={buttonGroupOptions}
+                    hasUnits={hasUnits} propertyName={property}
+                    tooltip={description}
+                    readOnly={readOnly}
+                    jsSetting={model.jsSetting}
+                    layout={model.layout}
+                    {...model}
+                    type={model.inputType} />
 
         );
     }

shesha-reactjs/src/providers/theme/index.tsx

@@ -54,6 +54,11 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
     const result: ThemeConfig = {
       cssVar: true,
       token: { ...themeDefaults, ...theme },
+      components: {
+        Menu: {
+          itemHeight: 'clamp(40px, 40px, 100%)' as any
+        },
+      },
     };
     return result;
   }, [state.theme]);