mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

fix(Space): modify the priority of the component's size (#42752)

Browse Source 
* fix(Space): modify the priority of the component's size

* chore: snapshot

* chore: snapshot
This commit is contained in:
daisy 2023-06-19 14:26:48 +08:00 committed by GitHub
parent c3372d6403
commit 8a4203bec8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 78 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/button/button.tsx
View File

@ -210,7 +210,7 @@ const InternalButton: React.ForwardRefRenderFunction<
const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
const sizeFullname = useSize((ctxSize) => compactSize ?? groupSize ?? customizeSize ?? ctxSize);
const sizeFullname = useSize((ctxSize) => customizeSize ?? compactSize ?? groupSize ?? ctxSize);
const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';

2
components/cascader/index.tsx
View File

@ -229,7 +229,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
}, [showSearch]);
// ===================== Size ======================
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

2
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -78,7 +78,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
}
// ===================== Size =====================
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

2
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -103,7 +103,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
}
// ===================== Size =====================
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

2
components/input-number/index.tsx
View File

@ -87,7 +87,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
} = React.useContext(FormItemInputContext);
const mergedStatus = getMergedStatus(contextStatus, customStatus);
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
const hasPrefix = prefix != null || hasFeedback;
const hasAddon = !!(addonBefore || addonAfter);

2
components/input/Input.tsx
View File

@ -97,7 +97,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
// ===================== Size =====================
const mergedSize = useSize((ctx) => compactSize ?? customSize ?? ctx);
const mergedSize = useSize((ctx) => customSize ?? compactSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

2
components/input/Search.tsx
View File

@ -49,7 +49,7 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const { compactSize } = useCompactItemContext(prefixCls, direction);
const size = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const size = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
const inputRef = React.useRef<InputRef>(null);

2
components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -5194,7 +5194,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
>
<span
class="ant-input-wrapper ant-input-group"

2
components/input/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -1412,7 +1412,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
>
<span
class="ant-input-wrapper ant-input-group"

2
components/select/index.tsx
View File

@ -175,7 +175,7 @@ const InternalSelect = <
hashId,
);
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);

2
components/space/Compact.tsx
View File

@ -78,7 +78,7 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
...restProps
} = props;
const mergedSize = useSize((ctx) => size ?? ctx ?? 'middle');
const mergedSize = useSize((ctx) => size ?? ctx);
const prefixCls = getPrefixCls('space-compact', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);

