fix(QueryBuilder): deprecated typography removed and links replaced b…

…y buttons in empty state
lumada-design · Nov 24, 2023 · f41d9b9 · f41d9b9
1 parent 5321d09
commit f41d9b9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/packages/core/src/components/QueryBuilder/QueryBuilder.styles.tsx b/packages/core/src/components/QueryBuilder/QueryBuilder.styles.tsx
@@ -103,4 +103,14 @@ export const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
     backgroundColor: theme.colors.atmo2,
     display: "inline-flex",
   },
+  createConditionButton: {
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    padding: 0,
+  },
+  createGroupButton: {
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    padding: 0,
+  },
 });
diff --git a/packages/core/src/components/QueryBuilder/RuleGroup/RuleGroup.tsx b/packages/core/src/components/QueryBuilder/RuleGroup/RuleGroup.tsx
@@ -202,28 +202,25 @@ export const RuleGroup = ({
           message={
             <>
               <HvTypography
-                variant="link"
-                component="a"
+                link
+                component="button"
                 onClick={() => {
                   dispatchAction({ type: "add-rule", id });
                 }}
-                style={{ cursor: "pointer", textDecoration: "underline" }}
+                className={classes.createConditionButton}
               >
                 {`${labels.empty?.createCondition}`}
               </HvTypography>
               {level <= normalizedMaxDepth && (
                 <>
                   {`${labels.empty?.spacer}`}
                   <HvTypography
-                    variant="link"
-                    component="a"
+                    link
+                    component="button"
                     onClick={() => {
                       dispatchAction({ type: "add-group", id });
                     }}
-                    style={{
-                      cursor: "pointer",
-                      textDecoration: "underline",
-                    }}
+                    className={classes.createGroupButton}
                   >
                     {`${labels.empty?.createGroup}`}
                   </HvTypography>

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -1071,6 +1071,14 @@ const ds3 = makeTheme((theme) => ({
           bottom: `calc(-1 * ${theme.space.md} * 0.5)`,
           right: `calc(${theme.space.sm} * 1.75)`,
         },
+        createConditionButton: {
+          ...theme.typography.link,
+          textDecoration: "underline",
+        },
+        createGroupButton: {
+          ...theme.typography.link,
+          textDecoration: "underline",
+        },
       },
     },
     HvQueryBuilderRule: {