douyinfe / semi-design

🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click

Semi-UI

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps.

English | 简体中文

🎉 Features

• 💪 Up to 60+ high-quality Components. Stable update since 2019
• 🚀 Official Design to Code (D2C) support, convert figma draft to real code in a few seconds
• 💅 Code to Design (C2D), automatically generate Figma UI Kit according to different themes, keep same between design and code
• 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
• 💅 Design system management Semi DSM, up to 2700+ Design Tokens, make Semi Design to Any Design quickly.
• 🌍 Internationalization Support for Dozens of Languages, timezone, RTL support
• ⚙️ Strict quality assurance, covering unit testing, E2E testing, visual testing.
• 👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute
• 🥳 SSR (Server Side Rendering) Compatible.

🔥 Install

npm install @douyinfe/semi-ui

👍 Component Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Form } from '@douyinfe/semi-ui';

const App = () => (
    <Form>
        <Form.Input field='name' initValue='semi design'></Form.Input>
        <Button htmlType='submit'>submit</Button>
    </Form>
);

const root = createRoot(document.querySelector('#app'));

root.render(<App />);

Semi UI Doc Site has hundreds of editable examples and live preview, welcome to play with those examples.

⚡️ Design to Code Usage

Install Semi Figma Plugin. Translate Figma to real code in seconds. Support multiple output formats: JSX + SCSS / Emotion/Tailwind, or JSON Schema DSL

• Support figma devmode, selecting a layer, directly get corresponding code on the right

• Or jump to codesandbox to continue editing

🎨 DSM Usage

Define your own design system base on Semi UI with DSM in one click, Provide more than 2700 tokens for you to configure every detail. Sync between Figma and Code at all times.

📰 News about Semi UI

• Follow on Twitter
• Follow on Medium
• Follow on Dev.to

📌 Documentation

• Semi DSM
• Design to Code
• Semi Figma Plugin
• Quick Start
• Components Overview
• Customizing Themes
• Design Tokens
• Dark Mode
• Semi Icons
• Global Config
• Internationalization
• FAQ
• CHANGELOG

📝 Blogs

• The Evolution of Semi D2C Design to Code
• How to design component library architecture to adapt to different mvvm frameworks
• How we test semi ui
• In-depth explanation of Semi theme
• Accessibility in Semi Design

👌 Platform Support

Semi UI supports all major modern browsers.

chrome	firefox	safari	IE/Edge	Electron
latest 2 versions	latest 2 versions	latest 2 versions	Edge	latest 2 versions

👨‍👨‍👧‍👦 User Group

Join User Group on Feishu / Lark

💖 Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

Thanks to Cypress for providing E2E testing.

👐 Contributing

Thanks to all the people who already contributed!

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Semi UI.

See CONTRIBUTING documentation.

🎈 License

Semi UI is MIT Licensed

semi-design's Issues

官网 展示的 Slide 组件 在 输入非数字时，导致 setState 超过 max deep update

https://semi.design/zh-CN/input/slider

Which Component 出现bug的组件

• Slide

semi-ui version

• latest

Expected result 期望的结果是什么

Actual result 实际的结果是什么

Steps to reproduce 复现步骤

• 1

Reproducible code 复现代码

class Demo extends React.component {

    render() {
        return (
            <Button>bug</Button>
        )
    }

}

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景

官网文档的滑动焦点逻辑前后不一

Steps to reproduce 复现步骤

• 1. 鼠标焦点选中了代码编辑区域
• 2. 滑动页面，此时只有代码编辑区域滑动
• 3. 鼠标移出代码框，悬停在页面其他区域
• 4. 此时滑动页面，页面整体滑动
• 5. 鼠标指针重新停留在焦点选择的代码框
• 6. 此时滑动页面，无法再滑动代码编辑区域

正确实现

我理解正确实现应当一致。

要不都按照鼠标的焦点走（只有点哪里才能滑动哪里）
要不移回代码框，依然可以滑动代码编辑区域（毕竟移出代码框，你的行为是鼠标停留在页面就滑动页面）

Cannot work with snowpack

Which Component 出现bug的组件

• Any

semi-ui version

• latest

Expected result 期望的结果是什么

• All components work fine

Actual result 实际的结果是什么

• The snowpack keeps trying to convert CJS to ESM

Steps to reproduce 复现步骤

• Create a simple snowpack react app and import this library.
• Run snowpack dev.

