feat: add object fit control (#4986)

* Added attribute to image widget to change cover properties

app/client/src/components/designSystems/appsmith/ImageComponent.tsx

@@ -8,6 +8,7 @@ export interface StyledImageProps {
   imageUrl?: string;
   backgroundColor?: string;
   showHoverPointer?: boolean;
+  objectFit: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
@@ -17,16 +18,16 @@ export const StyledImage = styled.div<
   }
 >`
   position: relative;
-  display: flex;                                                                                                                                                                                                                                                                                                                                                                          
+  display: flex;
   flex-direction: "row";
+  background-size: ${(props) => props.objectFit ?? "cover"};
   cursor: ${(props) =>
     props.showHoverPointer && props.onClick ? "pointer" : "inherit"};
   background: ${(props) => props.backgroundColor};
-  background-image: url("${(props) =>
+  background-image: ${(props) =>
-    props.imageError ? props.defaultImageUrl : props.imageUrl}");
+    `url(${props.imageError ? props.defaultImageUrl : props.imageUrl})`};
   background-position: center;
   background-repeat: no-repeat;
-  background-size: contain;
   height: 100%;
   width: 100%;
 `;
@@ -142,6 +143,7 @@ class ImageComponent extends React.Component<
                   cursor,
                 }}
               >
+                {/* Used for running onImageError and onImageLoad Functions since Background Image doesn't have the functionality */}
                 <img
                   alt={this.props.widgetName}
                   onError={this.onImageError}
@@ -178,6 +180,7 @@ export interface ImageComponentProps extends ComponentProps {
   isLoading: boolean;
   showHoverPointer?: boolean;
   maxZoomLevel: number;
+  objectFit: string;
   disableDrag: (disabled: boolean) => void;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -57,6 +57,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
         "https://res.cloudinary.com/drako999/image/upload/v1589196259/default.png",
       imageShape: "RECTANGLE",
       maxZoomLevel: 1,
+      objectFit: "cover",
       image: "",
       rows: 3 * GRID_DENSITY_MIGRATION_V1,
       columns: 4 * GRID_DENSITY_MIGRATION_V1,

app/client/src/utils/WidgetPropsUtils.tsx

@@ -791,6 +791,23 @@ const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
   return currentDSL;
 };
 
+export const migrateObjectFitToImageWidget = (
+  dsl: ContainerWidgetProps<WidgetProps>,
+) => {
+  const addObjectFitProperty = (widgetProps: WidgetProps) => {
+    widgetProps.objectFit = "cover";
+    if (widgetProps.children && widgetProps.children.length) {
+      widgetProps.children.forEach((eachWidgetProp: WidgetProps) => {
+        if (widgetProps.type === "IMAGE_WIDGET") {
+          addObjectFitProperty(eachWidgetProp);
+        }
+      });
+    }
+  };
+  addObjectFitProperty(dsl);
+  return dsl;
+};
+
 const migrateOverFlowingTabsWidgets = (
   currentDSL: ContainerWidgetProps<WidgetProps>,
   canvasWidgets: any,

app/client/src/widgets/ImageWidget.tsx

@@ -78,6 +78,32 @@ class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
             isTriggerProperty: false,
             validation: VALIDATION_TYPES.NUMBER,
           },
+          {
+            helpText:
+              "Sets how the Image should be resized to fit its container.",
+            propertyName: "objectFit",
+            label: "Object Fit",
+            controlType: "DROP_DOWN",
+            defaultValue: "cover",
+            options: [
+              {
+                label: "Contain",
+                value: "contain",
+              },
+              {
+                label: "Cover",
+                value: "cover",
+              },
+              {
+                label: "Auto",
+                value: "auto",
+              },
+            ],
+            isJSConvertible: true,
+            isBindProperty: true,
+            isTriggerProperty: false,
+            validation: VALIDATION_TYPES.TEXT,
+          },
         ],
       },
       {
@@ -99,7 +125,7 @@ class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
   }
 
   getPageView() {
-    const { maxZoomLevel } = this.props;
+    const { maxZoomLevel, objectFit } = this.props;
     return (
       <ImageComponent
         defaultImageUrl={this.props.defaultImage}
@@ -109,6 +135,7 @@ class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
         imageUrl={this.props.image}
         isLoading={this.props.isLoading}
         maxZoomLevel={maxZoomLevel}
+        objectFit={objectFit}
         onClick={this.props.onClick ? this.onImageClick : undefined}
         showHoverPointer={this.props.renderMode === RenderModes.PAGE}
         widgetId={this.props.widgetId}
@@ -140,6 +167,7 @@ export interface ImageWidgetProps extends WidgetProps {
   imageShape: ImageShape;
   defaultImage: string;
   maxZoomLevel: number;
+  objectFit: string;
   onClick?: string;
 }