LaconicNetwork/vega-frontend-monorepo
3
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 = (
className: CommonProps['className'],
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',
'items-center',
@ -37,12 +43,8 @@ const getClassName = (
'transition-all',
],
{
'pl-28': !(
className?.match(/(^| )p(l|x)-\d+( |$)/) || variant === 'inline'
),
'pr-28': !(
className?.match(/(^| )p(r|x)-\d+( |$)/) || variant === 'inline'
),
'pl-28': noPaddingLeftProvided,
'pr-28': noPaddingRightProvided,
'hover:border-black dark:hover:border-white': variant !== 'inline',
'active:border-black dark:active:border-white': true,
@ -94,6 +96,7 @@ const getClassName = (
},
className
);
};
const getContent = (
children: React.ReactNode,

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

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