From 13025e412259769c439a5afbde397b7a826b16e0 Mon Sep 17 00:00:00 2001
From: Thomas Brosset <thomas.brosset@gmail.com>
Date: Tue, 4 Jul 2023 16:29:01 +0200
Subject: [PATCH] feat(field): add isActive prop to button & IconButton

---
 src/elements/Button.tsx     | 7 +++++--
 src/elements/IconButton.tsx | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/elements/Button.tsx b/src/elements/Button.tsx
index 886f57cab..a69cfb6ad 100644
--- a/src/elements/Button.tsx
+++ b/src/elements/Button.tsx
@@ -16,6 +16,7 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'childre
   Icon?: FunctionComponent<IconProps> | undefined
   accent?: Accent | undefined
   children?: string | undefined
+  isActive?: boolean | undefined
   isFullWidth?: boolean | undefined
   size?: Size | undefined
   /** Prevent onClick event propagation. */
@@ -26,6 +27,7 @@ export function Button({
   children,
   className,
   Icon,
+  isActive = false,
   isFullWidth = false,
   onClick,
   size = Size.NORMAL,
@@ -60,14 +62,15 @@ export function Button({
     () => ({
       as: StyledButton,
       children: commonChildren,
-      className: classnames('Element-Button', className),
+      className: classnames('Element-Button', isActive && '_active', className),
+      isActive,
       isFullWidth,
       onClick: handleClick,
       size,
       type,
       ...nativeProps
     }),
-    [className, commonChildren, handleClick, isFullWidth, nativeProps, size, type]
+    [className, commonChildren, handleClick, isActive, isFullWidth, nativeProps, size, type]
   )
 
   switch (accent) {
diff --git a/src/elements/IconButton.tsx b/src/elements/IconButton.tsx
index 2d5c37d60..7deeaf6d5 100644
--- a/src/elements/IconButton.tsx
+++ b/src/elements/IconButton.tsx
@@ -19,6 +19,7 @@ export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'chi
   color?: string | undefined
   /** In pixels, override `size` prop default values. */
   iconSize?: number | undefined
+  isActive?: boolean | undefined
   size?: Size | undefined
   /** Prevent onClick event propagation. */
   withUnpropagatedClick?: boolean | undefined
@@ -29,6 +30,7 @@ export function IconButton({
   color,
   Icon,
   iconSize,
+  isActive = false,
   onClick,
   size = Size.NORMAL,
   type = 'button',
@@ -56,13 +58,14 @@ export function IconButton({
   const commonProps = useMemo(
     () => ({
       children: commonChildren,
-      className: classnames('Element-IconButton', className),
+      className: classnames('Element-IconButton', isActive && '_active', className),
+      isActive,
       onClick: handleClick,
       size,
       type,
       ...nativeProps
     }),
-    [className, commonChildren, handleClick, nativeProps, size, type]
+    [className, commonChildren, handleClick, isActive, nativeProps, size, type]
   )
 
   switch (accent) {