tencent / tdesign-react

A React UI components lib for TDesign.

English | 简体中文

TDesign React is a UI component library for React 16.x and desktop application.

🎉 Features

• Desktop application interaction
• High quality UI components for React
• Consistent API and UI with TDesign component libraries for other frameworks
• Dark mode and customizable theme
• Support tree-shaking

📦 Installation

npm i tdesign-react

yarn add tdesign-react

pnpm add tdesign-react

🔨 Usage

import React from 'react';
import { Button } from 'tdesign-react';
import 'tdesign-react/es/style/index.css';

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

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

The package of tdesign-react provides kinds of bundles, read the documentation for the detail of differences between bundles.

Quick Start

Visit TDesign Starter to experience in the application built with TDesign React UI components.

Browser Support

IE / Edge	Firefox	Chrome	Safari
Edge >=84	Firefox >=83	Chrome >=84	Safari >=14.1

Read our browser compatibility for more details.

TDesign component libraries

TDesign also provides component libraries for other platforms and frameworks.

• component library for Vue 3.x : tdesign-vue-next
• component library for Vue 2.x : tdesign-vue
• component library for Wechat miniprogram : tdesign-miniprogram

Contributing

Contributing is welcome. Read guidelines for contributing before submitting your Pull Request.

Contributors

Feedback

Create your Github issues or scan the QR code below to join our user groups

License

The MIT License. Please see the license file for more information.

tdesign-react's Issues

0.19版本到0.20+版本的CSS BEM规范改动列表

由于历史原因，之前的css类名没有很好地规范，为了以后可以更好更规范地推进，在0.20的版本中，我们把之前很多不规范的CSS类名都进行了改动，除了transfer、select和steps之外的组件都进行了类名规范，具体改动如列表所示。注意，在接下来的0.21的版本中，还会把剩余的transfer、select和steps的规范完成。如果您的项目中对TDesign的样式进行了覆盖，请按此表格所列的改动进行修改。

Table组件

组件	原类名	新类名
Table	table-body	t-table__body
Table	align-center	t-align-center
Table	align-left	t-align-left
Table	align-right	t-align-right
Table	text-ellipsis	t-text-ellipsis
Table	t-table-pagination	t-table__pagination
Table	t-table-sort-icon	t-table__sort-icon
Table	t-table-double-icons	t-table__double-icons
Table	t-table-sort-icon-active	t-table__sort-icon--active
Table	t-table-expand-box	t-table__expand-box
Table	t-table-sort-icon-active	t-table__sort-icon--active
Table	t-table-content	t-table__content
Table	t-table-expandable-icon-cell	t-table__expandable-icon-cell
Table	t-table--empty	t-table__empty
Table	t-table-valign__top	t-table--align-top
Table	t-table--loading-async	t-table__async-loading
Table	t-table--loading-status-loading	t-is-loading
Table	t-table--loading-status-load-more	t-is-load-more
Table	t-table-filter-icon	t-table__filter-icon
Table	t-table-filter-pop	t-table__filter-pop
Table	t-table-filter-pop-content	t-table__filter-pop-content
Table	t-table-filter-pop-content__inner	t-table__filter-pop-content-inner
Table	t-table-content--scrollable-to-left	t-table__content--scrollable-to-left
Table	t-table-content--scrollable-to-right	t-table__content--scrollable-to-right
Table	t-table-expanded-cell	t-table__expanded-cell

Menu 组件

组件	原类名	新类名
MenuGroup	t-menu-group-title	t-menu-group__title

Dropdown组件

组件	原类名	新类名
Dropdown 组件	t-dropdown__menu__column	t-dropdown__menu-column
Dropdown 组件	t-dropdown__item__content	t-dropdown__item-content
Dropdown 组件	t-dropdown__item__content_text	t-dropdown__item-text
Dropdown 组件	has-suffix	t-dropdown--suffix
Dropdown 组件	children-suffix	t-dropdown__item-icon

Divider组件

组件	原类名	新类名
Divider 组件	t-divider-inner-text	t-divider__inner-text

Drawer组件

组件	原类名	新类名
Drawer 组件	t-drawer-attach	t-drawer--attach
Drawer 组件	t-drawer-left	t-drawer--left
Drawer 组件	t-drawer-right	t-drawer--right
Drawer 组件	t-drawer-top	t-drawer--top
Drawer 组件	t-drawer-bottom	t-drawer--bottom
Drawer 组件	t-drawer-open	t-drawer--open
Drawer 组件	t-drawer-no-mask	t-drawer--without-mask
Drawer 组件	t-drawer-confirm	t-drawer__confirm
Drawer 组件	t-drawer-cancel	t-drawer__cancel

