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

MTES-MCT · Oct 25, 2023 · c52d6ad · c52d6ad
1 parent 20773fc
commit c52d6ad
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
   /** Remove button border and padding. */
   isCompact?: boolean | undefined
   size?: Size | undefined
@@ -31,6 +32,7 @@ export function IconButton({
   color,
   Icon,
   iconSize,
+  isActive = false,
   isCompact,
   onClick,
   size = Size.NORMAL,
@@ -59,14 +61,15 @@ export function IconButton({
   const commonProps = useMemo(
     () => ({
       children: commonChildren,
-      className: classnames('Element-IconButton', className),
+      className: classnames('Element-IconButton', isActive && '_active', className),
+      isActive,
       isCompact,
       onClick: handleClick,
       size,
       type,
       ...nativeProps
     }),
-    [className, commonChildren, handleClick, isCompact, nativeProps, size, type]
+    [className, commonChildren, handleClick, isActive, isCompact, nativeProps, size, type]
   )
 
   switch (accent) {