32
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -871,7 +871,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item"
style="width: 30%;"
>
<span
@ -917,7 +917,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
style="width: 50%;"
>
<span
@ -996,7 +996,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-last-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-last-item"
style="width: 20%;"
>
<span
@ -1279,7 +1279,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
value="input content"
/>
<div
class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-last-item"
class="ant-picker ant-picker-compact-item ant-picker-compact-last-item"
style="width: 50%;"
>
<div
@ -1880,7 +1880,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
style="width: 70%;"
>
<div
@ -3088,7 +3088,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
value="input content"
/>
<div
class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-last-item"
class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-last-item"
style="width: 70%;"
>
<div
@ -4981,7 +4981,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
style="width: 70%;"
>
<div
@ -6375,7 +6375,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
disabled=""
type="button"
>
@ -6544,7 +6544,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
>
<div
class="ant-picker-input ant-picker-input-active"
@ -7985,7 +7985,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
disabled=""
type="button"
>
@ -10034,7 +10034,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item"
>
<span
class="ant-input-wrapper ant-input-group"
@ -10079,7 +10079,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
>
<span
class="ant-input-wrapper ant-input-group"
@ -11772,7 +11772,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
class="ant-space-compact"
>
<div
class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
style="width: 70%;"
>
<div
@ -13497,7 +13497,7 @@ Array [
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
style="width: 110px;"
>
<span
@ -13599,7 +13599,7 @@ Array [
class="ant-space-compact"
>
<div
class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
>
<div
class="ant-picker-input"
@ -14992,7 +14992,7 @@ Array [
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
disabled=""
type="button"
>

26
components/space/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -594,7 +594,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item"
style="width:30%"
>
<span
@ -640,7 +640,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
style="width:50%"
>
<span
@ -719,7 +719,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-last-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-last-item"
style="width:20%"
>
<span
@ -921,7 +921,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
value="input content"
/>
<div
class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-last-item"
class="ant-picker ant-picker-compact-item ant-picker-compact-last-item"
style="width:50%"
>
<div
@ -966,7 +966,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
style="width:70%"
>
<div
@ -1073,7 +1073,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
value="input content"
/>
<div
class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-last-item"
class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-last-item"
style="width:70%"
>
<div
@ -1469,7 +1469,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
style="width:70%"
>
<div
@ -1576,7 +1576,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block"
>
<div
class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item"
>
<div
class="ant-picker-input ant-picker-input-active"
@ -2636,7 +2636,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item ant-input-compact-first-item"
>
<span
class="ant-input-wrapper ant-input-group"
@ -2681,7 +2681,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
>
<span
class="ant-input-wrapper ant-input-group"
@ -3280,7 +3280,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
class="ant-space-compact"
>
<div
class="ant-picker ant-picker-range ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
class="ant-picker ant-picker-range ant-picker-compact-item ant-picker-compact-first-item ant-picker-compact-last-item"
style="width:70%"
>
<div
@ -3734,7 +3734,7 @@ Array [
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item"
class="ant-input-group-wrapper ant-input-search ant-input-compact-item"
style="width:110px"
>
<span
@ -3836,7 +3836,7 @@ Array [
class="ant-space-compact"
>
<div
class="ant-picker ant-picker-middle ant-picker-compact-item ant-picker-compact-first-item"
class="ant-picker ant-picker-compact-item ant-picker-compact-first-item"
>
<div
class="ant-picker-input"

37
components/space/__tests__/space-compact.test.tsx
View File

@ -12,6 +12,7 @@ import DatePicker from '../../date-picker';
import Drawer from '../../drawer';
import Dropdown from '../../dropdown';
import Input from '../../input';
import InputNumber from '../../input-number';
import Modal from '../../modal';
import Select from '../../select';
import TimePicker from '../../time-picker';
@ -156,6 +157,42 @@ describe('Space.Compact', () => {
expect(container.querySelector('.ant-input')?.classList.contains('ant-input-sm')).toBe(true);
expect(container.querySelector('.ant-btn')?.classList.contains('ant-btn-sm')).toBe(true);
});
it('component size has a higher priority than Compact', () => {
const { container } = render(
<Space.Compact size="middle">
<Input size="small" />
<Select size="small" />
<Button size="small">Submit</Button>
<InputNumber size="small" />
<DatePicker size="small" />
<DatePicker.RangePicker size="small" />
<Cascader size="small" />
<TreeSelect size="small" />
<Input.Search size="small" />
</Space.Compact>,
);
expect(container.querySelector('.ant-input')?.classList.contains('ant-input-sm')).toBe(true);
expect(container.querySelector('.ant-select')?.classList.contains('ant-select-sm')).toBe(true);
expect(container.querySelector('.ant-btn')?.classList.contains('ant-btn-sm')).toBe(true);
expect(
container.querySelector('.ant-input-number')?.classList.contains('ant-input-number-sm'),
).toBe(true);
expect(container.querySelector('.ant-picker')?.classList.contains('ant-picker-small')).toBe(
true,
);
expect(
container.querySelector('.ant-picker-range')?.classList.contains('ant-picker-small'),
).toBe(true);
expect(container.querySelector('.ant-cascader')?.classList.contains('ant-select-sm')).toBe(
true,
);
expect(container.querySelector('.ant-tree-select')?.classList.contains('ant-select-sm')).toBe(
true,
);
expect(
container.querySelector('.ant-input-search')?.classList.contains('ant-input-search-small'),
).toBe(true);
});
it('direction=vertical', () => {
const { container } = render(

2
components/tree-select/index.tsx
View File

@ -206,7 +206,7 @@ const InternalTreeSelect = <
const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements, popupOverflow);
const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
const mergedSize = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);