Pagination组件

组件	原类名	新类名
Pagination	t-pagiantion__btn--prev	t-pagiantion__btn-prev
Pagination	t-pagiantion__btn--next	t-pagiantion__btn-next

Dialog 组件

组件	原类名	新类名
Dialog	t-dialog-ctx	t-dialog__ctx
Dialog	t-dialog-ctx--fixed	t-dialog__ctx--fixed
Dialog	t-not-visable	t-is-hidden
Dialog	t-dialog-mask	t-dialog__mask
Dialog	t-dialog-mask--hidden	t-is-hidden
Dialog	t-dialog-confirm	t-dialog__confirm
Dialog	t-dialog-cancel	t-dialog__cancel

Message

组件	原类名	新类名
Message	t-message-close	t-message__close
Message	t-message-list	t-message__list

Notification

组件	原类名	新类名
Notification	t-notification__detail--item	t-notification__detail-item

Anchor组件

组件	原类名	新类名
Anchor 组件	t-anchor_line	t-anchor__line
Anchor 组件	t-anchor-item	t-anchor__item
Anchor 组件	t-anchor-item_link	t-anchor__item-link
Anchor 组件	t-anchor-target	t-anchor__target
Anchor 组件	cursor-wrapper	t-anchor__line-cursor-wrapper
Anchor 组件	cursor	t-anchor__line-cursor
Anchor 组件	t-copy	t-anchor__copy

Slider组件

组件	原类名	新类名
Slider 组件	t-slider-contianer	t-slider__container
Slider 组件	t-slider-input-container	t-slider__input-container
Slider 组件	center-line	t-slider__center-line
Slider 组件	t-slide-vertical	t-slide--vertical

Form 组件

组件	原类名	新类名
Form 组件	t-form__controls--content	t-form__controls-content

Badge

组件	原类名	新类名
Badge 组件	t-badge-static	t-badge--static

List

组件	原类名	新类名
List	t-list-items	t-list__inner

Cascader 组件

组件	原类名	新类名
Cascader 组件	t-cascader-placeholder	t-cascader__placeholder
Cascader 组件	t-cascader-content	t-cascader__content
Cascader 组件	t-cascader-is-multiple	t-cascader--multiple
Cascader 组件	t-cascader-dropdown	t-cascader__dropdown
Cascader 组件	t-cascader-panel	t-cascader__panel
Cascader 组件	t-cascader-menu	t-cascader__menu
Cascader 组件	t-cascader-item	t-cascader__item
Cascader 组件	t-cascader-item--highlight	t-cascader__item--highlight
Cascader 组件	t-cascader-item-have-icon	t-cascader__item--with-icon
Cascader 组件	t-cascader-item-is-leaf	t-cascader__item--leaf
Cascader 组件	t-cascader-item__label	t-cascader__item-label
Cascader 组件	t-cascader-item__label--filter	t-cascader__item-label--filter
Cascader 组件	t-cascader-item__is-empty	t-cascader__empty
Cascader 组件	t-cascader-menu__seperator	t-cascader__menu-seperator
Cascader 组件	t-cascader-menu__filter	t-cascader__menu-filter
Cascader 组件	t-cascader-search-input	t-cascader__search-input
Cascader 组件	t-cascader-icon	t-cascader__icon
Cascader 组件	t-cascader-item-icon	t-cascader__item-icon
Cascader 组件	t-cascader-panel	t-cascader__panel

Calendar组件

组件	原类名	新类名
Calendar 组件	t-is-now	t-calendar__table-body-cell--now
Calendar 组件	t-calendar__table-body-cell-value	t-calendar__table-body-cell-display

DatePicker 组件

