fix(slash): passing className property to Button remove af-btn defaul…

…tClassName
AxaFrance · Dec 26, 2024 · 0b2a159 · 0b2a159
1 parent d578a81
commit 0b2a159
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/slash/react/src/Button/Button.stories.tsx b/slash/react/src/Button/Button.stories.tsx
@@ -30,6 +30,7 @@ type StoryProps = Omit<
 > & {
   children: string;
   classModifier: string[];
+  className: string;
 };
 type Story = StoryObj<StoryProps>;
 
@@ -43,6 +44,7 @@ export const Playground: Story = {
   args: {
     children: "Button",
     classModifier: [] as string[],
+    className: "",
   },
   argTypes: {
     classModifier: {

diff --git a/slash/react/src/Button/Button.tsx b/slash/react/src/Button/Button.tsx
@@ -1,7 +1,7 @@
 import "@axa-fr/design-system-slash-css/dist/Button/Button.scss";
-import classNames from "classnames";
 
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import { getComponentClassName } from "../utilities";
 
 type ButtonProps = {
   classModifier?: string;
@@ -13,17 +13,14 @@ export const Button = ({
   className,
   ...args
 }: PropsWithChildren<ButtonProps>) => {
-  const classes = classModifier
-    ?.split(" ")
-    .map((modifier) => `af-btn--${modifier}`)
-    .join(" ");
+  const componentClassName = getComponentClassName(
+    className,
+    classModifier,
+    "af-btn",
+  );
 
   return (
-    <button
-      className={classNames("af-btn", classes, className)}
-      type="button"
-      {...args}
-    >
+    <button className={componentClassName} type="button" {...args}>
       {children}
     </button>
   );