@@ -106,3 +106,4 @@ dist | |||||
.npmrc | .npmrc | ||||
.idea/ | .idea/ | ||||
.DS_Store |
@@ -4,7 +4,8 @@ | |||||
"quote-props": "off", | "quote-props": "off", | ||||
"react/jsx-props-no-spreading": "off", | "react/jsx-props-no-spreading": "off", | ||||
"react/button-has-type": "off", | "react/button-has-type": "off", | ||||
"import/no-extraneous-dependencies": "off" | |||||
"import/no-extraneous-dependencies": "off", | |||||
"no-tabs": "off" | |||||
}, | }, | ||||
"extends": [ | "extends": [ | ||||
"lxsmnsyc/typescript/react" | "lxsmnsyc/typescript/react" | ||||
@@ -43,6 +43,10 @@ export interface ActionButtonProps extends Omit<React.HTMLProps<ActionButtonDeri | |||||
* Should the component's content use minimal space? | * Should the component's content use minimal space? | ||||
*/ | */ | ||||
compact?: boolean; | 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, | compact = false as const, | ||||
className, | className, | ||||
block = false as const, | block = false as const, | ||||
variableChildrenHeight = false as const, | |||||
...etcProps | ...etcProps | ||||
}, | }, | ||||
forwardedRef, | forwardedRef, | ||||
@@ -109,7 +114,12 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB | |||||
)} | )} | ||||
> | > | ||||
<span | <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" | data-testid="children" | ||||
> | > | ||||
{children} | {children} | ||||
@@ -167,4 +177,5 @@ ActionButton.defaultProps = { | |||||
menuItem: false as const, | menuItem: false as const, | ||||
size: 'medium' as const, | size: 'medium' as const, | ||||
compact: false as const, | compact: false as const, | ||||
variableChildrenHeight: false as const, | |||||
}; | }; |
@@ -1,7 +1,8 @@ | |||||
{ | { | ||||
"root": true, | "root": true, | ||||
"rules": { | "rules": { | ||||
"react/jsx-props-no-spreading": "off" | |||||
"react/jsx-props-no-spreading": "off", | |||||
"no-tabs": "off" | |||||
}, | }, | ||||
"extends": [ | "extends": [ | ||||
"lxsmnsyc/typescript/react" | "lxsmnsyc/typescript/react" | ||||
@@ -47,6 +47,10 @@ export interface LinkButtonProps<T = any> extends Omit<React.HTMLProps<LinkButto | |||||
* Is the component unable to receive activation? | * Is the component unable to receive activation? | ||||
*/ | */ | ||||
disabled?: boolean; | disabled?: boolean; | ||||
/** | |||||
* Should the children's height be variable? | |||||
*/ | |||||
variableChildrenHeight?: boolean; | |||||
} | } | ||||
/** | /** | ||||
@@ -67,6 +71,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP | |||||
disabled = false, | disabled = false, | ||||
href, | href, | ||||
style, | style, | ||||
variableChildrenHeight = false as const, | |||||
...etcProps | ...etcProps | ||||
}, | }, | ||||
forwardedRef, | forwardedRef, | ||||
@@ -119,7 +124,12 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP | |||||
)} | )} | ||||
> | > | ||||
<span | <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" | data-testid="children" | ||||
> | > | ||||
{children} | {children} | ||||
@@ -179,4 +189,5 @@ LinkButton.defaultProps = { | |||||
subtext: undefined, | subtext: undefined, | ||||
block: false, | block: false, | ||||
disabled: false, | disabled: false, | ||||
variableChildrenHeight: false as const, | |||||
}; | }; |