组件	原类名	新类名
DatePicker	t-date-picker-popup-reference	t-date-picker__popup-reference
DatePicker	t-date-picker--container	t-date-picker__container
DatePicker	t-date-picker--panels	t-date-picker__panels
DatePicker	t-date-picker-header	t-date-picker__header
DatePicker	t-date-picker-header-title	t-date-picker__header-title
DatePicker	t-date-header__btn	t-date-picker__header-btn
DatePicker	t-date-picker-header-controller	t-date-picker__header-controller
DatePicker	t-date-cell__wrapper	t-date-picker__cell-wrapper
DatePicker	t-date-picker-year	t-date-picker--year
DatePicker	t-date-picker-month	t-date-picker--month
DatePicker	t-date-picker-date	t-date-picker--date
DatePicker	t-date-picker-range	t-date-picker--range
DatePicker	t-date-cell__text	t-date-picker__cell-text
DatePicker	t-date-picker-presets	t-date-picker__presets
DatePicker	t-date	t-date-picker__panel
DatePicker	t-date-cell--now	t-date-picker__cell--now
DatePicker	t-date-cell--active	t-date-picker__cell--active
DatePicker	t-date-cell--disabled	t-date-picker__cell--disabled
DatePicker	t-date-cell--highlight	t-date-picker__cell--highlight
DatePicker	t-date-cell--active-start	t-date-picker__cell--active-start
DatePicker	t-date-cell--active-end	t-date-picker__cell--active-end
DatePicker	t-date-cell--additional	t-date-picker__cell--additional
DatePicker	t-date-cell--first-day-of-month	t-date-picker__cell--first-day-of-month
DatePicker	t-date-cell--last-day-of-month	t-date-picker__cell--last-day-of-month

Grid 组件

组件	原类名	新类名
Grid	t-row-start	r-row--start
Grid	t-row-center	r-row--center
Grid	t-row-end	r-row--end
Grid	t-row-space-between	t-row--space-between
Grid	t-row-space-around	t-row--space-around
Grid	t-row-top	t-row--top
Grid	t-row-middle	t-row--middle
Grid	t-row-bottom	t-row--bottom

Layout

组件	原类名	新类名
Layout	t-layout-has-sider	t-layout--with-sider
Layout	t-layout--header	t-layout__header
Layout	t-layout--content	t-layout__content
Layout	t-layout--sider	t-layout__sider
Layout	t-layout--footer	t-layout__footer

Popup

组件	原类名	新类名
Popup	t-popup-content	t-popup__content
Popup	t-popup-reference	t-popup__reference
Popup	t-popup_animation-enter	t-popup--animation-enter
Popup	t-popup_animation-enter-from	t-popup--animation-enter-from
Popup	t-popup_animation-exiting	t-popup--animation-exiting
Popup	t-popup_animation-leave-to	t-popup--animation-leave-to
Popup	t-popup_animation-enter-to	t-popup--animation-enter-to
Popup	t-popup_animation-entering	t-popup--animation-entering
Popup	t-popup_animation-leave-from	t-popup--animation-leave-from
Popup	t-popup_animation-leave	t-popup--animation-leave
Popup	t-popup_animation-enter-active	t-popup--animation-enter-active
Popup	t-popup_animation-leave-active	t-popup--animation-leave-active

Tooltip

组件	原类名	新类名
Tooltip	t-tooltip-light	t-tooltip--light
Tooltip	t-tooltip-default	t-tooltip--default
Tooltip	t-tooltip-primary	t-tooltip--primary
Tooltip	t-tooltip-success	t-tooltip--success
Tooltip	t-tooltip-danger	t-tooltip--danger
Tooltip	t-tooltip-warning	t-tooltip--warning

Radio

组件	原类名	新类名
Radio	t-radio-group-outline	t-radio-group__outline
Radio	t-radio-group-filled	t-radio-group--filled
Radio	t-radio-group-filled-bg-block	t-radio-group__bg-block
Radio	t-radio-group-primary-filled	t-radio-group--primary-filled
Radio	t-radio-group-small	t-size-s
Radio	t-radio-group-medium	t-size-m
Radio	t-radio-group-large	t-size-l

TimePicker

组件	原类名	新类名
TimePicker	t-time-picker-panel__container	t-time-picker__panel-container
TimePicker	t-time-picker-panel	t-time-picker__panel
TimePicker	t-time-picker-panel__body	t-time-picker__panel-body
TimePicker	t-time-picker-panel-section	t-time-picker__panel-section
TimePicker	t-time-picker-panel-section__body	t-time-picker__panel-section-body
TimePicker	t-time-picker-panel-section__footer	t-time-picker__panel-section-footer

Tree

组件	原类名	新类名
Tree	t-tree--fx	t-tree--transition
Tree	t-tree-toggle-enter-active	t-tree__item--enter-active
Tree	t-tree-toggle-leave-active	t-tree__item--leave-active

