diff --git a/package.json b/package.json index c6ddf57df..330cddefa 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "lodash": "^4.17.21", "lz-string": "^1.5.0", "mockdate": "^3.0.5", - "prettier": "^3.1.1", + "prettier": "^3.2.4", "prismjs": "^1.29.0", "rc-checkbox": "^3.1.0", "rc-drawer": "^7.0.0", diff --git a/packages/codemod/package.json b/packages/codemod/package.json index efe54f14e..2c4bd2997 100644 --- a/packages/codemod/package.json +++ b/packages/codemod/package.json @@ -34,7 +34,7 @@ "lodash": "^4.17.21", "postcss": "^8.4.33", "postcss-less": "^6.0.0", - "prettier": "^3.1.1", + "prettier": "^3.2.4", "read-pkg-up": "^10.1.0", "semver": "^7.5.4", "update-check": "^1.5.4", diff --git a/packages/ui/src/FooterToolbar/style/index.ts b/packages/ui/src/FooterToolbar/style/index.ts index 3b8232722..f52ac25b5 100644 --- a/packages/ui/src/FooterToolbar/style/index.ts +++ b/packages/ui/src/FooterToolbar/style/index.ts @@ -4,16 +4,105 @@ import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme'; import { genComponentStyleHook } from '../../_util/genComponentStyleHook'; export const genOperationStyle = (token: FullToken): CSSObject => { - const { antCls, controlHeightLG } = token; + const { + antCls, + iconCls, + fontSize, + lineWidth, + borderRadiusLG, + controlHeight, + controlHeightSM, + controlHeightLG, + } = token; + const height = controlHeightLG; + const lineHeight = `${controlHeightLG}px`; return { - // limit min width for icon button + // Button [`${antCls}-btn`]: { + // limit min width for icon button minWidth: controlHeightLG, + height, + fontSize, + borderRadius: borderRadiusLG, }, - // set large DatePicker, TimePicker and RangePicker height when font-size is 14px - [`${antCls}-picker-large`]: { - height: controlHeightLG, + // Radio.Button + [`${antCls}-radio-group`]: { + [`${antCls}-radio-button-wrapper`]: { + height, + lineHeight: `${height - lineWidth * 2}px`, + fontSize, + [`&:first-child`]: { + borderStartStartRadius: borderRadiusLG, + borderEndStartRadius: borderRadiusLG, + }, + [`&:last-child`]: { + borderStartEndRadius: borderRadiusLG, + borderEndEndRadius: borderRadiusLG, + }, + }, + }, + // Select + [`${antCls}-select`]: { + height, + fontSize, + [`${antCls}-select-selector`]: { + borderRadius: borderRadiusLG, + }, + [`${antCls}-select-selection-item`]: { + fontSize, + }, + }, + // Input + [`${antCls}-input-wrapper`]: { + fontSize, + [`${iconCls}`]: { + fontSize, + }, + [`${antCls}-input-affix-wrapper`]: { + borderStartEndRadius: 0, + borderEndEndRadius: 0, + }, + }, + [`${antCls}-input-affix-wrapper`]: { + height, + borderRadius: borderRadiusLG, + [`&:not(${antCls}-input-affix-wrapper-lg)`]: { + lineHeight: `${controlHeight - lineWidth * 2}px`, + }, + // avoid to conflict with `${antCls}-input-affix-wrapper` height + [`${antCls}-input`]: { + height: `${controlHeight - lineWidth * 2}px`, + }, + [`${antCls}-input-lg`]: { + height: controlHeightSM, + }, + [`${antCls}-input-sm`]: { + height: `${controlHeightLG - lineWidth * 2}px`, + }, + }, + [`${antCls}-input`]: { + fontSize, + borderRadius: borderRadiusLG, + }, + [`${antCls}-input-search-button`]: { + height, + lineHeight, + borderStartEndRadius: borderRadiusLG, + borderEndEndRadius: borderRadiusLG, + }, + [`${antCls}-input-group-addon`]: { + fontSize, + borderStartEndRadius: borderRadiusLG, + borderEndEndRadius: borderRadiusLG, + }, + // set large DatePicker, TimePicker and RangePicker style + [`${antCls}-picker`]: { + height, + borderRadius: borderRadiusLG, + [`${antCls}-picker-input>input`]: { + fontSize, + }, }, }; }; diff --git a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap index c34406737..113723baa 100644 --- a/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/PageContainer/__tests__/__snapshots__/index.test.tsx.snap @@ -96,7 +96,7 @@ exports[`PageContainer basic 1`] = ` class="ant-space-item" > + +
+ +
diff --git a/packages/ui/src/PageContainer/demo/basic.tsx b/packages/ui/src/PageContainer/demo/basic.tsx index 79ef9ff20..f60f581a7 100644 --- a/packages/ui/src/PageContainer/demo/basic.tsx +++ b/packages/ui/src/PageContainer/demo/basic.tsx @@ -2,9 +2,9 @@ * iframe: 600 */ import React, { useState } from 'react'; -import { EllipsisOutlined } from '@oceanbase/icons'; -import { Button, Descriptions, Dropdown, Input, Radio, message } from '@oceanbase/design'; +import { Button, Descriptions, Dropdown, message } from '@oceanbase/design'; import { PageContainer } from '@oceanbase/ui'; +import { EllipsisOutlined } from '@oceanbase/icons'; export default () => { const [loading, setLoading] = useState(false); @@ -20,6 +20,7 @@ export default () => { setLoading(false); message.success('刷新成功'); }); + return promise; }; return ( { const [loading, setLoading] = useState(false); const [size, setSize] = useState('large'); + const [inputType, setInputType] = useState('search'); const mockRequest = () => { const promise = new Promise(resolve => { @@ -31,6 +34,8 @@ export default () => { message.success('刷新成功'); }); }; + const InputComponent = inputType === 'search' ? Input.Search : Input; + return ( { , , , - ,