growingio / gio-design Goto Github PK

View Code? Open in Web Editor NEW

50.0 9.0 31.0 127.39 MB

A React UI library and GrowingIO Design System

Home Page: https://growingio.design

License: Apache License 2.0

JavaScript 0.57% TypeScript 89.39% Less 9.53% HTML 0.05% Shell 0.01% MDX 0.45%

growingio design-system react

gio-design's Introduction

GrowingIO Design

一套 React UI 组件库和 GrowingIO 设计系统。

开始

安装依赖：

yarn install

生成组件库：

yarn build

watch 模式：

yarn watch

启动预览网站：

yarn start

License

统计

gio-design's People

Contributors

Stargazers

Watchers

gio-design's Issues

Tabs 标签页组件不要引入图标组件

要实现带图标的标签，把图标通过参数形式传入，标签页组件本身不要依赖图标组件。

Avatar 头像组件中图标使用 @gio-design/icons

先在 @gio-design/icons 中加入 more 图标；
在 Avatar 组件中使用 more 图标。

Button 组件中图标使用 @gio-design/icons

fix in #71

Alert 添加icon对应的颜色，添加到全局导出

Breadcrumb 组件更新 tokens

Reference doesn't exist: color.text.breadcrumb.normal.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.breadcrumb.click.value tries to reference palette.dark.1.value, which is not defined

menu菜单组件，外层多了一个padding值，应该去掉；同时文字没有居中

input 组件高度支持 40px、36px 和 30px 三种尺寸

Tag 组件更新 tokens

Reference doesn't exist: color.background.tag.status.warning.value tries to reference palette.orange.3.value, which is not defined
Reference doesn't exist: color.text.tag.sign.regular.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.tag.sign.ready.value tries to reference palette.orange.2.value, which is not defined
Reference doesn't exist: color.text.tag.status.table.normal.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.tag.filter.light.value tries to reference palette.dark.1.value, which is not defined

Aavatar 头像重叠展示最后一项数字问题

重叠展示时，默认展示 5 个，最后一个用来展示被隐藏的头像个数，但是 + 位置会引起歧义。
2+ 应该表示多于两个，这里是隐藏两个，所以应该用 +2。

loading 支持几种蒙层样式

[Select] onChange callback error

Describe the bug
onChange callback allways get last value

Popconfirm 组件更新 tokens

Reference doesn't exist: color.text.popconfirm.title.value tries to reference palette.dark.3.value, which is not defined
Reference doesn't exist: color.text.popconfirm.desc.value tries to reference palette.dark.1.value, which is not defined

tabNav 添加默认activeKey

StepModal footer logic error and when steps props update will occur error

Describe the bug
StepModal footer should have 3 case.

hidden footer
default footer
customer footer

当 steps 变更时分别使用了useMemo 和 useEffect 且两个内部状态有依赖关系，它会导致内部状态变更不统一。

StepModal steps 状态被重置后 stepStack 状态应该被重新set，任意一个步骤的footer可以被设为 null。

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

To Reproduce
声明一个step数组，在数组[0]位置插入一项。

Expected behavior
显示新插入的一项步骤，但是仍旧显示声明时数组第一项。

tabs 重构，去掉rc-tabs 依赖。

table组件 no data样式需要修改

重新打开 StepModal，StepModal应该处于第一个step的状态。

Describe the bug
重新打开 StepModal，仍然处于关闭之前的状态。

[Input] value and onChange shouldn't must have.

Describe the bug
Input value and onChange shouldn't must have. it can be uncontrolled.

Tree 组件更新 tokens

Reference doesn't exist: color.text.tree.normal.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.tree.switcher.value tries to reference palette.gray.10.value, which is not defined
Reference doesn't exist: color.text.tree.loading.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.tree.popconfirm.title.value tries to reference palette.dark.3.value, which is not defined
Reference doesn't exist: color.text.tree.popconfirm.desc.value tries to reference palette.dark.1.value, which is not defined

Button 组件更新 tokens

Reference doesn't exist: color.background.button.primary.disable.value tries to reference palette.gray.8.value, which is not defined
Reference doesn't exist: color.background.button.default.click.value tries to reference palette.gray.9.value, which is not defined
Reference doesn't exist: color.background.button.default.disable.value tries to reference palette.gray.8.value, which is not defined
Reference doesn't exist: color.background.button.assist.click.value tries to reference palette.gray.9.value, which is not defined
Re
Reference doesn't exist: color.border.button.primary.disable.value tries to reference palette.gray.8.value, which is not defined
Reference doesn't exist: color.border.button.default.click.value tries to reference palette.gray.9.value, which is not defined
Reference doesn't exist: color.border.button.default.disable.value tries to reference palette.gray.8.value, which is not defined
Reference doesn't exist: color.border.button.assist.click.value tries to reference palette.gray.9.value, which is not defined
R
Reference doesn't exist: color.text.button.default.normal.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.button.default.hover.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.button.default.click.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.button.assist.normal.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.button.assist.hover.value tries to reference palette.dark.1.value, which is not defined
Reference doesn't exist: color.text.button.assist.click.value tries to reference palette.dark.1.value, which is not defined

