From ec80f8f5785640d472d0237295c432141c5df899 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sat, 5 Aug 2023 16:29:47 +0800
Subject: [PATCH] Add dynamic height prop

Use for icon buttons.
---
 .gitignore                                          |  1 +
 categories/web/action/react/.eslintrc               |  3 ++-
 .../react/src/components/ActionButton/index.tsx     | 13 ++++++++++++-
 categories/web/navigation/react/.eslintrc           |  3 ++-
 .../react/src/components/LinkButton/index.tsx       | 13 ++++++++++++-
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index 997d5f4..20bfd41 100644
--- a/.gitignore
+++ b/.gitignore
@@ -106,3 +106,4 @@ dist
 
 .npmrc
 .idea/
+.DS_Store
diff --git a/categories/web/action/react/.eslintrc b/categories/web/action/react/.eslintrc
index eb13f76..5493d08 100644
--- a/categories/web/action/react/.eslintrc
+++ b/categories/web/action/react/.eslintrc
@@ -4,7 +4,8 @@
     "quote-props": "off",
     "react/jsx-props-no-spreading": "off",
     "react/button-has-type": "off",
-    "import/no-extraneous-dependencies": "off"
+    "import/no-extraneous-dependencies": "off",
+		"no-tabs": "off"
   },
   "extends": [
     "lxsmnsyc/typescript/react"
diff --git a/categories/web/action/react/src/components/ActionButton/index.tsx b/categories/web/action/react/src/components/ActionButton/index.tsx
index 2bbfe9f..79cc217 100644
--- a/categories/web/action/react/src/components/ActionButton/index.tsx
+++ b/categories/web/action/react/src/components/ActionButton/index.tsx
@@ -43,6 +43,10 @@ export interface ActionButtonProps extends Omit<React.HTMLProps<ActionButtonDeri
    * Should the component's content use minimal space?
    */
   compact?: boolean;
+	/**
+	 * Should the children's height be variable?
+	 */
+	variableChildrenHeight?: boolean;
 }
 
 /**
@@ -62,6 +66,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
     compact = false as const,
     className,
     block = false as const,
+    variableChildrenHeight = false as const,
     ...etcProps
   },
   forwardedRef,
@@ -109,7 +114,12 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
       )}
     >
       <span
-        className="block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded"
+        className={clsx(
+          'block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded',
+          {
+            'h-[1.1em]': !variableChildrenHeight,
+          },
+        )}
         data-testid="children"
       >
         {children}
@@ -167,4 +177,5 @@ ActionButton.defaultProps = {
   menuItem: false as const,
   size: 'medium' as const,
   compact: false as const,
+  variableChildrenHeight: false as const,
 };
diff --git a/categories/web/navigation/react/.eslintrc b/categories/web/navigation/react/.eslintrc
index 4df382e..66223dd 100644
--- a/categories/web/navigation/react/.eslintrc
+++ b/categories/web/navigation/react/.eslintrc
@@ -1,7 +1,8 @@
 {
   "root": true,
   "rules": {
-    "react/jsx-props-no-spreading": "off"
+    "react/jsx-props-no-spreading": "off",
+		"no-tabs": "off"
   },
   "extends": [
     "lxsmnsyc/typescript/react"
diff --git a/categories/web/navigation/react/src/components/LinkButton/index.tsx b/categories/web/navigation/react/src/components/LinkButton/index.tsx
index f09f440..8e7a36b 100644
--- a/categories/web/navigation/react/src/components/LinkButton/index.tsx
+++ b/categories/web/navigation/react/src/components/LinkButton/index.tsx
@@ -47,6 +47,10 @@ export interface LinkButtonProps<T = any> extends Omit<React.HTMLProps<LinkButto
    * Is the component unable to receive activation?
    */
   disabled?: boolean;
+	/**
+	 * Should the children's height be variable?
+	 */
+	variableChildrenHeight?: boolean;
 }
 
 /**
@@ -67,6 +71,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
     disabled = false,
     href,
     style,
+    variableChildrenHeight = false as const,
     ...etcProps
   },
   forwardedRef,
@@ -119,7 +124,12 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
         )}
       >
         <span
-          className="block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded"
+          className={clsx(
+            'block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded',
+            {
+              'h-[1.1em]': !variableChildrenHeight,
+            },
+          )}
           data-testid="children"
         >
           {children}
@@ -179,4 +189,5 @@ LinkButton.defaultProps = {
   subtext: undefined,
   block: false,
   disabled: false,
+  variableChildrenHeight: false as const,
 };