LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add varnames for padding values for button and input

Browse Source
This commit is contained in:
Matthew Russell 2022-03-07 13:16:06 -08:00
parent 91e4c2a385
commit 6df206e411
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
libs/ui-toolkit/src/components/button/button.tsx
View File

@ -20,8 +20,14 @@ export interface AnchorButtonProps
const getClassName = ( const getClassName = (
className: CommonProps['className'], className: CommonProps['className'],
variant: CommonProps['variant'] variant: CommonProps['variant']
) => ) => {
classNames( const noPaddingLeftProvided = !(
className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline'
);
const noPaddingRightProvided = !(
className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
);
return classNames(
[ [
'inline-flex', 'inline-flex',
'items-center', 'items-center',
@ -37,12 +43,8 @@ const getClassName = (
'transition-all', 'transition-all',
], ],
{ {
'pl-28': !( 'pl-28': noPaddingLeftProvided,
className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline' 'pr-28': noPaddingRightProvided,
),
'pr-28': !(
className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
),
'hover:border-black dark:hover:border-white': variant !== 'inline', 'hover:border-black dark:hover:border-white': variant !== 'inline',
'active:border-black dark:active:border-white': true, 'active:border-black dark:active:border-white': true,
@ -94,6 +96,7 @@ const getClassName = (
}, },
className className
); );
};
const getContent = ( const getContent = (
children: React.ReactNode, children: React.ReactNode,

11
libs/ui-toolkit/src/components/input/input.tsx
View File

@ -15,8 +15,10 @@ export const inputClassNames = ({
}: { }: {
hasError?: boolean; hasError?: boolean;
className?: string; className?: string;
}) => }) => {
classNames( const noPaddingLeftProvided = !className?.match(/(^| )p(l|x)-\d+( |$)/);
const noPaddingRightProvided = !className?.match(/(^| )p(r|x)-\d+( |$)/);
return classNames(
[ [
'inline-flex', 'inline-flex',
'items-center', 'items-center',
@ -32,12 +34,13 @@ export const inputClassNames = ({
'disabled:bg-black-10 disabled:dark:bg-white-10', 'disabled:bg-black-10 disabled:dark:bg-white-10',
], ],
{ {
'pl-8': !className?.match(/(^| )p(l|x)-\d+( |$)/), 'pl-8': noPaddingLeftProvided,
'pr-8': !className?.match(/(^| )p(r|x)-\d+( |$)/), 'pr-8': noPaddingRightProvided,
'border-vega-pink dark:border-vega-pink': hasError, 'border-vega-pink dark:border-vega-pink': hasError,
}, },
className className
); );
};
export const inputStyle = ({ export const inputStyle = ({
style, style,