Upload

组件	原类名	新类名
Upload	t-upload-icon-delete	t-upload__icon-delete
Upload	t-upload-list__file	t-upload__list-file
Upload	t-upload-list__item	t-upload__list-item
Upload	t-upload-list__name	t-upload__list-name
Upload	t-upload-list__content	t-upload__list-content
Upload	t-upload-list__controll	t-upload__list-controll
Upload	t-upload-list__img	t-upload__list-img
Upload	t-upload__highlight	t-upload--highlight
Upload	t-upload-dialog	t-upload__dialog
Upload	t-upload-card__mask-disabled	t-is-disabled
Upload	t-upload__small	t-size-s
Upload	t-display-text--margin	t-upload__display-text--margin
Upload	t-upload-card-container	t-upload__card-container
Upload	t-upload-card	t-upload__card
Upload	t-upload-card__item	t-upload__card-item
Upload	t-upload-card__name	t-upload__card-name
Upload	t-upload-card__content	t-upload__card-content
Upload	t-upload-card__mask__item	t-upload__card-mask-item
Upload	t-upload-card__status-wrap	t-upload__card-status-wrap
Upload	t-upload-card__content-border	t-is-bordered
Upload	t-upload-card__status	t-upload__card-status
Upload	t-upload-card__mask	t-upload__card-mask
Upload	t-upload-dialog__body-img-box	t-upload__dialog-body-img-box

API文档优化

1. 目前API的复杂类型都是通过跳转的方案展示的，在实际使用中有所不便。是否考虑当前页展示

目前看到比较好的两种方案是：

1. 当前页紧随其后展示复杂类型
2. 当前复杂类型点击弹窗展示

2. API类型取值定义不够清晰明了。

例如： dialog组件的API

最好是类型一栏有强提醒 & 更加详细的类型。而不是TS的基本类型

Table 组件固定表头时列内容无法对齐

Describe Framework

• tdesign-vue
• tdesign-vue-next
• tdesign-react
• tdesign-miniprogram

Describe Environment
All browsers.

Describe the bug
在设置 maxHeight 属性后，若内容总高度小于 maxHeight 的值，表头中的列和内容中的列无法对齐。

Additional context
https://codesandbox.io/s/tdesign-react-demo-forked-jqse1?file=/src/demo.jsx

[文档过时] Layout 布局： Aside组件似乎已更名为Sider

文档内容：

代码内容：

进度条相关问题

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug
环形进度条半径计算方法有问题

修复后

相关解释：

svg 中 circle 最后呈现的图形总半径其实是「半径 + strokeWidth / 2」

站点无法访问

时间选择器相关问题

Describe Framework

• tdesign-react

Describe Environment
Chrome 95.0.4638.69

Describe the bug
自定义步长时间选择器描述与显示不符。应只显示 时 和 分。
且 分 的步长展示效果不明显。建议改为 5 分钟间隔。

官网组件展示页，面包屑相关问题

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug
breadcrumb doc 基础面包屑示例文案错误，「页面2」和「页面3」有多次重复
不知道这个重复的文字算不算有意而为之，如果我理解错的话，烦请关闭这个 issue。多谢！

Additional context

希望Layout中的Sider增加对styled-components的支持

文档描述

当子元素中包含 <Aside> 时，全部子元素会水平排列，否则会垂直排列。

现状

我使用styled-components包裹了一下Sider组件，希望能在保持横向flex的同时自定义侧边栏的样式。

import React from 'react';
import { Layout } from 'tdesign-react';
import styled from 'styled-components';

const { Header, Content, Sider } = Layout;

const StyledHeader = styled(Header)`
  background: white;
  font-size: 1.5rem;
  box-shadow: 2px 1px 2px 0 gray;
  position: sticky;
  z-index: 200;
`;
const StyledSider = styled(Sider)`
  border-radius: 0.5rem;
`;
const IconContainer = styled.div`
  width: 14.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
`;
const Root = styled(Layout)`
  min-height: 100vh;
`;
console.log(<StyledSider />);
console.log(<Sider />);

const LayoutContainer: React.FC = () => {
  return (
    <Root>
      <StyledHeader>
        <IconContainer>View Mock</IconContainer>
      </StyledHeader>
        <Layout>
          <StyledSider>
            1
          </StyledSider>
          <Content>
            123
          </Content>
        </Layout>  
    </Root >
  )
};

