Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

app/client/src/components/ads/Button.tsx

@@ -45,6 +45,7 @@ type BtnColorType = {
 type BtnFontType = {
   buttonFont: any;
   padding: string;
+  height: number;
 };
 
 type ButtonProps = CommonComponentProps & {
@@ -209,36 +210,40 @@ const btnColorStyles = (
 
 const btnFontStyles = (props: ThemeProp & ButtonProps): BtnFontType => {
   let buttonFont,
-    padding = "";
+    padding = "",
+    height = 0;
   switch (props.size) {
     case Size.small:
       buttonFont = smallButton;
+      height = 20;
       padding =
         !props.text && props.icon
-          ? `${props.theme.spaces[1]}px ${props.theme.spaces[1]}px`
-          : `${props.theme.spaces[1]}px ${props.theme.spaces[6]}px ${props.theme
-              .spaces[1] - 1}px`;
+          ? `0px ${props.theme.spaces[1]}px`
+          : `0px ${props.theme.spaces[6]}px`;
       break;
     case Size.medium:
       buttonFont = mediumButton;
+      height = 30;
       padding =
         !props.text && props.icon
-          ? `${props.theme.spaces[2]}px ${props.theme.spaces[2]}px`
-          : `${props.theme.spaces[3] - 1}px ${props.theme.spaces[7]}px`;
+          ? `0px ${props.theme.spaces[2]}px`
+          : `0px ${props.theme.spaces[7]}px`;
       break;
     case Size.large:
       buttonFont = largeButton;
+      height = 38;
       padding =
         !props.text && props.icon
-          ? `${props.theme.spaces[3]}px`
-          : `${props.theme.spaces[5] - 1}px ${props.theme.spaces[12] - 4}px`;
+          ? `0px ${props.theme.spaces[3]}px`
+          : `0px ${props.theme.spaces[12] - 4}px`;
       break;
   }
-  return { buttonFont, padding };
+  return { buttonFont, padding, height };
 };
 
 const StyledButton = styled("button")<ThemeProp & ButtonProps>`
   width: ${props => (props.fill ? "100%" : "auto")};
+  height: ${props => btnFontStyles(props).height}px;
   border: none;
   outline: none;
   text-transform: uppercase;

app/client/src/components/ads/MenuItem.tsx

@@ -11,25 +11,33 @@ type MenuItemProps = CommonComponentProps & {
   onSelect?: () => void;
 };
 
-const ItemRow = styled.div`
+const ItemRow = styled.div<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: ${props => props.theme.spaces[4]}px
     ${props => props.theme.spaces[6]}px;
 
-  &:hover {
-    cursor: pointer;
-    background-color: ${props => props.theme.colors.blackShades[4]};
-    .${Classes.TEXT} {
-      color: ${props => props.theme.colors.blackShades[9]};
-    }
-    .${Classes.ICON} {
-      path {
-        fill: ${props => props.theme.colors.blackShades[9]};
+  ${props =>
+    !props.disabled
+      ? ` 
+    &:hover {
+      cursor: pointer;
+      background-color: ${props.theme.colors.blackShades[4]};
+      .${Classes.TEXT} {
+        color: ${props.theme.colors.blackShades[9]};
       }
+      .${Classes.ICON} {
+        path {
+          fill: ${props.theme.colors.blackShades[9]};
+        }
+      }
+    }`
+      : `
+    &:hover {
+      cursor: not-allowed;
     }
-  }
+    `}
 `;
 
 const IconContainer = styled.div`
@@ -43,7 +51,7 @@ const IconContainer = styled.div`
 
 function MenuItem(props: MenuItemProps) {
   return (
-    <ItemRow onClick={props.onSelect}>
+    <ItemRow onClick={props.onSelect} disabled={props.disabled}>
       <IconContainer>
         {props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null}
         {props.text ? (

app/client/src/components/stories/Menu.stories.tsx

@@ -107,6 +107,7 @@ export const MenuStory = () => {
           icon={select("First Icon", IconCollection, undefined)}
           onSelect={action("clicked-first-option")}
           label={<span>W</span>}
+          disabled={boolean("First option disabled", false)}
         />
         {boolean("First menu item divider", false) ? <MenuDivider /> : null}
         <MenuItem