Reproducible code 复现代码

import * as React from 'react';
import { render } from 'react-dom';

import { Button } from '@douyinfe/semi-ui';

function App() {
  return (
    <div>
      <Button>Hello</Button>
    </div>
  );
}

render(<App />, document.body.querySelector('#app-root'));

Additional information 补充说明

snowpack repeatedly converts the components in @douyinfe/[email protected] package, but it makes every component a standalone package. In this way, for example, before it converts @douyinfe/[email protected]:@douyinfe/semi-foundation/lib/es/popover/constants, it will rimraf @douyinfe/[email protected] directory first. You will never see the converted files in snowpack's build cache directory.

Maybe there are some issues while semi-ui is importing files in semi-foundation.

rating 组件 item 子组件多次重复点击不会 re-render

Which Component 出现bug的组件

Rating

semi-ui version

• latest

Expected result 期望的结果是什么

• 在切换评分时，star 应该切换, 原因是 hoverValue 没有更新

Actual result 实际的结果是什么

• 在同一个 star 多次重复点击，不会触发 item 组件 re-render

Steps to reproduce 复现步骤

• 1

Reproducible code 复现代码

Additional information 补充说明

这是使用 Rating 组件遇到的

Screen.Recording.2021-10-28.at.11.03.44.AM.mov

能否将Vue适配器的开发进度和代码放出来

F/A设计模式下，其他适配器的进度和代码是否能放出来，目前https://github.com/DouyinFE/semi-design/tree/main/packages/semi-ui 只有react的

Dropdown和Modal同时存在时的Bug

Which Component 出现bug的组件

• Dropdown和Modal

semi-ui version

• latest

Expected result 期望的结果是什么

• 点击Dropdown选中后，出现Modal，Dropdown消失

Actual result 实际的结果是什么

• 点击Dropdown选中后，出现Modal，Dropdown没有消失

Additional information 补充说明

• 

请问下Button里写Link或者Link里写Button，字体上有下划线的问题是否已处理？

如题
谢谢

可以在组件官网添加全局的查找框吗？

全局查找

希望能提供一个全局查找的输入框，可以支持快速查找api和组件名称就行

• 1. 希望能支持树状展示搜索结果，例如搜索"field"
  • Form
    • field: 表单的……
• 2. 希望加入一些类型定义的链接查找
     

通过点击这个类型链接直接查看详情

Support the vue?

Which Component Need Enhancement 期望新增功能的组件

• Vuejs

What does the proposed API look like 期望支持的API

Vuejs

Feature Description 功能描述

Vuejs

Additional information 补充说明

Vuejs

Sketch

不知道会不会提供类似Ant Design Pro类似的Sketch资源下载呢？

[InputNumber] 希望支持科学计数法

Which Component Need Enhancement 期望新增功能的组件

• InputNumber

What does the proposed API look like 期望支持的API

希望 InputNumber 支持科学计数法 api

Feature Description 功能描述

Additional information 补充说明

等一手semi pro

期望文档内容与超链接导航栏不重合

文档内容与超链接导航栏重合

或许可以控制文档内容宽度🤔

Compatibility issue with Nextjs

Which Component 出现bug的组件

• All

semi-ui version

• latest

Expected result 期望的结果是什么

• Compatible usage of the library with Nextjs

Actual result 实际的结果是什么

error - ./node_modules/@douyinfe/semi-foundation/lib/es/_portal/portal.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@douyinfe/semi-ui/lib/es/_portal/index.js

This issue is caused by 'nextjs' restriction on global imports, rendering this library and nextjs incompatible. In light of nextjs popularity and user base, I think we should support usage of semi-design with nextjs. What do you think ?

On the other hand, ant-design doesn't encounter this issue

Steps to reproduce 复现步骤

• Iniitalize new project using next-js
• install semi-design, and use any component within it

Additional information 补充说明

Discussion of the following problem in Nextjs repository
vercel/next.js#19936

Temporary disable of global CSS imports in nextjs isn't possible now, and is being actively discussed in the following RFC
vercel/next.js#27953

不支持next.js?

Which Component 出现bug的组件

• CSS 部分

semi-ui version

• latest

Expected result 期望的结果是什么

Actual result 实际的结果是什么

Steps to reproduce 复现步骤

Failed to compile
./node_modules/@douyinfe/semi-foundation/lib/es/_portal/portal.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@douyinfe/semi-ui/lib/es/_portal/index.js

