feat: task 7139 - button link v2 (#7227)

haojin111 · sumitsum · akash-codemonk · web-flow · commit 30697ae307a4 · 2021-09-08T13:35:11.000+05:30
* remove outermost quotes (#6938) * This method removes the outermost quotes - single or double quotes - so that end users don't have to do it via javascript inside widget fields where they are meant to be bound. * fix: Wrap JSON.stringify for text widget binding(suggested widgets) (#6651) * Table widget: default selected row, 0th (#5930) * added cell background of empty rows (#6353) * added cell background of empty rows * added tooltips for all the btns in comment card (#6952) * updated button and link button as v2 design Co-authored-by: Sumit Kumar <sumit@appsmith.com> Co-authored-by: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com> Co-authored-by: Bhavin K <58818598+techbhavin@users.noreply.github.com> Co-authored-by: Pranav Kanade <pranav@appsmith.com>
diff --git a/app/client/src/comments/CommentCard/CommentContextMenu.tsx b/app/client/src/comments/CommentCard/CommentContextMenu.tsx
@@ -9,12 +9,14 @@ import {
   UNPIN_COMMENT,
   createMessage,
   EDIT_COMMENT,
+  MORE_OPTIONS,
 } from "constants/messages";
 import { noop } from "lodash";
 
 import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 
 import { Popover2 } from "@blueprintjs/popover2";
+import Tooltip from "components/ads/Tooltip";
 
 // render over popover portals
 const Container = styled.div``;
@@ -149,7 +151,9 @@ function CommentContextMenu({
       placement={"bottom-end"}
       portalClassName="comment-context-menu"
     >
-      <StyledIcon name="comment-context-menu" size={IconSize.LARGE} />
+      <Tooltip content={createMessage(MORE_OPTIONS)}>
+        <StyledIcon name="comment-context-menu" size={IconSize.LARGE} />
+      </Tooltip>
     </Popover2>
   );
 }
diff --git a/app/client/src/comments/CommentCard/ResolveCommentButton.tsx b/app/client/src/comments/CommentCard/ResolveCommentButton.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import styled, { withTheme } from "styled-components";
 import Icon, { IconSize } from "components/ads/Icon";
 import { Theme } from "constants/DefaultTheme";
+import Tooltip from "components/ads/Tooltip";
+import { createMessage, RESOLVE_THREAD } from "constants/messages";
 
 const Container = styled.div`
   display: flex;
@@ -52,14 +54,16 @@ const ResolveCommentButton = withTheme(
 
     return (
       <Container onClick={_handleClick}>
-        <StyledResolveIcon
-          fillColor={fillColor}
-          keepColors
-          name="oval-check"
-          size={IconSize.XXL}
-          strokeColorCircle={strokeColorCircle}
-          strokeColorPath={strokeColorPath}
-        />
+        <Tooltip content={createMessage(RESOLVE_THREAD)}>
+          <StyledResolveIcon
+            fillColor={fillColor}
+            keepColors
+            name="oval-check"
+            size={IconSize.XXL}
+            strokeColorCircle={strokeColorCircle}
+            strokeColorPath={strokeColorPath}
+          />
+        </Tooltip>
       </Container>
     );
   },
diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx
@@ -79,21 +79,38 @@ const getDisabledStyles = (props: ThemeProp & ButtonProps) => {
   const variant = props.variant || defaultProps.variant;
   const category = props.category || defaultProps.category;
 
+  if (props.tag === "a") {
+    return {
+      bgColorPrimary: "transparent",
+      borderColorPrimary: "transparent",
+      txtColorPrimary: props.theme.colors.button.link.disabled,
+      bgColorSecondary: "transparent",
+      borderColorSecondary: "transparent",
+      txtColorSecondary: props.theme.colors.button.link.disabled,
+      bgColorTertiary: "transparent",
+      borderColorTertiary: "transparent",
+      txtColorTertiary: props.theme.colors.button.link.disabled,
+    };
+  }
   const stylesByCategory = {
     [Category.primary]: {
       txtColorPrimary: props.theme.colors.button.disabledText,
-      bgColorPrimary: props.theme.colors[variant].darkest,
-      borderColorPrimary: props.theme.colors[variant].darkest,
+      bgColorPrimary: props.theme.colors[variant].darker,
+      borderColorPrimary: props.theme.colors[variant].darker,
     },
     [Category.secondary]: {
       txtColorSecondary: props.theme.colors.button.disabledText,
-      bgColorSecondary: props.theme.colors[variant].darkest,
-      borderColorSecondary: props.theme.colors[variant].darker,
+      bgColorSecondary: props.theme.colors[variant].darker,
+      borderColorSecondary: props.isLoading
+        ? props.theme.colors[variant].darkest
+        : props.theme.colors.tertiary.darker,
     },
     [Category.tertiary]: {
       txtColorTertiary: props.theme.colors.button.disabledText,
-      bgColorTertiary: props.theme.colors.tertiary.darker,
-      borderColorTertiary: props.theme.colors.tertiary.dark,
+      bgColorTertiary: props.theme.colors.tertiary.dark,
+      borderColorTertiary: props.isLoading
+        ? props.theme.colors.tertiary.darkest
+        : props.theme.colors.tertiary.darker,
     },
   };
 
@@ -104,6 +121,19 @@ const getMainStateStyles = (props: ThemeProp & ButtonProps) => {
   const variant = props.variant || defaultProps.variant;
   const category = props.category || defaultProps.category;
 
+  if (props.tag === "a") {
+    return {
+      bgColorPrimary: "transparent",
+      borderColorPrimary: "transparent",
+      txtColorPrimary: props.theme.colors.button.link.main,
+      bgColorSecondary: "transparent",
+      borderColorSecondary: "transparent",
+      txtColorSecondary: props.theme.colors.button.link.main,
+      bgColorTertiary: "transparent",
+      borderColorTertiary: "transparent",
+      txtColorTertiary: props.theme.colors.button.link.main,
+    };
+  }
   const stylesByCategory = {
     [Category.primary]: {
       bgColorPrimary: props.theme.colors[variant].main,
@@ -129,6 +159,20 @@ const getHoverStateStyles = (props: ThemeProp & ButtonProps) => {
   const variant = props.variant || defaultProps.variant;
   const category = props.category || defaultProps.category;
 
+  if (props.tag === "a") {
+    return {
+      bgColorPrimary: "transparent",
+      borderColorPrimary: "transparent",
+      txtColorPrimary: props.theme.colors.button.link.hover,
+      bgColorSecondary: "transparent",
+      borderColorSecondary: "transparent",
+      txtColorSecondary: props.theme.colors.button.link.hover,
+      bgColorTertiary: "transparent",
+      borderColorTertiary: "transparent",
+      txtColorTertiary: props.theme.colors.button.link.hover,
+    };
+  }
+
   const stylesByCategory = {
     [Category.primary]: {
       bgColorPrimary: props.theme.colors[variant].dark,
@@ -154,6 +198,19 @@ const getActiveStateStyles = (props: ThemeProp & ButtonProps) => {
   const variant = props.variant || defaultProps.variant;
   const category = props.category || defaultProps.category;
 
+  if (props.tag === "a") {
+    return {
+      bgColorPrimary: "transparent",
+      borderColorPrimary: "transparent",
+      txtColorPrimary: props.theme.colors.button.link.active,
+      bgColorSecondary: "transparent",
+      borderColorSecondary: "transparent",
+      txtColorSecondary: props.theme.colors.button.link.active,
+      bgColorTertiary: "transparent",
+      borderColorTertiary: "transparent",
+      txtColorTertiary: props.theme.colors.button.link.active,
+    };
+  }
   const stylesByCategory = {
     [Category.primary]: {
       bgColorPrimary: props.theme.colors[variant].dark,
@@ -307,11 +364,25 @@ const ButtonStyles = css<ThemeProp & ButtonProps>`
   border-radius: 0;
   ${(props) => btnFontStyles(props).buttonFont};
   padding: ${(props) => btnFontStyles(props).padding};
-  .${Classes.ICON} {
+  .${Classes.ICON}:not([name="no-response"]) {
     margin-right: ${(props) =>
       props.text && props.icon ? `${props.theme.spaces[2] - 1}px` : `0`};
     path {
       fill: ${(props) => btnColorStyles(props, "main").txtColor};
+      &[stroke-width],
+      &[stroke] {
+        stroke: ${(props) => btnColorStyles(props, "main").txtColor};
+        fill: transparent;
+      }
+    }
+    rect[stroke] {
+      stroke: ${(props) => btnColorStyles(props, "main").txtColor};
+    }
+    &[name="search"] {
+      circle {
+        fill: transparent;
+        stroke: ${(props) => btnColorStyles(props, "main").txtColor};
+      }
     }
   }
   &:hover {
@@ -326,6 +397,20 @@ const ButtonStyles = css<ThemeProp & ButtonProps>`
         props.text && props.icon ? `${props.theme.spaces[2] - 1}px` : `0`};
       path {
         fill: ${(props) => btnColorStyles(props, "hover").txtColor};
+        &[stroke-width],
+        &[stroke] {
+          fill: transparent;
+          stroke: ${(props) => btnColorStyles(props, "hover").txtColor};
+        }
+      }
+      rect[stroke] {
+        stroke: ${(props) => btnColorStyles(props, "hover").txtColor};
+      }
+      &[name="search"] {
+        circle {
+          fill: transparent;
+          stroke: ${(props) => btnColorStyles(props, "hover").txtColor};
+        }
       }
     }
   }
@@ -339,6 +424,20 @@ const ButtonStyles = css<ThemeProp & ButtonProps>`
     .${Classes.ICON} {
       path {
         fill: ${(props) => btnColorStyles(props, "active").txtColor};
+        &[stroke-width],
+        &[stroke] {
+          fill: transparent;
+          stroke: ${(props) => btnColorStyles(props, "active").txtColor};
+        }
+      }
+      rect[stroke] {
+        stroke: ${(props) => btnColorStyles(props, "active").txtColor};
+      }
+      &[name="search"] {
+        circle {
+          fill: transparent;
+          stroke: ${(props) => btnColorStyles(props, "active").txtColor};
+        }
       }
     }
   }
@@ -352,6 +451,9 @@ const ButtonStyles = css<ThemeProp & ButtonProps>`
     right: 0;
     margin-left: auto;
     margin-right: auto;
+    circle {
+      stroke: ${(props) => props.theme.colors.button.disabledText};
+    }
   }
 `;
 
@@ -361,6 +463,8 @@ const StyledButton = styled("button")`
 
 const StyledLinkButton = styled("a")`
   ${ButtonStyles}
+  background: transparent;
+  border-color: transparent;
 `;
 
 export const VisibilityWrapper = styled.div`
@@ -407,8 +511,11 @@ const getTextContent = (props: ButtonProps) =>
 
 const getButtonContent = (props: ButtonProps) => (
   <>
-    {getIconContent(props)}
-    <span>{getTextContent(props)}</span>
+    {props.tag === "button" && getIconContent(props)}
+    <span style={{ marginRight: props.tag === "a" ? 7.67 : 0 }}>
+      {getTextContent(props)}
+    </span>
+    {props.tag === "a" && getIconContent(props)}
     {props.isLoading ? <Spinner size={IconSizeProp(props.size)} /> : null}
   </>
 );
diff --git a/app/client/src/components/ads/EmojiPicker.tsx b/app/client/src/components/ads/EmojiPicker.tsx
@@ -7,6 +7,8 @@ import { withTheme } from "styled-components";
 import { Theme } from "constants/DefaultTheme";
 import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 import "emoji-mart/css/emoji-mart.css";
+import Tooltip from "components/ads/Tooltip";
+import { ADD_REACTION, createMessage, EMOJI } from "constants/messages";
 
 const EmojiPicker = withTheme(
   ({
@@ -50,12 +52,14 @@ const EmojiPicker = withTheme(
         }}
         portalClassName="emoji-picker-portal"
       >
-        <Icon
-          fillColor={theme.colors.comments.emojiPicker}
-          keepColors
-          name={iconName || "emoji"}
-          size={iconSize || IconSize.XXXL}
-        />
+        <Tooltip content={createMessage(iconName ? ADD_REACTION : EMOJI)}>
+          <Icon
+            fillColor={theme.colors.comments.emojiPicker}
+            keepColors
+            name={iconName || "emoji"}
+            size={iconSize || IconSize.XXXL}
+          />
+        </Tooltip>
       </Popover2>
     );
   },
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
@@ -329,9 +329,12 @@ export const renderEmptyRows = (
         <div {...rowProps} className="tr" key={index}>
           {multiRowSelection && renderCheckBoxCell(false)}
           {row.cells.map((cell: any, cellIndex: number) => {
-            return (
-              <div {...cell.getCellProps()} className="td" key={cellIndex} />
-            );
+            const cellProps = cell.getCellProps();
+            if (columns[0]?.columnProperties?.cellBackground) {
+              cellProps.style.background =
+                columns[0].columnProperties.cellBackground;
+            }
+            return <div {...cellProps} className="td" key={cellIndex} />;
           })}
         </div>
       );
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts
