diff --git a/.dumirc.ts b/.dumirc.ts index 662491b43..601b263e8 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -138,7 +138,10 @@ export default defineConfig({ }, { title: '导航', - children: [{ title: 'Breadcrumb 面包屑', link: '/components/breadcrumb' }], + children: [ + { title: 'Breadcrumb 面包屑', link: '/components/breadcrumb' }, + { title: 'Dropdown 下拉菜单', link: '/components/dropdown' }, + ], }, { title: '布局', @@ -156,9 +159,11 @@ export default defineConfig({ { title: 'Input 输入框', link: '/components/input' }, { title: 'InputNumber 数字输入框', link: '/components/input-number' }, { title: 'Radio 单选框', link: '/components/radio' }, + { title: 'Checkbox 多选框', link: '/components/checkbox' }, { title: 'Switch 开关', link: '/components/switch' }, { title: 'Select 选择器', link: '/components/select' }, { title: 'TreeSelect 树选择', link: '/components/tree-select' }, + { title: 'Slider 滑动输入条', link: '/components/slider' }, ], }, { diff --git a/docs/design/design-CHANGELOG.md b/docs/design/design-CHANGELOG.md index 3ced06e72..ecfd3e5f5 100644 --- a/docs/design/design-CHANGELOG.md +++ b/docs/design/design-CHANGELOG.md @@ -8,6 +8,29 @@ group: 基础组件 --- +## 0.4.1 + +`2024-11-11` + +- 📖 新增 Checkbox 的文档和示例。[#812](https://github.com/oceanbase/oceanbase-design/pull/812) +- 📖 新增 Dropdown 的文档和示例。[#803](https://github.com/oceanbase/oceanbase-design/pull/803) +- 📖 新增 Slider 的文档和示例。[#815](https://github.com/oceanbase/oceanbase-design/pull/815) +- ⭐️ ConfigProvider 新增 `appProps` 属性，用于控制内嵌 App 是否渲染组件、以便让被包裹元素继承 `.ant-app` 样式。[#824](https://github.com/oceanbase/oceanbase-design/pull/824) +- 🐞 去掉自定义的 Design Token `fontSizeHeading` 和 `lineHeightHeading`，修复标题大小错误的问题。[#813](https://github.com/oceanbase/oceanbase-design/pull/813) +- 🐞 修复 Dropdown.Button 为主按钮时分割线超出和背景色不正确的问题。[#803](https://github.com/oceanbase/oceanbase-design/pull/803) +- 🐞 [图标] 删除自定义的 UserOutlined 图标，避免和 `@ant-design/icons` 图标冲突以及在 Login 组件中的展示异常。[#802](https://github.com/oceanbase/oceanbase-design/pull/802) +- 💄 弱化 Breadcrumb 最后一项的字体颜色，将其改为 `#5c6b8a`。[#816](https://github.com/oceanbase/oceanbase-design/pull/816) +- Card + - 💄 优化小尺寸 Card 带页签时的头部间距样式。[#821](https://github.com/oceanbase/oceanbase-design/pull/821) + - 💄 优化 Card 无分割线时的底部间距。[#819](https://github.com/oceanbase/oceanbase-design/pull/819) +- 💄 优化 Checkbox 超长内容的垂直对齐样式，从居中对齐改为顶部对齐。[#812](https://github.com/oceanbase/oceanbase-design/pull/812) +- 💄 更新 Empty 的默认插图。[#814](https://github.com/oceanbase/oceanbase-design/pull/814) +- 💄 优化 Radio 超长内容的垂直对齐样式，从居中对齐改为顶部对齐。[#811](https://github.com/oceanbase/oceanbase-design/pull/811) +- 💄 优化 Slider 轨道覆盖部分的颜色，以及左右两端的标签对齐样式。[#815](https://github.com/oceanbase/oceanbase-design/pull/815) +- Table + - 💄 优化 Table 底部分割线的展示逻辑，无分页器时也应该展示。[#822](https://github.com/oceanbase/oceanbase-design/pull/822) + - 💄 将非嵌套 Table 的空状态最小高度设为 `360px`。[#818](https://github.com/oceanbase/oceanbase-design/pull/818) + ## 0.4.0 `2024-10-09` diff --git a/docs/ui/ui-CHANGELOG.md b/docs/ui/ui-CHANGELOG.md index ef63efc95..fce9d02db 100644 --- a/docs/ui/ui-CHANGELOG.md +++ b/docs/ui/ui-CHANGELOG.md @@ -8,6 +8,27 @@ group: 业务组件 --- +## 0.4.1 + +`2024-11-11` + +- ⭐️ 大幅优化 DateRanger 的交互和样式: [#810](https://github.com/oceanbase/oceanbase-design/pull/810) [#795](https://github.com/oceanbase/oceanbase-design/pull/795) + - 调整布局和样式 + - 日期和时间输入框支持快捷选中 + - 修复手动输入日期时日历面板不更新的问题 + - 默认关闭极简模式 + - 默认展示年份和秒 + - 使用刷新图标 替换 `当前` 按钮 + - 移除快捷选项的 tag + - 信息提示和报错信息移到面板底部 + - 自定义时间默认不自动计算时间跨度，并移除自定义选项 +- 🆕 Ranger 支持透传属性到 QuickPicker 组件。[#799](https://github.com/oceanbase/oceanbase-design/pull/799) +- 💄 去掉 PageContainer 页头的上内间距，让页面布局更加紧凑。[#817](https://github.com/oceanbase/oceanbase-design/pull/817) +- ProTable + - 💄 对齐 Table 的可展开、空状态和 `footer` 样式。[#825](https://github.com/oceanbase/oceanbase-design/pull/825) + - 💄 优化查询表单样式，将搜索&重置按钮组和展开收起互换位置。[#801](https://github.com/oceanbase/oceanbase-design/pull/801) +- 💄 优化 Password 的多处样式，以对齐设计规范。[#820](https://github.com/oceanbase/oceanbase-design/pull/820) + ## 0.4.0 `2024-10-09` diff --git a/package.json b/package.json index c59a37899..74ab3da31 100644 --- a/package.json +++ b/package.json @@ -44,53 +44,53 @@ "devDependencies": { "@ant-design/colors": "^7.1.0", "@ant-design/cssinjs": "^1.21.1", - "@ant-design/icons": "^5.4.0", - "@babel/cli": "^7.24.8", - "@babel/preset-env": "^7.25.4", + "@ant-design/icons": "^5.5.1", + "@babel/cli": "^7.25.9", + "@babel/preset-env": "^7.26.0", "@chenshuai2144/less2cssinjs": "^1.0.7", "@ctrl/tinycolor": "^4.1.0", "@emotion/babel-preset-css-prop": "^11.12.0", - "@emotion/css": "^11.13.0", - "@emotion/react": "^11.13.0", + "@emotion/css": "^11.13.4", + "@emotion/react": "^11.13.3", "@emotion/server": "^11.11.0", "@qixian.cs/github-contributors-list": "^2.0.2", - "@rc-component/trigger": "^2.2.3", + "@rc-component/trigger": "^2.2.5", "@stackblitz/sdk": "^1.11.0", "@testing-library/dom": "^10.4.0", - "@testing-library/jest-dom": "^6.5.0", + "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.0.1", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", "@types/lodash": "^4.17.13", - "@types/node": "^20.14.14", - "@types/react": "^18.3.3", + "@types/node": "^20.17.6", + "@types/react": "^18.3.12", "@umijs/fabric": "^4.0.1", - "@umijs/test": "^4.3.30", - "@vercel/analytics": "^1.3.1", - "antd": "^5.20.6", - "antd-style": "^3.6.2", + "@umijs/test": "^4.3.31", + "@vercel/analytics": "^1.3.2", + "antd": "^5.21.6", + "antd-style": "^3.7.1", "antd-token-previewer": "^2.0.8", "babel-jest": "^29.7.0", "classnames": "^2.5.1", "copy-to-clipboard": "^3.3.3", "cross-env": "^7.0.3", "dayjs": "^1.11.13", - "dumi": "^2.4.7", - "eslint-plugin-jest": "^28.8.0", + "dumi": "^2.4.13", + "eslint-plugin-jest": "^28.9.0", "execa": "^5.1.1", - "father": "^4.5.0", + "father": "^4.5.1", "fs-extra": "^11.2.0", - "gh-pages": "^6.1.1", + "gh-pages": "^6.2.0", "glob": "^11.0.0", "html2sketch": "^1.0.2", - "husky": "^9.1.4", + "husky": "^9.1.6", "identity-obj-proxy": "^3.0.0", "isomorphic-fetch": "^3.0.0", "jest-environment-jsdom": "^29.7.0", "jsonml-to-react-element": "^1.1.11", "jsonml.js": "^0.1.0", - "lerna": "^8.1.8", - "lint-staged": "^15.2.8", + "lerna": "^8.1.9", + "lint-staged": "^15.2.10", "lodash": "^4.17.21", "mockdate": "^3.0.5", "prettier": "^3.3.3", @@ -99,19 +99,19 @@ "rc-drawer": "^7.2.0", "rc-footer": "^0.6.8", "rc-resize-observer": "^1.4.0", - "rc-segmented": "^2.4.1", - "rc-tabs": "^15.2.0", + "rc-segmented": "^2.5.0", + "rc-tabs": "^15.4.0", "rc-util": "^5.43.0", "react": "^18.3.1", "react-color": "^2.19.3", "react-copy-to-clipboard": "^5.1.0", "react-dom": "^18.3.1", "react-fast-marquee": "^1.6.5", - "react-intl": "^6.6.8", - "react-router-dom": "^6.26.0", + "react-intl": "^6.8.7", + "react-router-dom": "^6.28.0", "runscript": "^1.6.0", "ts-node": "^10.9.2", - "typescript": "^5.6.2", + "typescript": "^5.6.3", "vanilla-jsoneditor": "^0.23.8", "vitest": "^2.1.1", "vitest-canvas-mock": "^0.3.3", diff --git a/packages/charts/package.json b/packages/charts/package.json index 694adef61..8be73c470 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -1,6 +1,6 @@ { "name": "@oceanbase/charts", - "version": "0.4.0", + "version": "0.4.1", "description": "The Chart library for OceanBase", "homepage": "https://github.com/oceanbase/oceanbase-design/packages/charts", "repository": { diff --git a/packages/codemod/package.json b/packages/codemod/package.json index 00567ad9d..c8f5b3ff0 100644 --- a/packages/codemod/package.json +++ b/packages/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@oceanbase/codemod", - "version": "0.4.0", + "version": "0.4.1", "description": "Codemod for OceanBase Design upgrade", "keywords": [ "oceanbase", @@ -33,7 +33,7 @@ "is-git-clean": "^1.1.0", "jscodeshift": "^0.16.1", "lodash": "^4.17.21", - "postcss": "^8.4.41", + "postcss": "^8.4.47", "postcss-less": "^6.0.0", "prettier": "^3.3.3", "read-pkg-up": "^10.1.0", diff --git a/packages/design/package.json b/packages/design/package.json index 7740d4021..8e82af8ea 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -1,6 +1,6 @@ { "name": "@oceanbase/design", - "version": "0.4.0", + "version": "0.4.1", "description": "The Design System of OceanBase", "keywords": [ "oceanbase", @@ -40,7 +40,7 @@ "@oceanbase/icons": "workspace:^", "@oceanbase/util": "workspace:^", "ahooks": "^2.10.14", - "antd": "^5.20.6", + "antd": "^5.21.6", "classnames": "^2.5.1", "lodash": "^4.17.21", "lottie-web": "^5.12.2", @@ -49,12 +49,13 @@ "react-sticky-mouse-tooltip": "^0.0.1" }, "devDependencies": { - "@babel/cli": "^7.24.8", - "@babel/preset-env": "^7.25.4", + "@babel/cli": "^7.25.9", + "@babel/preset-env": "^7.26.0", "antd-token-previewer": "^2.0.8", "rc-select": "^14.16.3", + "rc-slider": "^11.1.7", "rc-table": "^7.48.1", - "rc-tree-select": "^5.22.1" + "rc-tree-select": "^5.24.3" }, "peerDependencies": { "react": ">=16.9.0", diff --git a/packages/design/src/button/demo/dropdown.tsx b/packages/design/src/button/demo/dropdown.tsx index 81542bc5a..059b24dd5 100644 --- a/packages/design/src/button/demo/dropdown.tsx +++ b/packages/design/src/button/demo/dropdown.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Dropdown, Space } from '@oceanbase/design'; +import { Button, Dropdown, Space, message } from '@oceanbase/design'; +import type { MenuProps } from '@oceanbase/design'; import { DownOutlined } from '@oceanbase/icons'; const items = [ @@ -17,29 +18,34 @@ const items = [ }, ]; +const handleMenuClick: MenuProps['onClick'] = e => { + message.info('Click on menu item.'); + console.log('click', e); +}; + +const menuProps = { + items, + onClick: handleMenuClick, +}; + const App: React.FC = () => ( - - { - console.log('click', e); - }, - }} - > - Dropdown - - { - console.log('click', e); - }, - }} - icon={} - > - Dropdown - + + + + + + + ); diff --git a/packages/design/src/button/style/index.ts b/packages/design/src/button/style/index.ts index bec6017c1..ea8ac3e6f 100644 --- a/packages/design/src/button/style/index.ts +++ b/packages/design/src/button/style/index.ts @@ -5,22 +5,42 @@ export type ButtonToken = FullToken<'Button'>; export const genButtonStyle: GenerateStyle = (token: ButtonToken) => { const { componentCls } = token; + // primary button className + const primaryBtnCls = `${componentCls}${componentCls}-primary:not([disabled]):not(${componentCls}-disabled):not(${componentCls}-dangerous):not(${componentCls}-background-ghost)`; + const primaryAndCompactItemBtnCls = `${componentCls}-compact-item${primaryBtnCls}`; return { [`${componentCls}`]: { // remove box-shadow for button boxShadow: 'none !important', }, - [`${componentCls}${componentCls}-primary:not([disabled]):not(${componentCls}-disabled):not(${componentCls}-dangerous):not(${componentCls}-background-ghost)`]: - { - background: 'linear-gradient(-59deg, #002BFF 0%, #0080FF 100%)', - border: 'none', - ['&:hover']: { - background: 'linear-gradient(120deg, #1AA0FF 0%, #1A53FF 100%)', - }, - ['&:active']: { - background: 'linear-gradient(120deg, #0060E6 0%, #0013E6 100%)', - }, + // primary button + [`${primaryBtnCls}`]: { + background: 'linear-gradient(-59deg, #002BFF 0%, #0080FF 100%)', + border: 'none', + ['&:hover']: { + background: 'linear-gradient(120deg, #1AA0FF 0%, #1A53FF 100%)', }, + ['&:active']: { + background: 'linear-gradient(120deg, #0060E6 0%, #0013E6 100%)', + }, + }, + // primary button in compact item + [`${primaryBtnCls}${componentCls}-compact-last-item`]: { + background: 'linear-gradient(-59deg, #002BFF 0%, #002BFF 100%)', + ['&:hover']: { + background: 'linear-gradient(120deg, #1AA0FF 0%, #1A53FF 100%)', + }, + ['&:active']: { + background: 'linear-gradient(120deg, #0060E6 0%, #0013E6 100%)', + }, + }, + [`${primaryAndCompactItemBtnCls}+${primaryAndCompactItemBtnCls}:before`]: { + height: '100%', + top: 0, + }, + [`${primaryAndCompactItemBtnCls}:hover`]: { + zIndex: 0, + }, }; }; diff --git a/packages/design/src/card/style/index.ts b/packages/design/src/card/style/index.ts index a03b4fba6..d78d2a9e6 100644 --- a/packages/design/src/card/style/index.ts +++ b/packages/design/src/card/style/index.ts @@ -55,12 +55,17 @@ export const genCardStyle: GenerateStyle = (token: CardToken): CSSObj }, [`${componentCls}${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: { [`${componentCls}-body`]: { - padding: `0 ${paddingLG}px ${padding}px ${paddingLG}px`, + padding: `0 ${paddingLG}px ${paddingLG}px ${paddingLG}px`, }, }, [`${componentCls}-small${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: { [`${componentCls}-body`]: { - padding: `0 ${paddingSM}px 12px ${paddingSM}px`, + padding: `0 ${paddingSM}px ${paddingSM}px ${paddingSM}px`, + }, + }, + [`${componentCls}-small${componentCls}-contain-tabs >${componentCls}-head`]: { + [`${componentCls}-head-title, ${componentCls}-head-extra`]: { + paddingTop: token.paddingXS, }, }, [`${componentCls}${componentCls}-contain-tabs`]: { diff --git a/packages/design/src/checkbox/demo/basic.tsx b/packages/design/src/checkbox/demo/basic.tsx new file mode 100644 index 000000000..12c104bd4 --- /dev/null +++ b/packages/design/src/checkbox/demo/basic.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Checkbox } from '@oceanbase/design'; + +const App: React.FC = () => ( + { + console.log(`checked: ${e.target.checked}`); + }} + > + Checkbox + +); + +export default App; diff --git a/packages/design/src/checkbox/demo/group.tsx b/packages/design/src/checkbox/demo/group.tsx new file mode 100644 index 000000000..e6f4907de --- /dev/null +++ b/packages/design/src/checkbox/demo/group.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Checkbox } from '@oceanbase/design'; +import type { CheckboxGroupProps } from '@oceanbase/design/es/checkbox'; + +const onChange: CheckboxGroupProps['onChange'] = checkedValues => { + console.log('checked = ', checkedValues); +}; + +const options = [ + { label: 'Apple', value: 'Apple' }, + { label: 'Pear', value: 'Pear' }, + { label: 'Orange', value: 'Orange' }, +]; + +const optionsWithDisabled = [ + { label: 'Apple', value: 'Apple' }, + { label: 'Pear', value: 'Pear' }, + { label: 'Orange', value: 'Orange', disabled: false }, +]; + +const App: React.FC = () => ( + <> + +
+
+ + +); + +export default App; diff --git a/packages/design/src/checkbox/demo/over-length.tsx b/packages/design/src/checkbox/demo/over-length.tsx new file mode 100644 index 000000000..fa8dc2d52 --- /dev/null +++ b/packages/design/src/checkbox/demo/over-length.tsx @@ -0,0 +1,26 @@ +import React, { useState } from 'react'; +import { Checkbox, Space } from '@oceanbase/design'; +import type { CheckboxGroupProps } from '@oceanbase/design/es/checkbox'; + +const App: React.FC = () => { + const [value, setValue] = useState(['long']); + + const onChange: CheckboxGroupProps['onChange'] = value => { + console.log('checkbox checked', value); + setValue(value); + }; + + return ( + + + + This is long long long long long long long long long long long long long long long long + long long long long long long long long text + + This is short text + + + ); +}; + +export default App; diff --git a/packages/design/src/checkbox/index.md b/packages/design/src/checkbox/index.md new file mode 100644 index 000000000..98dbbd232 --- /dev/null +++ b/packages/design/src/checkbox/index.md @@ -0,0 +1,22 @@ +--- +title: Checkbox 多选框 +nav: + title: 基础组件 + path: /components +demo: + cols: 2 +--- + +- 🔥 完全继承 antd [Checkbox](https://ant.design/components/checkbox-cn) 的能力和 API，可无缝切换。 +- 💄 定制主题和样式，符合 OceanBase Design 设计规范。 + +## 代码演示 + + + + + + +## API + +- 详见 antd Checkbox 文档: https://ant.design/components/checkbox-cn diff --git a/packages/design/src/checkbox/index.ts b/packages/design/src/checkbox/index.ts deleted file mode 100644 index 2f1e6b409..000000000 --- a/packages/design/src/checkbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from 'antd/es/checkbox'; diff --git a/packages/design/src/checkbox/index.tsx b/packages/design/src/checkbox/index.tsx new file mode 100644 index 000000000..1d2f58066 --- /dev/null +++ b/packages/design/src/checkbox/index.tsx @@ -0,0 +1,38 @@ +import { Checkbox as AntCheckbox } from 'antd'; +import type { CheckboxProps as AntCheckboxProps, CheckboxRef } from 'antd/es/checkbox'; +import classNames from 'classnames'; +import React, { useContext } from 'react'; +import ConfigProvider from '../config-provider'; +import useStyle from './style'; + +export * from 'antd/es/checkbox'; + +const InternalCheckbox = React.forwardRef( + ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => { + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const prefixCls = getPrefixCls('checkbox', customizePrefixCls); + const { wrapSSR } = useStyle(prefixCls); + const checkboxCls = classNames(className); + + return wrapSSR( + + ); + } +); + +const Checkbox = InternalCheckbox as typeof Checkbox; + +Checkbox.Group = AntCheckbox.Group; +// @ts-ignore +Checkbox.__ANT_CHECKBOX = AntCheckbox.__ANT_CHECKBOX; + +if (process.env.NODE_ENV !== 'production') { + Checkbox.displayName = AntCheckbox.displayName; +} + +export default Checkbox; diff --git a/packages/design/src/checkbox/style/index.ts b/packages/design/src/checkbox/style/index.ts new file mode 100644 index 000000000..124bce715 --- /dev/null +++ b/packages/design/src/checkbox/style/index.ts @@ -0,0 +1,26 @@ +import type { CSSObject } from '@ant-design/cssinjs'; +import type { FullToken, GenerateStyle } from 'antd/es/theme/internal'; +import { genComponentStyleHook } from '../../_util/genComponentStyleHook'; + +export type CheckboxToken = FullToken<'Checkbox'>; + +export const genCheckboxStyle: GenerateStyle = (token: CheckboxToken): CSSObject => { + const { componentCls, fontSize, fontSizeLG, lineHeight } = token; + return { + [`${componentCls}-wrapper`]: { + [`${componentCls}`]: { + alignSelf: 'baseline', + [`${componentCls}-inner`]: { + transform: `translate(0px, ${(fontSize * lineHeight - fontSizeLG) / 2}px)`, + }, + }, + }, + }; +}; + +export default (prefixCls: string) => { + const useStyle = genComponentStyleHook('Checkbox', token => { + return [genCheckboxStyle(token as CheckboxToken)]; + }); + return useStyle(prefixCls); +}; diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/appProps.test.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/appProps.test.tsx.snap new file mode 100644 index 000000000..8b8737fa3 --- /dev/null +++ b/packages/design/src/config-provider/__tests__/__snapshots__/appProps.test.tsx.snap @@ -0,0 +1,16 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`ConfigProvider appProps > ConfigProvider styleProviderProps.component 1`] = ` + +
+ Child 1 +
+
+
+ Child 2 +
+
+ +`; diff --git a/packages/design/src/config-provider/__tests__/__snapshots__/form.test.tsx.snap b/packages/design/src/config-provider/__tests__/__snapshots__/form.test.tsx.snap index 2545bc831..0bca7b7a6 100644 --- a/packages/design/src/config-provider/__tests__/__snapshots__/form.test.tsx.snap +++ b/packages/design/src/config-provider/__tests__/__snapshots__/form.test.tsx.snap @@ -163,7 +163,7 @@ exports[`ConfigProvider form > ConfigProvider form.requiredMark should be \`opti style="display: flex; gap: 8px; align-items: center;" > + + + + + +); + +export default App; diff --git a/packages/design/src/dropdown/index.md b/packages/design/src/dropdown/index.md new file mode 100644 index 000000000..82c9ea1b0 --- /dev/null +++ b/packages/design/src/dropdown/index.md @@ -0,0 +1,21 @@ +--- +title: Dropdown 下拉菜单 +nav: + title: 基础组件 + path: /components +demo: + cols: 2 +--- + +- 🔥 完全继承 antd [Dropdown](https://ant.design/components/dropdown-cn) 的能力和 API，可无缝切换。 +- 💄 定制主题和样式，符合 OceanBase Design 设计规范。 + +## 代码演示 + + + + + +## API + +- 详见 antd Dropdown 文档: https://ant.design/components/dropdown-cn diff --git a/packages/design/src/empty/default.tsx b/packages/design/src/empty/default.tsx index a54a1b5fa..008bad770 100644 --- a/packages/design/src/empty/default.tsx +++ b/packages/design/src/empty/default.tsx @@ -2,50 +2,21 @@ import React from 'react'; const DefaultEmptyImg: React.FC = props => ( - - - - - - - - - - - - + + + + + diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts index 81a7f5630..e4f3707e6 100644 --- a/packages/design/src/index.ts +++ b/packages/design/src/index.ts @@ -63,12 +63,21 @@ export type { InputProps } from './input'; export { default as InputNumber } from './input-number'; export type { InputNumberProps } from './input-number'; +export { default as Radio } from './radio'; +export type { RadioProps } from './radio'; + +export { default as Checkbox } from './checkbox'; +export type { CheckboxProps } from './checkbox'; + export { default as Select } from './select'; export type { SelectProps } from './select'; export { default as TreeSelect } from './tree-select'; export type { TreeSelectProps } from './tree-select'; +export { default as Slider } from './slider'; +export type { SliderSingleProps, SliderRangeProps } from './slider'; + export { default as Tooltip } from './tooltip'; export type { TooltipProps } from './tooltip'; diff --git a/packages/design/src/modal/__tests__/__snapshots__/modal.test.tsx.snap b/packages/design/src/modal/__tests__/__snapshots__/modal.test.tsx.snap index 6b20d2d87..6deea1909 100644 --- a/packages/design/src/modal/__tests__/__snapshots__/modal.test.tsx.snap +++ b/packages/design/src/modal/__tests__/__snapshots__/modal.test.tsx.snap @@ -20,14 +20,9 @@ exports[`Modal > should hide footer dom when footer is false 1`] = ` role="dialog" style="width: 520px;" > -