Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-12 23:56:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(component): refactor the implementation of Button and IconButton (#7716)

Browse Source 
## Button
- Remove props withoutHoverStyle
   refactor hover impl with independent layer, so that hover-color won't affect the background even if is overridden outside
- Update `type` (renamed to `variant`):
  - remove `processing` and `warning`
  - rename `default` with `secondary`
- Remove `shape` props
- Remove `icon` and `iconPosition`, replaced with `prefix: ReactNode` and `suffix: ReactNode`
- Integrate tooltip for more convenient usage
- New Storybook document
- Focus style

## IconButton
- A Wrapper base on `<Button />`
- Override Button size and variant
  - size: `'12' | '14' | '16' | '20' | '24' | number`
     These presets size are referenced from the design system.
  - variant:  `'plain' | 'solid' | 'danger' | 'custom'`
- Inset icon via Button 's prefix

## Fix
- fix some button related issues
- close AF-1159, AF-1160, AF-1161, AF-1162, AF-1163, AF-1158, AF-1157

## Storybook

![CleanShot 2024-08-03 at 14.57.20@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/f5a76110-35d0-4082-a940-efc12bed87b0.png)
This commit is contained in:
CatsJuice
2024-08-05 02:57:23 +00:00
parent 10deed94e3
commit 3d855647c7
159 changed files with 1384 additions and 1539 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/component/src/components/auth-components/back-button.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
import { useI18n } from '@affine/i18n';
import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
import { cssVar } from '@toeverything/theme';
import type { FC } from 'react';
import type { ButtonProps } from '../../ui/button';
@@ -9,15 +10,15 @@ export const BackButton: FC<ButtonProps> = props => {
const t = useI18n();
return (
<Button
type="plain"
variant="plain"
style={{
marginTop: 12,
marginLeft: -5,
paddingLeft: 0,
paddingRight: 5,
color: 'var(--affine-text-secondary-color)',
color: cssVar('textSecondaryColor'),
}}
icon={<ArrowLeftSmallIcon />}
prefix={<ArrowLeftSmallIcon />}
{...props}
>
{t['com.affine.backButton']()}
packages/frontend/component/src/components/auth-components/change-email-page.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export const ChangeEmailPage = ({
disabled={hasSetUp}
/>
<Button
type="primary"
variant="primary"
size="large"
onClick={onContinue}
loading={loading}
packages/frontend/component/src/components/auth-components/change-password-page.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export const ChangePasswordPage: FC<{
}
>
{hasSetUp ? (
<Button type="primary" size="large" onClick={onOpenAffine}>
<Button variant="primary" size="large" onClick={onOpenAffine}>
{t['com.affine.auth.open.affine']()}
</Button>
) : (
packages/frontend/component/src/components/auth-components/confirm-change-email.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const ConfirmChangeEmail: FC<{
title={t['com.affine.auth.change.email.page.success.title']()}
subtitle={t['com.affine.auth.change.email.page.success.subtitle']()}
>
<Button type="primary" size="large" onClick={onOpenAffine}>
<Button variant="primary" size="large" onClick={onOpenAffine}>
{t['com.affine.auth.open.affine']()}
</Button>
</AuthPageContainer>
packages/frontend/component/src/components/auth-components/email-verified-email.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const ConfirmChangeEmail: FC<{
title={t['com.affine.auth.change.email.page.success.title']()}
subtitle={t['com.affine.auth.change.email.page.success.subtitle']()}
>
<Button type="primary" size="large" onClick={onOpenAffine}>
<Button variant="primary" size="large" onClick={onOpenAffine}>
{t['com.affine.auth.open.affine']()}
</Button>
</AuthPageContainer>
packages/frontend/component/src/components/auth-components/onboarding-page.tsx
+4 -6
View File
@@ -219,7 +219,7 @@ export const OnboardingPage = ({
</Button>
<Button
className={styles.button}
type="primary"
variant="primary"
size="extraLarge"
itemType="submit"
onClick={() => {
@@ -248,8 +248,7 @@ export const OnboardingPage = ({
setQuestionIdx(questionIdx + 1);
}
}}
iconPosition="end"
icon={<ArrowRightSmallIcon />}
suffix={<ArrowRightSmallIcon />}
>
{questionIdx === 0 ? 'start' : 'Next'}
</Button>
@@ -271,7 +270,7 @@ export const OnboardingPage = ({
</p>
<Button
className={clsx(styles.button, styles.openAFFiNEButton)}
type="primary"
variant="primary"
size="extraLarge"
onClick={() => {
if (callbackUrl) {
@@ -280,8 +279,7 @@ export const OnboardingPage = ({
onOpenAffine();
}
}}
iconPosition="end"
icon={<ArrowRightSmallIcon />}
suffix={<ArrowRightSmallIcon />}
>
Get Started
</Button>
packages/frontend/component/src/components/auth-components/set-password-page.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export const SetPasswordPage: FC<{
}
>
{hasSetUp ? (
<Button type="primary" size="large" onClick={onOpenAffine}>
<Button variant="primary" size="large" onClick={onOpenAffine}>
{t['com.affine.auth.open.affine']()}
</Button>
) : (
packages/frontend/component/src/components/auth-components/set-password.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ export const SetPassword: FC<{
/>
</Wrapper>
<Button
type="primary"
variant="primary"
size="large"
disabled={!passwordPass}
style={{ marginRight: 20 }}
@@ -44,7 +44,7 @@ export const SetPassword: FC<{
{t['com.affine.auth.set.password.save']()}
</Button>
{showLater ? (
<Button type="plain" size="large" onClick={onLater}>
<Button variant="plain" size="large" onClick={onLater}>
{t['com.affine.auth.later']()}
</Button>
) : null}
packages/frontend/component/src/components/auth-components/sign-in-success-page.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export const SignInSuccessPage: FC<{
title={t['com.affine.auth.signed.success.title']()}
subtitle={t['com.affine.auth.signed.success.subtitle']()}
>
<Button type="primary" size="large" onClick={onOpenAffine}>
<Button variant="primary" size="large" onClick={onOpenAffine}>
{t['com.affine.auth.open.affine']()}
</Button>
</AuthPageContainer>
packages/frontend/component/src/components/auth-components/sign-up-page.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ export const SignUpPage: FC<{
}
>
{hasSetUp ? (
<Button type="primary" size="large" onClick={onOpenAffine}>
<Button variant="primary" size="large" onClick={onOpenAffine}>
{openButtonText ?? t['com.affine.auth.open.affine']()}
</Button>
) : (