Reproducible code 复现代码

### Additional information 补充说明
- 安装在next.js 直接编译报错

官方Demo Layout.Sider组件 items属性ts类型报错

Which Component 出现bug的组件

• Layout.Sider

semi-ui version

• "@douyinfe/semi-ui": "^2.0.0"

Expected result 期望的结果是什么

• 无类型校验报错

Actual result 实际的结果是什么

• ts类型校验不通过：

Steps to reproduce 复现步骤

• 官方文档Layout章节
• 最后一个例子，“侧边导航”

Reproducible code 复现代码

import React from 'react';
import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';
import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@douyinfe/semi-icons';

() => {
   const { Header, Footer, Sider, Content } = Layout;
   return (
       <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
           <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
               <Nav
                   defaultSelectedKeys={['Home']}
                   style={{ maxWidth: 220, height: '100%' }}
                   items={[
                       { itemKey: 'Home', text: '首页', icon: <IconHome size="large" /> },
                       { itemKey: 'Histogram', text: '基础数据', icon: <IconHistogram size="large" /> },
                       { itemKey: 'Live', text: '测试功能', icon: <IconLive size="large" /> },
                       { itemKey: 'Setting', text: '设置', icon: <IconSetting size="large" /> },
                   ]}
                   header={{
                       logo: <img src="//lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/webcast_logo.svg" />,
                       text: '直播运营后台',
                   }}
                   footer={{
                       collapseButton: true,
                   }}
               />
           </Sider>
           <Layout>
               <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
                   <Nav
                       mode="horizontal"
                       footer={
                           <>
                               <Button
                                   theme="borderless"
                                   icon={<IconBell size="large" />}
                                   style={{
                                       color: 'var(--semi-color-text-2)',
                                       marginRight: '12px',
                                   }}
                               />
                               <Button
                                   theme="borderless"
                                   icon={<IconHelpCircle size="large" />}
                                   style={{
                                       color: 'var(--semi-color-text-2)',
                                       marginRight: '12px',
                                   }}
                               />
                               <Avatar color="orange" size="small">
                                   YJ
                               </Avatar>
                           </>
                       }
                   ></Nav>
               </Header>
               <Content
                   style={{
                       padding: '24px',
                       backgroundColor: 'var(--semi-color-bg-0)',
                   }}
               >
                   <Breadcrumb
                       style={{
                           marginBottom: '24px',
                       }}
                       routes={['首页', '当这个页面标题很长时需要省略', '上一页', '详情页']}
                   />
                   <div
                       style={{
                           borderRadius: '10px',
                           border: '1px solid var(--semi-color-border)',
                           height: '376px',
                           padding: '32px',
                       }}
                   >
                       <Skeleton placeholder={<Skeleton.Paragraph rows={2} />} loading={true}>
                           <p>Hi, Bytedance dance dance.</p>
                           <p>Hi, Bytedance dance dance.</p>
                       </Skeleton>
                   </div>
               </Content>
               <Footer
                   style={{
                       display: 'flex',
                       justifyContent: 'space-between',
                       padding: '20px',
                       color: 'var(--semi-color-text-2)',
                       backgroundColor: 'rgba(var(--semi-grey-0), 1)',
                   }}
               >
                   <span
                       style={{
                           display: 'flex',
                           alignItems: 'center',
                       }}
                   >
                       <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
                       <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
                   </span>
                   <span>
                       <span style={{ marginRight: '24px' }}>平台客服</span>
                       <span>反馈建议</span>
                   </span>
               </Footer>
           </Layout>
       </Layout>
   );
};

Additional information 补充说明

• 用Layout组件搭建侧边栏导航

Navigation items 存在 ts 类型错误

Which Component 出现bug的组件

• Navigation

semi-ui version

• latest

Expected result 期望的结果是什么

Actual result 实际的结果是什么

