Browse Source

Add dynamic height prop

Use for icon buttons.
master
TheoryOfNekomata 9 months ago
parent
commit
ec80f8f578
5 changed files with 29 additions and 4 deletions
  1. +1
    -0
      .gitignore
  2. +2
    -1
      categories/web/action/react/.eslintrc
  3. +12
    -1
      categories/web/action/react/src/components/ActionButton/index.tsx
  4. +2
    -1
      categories/web/navigation/react/.eslintrc
  5. +12
    -1
      categories/web/navigation/react/src/components/LinkButton/index.tsx

+ 1
- 0
.gitignore View File

@@ -106,3 +106,4 @@ dist

.npmrc
.idea/
.DS_Store

+ 2
- 1
categories/web/action/react/.eslintrc View File

@@ -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"


+ 12
- 1
categories/web/action/react/src/components/ActionButton/index.tsx View File

@@ -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,
};

+ 2
- 1
categories/web/navigation/react/.eslintrc View File

@@ -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"


+ 12
- 1
categories/web/navigation/react/src/components/LinkButton/index.tsx View File

@@ -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,
};

Loading…
Cancel
Save