feat(bulkActions): update do ds5 styles (#3631)

lumada-design · Aug 23, 2023 · 778424d · 778424d
1 parent 55c7e43
commit 778424d
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/packages/core/src/components/BulkActions/BulkActions.tsx b/packages/core/src/components/BulkActions/BulkActions.tsx
@@ -4,7 +4,11 @@ import { useDefaultProps } from "@core/hooks/useDefaultProps";
 import { setId } from "@core/utils/setId";
 import { useTheme } from "@core/hooks/useTheme";
 import { HvBaseProps } from "@core/types/generic";
-import { HvButton, HvButtonProps } from "@core/components/Button";
+import {
+  HvButton,
+  HvButtonProps,
+  HvButtonVariant,
+} from "@core/components/Button";
 import { HvCheckBox, HvCheckBoxProps } from "@core/components/CheckBox";
 import {
   HvActionGeneric,
@@ -151,14 +155,14 @@ export const HvBulkActions = (props: HvBulkActionsProps) => {
         isSemantic &&
           css({
             [`& .${staticClasses.selectAll} div`]: {
-              color: theme.colors.base_dark,
+              color: theme.bulkActions.semanticColor,
 
               "&:hover:not(:disabled)": {
                 backgroundColor: hexToRgbA(baseColor, 0.3),
               },
 
               "& *": {
-                color: theme.colors.base_dark,
+                color: theme.bulkActions.semanticColor,
                 backgroundColor: "transparent",
               },
             },
@@ -188,19 +192,27 @@ export const HvBulkActions = (props: HvBulkActionsProps) => {
             <HvButton
               id={setId(id, "pages")}
               className={classes.selectAllPages}
-              variant={isSemantic ? "semantic" : "secondaryGhost"}
+              variant={
+                isSemantic
+                  ? (activeTheme?.bulkActions
+                      .actionButtonVariant as HvButtonVariant)
+                  : "secondaryGhost"
+              }
               onClick={onSelectAllPages}
             >
-              {selectAllPagesLabel ??
-                `Select all ${numTotal} items across all pages`}
+              {selectAllPagesLabel ?? `Select all ${numTotal} items`}
             </HvButton>
           </>
         )}
       </div>
       <HvActionsGeneric
         id={setId(id, "actions")}
         classes={{ root: classes.actions }}
-        category={isSemantic ? "semantic" : "secondaryGhost"}
+        category={
+          isSemantic
+            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)
+            : "secondaryGhost"
+        }
         actions={actions}
         disabled={actionsDisabled ?? numSelected === 0}
         actionsCallback={actionsCallback}

diff --git a/packages/styles/src/theme.ts b/packages/styles/src/theme.ts
@@ -223,6 +223,8 @@ const componentsSpec: DeepString<HvThemeComponents> = {
     backgroundColor: "string",
     padding: "string",
     anySelectedBackgroundColor: "string",
+    actionButtonVariant: "string",
+    semanticColor: "string",
   },
   table: {
     headerHoverColor: "string",

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -440,6 +440,8 @@ const ds3 = makeTheme((theme: HvTheme) => ({
     backgroundColor: theme.colors.atmo1,
     padding: "0px",
     anySelectedBackgroundColor: theme.colors.neutral_20,
+    actionButtonVariant: "semantic",
+    semanticColor: theme.colors.base_dark,
   },
   table: {
     headerHoverColor: theme.colors.atmo3,

diff --git a/packages/styles/src/themes/ds5.ts b/packages/styles/src/themes/ds5.ts
@@ -383,6 +383,8 @@ const ds5 = makeTheme((theme: HvTheme) => ({
     backgroundColor: theme.colors.atmo2,
     padding: `${theme.space.xs} ${theme.space.md}`,
     anySelectedBackgroundColor: theme.colors.primary_20,
+    actionButtonVariant: "primaryGhost",
+    semanticColor: "inherit",
   },
   table: {
     headerHoverColor: "transparent",

diff --git a/packages/styles/src/types.ts b/packages/styles/src/types.ts
@@ -237,6 +237,8 @@ export type HvThemeComponents = {
     backgroundColor: string;
     padding: string;
     anySelectedBackgroundColor: string;
+    actionButtonVariant: string;
+    semanticColor: string;
   };
   table: {
     headerHoverColor: string;