Merge pull request #12324 from ToolJet/feat/add-alignments-property

Feature: add alignment property to components
2026-05-23 00:48:25 +00:00 · 2025-04-07 09:55:24 +05:30 · 2025-04-07 09:55:24 +05:30 · 3b46d4a6ca
commit 3b46d4a6ca
parent 8a509f52df 1e27cf5120
18 changed files with 192 additions and 41 deletions
--- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
@ -123,6 +123,14 @@ export const buttonGroupConfig = {
        defaultValue: '#007bff',
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    selected: [1],
@ -155,6 +163,7 @@ export const buttonGroupConfig = {
      disabledState: { value: '{{false}}' },
      selectedTextColor: { value: '#FFFFFF' },
      selectedBackgroundColor: { value: '#4368E3' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/AppBuilder/WidgetManager/widgets/image.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/image.js
@ -143,6 +143,15 @@ export const imageConfig = {
      },
      accordian: 'Image',
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
    backgroundColor: {
      type: 'color',
      displayName: 'Background',
@ -179,11 +188,11 @@ export const imageConfig = {
    padding: {
      type: 'switch',
      displayName: 'Padding',
-      validation: { schema: { type: 'string' }, defaultValue: 'default' },
      options: [
        { displayName: 'Default', value: 'default' },
        { displayName: 'Custom', value: 'custom' },
      ],
+      validation: { schema: { type: 'string' }, defaultValue: 'default' },
      accordian: 'Container',
      isFxNotRequired: true,
    },
@ -244,7 +253,6 @@ export const imageConfig = {
      loadingState: { value: '{{false}}' },
      disabledState: { value: '{{false}}' },
      visibility: { value: '{{true}}' },
-      visible: { value: '{{true}}' },
    },
    events: [],
    styles: {
@ -256,6 +264,7 @@ export const imageConfig = {
      boxShadow: { value: '0px 0px 0px 0px #00000090' },
      padding: { value: 'default' },
      customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
    },
  },
 };
--- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
@ -159,6 +159,14 @@ export const linkConfig = {
      ],
      accordian: 'container',
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {},
  actions: [
--- a/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js
@ -50,6 +50,14 @@ export const paginationConfig = {
        defaultValue: false,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    totalPages: null,
@ -73,6 +81,7 @@ export const paginationConfig = {
    styles: {
      visibility: { value: '{{true}}' },
      disabledState: { value: '{{false}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js
@ -32,6 +32,14 @@ export const svgImageConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    value: {},
@ -50,6 +58,7 @@ export const svgImageConfig = {
    events: [],
    styles: {
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/AppBuilder/WidgetManager/widgets/tags.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/tags.js
@ -38,6 +38,14 @@ export const tagsConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {},
  definition: {
@ -54,6 +62,7 @@ export const tagsConfig = {
    events: [],
    styles: {
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@ -25,6 +25,7 @@ export const ButtonGroup = function Button({
    selectedBackgroundColor,
    selectedTextColor,
    boxShadow,
+    alignment,
  } = styles;

  const computedStyles = {
@ -115,38 +116,53 @@ export const ButtonGroup = function Button({
      fireEvent('onClick');
    }
  };
+
+  const mapAlignment = (alignment) => {
+    switch (alignment) {
+      case 'left':
+        return 'flex-start';
+      case 'right':
+        return 'flex-end';
+      case 'center':
+        return 'center';
+      default:
+        return 'flex-start'; // Default to left alignment if the value is unknown
+    }
+  };
  return (
-    <div className="widget-buttongroup" style={{ height }} data-cy={dataCy}>
-      {label && (
-        <p
-          style={{ display: computedStyles.display }}
-          className={`widget-buttongroup-label ${darkMode && 'text-light'}`}
-        >
-          {label}
-        </p>
-      )}
+    <div className="widget-buttongroup" style={{ height, alignItems: mapAlignment(alignment) }} data-cy={dataCy}>
      <div>
-        {data?.map((item, index) => (
-          <button
-            style={{
-              ...computedStyles,
-              backgroundColor: defaultActive?.includes(values[index]) ? selectedBackgroundColor : backgroundColor,
-              color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
-              transition: 'all .1s ease',
-              boxShadow,
-              ...(disabledState && disabledStyles),
-            }}
-            key={index}
-            disabled={disabledState}
-            className={'group-button overflow-hidden'}
-            onClick={(event) => {
-              event.stopPropagation();
-              buttonClick(index);
-            }}
+        {label && (
+          <p
+            style={{ display: computedStyles.display }}
+            className={`widget-buttongroup-label ${darkMode && 'text-light'}`}
          >
-            {item}
-          </button>
-        ))}
+            {label}
+          </p>
+        )}
+        <div>
+          {data?.map((item, index) => (
+            <button
+              style={{
+                ...computedStyles,
+                backgroundColor: defaultActive?.includes(values[index]) ? selectedBackgroundColor : backgroundColor,
+                color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
+                transition: 'all .1s ease',
+                boxShadow,
+                ...(disabledState && disabledStyles),
+              }}
+              key={index}
+              disabled={disabledState}
+              className={'group-button overflow-hidden'}
+              onClick={(event) => {
+                event.stopPropagation();
+                buttonClick(index);
+              }}
+            >
+              {item}
+            </button>
+          ))}
+        </div>
      </div>
    </div>
  );
--- a/frontend/src/Editor/Components/Image/Image.jsx
+++ b/frontend/src/Editor/Components/Image/Image.jsx
@ -23,8 +23,17 @@ export const Image = function Image({
 }) {
  const { imageFormat, source, jsSchema, alternativeText, zoomButtons, rotateButton, loadingState, disabledState } =
    properties;
-  const { imageFit, imageShape, backgroundColor, padding, customPadding, boxShadow, borderRadius, borderColor } =
-    styles;
+  const {
+    imageFit,
+    imageShape,
+    backgroundColor,
+    padding,
+    customPadding,
+    boxShadow,
+    borderRadius,
+    borderColor,
+    alignment,
+  } = styles;

  const isInitialRender = useRef(true);

@ -168,6 +177,7 @@ export const Image = function Image({
        border: '1px solid',
        borderRadius: imageShape === 'circle' ? '50%' : `${borderRadius}px`,
        borderColor: borderColor ? borderColor : 'transparent',
+        objectPosition: alignment,
      }}
      height={height}
      onClick={() => fireEvent('onClick')}
--- a/frontend/src/Editor/Components/Pagination.jsx
+++ b/frontend/src/Editor/Components/Pagination.jsx
@ -12,7 +12,7 @@ export const Pagination = ({
  width,
 }) => {
  const isInitialRender = useRef(true);
-  const { visibility, disabledState, boxShadow } = styles;
+  const { visibility, disabledState, boxShadow, alignment } = styles;
  const [currentPage, setCurrentPage] = useState(() => properties?.defaultPageIndex ?? 1);

  const pageChanged = (number) => {
@ -65,7 +65,12 @@ export const Pagination = ({
  };

  return (
-    <div data-disabled={disabledState} className="d-flex align-items-center" data-cy={dataCy} style={{ boxShadow }}>
+    <div
+      data-disabled={disabledState}
+      className="d-flex align-items-center"
+      data-cy={dataCy}
+      style={{ boxShadow, justifyContent: alignment }}
+    >
      <ul className="pagination m-0" style={computedStyles}>
        <Pagination.Operator
          operator="<<"
--- a/frontend/src/Editor/Components/SvgImage.jsx
+++ b/frontend/src/Editor/Components/SvgImage.jsx
@ -2,11 +2,14 @@ import React from 'react';
 import DOMPurify from 'dompurify';

 export const SvgImage = function Timeline({ properties, styles, height, dataCy }) {
-  const { visibility, boxShadow } = styles;
+  const { visibility, boxShadow, alignment } = styles;
  const { data } = properties;
  return (
    <div style={{ display: visibility ? '' : 'none', overflow: 'hidden', height: height, boxShadow }} data-cy={dataCy}>
-      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}></div>
+      <div
+        style={{ display: 'flex', justifyContent: alignment }}
+        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}
+      ></div>
    </div>
  );
 };
--- a/frontend/src/Editor/Components/Tags.jsx
+++ b/frontend/src/Editor/Components/Tags.jsx
@ -2,14 +2,15 @@ import React from 'react';

 export const Tags = function Tags({ width, height, properties, styles, dataCy }) {
  const { data } = properties;
-  const { visibility, boxShadow } = styles;
+  const { visibility, boxShadow, alignment } = styles;

  const computedStyles = {
    width,
    height,
-    display: visibility ? '' : 'none',
+    display: visibility ? 'flex' : 'none',
    overflowY: 'auto',
    boxShadow,
+    justifyContent: alignment,
  };

  function renderTag(item, index) {
--- a/frontend/src/Editor/WidgetManager/configs/image.js
+++ b/frontend/src/Editor/WidgetManager/configs/image.js
@ -143,6 +143,15 @@ export const imageConfig = {
      },
      accordian: 'Image',
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
    backgroundColor: {
      type: 'color',
      displayName: 'Background',
@ -255,6 +264,7 @@ export const imageConfig = {
      boxShadow: { value: '0px 0px 0px 0px #00000090' },
      padding: { value: 'default' },
      customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/buttonGroup.js
+++ b/server/src/modules/apps/services/widget-config/buttonGroup.js
@ -123,6 +123,14 @@ export const buttonGroupConfig = {
        defaultValue: '#007bff',
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    selected: [1],
@ -156,6 +164,7 @@ export const buttonGroupConfig = {
      disabledState: { value: '{{false}}' },
      selectedTextColor: { value: '#FFFFFF' },
      selectedBackgroundColor: { value: '#4368E3' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/image.js
+++ b/server/src/modules/apps/services/widget-config/image.js
@ -143,6 +143,15 @@ export const imageConfig = {
      },
      accordian: 'Image',
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'center',
+      },
+      accordian: 'Image',
+    },
    backgroundColor: {
      type: 'color',
      displayName: 'Background',
@ -179,11 +188,11 @@ export const imageConfig = {
    padding: {
      type: 'switch',
      displayName: 'Padding',
-      validation: { schema: { type: 'string' }, defaultValue: 'default' },
      options: [
        { displayName: 'Default', value: 'default' },
        { displayName: 'Custom', value: 'custom' },
      ],
+      validation: { schema: { type: 'string' }, defaultValue: 'default' },
      accordian: 'Container',
      isFxNotRequired: true,
    },
@ -244,7 +253,6 @@ export const imageConfig = {
      loadingState: { value: '{{false}}' },
      disabledState: { value: '{{false}}' },
      visibility: { value: '{{true}}' },
-      visible: { value: '{{true}}' },
    },
    events: [],
    styles: {
@ -256,6 +264,7 @@ export const imageConfig = {
      boxShadow: { value: '0px 0px 0px 0px #00000090' },
      padding: { value: 'default' },
      customPadding: { value: '{{0}}' },
+      alignment: { value: 'center' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/link.js
+++ b/server/src/modules/apps/services/widget-config/link.js
@ -159,6 +159,14 @@ export const linkConfig = {
      ],
      accordian: 'container',
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {},
  actions: [
--- a/server/src/modules/apps/services/widget-config/pagination.js
+++ b/server/src/modules/apps/services/widget-config/pagination.js
@ -50,6 +50,14 @@ export const paginationConfig = {
        defaultValue: false,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    totalPages: null,
@ -73,6 +81,7 @@ export const paginationConfig = {
    styles: {
      visibility: { value: '{{true}}' },
      disabledState: { value: '{{false}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/svgImage.js
+++ b/server/src/modules/apps/services/widget-config/svgImage.js
@ -32,6 +32,14 @@ export const svgImageConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    value: {},
@ -50,6 +58,7 @@ export const svgImageConfig = {
    events: [],
    styles: {
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/tags.js
+++ b/server/src/modules/apps/services/widget-config/tags.js
@ -38,6 +38,14 @@ export const tagsConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {},
  definition: {
@ -54,6 +62,7 @@ export const tagsConfig = {
    events: [],
    styles: {
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };