描述bug
在创建一个包含多个单选按钮的文档时,不会为每组单选按钮创建唯一的id。问题在于,您无法为后续控件设置默认单选按钮表单值。
重现问题
使用next/typescript沙箱,我更新了Button.tsx文件,使其接受两个带有一组选项的属性。自动生成的文档中有两个单选按钮组,您可以看到每个组之间的id是相同的。 control-type-{n}
import React from 'react';
import './button.css';
interface ButtonProps {
/**
* Is this the principal call to action on the page?
*/
primary?: boolean;
/**
* What background color to use
*/
backgroundColor?: string;
/**
* How large should the button be?
*/
size?: 'small' | 'medium' | 'large';
/**
* How large should the button be?
*/
type?: 'primary' | 'secondary' | 'tertiary';
/**
* Button contents
*/
label: string;
/**
* Optional click handler
*/
onClick?: () => void;
}
/**
* Primary UI component for user interaction
*/
export const Button = ({
primary = false,
size = 'medium',
type = 'primary',
backgroundColor,
label,
...props
}: ButtonProps) => {
const mode =
type === 'primary'
? 'storybook-button--primary'
: type === 'secondary'
? 'storybook-button--secondary'
: 'storybook-button--tertiary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(
' '
)}
{...props}
>
{label}
<style jsx>{`
button {
background-color: ${backgroundColor};
}
`}</style>
</button>
);
};
系统信息
Environment Info:
System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz
Binaries:
Node: 17.9.1 - ~/.nvm/versions/node/v17.9.1/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v17.9.1/bin/npm
Browsers:
Chrome: 116.0.5845.187
Edge: 117.0.2045.40
Safari: 15.6.1
npmPackages:
@storybook/addon-essentials: ^7.4.5 => 7.4.5
@storybook/addon-interactions: ^7.4.5 => 7.4.5
@storybook/addon-links: ^7.4.5 => 7.4.5
@storybook/addon-onboarding: ^1.0.8 => 1.0.8
@storybook/addon-styling: ^1.3.7 => 1.3.7
@storybook/blocks: ^7.4.5 => 7.4.5
@storybook/nextjs: ^7.4.5 => 7.4.5
@storybook/react: ^7.4.5 => 7.4.5
@storybook/testing-library: ^0.2.1 => 0.2.1
其他上下文
- 无响应*
1条答案
按热度按时间mrwjdhj31#
你好,我也有同样的问题,有什么新消息吗?