Toggles 组件使用的 tokens 更新

      "toggles": {
        "toggles": {
          "default": {
            "value": "{palette.white.value}"
          },
          "suffixContent": {
            "value": "{palette.dark.1}"
          }
        },
        "toggles-checked": {
          "value": "{palette.blue.6.value}"
        },
        "handle": {
          "value": "{palette.blue.7.value}"
        },
        "handle-checked": {
          "value": "{palette.white.value}"
        },
        "disable": {
          "toggles": {
            "default": {
              "value": "{palette.gray.3.value}"
            },
            "suffixContent": {
              "value": "{palette.gray.5.value}"
            },
            "checked": {
              "value": "rgba(18, 72, 233, 0.5)"
            },
            "handle": {
              "value": "{palette.gray.6.value}"
            }
          }
        }
      },

token 命名请按照规范来。

List prop onChange return string value contradict typed Option

Describe the bug
onChange is (value: string) => void
instead of
onChange(option: Option) => void

[Select] need default value

Is your feature request related to a problem? Please describe.
当 Select 被用于[更换资源]的场景时，需要 default Value 显示更改之前的值

radio 组件，onchange方法响应有问题，切换时，有时不触发onchange事件

Alert 组件更新 tokens

Reference doesn't exist: color.background.alert.info.icon.value tries to reference palette.blue.8.value, which is not defined
Reference doesn't exist: color.background.alert.warning.default.value tries to reference palette.orange.1.value, which is not defined
Reference doesn't exist: color.text.alert.content.value tries to reference palette.dark.1.value, which is not defined

Tabs 组件更新 tokens

Reference doesn't exist: color.text.tabs.normal.value tries to reference palette.dark.1.value, which is not defined

pagination 提供参数当只有一页时可选择展示或隐藏分页

table的title属性，如果不设置，还是存在margin的值的，跟上方元素存在一个间距

按钮组件相关问题

Describe the bug
图标组件升级后按钮组件需要更新：

按钮中的图标没有剧中，
加载中状态直接使用图标的 rotating 参数来控制，
LoadingBlackOutlined 和 LoadingWhiteOutlined 改成一个 LoadingOutlined，通过 color 来改变颜色。

{
  "size": {
    "font": {
      "button": {
        "large": {
          "value": "{size.font.14.value}"
        },
        "default": {
          "value": "{size.font.14.value}"
        },
        "small": {
          "value": "{size.font.14.value}"
        },
        "only-icon": {
          "large": {
            "value": "{size.font.18.value}"
          },
          "default": {
            "value": "{size.font.16.value}"
          },
          "small": {
            "value": "{size.font.14.value}"
          }
        }
      }
    }
  }
}

这些 tokens 删掉吧，直接用 @size-font-14 等这些变量就行了。

[Modal] 支持函数调用

Is your feature request related to a problem? Please describe.
在回调函数中触发弹窗的场景。支持函数调用很有必要。

[Upload] 支持默认图片

type='avatar'时，应该支持默认图片。目前支持文字形式的默认头像，支持默认图片来满足【更换头像】的需求。
type='card' 可不可以支持默认图片，其他type呢。
AvatarTrigger 组件名称错了。

明确 Link 组件 click 事件中 event 的类型

TODO 追踪

Link 组件中 click 事件的 event 类型需要明确，或者整个类型考虑是否合理

Loading 组件更新 tokens

Reference doesn't exist: color.text.loading.value tries to reference palette.dark.1.value, which is not defined

当被用于Dropdown 的时候，点击list item 后不应该有选中状态。

~~2. list 本身缺少一个 onClick 参数~~

[Table] 提供合并单元格功能

Input组件 ref参数

description
给Input组件绑定一个ref时，ref.current不对

To Reproduce

const inputRef = useRef(null);

<Input ref={inputRef} />

Expected behavior
ref.current是一个dom节点
目前是Input这一个ReactNode

增加 Input 相关 tokens

增加 border 相关 tokens：

$color-border-input-normal
$color-border-input-hover
$color-border-input-active
$color-border-input-disable
$color-border-input-error

另外 input placeholder 颜色使用 @palette-gray-1，把 @palette-gray-8 到 @palette-gray-12 都删除吧。

modal组件补测试

Toast 组件中图标使用 @gio-design/icons

先在 @gio-design/icons 中加入需要用到的图标；
在 Toast 组件中使用依赖的图标。

px	rem
12	12/16 = .75
14	14/16 = .875
16	16/16 = 1
18	18/16 = 1.125
20	20/16 = 1.25
24	24/16 = 1.5
30	30/16 = 1.875
36	36/16 = 2.25
42	42/16 = 2.625
48	48/16 = 3