Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-11 15:16:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: button style error (#3396)

Browse Source
This commit is contained in:
Qi
2023-07-27 13:37:00 +08:00
committed by GitHub
parent 04534c2008
commit fa8086d525
8 changed files with 86 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/component/src/ui/button/button.tsx
+20 -15
View File
@@ -77,6 +77,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
iconPosition,
block,
loading,
className,
...otherProps
} = {
...defaultProps,
@@ -93,21 +94,25 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
return (
<button
ref={ref}
className={clsx(button, {
primary: type === 'primary',
plain: type === 'plain',
error: type === 'error',
warning: type === 'warning',
success: type === 'success',
processing: type === 'processing',
large: size === 'large',
extraLarge: size === 'extraLarge',
disabled,
circle: shape === 'circle',
round: shape === 'round',
block,
loading,
})}
className={clsx(
button,
{
primary: type === 'primary',
plain: type === 'plain',
error: type === 'error',
warning: type === 'warning',
success: type === 'success',
processing: type === 'processing',
large: size === 'large',
extraLarge: size === 'extraLarge',
disabled,
circle: shape === 'circle',
round: shape === 'round',
block,
loading,
},
className
)}
disabled={disabled}
data-disabled={disabled}
{...otherProps}
packages/component/src/ui/button/icon-button.tsx
+24 -17
View File
@@ -1,6 +1,6 @@
import clsx from 'clsx';
import type { HTMLAttributes, PropsWithChildren } from 'react';
import { forwardRef } from 'react';
import { forwardRef, type ReactElement } from 'react';
import { Loading } from '../loading';
import type { ButtonType } from './button';
@@ -15,6 +15,7 @@ export type IconButtonProps = PropsWithChildren &
loading?: boolean;
withoutPadding?: boolean;
active?: boolean;
icon?: ReactElement;
};
const defaultProps = {
type: 'plain',
@@ -35,6 +36,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
disabled,
loading,
active,
icon: propsIcon,
className,
...otherProps
} = {
...defaultProps,
@@ -44,29 +47,33 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
return (
<button
ref={ref}
className={clsx(iconButton, {
'without-padding': withoutPadding,
className={clsx(
iconButton,
{
'without-padding': withoutPadding,
primary: type === 'primary',
plain: type === 'plain',
error: type === 'error',
warning: type === 'warning',
success: type === 'success',
processing: type === 'processing',
primary: type === 'primary',
plain: type === 'plain',
error: type === 'error',
warning: type === 'warning',
success: type === 'success',
processing: type === 'processing',
large: size === 'large',
small: size === 'small',
'extra-small': size === 'extraSmall',
large: size === 'large',
small: size === 'small',
'extra-small': size === 'extraSmall',
disabled,
loading,
active,
})}
disabled,
loading,
active,
},
className
)}
disabled={disabled}
data-disabled={disabled}
{...otherProps}
>
{loading ? <Loading /> : children}
{loading ? <Loading /> : children || propsIcon}
</button>
);
}