Merge pull request #532 from arun-s-aot/bugfix/FWF-4464-client-issues

FWF-4464 [Bugfix] Stlye corrections for client screen and added table button variations

Author: arun-s-aot

forms-flow-components/src/components/CustomComponents/Button.tsx

@@ -14,7 +14,7 @@ interface DropdownItem {
 
 interface CustomButtonProps {
   variant: string;
-  size?: "sm" | "md" | "lg" ;
+  size?: "sm" | "md" | "lg" | "table" | "table-sm";
   label: string;
   name?: string,
   onClick?: () => void;
@@ -29,8 +29,15 @@ interface CustomButtonProps {
   iconOnly?: boolean;  
 }
 
-const getButtonClassName = (size: string | undefined, className: string, iconOnly: boolean = false) => 
-  `${size === "md" ? 'btn-md' : ''} ${className}`;
+const getButtonClassName = (size: string | undefined, className: string, iconOnly: boolean = false) => {
+  const sizeClassMap: Record<string, string> = {
+    md: "btn-md",
+    table: "btn-table",
+    "table-sm": "btn-table-sm"
+  };
+
+  return `${size ? sizeClassMap[size] || '' : ''} ${className}`.trim();
+};
 
 export const CustomButton: React.FC<CustomButtonProps> = ({
   variant,
@@ -49,7 +56,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
   iconOnly = false,  
 }) => {
   const classNameForButton = getButtonClassName(size, className, iconOnly);
-  const sizeOfButton = size !== "md" ? size : undefined;
+  const sizeOfButton = size !== "md" && size !== "table" && size !== "table-sm" ? size : undefined;
 
   const buttonRef = useRef<HTMLButtonElement>(null);
   const toggleRef = useRef<HTMLButtonElement>(null);
@@ -88,7 +95,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
       >
         <Button
           variant={variant}
-          size={size !== "md" ? size : undefined}
+          size={sizeOfButton}
           disabled={disabled}
           ref={buttonRef}
           data-testid={dataTestId}

forms-flow-theme/scss/_button.scss

@@ -237,12 +237,20 @@ $danger-color: var(--ff-danger);
     }
   }
 
-  &.btn-table {
+  &.btn-table { // This is for the Btn-Action-Table in figma
     padding: var(--spacer-050) var(--spacer-100) !important;
     border-radius: var(--radius-sm) !important;
     line-height: var(--text-line-height);
   }
 
+
+  &.btn-table-sm { // This is for the Btn-Action-Table-Small in figma
+    font-size: var(--font-size-xs) !important;
+    padding: var(--spacer-025) var(--spacer-075) !important;
+    border-radius: var(--radius-sm) !important;
+    line-height: var(--text-line-height);
+  }
+
   &.btn-sm {
     font-size: var(--font-size-xs) !important;
     padding: var(--spacer-075) var(--spacer-100) !important;

forms-flow-theme/scss/_forms.scss

@@ -628,14 +628,13 @@ select option:hover {
   }
  }
   .user-form-container{
-    max-height:94vh ;
-    min-height: calc(100vh - 5.5625rem);
+    height: calc(100vh - 7.5625rem - var(--client-nav));
     overflow-y: auto;
     overflow-x: hidden;
     gap: var(--spacer-100);
     padding: var(--spacer-200) var(--spacer-225);
     background-color: $white;
-    border-radius: var(--radius-md) !important;
+    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
   }
 }
 

forms-flow-theme/scss/_theme.scss

@@ -95,8 +95,8 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   --default-font-family: "Roboto", sans-serif;
   --primary-font: var(--default-font-family);
   //font-size
-  --font-size-xs: 0.875rem;
-  --font-size-sm: var(--default-font-size);
+  --font-size-xs: 0.875rem; // 14px
+  --font-size-sm: var(--default-font-size); 
   --font-size-md: 1.25rem;
   --font-size-lg: 1.5rem;
   --font-size-xl: 2rem;