Merge pull request #3628 from czwe-01/thulasizwe/en/button-group

Thulasizwe/en/button group

Author: czwe-01

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

@@ -222,7 +222,7 @@ export const ButtonGroupInner: FC<IButtonGroupProps> = (props) => {
 
     if (isInline) {
         return (
-            <Button.Group size={size} style={{ ...props.styles, ...getOverflowStyle(true, false) }}>
+            <Button.Group size={size} style={{ ...props.styles, ...getOverflowStyle(true, false) }} className={styles.shaHideEmpty}>
                 <Space size={gap}>
                     {filteredItems?.map((item) =>
                         (<InlineItem styles={item?.styles} item={item} uuid={item.id} size={item.size ?? size} getIsVisible={getIsVisible} appContext={allData} key={item.id} form={form} />)

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

@@ -14,15 +14,17 @@ import { getSettings } from './settingsForm';
 import { migratePrevStyles, migrateStyles } from '@/designer-components/_common-migrations/migrateStyles';
 import { defaultContainerStyles, defaultStyles } from './utils';
 import { ConfigurableFormItem } from '@/components';
+import { useStyles } from './styles/styles';
 
 const ButtonGroupComponent: IToolboxComponent<IButtonGroupComponentProps> = {
   type: 'buttonGroup',
   isInput: false,
   name: 'Button Group',
   icon: <GroupOutlined />,
   Factory: ({ model, form }) => {
+    const { styles } = useStyles();
     return model.hidden ? null :
-      <ConfigurableFormItem model={{ ...model, hideLabel: true }}>
+      <ConfigurableFormItem model={{ ...model, hideLabel: true }} className={styles.shaHideEmpty}>
         <ButtonGroup {...model} styles={model.allStyles.fullStyle} form={form} />
       </ConfigurableFormItem>;
   },

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

@@ -36,6 +36,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
   */
 
   const shaResponsiveButtonGroupContainer = cx("sha-responsive-button-group-container", css`
+
           .${shaResponsiveButtonGroup} {
             line-height: unset;
             min-height: 30px;
@@ -98,11 +99,45 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
             }
           }
         }
+
+        > ul {
+          &:empty {
+            display: none;
+          }
+        }
+  `);
+
+  const shaHideEmpty = cx("sha-hide-empty", css`
+    &:empty {
+      display: none;
+    }
+    
+    /* Hide when containing empty ul elements */
+    &:has(ul:empty) {
+      display: none;
+    }
+    
+    /* Hide when containing ul with no li children */
+    &:has(ul:not(:has(li))) {
+      display: none;
+    }
+    
+    /* Hide when containing empty ant-btn-group */
+    &:has(.ant-btn-group:empty) {
+      display: none;
+    }
+    
+    /* Hide when containing ant-btn-group with no button children */
+    &:has(.ant-btn-group:not(:has(button))) {
+      display: none;
+    }
   `);
+
   return {
     shaResponsiveButtonGroupContainer,
     shaResponsiveButtonGroup,
     shaResponsiveButtonGroupInlineContainer,
     a,
+    shaHideEmpty
   };
 });