feat(field): add isActive prop to button & IconButton

MTES-MCT · Jul 4, 2023 · 13025e4 · 13025e4
1 parent 0a5e38e
commit 13025e4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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) {