GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 11:11:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove deprecated Button stories and update Button component to eliminate deprecated props, ensuring compatibility with future Storybook versions.

Browse Source
This commit is contained in:
Valentin Palkovic 2025-03-26 13:15:37 +01:00
parent 4f4806fc2b
commit fcf572f73b
3 changed files with 4 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
code/core/src/components/components/Button/Button.deprecated.stories.tsx
View File

@ -1,93 +0,0 @@
import React from 'react';
import { LinkIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Form } from '../form';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'Button (Deprecated)',
component: Button,
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Default = { args: { children: 'Default' } };
export const FormButton: Story = {
render: (args) => <Form.Button {...args} />,
args: { children: 'Form.Button' },
};
export const Primary: Story = { args: { primary: true, children: 'Primary' } };
export const Secondary: Story = { args: { secondary: true, children: 'Secondary' } };
export const Tertiary: Story = { args: { tertiary: true, children: 'Tertiary' } };
export const Gray: Story = { args: { gray: true, children: 'Gray' } };
export const Outline: Story = { args: { outline: true, children: 'Outline' } };
export const OutlinePrimary: Story = {
args: { outline: true, primary: true, children: 'Outline Primary' },
};
export const OutlineSecondary: Story = {
args: { outline: true, secondary: true, children: 'Outline Secondary' },
};
export const OutlineTertiary: Story = {
args: { outline: true, tertiary: true, children: 'Outline Tertiary' },
};
export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };
export const DisabledPrimary: Story = {
args: { disabled: true, primary: true, children: 'Disabled Priary' },
};
export const DisabledSecondary: Story = {
args: { disabled: true, secondary: true, children: 'Disabled Secondary' },
};
export const DisabledTertiary: Story = {
args: { disabled: true, tertiary: true, children: 'Disabled Tertiary' },
};
export const DisabledGray: Story = {
args: { disabled: true, gray: true, children: 'Disabled Gray' },
};
export const Small: Story = { args: { small: true, children: 'Small' } };
export const SmallPrimary: Story = {
args: { small: true, primary: true, children: 'Small Priary' },
};
export const SmallSecondary: Story = {
args: { small: true, secondary: true, children: 'Small Secondary' },
};
export const SmallTertiary: Story = {
args: { small: true, tertiary: true, children: 'Small Tertiary' },
};
export const SmallGray: Story = {
args: { small: true, gray: true, children: 'Small Gray' },
};
export const IsLink: Story = {
args: { isLink: true, children: 'Button as a link' },
};
export const IconPrimary: Story = {
args: {
primary: true,
containsIcon: true,
title: 'link',
children: <LinkIcon />,
},
};
export const IconOutline: Story = {
args: { outline: true, containsIcon: true, title: 'link', children: <LinkIcon /> },
};
export const IconOutlineSmall: Story = {
args: {
outline: true,
containsIcon: true,
small: true,
title: 'link',
children: <LinkIcon />,
},
};

65
code/core/src/components/components/Button/Button.tsx
View File

@ -1,8 +1,6 @@
import type { ButtonHTMLAttributes, SyntheticEvent } from 'react';
import React, { forwardRef, useEffect, useState } from 'react';
import { deprecate } from 'storybook/internal/client-logger';
import { Slot } from '@radix-ui/react-slot';
import { darken, lighten, rgba, transparentize } from 'polished';
import { isPropValid, styled } from 'storybook/theming';
@ -16,25 +14,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
disabled?: boolean;
active?: boolean;
animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
/** @deprecated Use {@link asChild} instead. This will be removed in Storybook 9.0 */
isLink?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
primary?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
secondary?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
tertiary?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
gray?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
inForm?: boolean;
/** @deprecated Use {@link size} instead. This will be removed in Storybook 9.0 */
small?: boolean;
/** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
outline?: boolean;
/** @deprecated Add your icon as a child directly. This will be removed in Storybook 9.0 */
containsIcon?: boolean;
}
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@ -54,15 +33,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
) => {
let Comp: 'button' | 'a' | typeof Slot = 'button';
if (props.isLink) {
Comp = 'a';
}
if (asChild) {
Comp = Slot;
}
let localVariant = variant;
let localSize = size;
const localVariant = variant;
const localSize = size;
const [isAnimating, setIsAnimating] = useState(false);
@ -86,42 +61,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
return () => clearTimeout(timer);
}, [isAnimating]);
// Match the old API with the new API.
// TODO: Remove this after 9.0.
if (props.primary) {
localVariant = 'solid';
localSize = 'medium';
}
// Match the old API with the new API.
// TODO: Remove this after 9.0.
if (props.secondary || props.tertiary || props.gray || props.outline || props.inForm) {
localVariant = 'outline';
localSize = 'medium';
}
if (
props.small ||
props.isLink ||
props.primary ||
props.secondary ||
props.tertiary ||
props.gray ||
props.outline ||
props.inForm ||
props.containsIcon
) {
const buttonContent = React.Children.toArray(props.children).filter(
(e) => typeof e === 'string' && e !== ''
);
deprecate(
`Use of deprecated props in the button ${
buttonContent.length > 0 ? `"${buttonContent.join(' ')}"` : 'component'
} detected, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-ui-and-props-for-button-and-iconbutton-components`
);
}
return (
<StyledButton
as={Comp}

5
code/core/src/manager/components/sidebar/RefBlocks.tsx
View File

@ -80,8 +80,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
this Storybook.
</Text>
<div>
{/* TODO: Make sure this button is working without the deprecated props */}
<Button small gray onClick={refresh}>
<Button size="small" variant="outline" onClick={refresh}>
<SyncIcon />
Refresh now
</Button>
@ -92,7 +91,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
<Text>Sign in to browse this Storybook.</Text>
<div>
{/* @ts-expect-error (non strict) */}
<Button small gray onClick={open}>
<Button size="small" variant="outline" onClick={open}>
<LockIcon />
Sign in
</Button>