[CSR-0000] Fix height edit container

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "13.7.2",
+  "version": "13.8.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/edit-page/EditPageContainer.stories.tsx

@@ -22,7 +22,7 @@ const Template: Story<EditPageContainerProps> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   title: 'Edit Page',
-  footerButtonTitle: 'Save',
+  submitButtonText: 'Save',
   onFooterButtonClick: () => console.log('Save'),
   footerButtonIsLoading: false,
 };

src/components/edit-page/EditPageContainer.tsx

@@ -11,9 +11,8 @@ import { Separator } from '../separator';
 import { AddLineIcon } from '../icons';
 
 const BOX_HEIGHT = '90vh';
-const TOP_BOTTOM_PADDING = 50;
-const TOTAL_PADDING = TOP_BOTTOM_PADDING * 2;
-const SMALL_CONTAINER_HEIGHT = `calc(${BOX_HEIGHT} - ${TOTAL_PADDING}px)`;
+const TOTAL_PADDING = 98;
+const SMALL_CONTAINER_HEIGHT = `calc(100% - ${TOTAL_PADDING}px)`;
 
 export const EditPageContainer = ({
   title,
@@ -24,6 +23,7 @@ export const EditPageContainer = ({
   updating = false,
   headerButtonType = HeaderButtonTypeEditPageContainer.Add,
   updatingHeaderButton,
+  height,
 }: EditPageContainerProps) => {
   const {
     theme: {
@@ -59,7 +59,7 @@ export const EditPageContainer = ({
   };
 
   return (
-    <Box height={BOX_HEIGHT}>
+    <Box height={height ?? BOX_HEIGHT}>
       <Block
         {...padding(scale200, scale1600)}
         display="flex"

src/components/edit-page/types.ts

@@ -40,6 +40,7 @@ export interface EditPageContainerProps {
   submitButtonText?: string;
   updating?: boolean;
   updatingHeaderButton?: boolean;
+  height?: string;
 }
 
 export interface EditPageContentProps {

src/components/input/Input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { Input as BaseInput, InputOverrides } from 'baseui/input';
 import { useTheme } from '../../providers';
 import {
@@ -15,92 +15,110 @@ import { DATA_TEST_ID } from '../../models';
 import { Align, InputProps } from './types';
 import { Skeleton } from '../skeleton';
 
-export const Input = forwardRef(
-  ({
-    value,
-    testId,
-    type,
-    uppercase,
-    noBorder = false,
-    success = false,
-    disabled,
-    width = '100%',
-    startEnhancer = null,
-    endEnhancer = null,
-    overrides,
-    showSkeleton = false,
-    autoComplete = 'off',
-    name,
-    align = Align.left,
-    ...rest
-  }: InputProps) => {
-    const {
-      theme: {
-        current: {
-          sizing: { scale500, scale550, scale600 },
-          customSizing: { scale975 },
-          borders,
-          colors,
-          customColors,
-        },
+export const Input = ({
+  value,
+  testId,
+  type,
+  uppercase,
+  noBorder = false,
+  success = false,
+  disabled,
+  width = '100%',
+  startEnhancer = null,
+  endEnhancer = null,
+  overrides,
+  showSkeleton = false,
+  autoComplete = 'off',
+  name,
+  align = Align.left,
+  ...rest
+}: InputProps) => {
+  const {
+    theme: {
+      current: {
+        sizing: { scale500, scale550, scale600 },
+        customSizing: { scale975 },
+        borders,
+        colors,
+        customColors,
       },
-    } = useTheme();
-    const { border300 } = borders;
-    const { primaryB } = colors;
+    },
+  } = useTheme();
+  const { border300 } = borders;
+  const { primaryB } = colors;
 
-    // Password input requires the default padding
-    const rootPadding = () => {
-      if (type !== 'password') {
-        return { ...padding() };
-      }
-    };
-    const {
-      Root: RootOverrides,
-      StartEnhancer: StartEnhancerOverrides,
-      EndEnhancer: EndEnhancerOverrides,
-      MaskToggleButton: MaskToggleButtonOverrides,
-      Input: InputOverrides,
-      InputContainer: InputContainerOverrides,
-      ...styleOverrides
-    } = overrides ?? {};
+  // Password input requires the default padding
+  const rootPadding = () => {
+    if (type !== 'password') {
+      return { ...padding() };
+    }
+  };
+  const {
+    Root: RootOverrides,
+    StartEnhancer: StartEnhancerOverrides,
+    EndEnhancer: EndEnhancerOverrides,
+    MaskToggleButton: MaskToggleButtonOverrides,
+    Input: InputOverrides,
+    InputContainer: InputContainerOverrides,
+    ...styleOverrides
+  } = overrides ?? {};
 
-    const baseOverrides: InputOverrides = {
-      Input: {
-        style: (opts) => {
-          const { $disabled, $isFocused, $theme } = opts;
-          const backgroundColor = getInputBackgroundColor({ disabled: $disabled, customColors, colors });
-          const color = getInputTextColor({ isFocused: $isFocused, hasValue: !!value, customColors, colors });
-          return {
-            backgroundColor,
-            ...border(),
-            ...padding('0', endEnhancer ? scale500 : scale600, '0', startEnhancer ? scale500 : scale600),
-            textTransform: uppercase ? 'uppercase' : 'inherit',
-            textAlign: align,
-            color,
-            '::placeholder': {
-              color: customColors.dark4,
-            },
-            fontSize: $theme.typography.LabelSmall.fontSize,
-            ...getStyleOverrides(opts, InputOverrides?.style),
-          };
-        },
-        props: {
-          [DATA_TEST_ID]: testId,
-        },
-      },
-      InputContainer: {
-        style: (opts) => ({
+  const baseOverrides: InputOverrides = {
+    Input: {
+      style: (opts) => {
+        const { $disabled, $isFocused, $theme } = opts;
+        const backgroundColor = getInputBackgroundColor({ disabled: $disabled, customColors, colors });
+        const color = getInputTextColor({ isFocused: $isFocused, hasValue: !!value, customColors, colors });
+        return {
+          backgroundColor,
           ...border(),
-          backgroundColor: primaryB,
-          ...getStyleOverrides(opts, InputContainerOverrides?.style),
-        }),
+          ...padding('0', endEnhancer ? scale500 : scale600, '0', startEnhancer ? scale500 : scale600),
+          textTransform: uppercase ? 'uppercase' : 'inherit',
+          textAlign: align,
+          color,
+          '::placeholder': {
+            color: customColors.dark4,
+          },
+          fontSize: $theme.typography.LabelSmall.fontSize,
+          ...getStyleOverrides(opts, InputOverrides?.style),
+        };
       },
-      Root: {
-        style: (opts) => {
-          const { $error, $isFocused } = opts;
-          return {
-            height: scale975,
-            width,
+      props: {
+        [DATA_TEST_ID]: testId,
+      },
+    },
+    InputContainer: {
+      style: (opts) => ({
+        ...border(),
+        backgroundColor: primaryB,
+        ...getStyleOverrides(opts, InputContainerOverrides?.style),
+      }),
+    },
+    Root: {
+      style: (opts) => {
+        const { $error, $isFocused } = opts;
+        return {
+          height: scale975,
+          width,
+          ...border(
+            !noBorder
+              ? {
+                  ...border300,
+                  borderColor: getInputBorderColor({
+                    error: $error,
+                    success,
+                    isFocused: $isFocused,
+                    customColors,
+                    colors,
+                  }),
+                }
+              : undefined,
+          ),
+          ...borderRadius(borders.radius200),
+          backgroundColor: primaryB,
+          ...margin('0'),
+          ...rootPadding(),
+          ':hover': {
             ...border(
               !noBorder
                 ? {
@@ -111,82 +129,62 @@ export const Input = forwardRef(
                       isFocused: $isFocused,
                       customColors,
                       colors,
+                      hover: true,
+                      disabled,
                     }),
                   }
                 : undefined,
             ),
-            ...borderRadius(borders.radius200),
-            backgroundColor: primaryB,
-            ...margin('0'),
-            ...rootPadding(),
-            ':hover': {
-              ...border(
-                !noBorder
-                  ? {
-                      ...border300,
-                      borderColor: getInputBorderColor({
-                        error: $error,
-                        success,
-                        isFocused: $isFocused,
-                        customColors,
-                        colors,
-                        hover: true,
-                        disabled,
-                      }),
-                    }
-                  : undefined,
-              ),
-            },
-            ...getStyleOverrides(opts, RootOverrides?.style),
-          };
-        },
+          },
+          ...getStyleOverrides(opts, RootOverrides?.style),
+        };
       },
-      StartEnhancer: {
-        style: (opts) => {
-          const { $disabled } = opts;
-          return {
-            backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }),
-            ...padding('0', '0', '0', scale600),
-            ...getStyleOverrides(opts, StartEnhancerOverrides?.style),
-          };
-        },
+    },
+    StartEnhancer: {
+      style: (opts) => {
+        const { $disabled } = opts;
+        return {
+          backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }),
+          ...padding('0', '0', '0', scale600),
+          ...getStyleOverrides(opts, StartEnhancerOverrides?.style),
+        };
       },
-      EndEnhancer: {
-        style: (opts) => {
-          const { $disabled } = opts;
-          return {
-            backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }),
-            ...padding('0', scale600, '0', '0'),
-            ...getStyleOverrides(opts, EndEnhancerOverrides?.style),
-          };
-        },
+    },
+    EndEnhancer: {
+      style: (opts) => {
+        const { $disabled } = opts;
+        return {
+          backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }),
+          ...padding('0', scale600, '0', '0'),
+          ...getStyleOverrides(opts, EndEnhancerOverrides?.style),
+        };
       },
-      MaskToggleButton: {
-        style: (opts) => {
-          return {
-            ...padding('0', '0', '0', scale550),
-            outline: 'none',
-            ...getStyleOverrides(opts, MaskToggleButtonOverrides?.style),
-          };
-        },
+    },
+    MaskToggleButton: {
+      style: (opts) => {
+        return {
+          ...padding('0', '0', '0', scale550),
+          outline: 'none',
+          ...getStyleOverrides(opts, MaskToggleButtonOverrides?.style),
+        };
       },
-      ...styleOverrides,
-    };
+    },
+    ...styleOverrides,
+  };
 
-    return showSkeleton ? (
-      <Skeleton animation height={scale975} width={width} />
-    ) : (
-      <BaseInput
-        value={value}
-        disabled={disabled}
-        startEnhancer={startEnhancer}
-        endEnhancer={endEnhancer}
-        overrides={baseOverrides}
-        type={type}
-        autoComplete={autoComplete}
-        id={name}
-        {...rest}
-      />
-    );
-  },
-);
+  return showSkeleton ? (
+    <Skeleton animation height={scale975} width={width} />
+  ) : (
+    <BaseInput
+      value={value}
+      disabled={disabled}
+      startEnhancer={startEnhancer}
+      endEnhancer={endEnhancer}
+      overrides={baseOverrides}
+      type={type}
+      autoComplete={autoComplete}
+      id={name}
+      {...rest}
+    />
+  );
+};