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

fix(ui-toolkit): toolkit bugs (#4329)

Browse Source
This commit is contained in:
Dexter Edwards 2023-07-17 11:59:22 +01:00 committed by GitHub
parent f440f57be2
commit a68b2093e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,14 +30,14 @@ const primary = [
'enabled:active:bg-vega-yellow-550 enabled:active:border-vega-yellow-550', 'enabled:active:bg-vega-yellow-550 enabled:active:border-vega-yellow-550',
]; ];
const secondary = [ const secondary = [
'text-white dark:text-black', 'text-white',
'border-vega-pink', 'border-vega-pink',
'dark:bg-vega-pink bg-vega-pink-550', 'dark:bg-vega-pink bg-vega-pink-550',
'enabled:hover:bg-vega-pink enabled:hover:border-vega-pink', 'enabled:hover:bg-vega-pink enabled:hover:border-vega-pink',
'enabled:active:bg-vega-pink enabled:active:border-vega-pink', 'enabled:active:bg-vega-pink enabled:active:border-vega-pink',
]; ];
const ternary = [ const ternary = [
'text-white dark:text-black', 'text-black',
'border-vega-green', 'border-vega-green',
'dark:bg-vega-green bg-vega-green-550', 'dark:bg-vega-green bg-vega-green-550',
'enabled:hover:bg-vega-green enabled:hover:border-vega-green', 'enabled:hover:bg-vega-green enabled:hover:border-vega-green',

7
libs/ui-toolkit/src/components/checkbox/checkbox.stories.tsx
View File

@ -15,6 +15,13 @@ Default.args = {
label: 'Regular checkbox', label: 'Regular checkbox',
}; };
export const Overflow = Template.bind({});
Overflow.args = {
name: 'overflow',
label:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
};
export const Disabled = Template.bind({}); export const Disabled = Template.bind({});
Disabled.args = { Disabled.args = {
disabled: true, disabled: true,

4
libs/ui-toolkit/src/components/checkbox/checkbox.tsx
View File

@ -20,7 +20,7 @@ export const Checkbox = ({
disabled = false, disabled = false,
}: CheckboxProps) => { }: CheckboxProps) => {
const rootClasses = classNames( const rootClasses = classNames(
'relative flex justify-center items-center w-[15px] h-[15px]', 'relative flex justify-center items-center w-[15px] h-[15px] mt-1',
'border rounded-sm overflow-hidden', 'border rounded-sm overflow-hidden',
{ {
'opacity-40 cursor-default': disabled, 'opacity-40 cursor-default': disabled,
@ -30,7 +30,7 @@ export const Checkbox = ({
); );
return ( return (
<div className="flex gap-1 items-center"> <div className="flex gap-1">
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
name={name} name={name}
id={name} id={name}

5
libs/ui-toolkit/src/utils/shared.ts
View File

@ -8,10 +8,11 @@ export const defaultFormElement = (hasError?: boolean) =>
'flex items-center w-full text-sm', 'flex items-center w-full text-sm',
'p-2 border-2 rounded', 'p-2 border-2 rounded',
'bg-transparent', 'bg-transparent',
'border border-vega-light-200 dark:border-vega-dark-200', 'border',
'focus:border-vega-light-300 dark:focus:border-vega-dark-300', 'focus:border-vega-light-300 dark:focus:border-vega-dark-300',
'disabled:opacity-60', 'disabled:opacity-60',
{ {
'border-vega-pink': hasError, 'border-vega-pink text-vega-pink': hasError,
'border-vega-light-200 dark:border-vega-dark-200': !hasError,
} }
); );