export default LayoutContainer;

表现：

实际渲染出来的direction是纵向的。

个人分析：

Layout的Class挂载逻辑可能不支持styled-components，在这个情况下的Layout class如下图所示：

是t-layout，而观察源码：

发现横向时的代码应该是t-layout--with-sider，因为useEffect中判断有无Sider组件的逻辑是根据child.type判断的，而Styled-components会把组件封装一次，将原组件的类型保存到target属性中，导致Layout的方向失效。

如图：上面是Styled-components组件，下面是t-design的Sider组件，可以看到Sider组件类型被封装到了type.target属性里，导致Layout没有在逻辑中找到children中的Sider组件。

select 组件 禁用状态下还能选择！

Describe Framework

• tdesign-react

Add browser version here

Describe the bug
select 禁止选择状态还能继续操作

Select远程搜索首次显示弹出窗不完整

Describe Framework

• tdesign-react 0.21.0

Describe Environment

chrome 96

Describe the bug

首次搜索，弹出窗不完整，无法滚动

选择之后，再次搜索，正常显示。

Additional context
重现地址：https://tdesign.tencent.com/react/components/select#%E8%BF%9C%E7%A8%8B%E6%90%9C%E7%B4%A2%E9%80%89%E6%8B%A9%E5%99%A8

Input缺少onPaste事件支持

Describe Framework

• tdesign-react

另外建议最好能暴露inputElementRef，以防有什么特殊的需求，例如这种onPaste事件，如果暴露了ref其实外不可以先自行实现一下
PS：主要诉求是pasteEvent的clipboardData

datePicker显示当前天数标记问题

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug

Additional context
z-index设置问题

New tabs style

Is your feature request related to a problem? Please describe.

No it's not related to a problem.

Describe the solution you'd like

It would be nice to have the tab header styled like the tab switch on documentation page:

Maybe it could be to add another theme called switcher so one would use it like this:

      <Tabs placement={'top'} size={'medium'} theme={'switcher'} disabled={false}>
        <TabPanel value={'1'} label={'1'}>
          <div style={{ margin: 20 }}>这是一个Tabs</div>
        </TabPanel>
        <TabPanel value={'2'} label={<div>2</div>}>
          <div style={{ margin: 20 }}>这是一个Tabs</div>
        </TabPanel>
      </Tabs>

Describe alternatives you've considered

Currently no alternatives. Maybe someone could pull some CSS tricks to achieve similar styling.

Additional context

No additional context.

给dialog的mask加个过渡动画吧

大部分下拉框的组件显示错误

类似select，时间选择器等一些点击下拉弹出图层操作的组件，一旦组件位置处于浏览器底部区域，那么就会有弹出元素位置错误问题

【datepicker】选择时间后，通过value来控制时间，日期active不正确

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug
value写今天，切换其它时间后(1月7号)，再次点开日期，active日期为上次点击日期（1月7号）
Additional context

https://codesandbox.io/s/tdesign-react-demo-forked-cqk76

问一下组件导出为啥这样写？

没有仔细研究，看了一下 button 组件，为啥要支持两种导出方式？是有其他目的么

import _Button from './Button';

import './style/index.js';

export type { ButtonProps } from './Button';
export * from './type';

export const Button = _Button;
export default Button;

即使要支持两种导出方式，这样写不是更简单么？

import Button from './Button';
...
export { Button };
export default Button;

Tdesign的React版本的中后台系统何时上线

Tdesign的React版本的中后台系统何时上线，计划是什么样的呢

error in next.js

Describe Framework

• tdesign-react
• [ x] next.js 12.x

Describe Environment

chrome

Describe the bug

使用 import { Layout } from 'tdesign-react'; 后报错

Additional context

Read more: https://nextjs.org/docs/messages/css-npm

iframe元素内popup组件弹出位置不正确

Describe Framework

tdesign-react

Describe Environment

Add browser version here

在iframe内使用popup时，popup的attach属性设置iframe内元素时无效，总是放到最外层body下，导致弹出位置不正确。

Additional context
Add any other context about the problem here.

dropdown bug

Describe Framework
react web dropdown bug.

Describe Environment
chrome
Add browser version here
96.0.4664.110

Pagination 组件 mouseOver 状态有闪烁

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

• browser: Chrome
• version: 官网版本