• 类型 "{ itemKey: string; text: string; icon: JSX.Element; }" 中缺少属性 "items"，但类型 "NavItemPropsWithItems" 中需要该属性。ts(2

Steps to reproduce 复现步骤

• 1 官方文档 下面的布局示例。

Reproducible code 复现代码

<Nav
                        style={{ maxWidth: 220, height: '100%' }}
                        defaultSelectedKeys={['Home']}
                        items={[
                            { itemKey: 'Home', text: '首页', icon: <IconHome size="large" /> },
                            { itemKey: 'Histogram', text: '基础数据', icon: <IconHistogram size="large" /> },
                            { itemKey: 'Live', text: '测试功能', icon: <IconLive size="large" /> },
                            { itemKey: 'Setting', text: '设置', icon: <IconSetting size="large" /> },
                        ]}
                        footer={{
                            collapseButton: true,
                        }}
                    />

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景

有没有手机端？

Which Component Need Enhancement 期望新增功能的组件

• Button

What does the proposed API look like 期望支持的API

Feature Description 功能描述

Additional information 补充说明

@douyinfe/* 下面的很多组件希望提供下源码

Which Component Need Enhancement 期望新增功能的组件

• @douyinfe/* 下面的很多组件，比如@douyinfe/semi-site-markdown-blocks 希望开源下源码给造福猿类，毕竟属于 semi-design的一部分

What does the proposed API look like 期望支持的API

Feature Description 功能描述

Additional information 补充说明

致歉

Ant Design 是业界优秀的开源设计系统。我们在实现 Semi Design 的过程中，开源社区的优秀实践提供了很多帮助。由于团队的疏忽，历史代码中使用 Ant Design 的文案没有注明出处，我们对此深表歉意。

Semi Design 已持续稳定维护了两年多，整体采用 Foundation/Adapter 架构，与 Ant Design 差异较大。Semi 项目开源，期望能够收到更多开发者的反馈，帮助我们改进产品。我们也会更严谨地遵循开源社区规则，积极回馈开源社区。

抖音前端技术团队

It's a framework with a vision and a mission.

Switch组件不可用且未选中状态下hover背景色问题

Which Component 出现bug的组件

• Switch

semi-ui version

• latest

Expected result 期望的结果是什么

• Switch组件不可用且未选中状态下hover背景色不变

Actual result 实际的结果是什么

• Switch组件不可用且未选中状态下hover背景色会改变

Steps to reproduce 复现步骤

• 1 鼠标移入到不可用且未选中状态下Switch组件

Additional information 补充说明

• 官网

微信群已满员

微信群已满员

Button Icon 不会更新

Which Component 出现bug的组件

• Button

semi-ui version

• latest

Expected result 期望的结果是什么

• type改变 ，按钮对应的Icon也要改变

Actual result 实际的结果是什么

• 第一次会变，后面就不会变了

Steps to reproduce 复现步骤

• 1

Reproducible code 复现代码

const SwitchMode = props => {
    const [type, setType] = useState<string>('drak')

    const switchMode = () => {
        const body = document.body;
        if (body.hasAttribute('theme-mode')) {
            setType('light')
            body.removeAttribute('theme-mode');
        } else {
            setType('dark')
            body.setAttribute('theme-mode', 'dark');
        }
    }

    return (
        <div>
            {type}
            <Button
                theme="borderless"
                icon={type === 'drak' ? <IconSun size="large" /> : <IconMoon size="large" />}
                style={{
                    color: 'var(--semi-color-text-2)',
                    marginRight: '12px',
                }}
                onClick={switchMode}
            />
        </div>
    );
}

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景

Semi 官网点击 ScrollList 设计文档页面崩溃

Steps to reproduce 复现步骤

• URL：https://semi.design/zh-CN/show/scrolllist
• 点击后页面崩溃：

• 环境：
  • macOS 11.4
  • Chrome 94.0.4606.81（正式版本） (x86_64)

后面有计划支持Vue吗？

Which Component Need Enhancement 期望新增功能的组件

• Button

What does the proposed API look like 期望支持的API

Feature Description 功能描述

Additional information 补充说明

文档建议：官方文档，看起来太难受了，缺一个搜索功能，颜色体系太花哨了，文档的主要目的是快速查询啊，而不是做这么*里*气的

1. 颜色体系，字体颜色这个色号看起来很不舒服，加上无数个有颜色的左侧的icon, 密集恐惧症，让人关注文档本身变得不够集中注意力， 那个能自动配色的体系，真有点鸡肋了，能把黑白两套做的不错就可以了。。。

2. 缺乏一个文档搜索功能， 看到是gasby做的文档，不知道能不能像docusaurus这种提供search-algolia插件支持搜索功能，这个对于用户可能会是个及其重要的东西

以上只是两个建议，目的不是争吵和撕逼，而是希望能改善用户体验，知道开源不易，能理解。

图挂了

Which Component 出现bug的组件

地址： https://semi.design/dsm/web_console/components_panel

semi-ui version

• latest

Expected result 期望的结果是什么

图不挂

Actual result 实际的结果是什么

图挂

Steps to reproduce 复现步骤

Reproducible code 复现代码

无

Additional information 补充说明

无

DatePicker 下拉框闪烁

Which Component 出现bug的组件

• DatePicker

semi-ui version

• latest

Expected result 期望的结果是什么

• 向上展开日期选择框

Actual result 实际的结果是什么

• 会向下展开闪烁一次，再向上展开
  

Steps to reproduce 复现步骤

• 1 将组件滚动到页面底部
• 2 点击展开日期选择框

Additional information 补充说明

• 官网demo

InputNumber limit value does not work when entering a string value

Which Component 出现 bug 的组件

• InputNumber

semi-ui version

• latest

Expected result 期望的结果是什么

Limit value works.

Actual result 实际的结果是什么

Limit doesn't work.

Steps to reproduce 复现步骤

1. Set max to 10
2. Enter the value 1000CNY in the InputNumber component
3. Try clicking out of the component, and watch its contents change accordingly.

Reproducible code 复现代码

class Demo extends React.Component {
    render() {
        return (
            <InputNumber min={1} max={10} defaultValue={1} onChange={(v) => console.log(v)} />
        );
    }
}

Additional information 补充说明

• defaultValue typos

有Semi Design Pro 最佳实践计划吗

🔼

replace Tag.avatarShape to shape

Which Component Need Enhancement 期望新增功能的组件

• Tag

What does the proposed API look like 期望支持的API

有时哦我们想要一个圆形边框的 tag，但这个 tag 可能没有 avatar，用现在的 api 实现不了。就现在的 api 还不够正交。也许可以

// 现在的 api
<Tag avatarSrc={src} avatarShape='circle'>焦锐志</Tag>

// 想要的 api
<Tag shape='circle'>焦锐志</Tag>

Feature Description 功能描述

Additional information 补充说明

typescript 前端新项目引用 semi-ui 编译报错

现象

• typescript 使用此项目依赖， tsc 编译报错

semi-ui version

• 2.0.0

Expected result 期望的结果是什么

• tsc 被依赖的项目能正常编译

Steps to reproduce 复现步骤

• 1 使用 vite 生成 react 项目 A yarn create vite，选择 react 和 react-ts
• 2 添加 @douyinfe/semi-ui 库： yarn add @douyinfe/semi-ui
• 3 代码中添加 <Button >测试按钮</Button> 按钮， 以及导入 import {Button} from "@douyinfe/semi-ui"
• 4 tsc 编译整个前端项目 A: npx tsc

Additional information 补充说明

• 一共10个 错误，使用 yarn add -D @types/react-window 可以解决 react-window 报错的问题
• 目前通过 "skipLibCheck": true, 写在 tsconfig.ts 文件中来通过编译， 😂

下面是tsc错误输出

$ npx tsc
node_modules/@douyinfe/semi-foundation/lib/es/collapse/foundation.d.ts:21:80 - error TS2344: Type '((activeKey: string | string[] | undefined, e: any) 
=> void) | undefined' does not satisfy the constraint '(...args: any) => any'.
  Type 'undefined' is not assignable to type '(...args: any) => any'.

21     handleChange: (...args: ArgsType<CollapseProps['onChange']>) => ReturnType<CollapseProps['onChange']>;
                                                                                  ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@douyinfe/semi-ui/lib/es/datePicker/index.d.ts:11:197 - error TS2307: Cannot find module '@douyinfe/semi-foundation/datePicker/foundation' or its corresponding type declarations.

11 export { BaseValueType, DayStatusType, DisabledDateOptions, DisabledDateType, DisabledTimeType, InputSize, Position, PresetType, PresetsType, TriggerRenderProps, ValidateStatus, ValueType, } from '@douyinfe/semi-foundation/datePicker/foundation';
   
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@douyinfe/semi-ui/lib/es/form/hoc/withField.d.ts:11:123 - error TS2344: Type 'ComponentProps<C>' does not satisfy the constraint 'CommonexcludeType'.
  Type 'unknown' is not assignable to type 'CommonexcludeType'.
    Type 'ComponentProps<C> | (ComponentProps<C> & { children?: ReactNode; })' is not assignable to type 'CommonexcludeType'.
      Type 'ComponentProps<C> & { children?: ReactNode; }' has no properties in common with type 'CommonexcludeType'.

11 declare function withField<C extends React.ComponentType<React.ComponentProps<C>>, T extends React.ComponentType<Subtract<React.ComponentProps<C>, CommonexcludeType> & CommonFieldProps>>(Component: C, opts?: withFieldOption): T;
                                                                                                                             ~~~~~~~~~~~~~~~~~~~~~~~   

node_modules/@douyinfe/semi-ui/lib/es/navigation/index.d.ts:10:24 - error TS2307: Cannot find module '_base/base' or its corresponding type declarations.

10 import { Motion } from '_base/base';
                          ~~~~~~~~~~~~

node_modules/@douyinfe/semi-ui/lib/es/scrollList/scrollItem.d.ts:1:23 - error TS2688: Cannot find type definition file for 'lodash'.

1 /// <reference types="lodash" />
                        ~~~~~~

node_modules/@douyinfe/semi-ui/lib/es/scrollList/scrollItem.d.ts:51:33 - error TS2307: Cannot find module 'lodash' or its corresponding type declarations.

51     throttledAdjustList: import("lodash").DebouncedFunc<(e: any, nearestNode: any) => void>;
                                   ~~~~~~~~

node_modules/@douyinfe/semi-ui/lib/es/scrollList/scrollItem.d.ts:52:29 - error TS2307: Cannot find module 'lodash' or its corresponding type declarations.

52     debouncedSelect: import("lodash").DebouncedFunc<(e: any, nearestNode: any) => void>;
                               ~~~~~~~~

node_modules/@douyinfe/semi-ui/lib/es/table/interface.d.ts:10:47 - error TS7016: Could not find a declaration file for module 'react-window'. 'D:/bug_example/semi-ui-bug-report/node_modules/react-window/dist/index.cjs.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-window` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-window';`

10 import { ScrollDirection, CSSDirection } from 'react-window';
                                                 ~~~~~~~~~~~~~~

node_modules/@douyinfe/semi-ui/lib/es/treeSelect/index.d.ts:45:18 - error TS2430: Interface 'TreeSelectProps' incorrectly extends interface 'Omit<BasicTreeSelectProps, "validateStatus" | "searchRender" | OverrideCommonProps>'.
  Types of property 'triggerRender' are incompatible.
    Type '((props?: TriggerRenderProps | undefined) => ReactNode) | undefined' is not assignable to type '((props: BasicTriggerRenderProps) => any) | undefined'.
      Type '(props?: TriggerRenderProps | undefined) => ReactNode' is not assignable to type '(props: BasicTriggerRenderProps) => any'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'BasicTriggerRenderProps' is not assignable to type 'TriggerRenderProps'.
            The types of 'componentProps.triggerRender' are incompatible between these types.
              Type '((props: BasicTriggerRenderProps) => any) | undefined' is not assignable to type '((props?: TriggerRenderProps | undefined) => ReactNode) | undefined'.
                Type '(props: BasicTriggerRenderProps) => any' is not assignable to type '(props?: TriggerRenderProps | undefined) => ReactNode'.      
                  Types of parameters 'props' and 'props' are incompatible.
                    Type 'TriggerRenderProps | undefined' is not assignable to type 'BasicTriggerRenderProps'.
                      Type 'undefined' is not assignable to type 'BasicTriggerRenderProps'.

45 export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideCommonProps | 'validateStatus' | 'searchRender'>, Pick<TreeProps, OverrideCommonProps> {
                    ~~~~~~~~~~~~~~~

node_modules/resize-observer-polyfill/src/index.d.ts:19:18 - error TS2717: Subsequent property declarations must have the same type.  Property 'contentRect' must be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.

19         readonly contentRect: DOMRectReadOnly;
                    ~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:12122:14
    12122     readonly contentRect: DOMRectReadOnly;
                       ~~~~~~~~~~~
    'contentRect' was also declared here.


Found 10 errors.

完全不意外，国内开源的组件库对无障碍的支持基本为0

Which Component Need Enhancement 期望新增功能的组件

• 组件库无障碍的支持

What does the proposed API look like 期望支持的API

Feature Description 功能描述

Additional information 补充说明

官方文档 DatePicker 组件层级问题

Which Component 出现bug的组件

• 官网中的DatePicker

semi-ui version

• latest

Expected result 期望的结果是什么

• DatePicker组件点击展开后，下滑页面，展开部分会层级位于顶部sticky定位的导航栏下方

Actual result 实际的结果是什么

• DatePicker组件点击展开后，下滑页面，展开部分会层级位于顶部sticky定位的导航栏上方

Steps to reproduce 复现步骤

• 1、官网点击DatePicker组件使其展开
• 2、下滑页面

Reproducible code 复现代码

class Demo extends React.component {

    render() {
        return (
            <Button>bug</Button>
        )
    }

}

Additional information 补充说明

• 无、只是在官网看到了 -.-

table 树形表格 开启bordered 边框错乱

Which Component 出现bug的组件

• Table

semi-ui version

• latest

Expected result 期望的结果是什么

Actual result 实际的结果是什么

Steps to reproduce 复现步骤

最右边开启fixed

Reproducible code 复现代码

<Table bordered expandAllRows
      scroll={{ y: 300 }}
      columns={tableColumns}
      rowKey="id" size="small"
      loading={state.tableLoading}
      dataSource={state.tableData}
      pagination={false}
  />  

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景

popconfirm文档展示问题

Which Component 出现bug的组件

• popconfirm

semi-ui version

• latest

Add a search feature to your document

Which Component Need Enhancement 期望新增功能的组件

• document

Feature Description 功能描述

Add search

Additional information 补充说明

When you want to quickly find a component, you want a search feature

set Form.Select.Option value "" contentText A , then select this option item, not show A

Which Component 出现bug的组件

• Form.Select.Option

semi-ui version

• latest

Expected result 期望的结果是什么

• show A

Actual result 实际的结果是什么

• not show A

Steps to reproduce 复现步骤

• 1 set optionA value '', set label 'A'
• 2 set select initvalue '', can show select contentText is A
• 3 then, select option A , can found not show contentText A

Reproducible code 复现代码

class Demo extends React.component {

    render() {
        return (
           <Form>
              <Form.Select initValue="">
                  <Form.Select.Option value="">A</Form.Select.Option>
                  <Form.Select.Option value="c">B</Form.Select.Option>
                  <Form.Select.Option value="d">C</Form.Select.Option>
              </Form.Select>
           </Form>
        )
    }

}

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景

建议完善下新手教程，按照官方快速入门，无法启动项目，本人小白。

官方快速入手文档只介绍了安装，并没有介绍如何启动。https://semi.design/zh-CN/start/getting-started
按照官方的 下载后只有一个modules 目录。没有启动命令,npm init 初始化后，没有启动命令，需要添加命令但是不知道如何设置脚本，一头雾水。本人刚接触的小白。本人经验。ant design按照他们官方指导完美安装成功过。

中文文档格式不统一

很棒的一个组件库！尤其是看到官网提供了版本对比的功能，感觉是很棒的一个小工具~

不过在看中文文档的时候，感觉撰写文档的格式有点不统一，有的英文和中文之间带有空格，有的却不带空格。

反馈类 · Notification

Which Component Need Enhancement 期望新增功能的组件

• Notification

What does the proposed API look like 期望支持的API

Feature Description 功能描述

Additional information 补充说明

notification 当有多个显示在页面上的时候，不应该是先进先出嘛？现在的展示效果是先进后出，最后展示的却最先消失，这个设计不太对啊，很可能我还没看清楚，就消失了

Form的InputGroup和非group组件label宽度不一致

Which Component 出现bug的组件

• Form

Expected result 期望的结果是什么

• label宽度相同，右侧对齐

Actual result 实际的结果是什么

• InputGroup的label没有margin-right，导致与下面的label没有对齐

Reproducible code 复现代码

import React from 'react';
import { Form, Button } from '@douyinfe/semi-ui';

export default () => (
    <Form onSubmit={(values) => console.log(values)} labelPosition='left' style={{ width: 800 }} labelWidth='120px'>
        <Form.InputGroup label={{ text: (<span>手机号码</span>), required: true }} labelPosition='left'>
            <Form.Select style={{ width: 150 }} field='phonePrefix' initValue='+86' rules={[{ required: true }]} showClear>
                <Form.Select.Option value='+1'>美国+1</Form.Select.Option>
                <Form.Select.Option value='+852'>香港+852</Form.Select.Option>
                <Form.Select.Option value='+86'>**+86</Form.Select.Option>
                <Form.Select.Option value='+81'>日本+81</Form.Select.Option>
            </Form.Select>
            <Form.Input initValue='18912345678' style={{ width: 250 }} field='phoneNumber' rules={[{ required: true }]} showClear />
        </Form.InputGroup>
        <Form.Input field='姓名' trigger='blur' initValue='Semi'></Form.Input>
        <Button htmlType='submit'>提交</Button>
    </Form>
)

读书人的事？

孔乙己便涨红了脸，额上的青筋条条绽出，争辩道，“窃书不能算偷……窃书！……读书人的事，能算偷么？”接连便是难懂的话，什么“君子固穷”，什么“者乎”之类，引得众人都哄笑起来：店内外充满了快活的空气。

CONTRIBUTING 需要添加上没有 lerna的全局安装

在阅读CONTRIBUTING时

git checkout beta
npm run bootstrap

需要在npm run bootstrap前面的某个位置加上npm install --global lerna

Table ColumnRender 类型问题

这个 text 实际上应该可以是任何类型吧，类型自动推断比较麻烦，直接换成 any 会不会也比 string 好，用着有点难受。

export declare type ColumnRender<RecordType> = (text: string, record: RecordType, index: number, options?: RenderOptions) => ColumnRenderReturnType;

还是说这有其他考虑？如果没空我可以提 pr 么 ~ ❤

微信群满了

Which Component Need Enhancement 期望新增功能的组件

• Button

What does the proposed API look like 期望支持的API

Feature Description 功能描述

Additional information 补充说明

大量问题（有致命BUG，不敢用啊），请尽快修复

Which Component 出现bug的组件

• Table （致命！）
• Transfer （样式不严谨）
• Toast （文档不严谨）
• treeSelect （失控）

semi-ui version

• latest

浏览器版本

• 谷歌浏览器 版本 94.0.4606.81（正式版本） （64 位）windows 10 家庭版

Steps to reproduce 复现步骤

• Table 受控组件下开启列伸缩、表头筛选、固定表头，然后伸缩拖拽列宽，直接内存溢出，页面崩溃.（表头没对齐都是小事）
  

• Transfer 有线头看着很难受，类似的card header 设计都有此类问题
  

• Toast 一种按钮对应一种吐司颜色，这里对不上了Success 应该是绿色
  

• treeSelect 选择面板隐藏的一瞬间 Asia 会从闭合状态下展开闪烁一下
  

Actual result 实际的结果是什么

• 没有看

End luck talk

非常漂亮高效的一款 UI ，我是一名全栈设计师，但目前还是不敢用啊，问题太多了，希望能尽快优化

umd加载的正确方法是什么？

Which Component 出现bug的组件

• 官方文档中 https://semi.design/zh-CN/start/getting-started#3%E3%80%81UMD%20%E6%96%B9%E5%BC%8F%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6

semi-ui version

• latest

Expected result 期望的结果是什么

• 希望能一次跑成功

Actual result 实际的结果是什么

• 报错了babel.min.js:27 Uncaught SyntaxError: Inline Babel script: Unexpected token (2:13)
  1 |

2 | const {(Input, Button, Toast, Icon, Form)} = SemiUI;
| ^

Steps to reproduce 复现步骤

• 复制文档中的代码不能正常运行

Reproducible code 复现代码

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
+       <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+       <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

+       <script src="https://unpkg.com/@douyinfe/[email protected]/dist/umd/semi-ui.min.js"></script>
+       <link rel="stylesheet" href="https://unpkg.com/@douyinfe/[email protected]/dist/css/semi.css">

    </head>
    <body>
        <div id="root">1</div>
    </body>

    <script type="text/babel">
      const {(Input, Button, Toast, Icon, Form)} = SemiUI; 
      ReactDOM.render(
    <div>
        <Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>
        <Input defaultValue="semi" onChange={value => Toast.info('hello semi')}></Input>
    </div>, document.getElementById("root") );
  </script>

</html>

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景
• 看官方文档的时候，想用umd加载试一下，发现并不能正常用

Notification 组件样式问题

Which Component 出现bug的组件

• Notification

semi-ui version

• latest

Expected result 期望的结果是什么

• 黑色主题下正常显示

Actual result 实际的结果是什么

• 黑色主题下背景色是透明的

Steps to reproduce 复现步骤

• 1
  

不知道是不是因为我自己的问题