code review fixes

appsmithorg · May 16, 2024 · 0b9e515 · 0b9e515
1 parent 54647df
commit 0b9e515
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 9 deletions.
diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts b/app/client/src/widgets/wds/WDSTableWidget/component/Constants.ts
@@ -156,7 +156,7 @@ export interface CellWrappingProperties {
 
 export interface ButtonCellProperties {
   buttonVariant: ButtonCellProps["buttonVariant"];
-  buttonColor?: string;
+  buttonColor?: ButtonCellProps["buttonColor"];
   buttonLabel?: string;
   isCompact?: boolean;
   iconName?: IconName;
@@ -351,7 +351,7 @@ export interface ColumnProperties
   allowSameOptionsInNewRow?: boolean;
   newRowSelectOptions?: DropdownOption[];
   buttonLabel?: string;
-  buttonColor?: string;
+  buttonColor?: ButtonCellProps["buttonColor"];
   onClick?: string;
   dropdownOptions?: string;
   onOptionChange?: string;

diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx b/app/client/src/widgets/wds/WDSTableWidget/component/cellComponents/ButtonCell.tsx
@@ -6,14 +6,19 @@ import type { BaseCellComponentProps } from "../Constants";
 
 export interface ButtonCellProps {
   buttonLabel?: string;
-  cellColor?: "default" | keyof typeof COLORS;
+  buttonColor?: keyof typeof COLORS;
   buttonVariant?: ButtonProps["variant"];
   onClick?: (onComplete: () => void) => void;
   isDisabled?: boolean;
 }
 
 function ButtonCell(props: ButtonCellProps & BaseCellComponentProps) {
-  const { buttonLabel, buttonVariant, cellColor, isDisabled } = props;
+  const {
+    buttonColor = "accent",
+    buttonLabel,
+    buttonVariant,
+    isDisabled,
+  } = props;
   const [isLoading, setIsLoading] = useState(false);
 
   const onComplete = () => {
@@ -30,7 +35,7 @@ function ButtonCell(props: ButtonCellProps & BaseCellComponentProps) {
 
   return (
     <Button
-      color={cellColor === "default" ? "accent" : cellColor}
+      color={buttonColor}
       isDisabled={isDisabled}
       isLoading={isLoading}
       onPress={onClick}

diff --git a/app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css b/app/client/src/widgets/wds/WDSTableWidget/component/styles.module.css
@@ -220,7 +220,11 @@
   }
 
   @each $color in colors {
-    & [role="cell"][data-cell-color="$(color)"] {
+    &
+      [role="cell"][data-cell-color="$(color)"]:not(
+        [data-column-type="button"],
+        [data-column-type="url"]
+      ) {
       background-color: var(--color-bg-$(color)-subtle);
     }
 

diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts
@@ -33,5 +33,6 @@ export const defaultsConfig = {
   inlineEditingSaveOption: InlineEditingSaveOptions.ROW_LEVEL,
   pageSize: 8,
   buttonLabel: "Action",
+  buttonColor: "accent",
   buttonVariant: "filled",
 } as unknown as WidgetDefaultProps;
diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts b/app/client/src/widgets/wds/WDSTableWidget/config/propertyPaneConfig/PanelConfig/Color.ts
@@ -1,6 +1,11 @@
 import { ValidationTypes } from "constants/WidgetValidation";
 import { COLORS } from "@design-system/widgets";
 import capitalize from "lodash/capitalize";
+import {
+  ColumnTypes,
+  type TableWidgetProps,
+} from "widgets/wds/WDSTableWidget/constants";
+import { showByColumnType } from "widgets/wds/WDSTableWidget/widget/propertyUtils";
 
 export default {
   sectionName: "Color",
@@ -31,6 +36,39 @@ export default {
           default: "default",
         },
       },
+      hidden: () => {
+        return true;
+      },
+    },
+    {
+      propertyName: "buttonColor",
+      label: "Button color",
+      controlType: "DROP_DOWN",
+      fullWidth: true,
+      helpText: "Sets the semantic color of the button",
+      options: Object.values(COLORS).map((semantic) => ({
+        label: capitalize(semantic),
+        value: semantic,
+      })),
+      isJSConvertible: true,
+      isBindProperty: true,
+      isTriggerProperty: false,
+      defaultValue: "accent",
+      validation: {
+        type: ValidationTypes.TEXT,
+        params: {
+          allowedValues: Object.values(COLORS),
+          default: "accent",
+        },
+      },
+      hidden: (props: TableWidgetProps, propertyPath: string) => {
+        return showByColumnType(props, propertyPath, [
+          ColumnTypes.URL,
+          ColumnTypes.TEXT,
+          ColumnTypes.NUMBER,
+          ColumnTypes.DATE,
+        ]);
+      },
     },
   ],
 };
diff --git a/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx
@@ -1545,7 +1545,6 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       case "url":
         return (
           <URLCell
-            cellColor={cellProperties.cellColor}
             href={props.cell.value}
             isBold={cellProperties.fontStyle?.includes(FontStyleTypes.BOLD)}
             isCellVisible={cellProperties.isCellVisible ?? true}
@@ -1557,9 +1556,9 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       case "button":
         return (
           <ButtonCell
+            buttonColor={cellProperties.buttonColor}
             buttonLabel={cellProperties.buttonLabel || "Action"}
             buttonVariant={cellProperties.buttonVariant}
-            cellColor={cellProperties.cellColor}
             isCellVisible={cellProperties.isCellVisible ?? true}
             isDisabled={cellProperties.isDisabled}
             isHidden={isHidden}

diff --git a/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts b/app/client/src/widgets/wds/WDSTableWidget/widget/utilities.ts
@@ -208,6 +208,7 @@ export function getDefaultColumnProperties(
     decimals: 0,
     thousandSeparator: true,
     notation: "standard" as Intl.NumberFormatOptions["notation"],
+    buttonColor: "accent",
   } as ColumnProperties;
 
   return columnProps;
@@ -301,7 +302,11 @@ export const getCellProperties = (
         columnProperties.cellBackground,
         rowIndex,
       ),
-      buttonColor: getPropertyValue(columnProperties.buttonColor, rowIndex),
+      buttonColor: getPropertyValue(
+        columnProperties.buttonColor,
+        rowIndex,
+        true,
+      ),
       buttonLabel: getPropertyValue(
         columnProperties.buttonLabel,
         rowIndex,