Describe the bug

• 鼠标 mouseOver 到 Pagination 组件的 __number--more 的时候，在该 li 上来回移动的时候，该 li 不断闪烁。

官网版本稳定复现 https://tdesign.tencent.com/react/components/pagination#%E5%B0%91%E9%87%8F%E9%A1%B5%E9%9D%A2

Cascader组件选中异常

Describe Framework

• tdesign-vue
• tdesign-vue-next
• tdesign-react
• tdesign-miniprogram

Describe Environment

chrome 96.0.4664.110
macos Catalina 10.15.7

Describe the bug
官方文档 https://tdesign.tencent.com/react/components/cascader?tab=demo#%E6%96%87%E6%9C%AC%E8%BF%87%E9%95%BF%E6%97%B6%E7%9A%84%E5%B1%95%E7%A4%BA
选中选项二过长的那一列时 有概率导致选项二过短的一列无法选中

Additional context
Add any other context about the problem here.

官网面包屑文档页面不见了

Describe Framework

• tdesign-react

Describe Environment

Describe the bug

无法打开面包屑 API 文档（0.21.0）
https://tdesign.tencent.com/react/components/breadcrumb

TimePicker 时间选择器 确定选择时间不生效

Describe Framework

• tdesign-vue
• tdesign-vue-next
• tdesign-react
• tdesign-miniprogram

Describe Environment

Chrome 96.0

Describe the bug
TimePicker 时间选择器 下拉框后不做任何动作，有时间被选中，但是点击确定不生效，本页没有默认时间的都有这个问题
Link

timepickertdesign.mp4

DatePicker(日期选择器)弹窗收回时位置不对

Describe Framework

• tdesign-react

Describe Environment

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62

url: https://tdesign.tencent.com/react/components/date-picker

Dec-23-2021.15-57-51.mp4

select组件下拉内容被截断

Describe Framework

tdesign-react

Describe Environment

windows 系统（mac未复现）

Describe the bug
select组件下拉内容高度不正确。其中max-height属性比设置的height小，导致被截断。

Additional context
复现步骤：
select 组件设置远程搜索，搜索结果未返回时输入新的内容进行搜索。

组件使用如下：
<Select filterable value={uin} onChange={onChange} loading={loading} onSearch={onSearch} placeholder="" popupProps={{ placement: 'bottom-left', overlayStyle: { width: 300, height: 280 } }} >

TreeSelect组件当下拉选项过多的时候，下拉框无法滚动，并且异步加载的选项，面板初始化高度过小

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug
A clear and concise description of what the bug is.

Additional context
Add any other context about the problem here.

missing disableCheck prop for Tree component

Describe Framework

• tdesign-react

Describe Environment

Chrome Version 96.0.4664.110

Describe the bug

According to the document, the disableCheck prop for the Tree component should be implemented. But after diving into the source code for a while, it turns out there is no logic behind this prop.

A clear and concise description of what the bug is.

https://codesandbox.io/s/tree-disablecheck-7nrdh

tdesign-site-components td-doc-header 组件问题

Describe Framework

• tdesign-react

Describe Environment

Chrome 96.0.4664.110 arm64

