Merge pull request #4328 from czwe-01/thulasizwe/b/75986

Thulasizwe/b/75986

Author: James-Baloyi

shesha-reactjs/src/components/readOnlyDisplayFormItem/index.tsx

@@ -101,7 +101,7 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
           return dropdownDisplayMode === 'raw'
             ? <InputField style={style} value={values?.join(', ')} />
             : (
-              <div style={{ padding: '0px 4px', ...style, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, justifyContent: style?.textAlign }}>
+              <div className={styles.wrapper} style={{ ...style }}>
                 {value?.map(({ label, color, icon, value, description }) => {
                   return (
                     <ReflistTag

shesha-reactjs/src/components/readOnlyDisplayFormItem/inputField.tsx

@@ -8,12 +8,12 @@ interface IInputFieldProps {
 }
 
 function InputField({ value, style, children }: IInputFieldProps): JSX.Element {
-  const { styles } = useStyles();
+  const { styles } = useStyles({ textAlign: style?.textAlign || 'left' });
 
-  const { fontSize, fontWeight, color, fontFamily, textAlign, height } = style || {};
+  const { fontSize, fontWeight, color, fontFamily, height } = style || {};
 
   return value || children ? (
-    <div style={{ padding: '4px', ...style, height: height, display: 'flex', alignItems: 'center', justifyContent: textAlign }}>
+    <div style={{ ...style }} className={styles.wrapper}>
       <div className={styles.inputField} style={{ fontSize, fontWeight, color, fontFamily, whiteSpace: height === 'auto' ? 'pre-wrap' : 'nowrap', flex: 'none' }}>{value || children}</div>
     </div>
   ) : null;

shesha-reactjs/src/components/readOnlyDisplayFormItem/styles/styles.ts

@@ -1,7 +1,13 @@
 import { createStyles, sheshaStyles, getTextHoverEffects } from '@/styles';
+import { CSSProperties } from 'react';
 
+interface UseStylesParams {
+  textAlign?: CSSProperties['textAlign'];
+}
+
+export const useStyles = createStyles(({ css, cx, prefixCls, token }, params: UseStylesParams) => {
+  const { textAlign } = params;
 
-export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
   const readOnlyModeToggler = "read-only-mode-toggler";
   const readOnlyDisplayFormItem = cx("read-only-display-form-item", css`
         width: 100%;
@@ -56,9 +62,20 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }) => {
     // white-space: nowrap;
   `;
 
+  const wrapper = css`
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 4px;
+    box-sizing: border-box;
+    justify-content: ${textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start'};
+  `;
+
   return {
     readOnlyDisplayFormItem,
     readOnlyModeToggler,
     inputField,
+    wrapper,
   };
-});
+});