storybook [Bug]: 在每个故事中添加多个单选按钮会导致共享ID

2ic8powd  于 6个月前  发布在  其他
关注(0)|答案(1)|浏览(54)

描述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

其他上下文

  • 无响应*
mrwjdhj3

mrwjdhj31#

你好,我也有同样的问题,有什么新消息吗?

相关问题