Describe the bug
When using the document.documentElement.setAttribute method to switch from dark mode back to light mode, the src of the iframe in <td-doc-header> does not change. (Under a specific page: https://tdesign.tencent.com/react/components/dark-mode)

使用document.documentElement.setAttribute方法在特定页面将主题从暗黑切换回明亮模式后，<td-doc-header> 组件中 ifrrame 的 src 没有正确切换回来。页面地址：https://tdesign.tencent.com/react/components/dark-mode。

Steps to reproduce

1. visit https://tdesign.tencent.com/react/components/dark-mode
2. document.documentElement.setAttribute('theme-mode', 'dark')
3. document.documentElement.removeAttribute('theme-mode')

[提议] 提升代码质量和专业性

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug
人人都应该安装的 VSCODE 插件：
code-spell-checker 它不香吗
作为一个开源 repo，要尽量避免出现低级的 typo 哇。

Additional context
在 tdesign-common 中的原 issue

[React] Tree Select 异步加载数据的时候，无法滚动查看下面的节点，必须失焦重新render才可以

Describe Framework

• tdesign-react
  

Describe Environment

Add browser version here

Describe the bug
A clear and concise description of what the bug is.

Additional context
Add any other context about the problem here.

Calendar 日历组件中，选择部分过长！

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug
Calendar 日历组件中，选择部分超出！期望是可以设置最大高度，在最大高度有一个滚动效果！

类型缺失

Describe Framework

• tdesign-react

Describe Environment
OSX

Describe the bug
类型推导提示缺失

这个情况存在在多个组件中

Additional context

【Tree 组件】当每个节点都满足过滤条件时，展示不正确

Describe Framework

• tdesign-react

Describe Environment

Chrome

Describe the bug

当每个节点都满足过滤条件时，展示不正确，详情见 codesandbox，具体操作是：
输入字符 1，期待的效果是包含 1 字符的节点都应该可以展示出来，但是并没有，初步判定是每个节点的 isRest 都为 true 导致程序内部不能判断是否处于过滤状态。

Popup动画视觉效果

目前看到所有基于popup的弹出窗动画都比较缓慢。给人一种卡顿的感觉，是否考虑优化？

Tdesign 效果

Antd效果

TreeSelect组件，当multiple和filterable同时开启时，希望已选择项可以通过键盘删除键删除

Message close 关闭无响应

Describe Framework

• tdesign-react

Describe Environment

Describe the bug
Message close 点击关闭，无响应！

Additional context

表格无法传递自定义style和className属性

Describe Framework

tdesign-react

Describe Environment

chrome

Describe the bug
表格组件无法识别style和className属性，导致无法设置内联样式以及自定义className。

[Menu] 双层导航 菜单切换后子菜单 bar 位置不对

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug
官网示例 -> 双层导航 -> 选择「菜单3」 -> 选择「二级菜单-2」-> 选择「菜单2」
效果：原「二级菜单-2」下的蓝条并未消失

Additional context
Add any other context about the problem here.

Cascader斜八度动画层级遮挡

Describe Framework

• tdesign-react

Describe Environment

Version 96.0.4664.110 (Official Build) (arm64)

Describe the bug

Cascader斜八度动画层级遮挡

Additional context

compare with select

drawer组件不支持通过传入字符串设置交互按钮的文本，与api文档描述不符

bug: drawer 收起的样式有问题

Describe Framework

• tdesign-react

Describe Environment

• browser: Chrome
• tdesign-react: 官网版本

Describe the bug

复现地址：https://tdesign.tencent.com/react/components/drawer?tab=demo#%E4%B8%8D%E5%90%8C%E4%BD%8D%E7%BD%AE%E7%9A%84%E6%8A%BD%E5%B1%89

把 placement 改成 top 后，drawer 的收起显然没有其他位置流畅，有一个先关闭蒙层再收起抽屉的过程

Additional context
Add any other context about the problem here.

下拉菜单 Bug

在靠近屏幕底部的时候，下拉菜单本应该出现在上方，实际 hover 后出现在下方，之后鼠标移动出去下拉菜单会闪现到上方再收起。
官网演示模块稳定出现。

Tooltip 视觉效果

Describe Framework

• tdesign-react

Describe Environment

Version: Mac OS Chrome/96.0

Describe the bug
Tooltip 视觉效果，如图，三角icon下出现了一个镂空的边，是设计效果吗，

Additional context

Content:

OTHERS

增加几个labels吧，方便标记与筛选问题

Message组件声明问题

Message类方法，文档中duration是可选的，默认3000，生成的TS声明为必填

【弹出层】bug，如【select】等组件，弹出层位置特殊时，会闪烁

Describe Framework

• tdesign-react

Describe Environment

macos

Add browser version here
chrome 版本 96.0.4664.110（正式版本） (arm64)

Describe the bug
A clear and concise description of what the bug is.

弹出层相对于屏幕这种情况时【组件下方屏幕不能完全展示时】，选择其中某个，会屏幕闪烁，飞到上方，然后收起，或者鼠标移开，一会重新调整位置到上方【因为下方不能完整展示，上方可以】

Additional context
Add any other context about the problem here.

闪烁会给部分人造成眩晕等问题。

部分带弹出层的组件都有类似问题

发现一个文档错误，暗黑模式下，不是给body添加属性，而是html

下面代码写的是正确的

[Table] 基础示例 Pagination 不正常工作

Describe Framework

• tdesign-react

Describe Environment

Add browser version here

Describe the bug
基础示例 Pagination 不正常工作
点击无反应

Additional context
Add any other context about the problem here.