GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: v4 Space.Compact when wrapping a single child component (#38913)

pull/38981/head
Yuki Zhang 2 years ago
committed by GitHub
parent
3af410ab3f
commit
3b48ffa247
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1987 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1595
      components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
  2. 326
      components/space/__tests__/__snapshots__/demo.test.ts.snap
  3. 56
      components/space/demo/compact-debug.md
  4. 4
      components/style/mixins/compact-item-vertical.less
  5. 16
      components/style/mixins/compact-item.less

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

File diff suppressed because it is too large

326
components/space/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -2896,6 +2896,7 @@ exports[`renders ./components/space/demo/compact-debug.md correctly 1`] = `
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-space-compact"
@ -2994,6 +2995,331 @@ exports[`renders ./components/space/demo/compact-debug.md correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-space-compact"
>
<div
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
readonly=""
role="combobox"
style="opacity:0"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="Sign Up"
>
Sign Up
</span>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
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"
style="width:70%"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
autocomplete="off"
placeholder="Start date"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
<span
aria-label="swap-right"
class="anticon anticon-swap-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="swap-right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-picker-input"
>
<input
autocomplete="off"
placeholder="End date"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="left:0;width:0;position:absolute"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-space-compact"
>
<div
class="ant-input-number ant-input-number-compact-item ant-input-number-compact-first-item ant-input-number-compact-last-item"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuenow="12"
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value="12"
/>
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-space-compact"
>
<div
class="ant-select ant-cascader ant-select-compact-item ant-select-compact-first-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
style="width:70%"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
readonly=""
role="combobox"
style="opacity:0"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Select Address
</span>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact ant-space-compact-vertical"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item ant-btn-compact-vertical-last-item"
type="button"
>
<span>
vertical compact button
</span>
</button>
</div>
</div>
</div>
`;

56
components/space/demo/compact-debug.md
View File

@ -28,6 +28,7 @@ import {
Dropdown,
Drawer,
InputNumber,
DatePicker,
} from 'antd';
import React, { useState } from 'react';
@ -156,6 +157,61 @@ const App: React.FC = () => {
<Space.Compact>
<InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
</Space.Compact>
<Space.Compact>
<Select defaultValue="Sign Up">
<Option value="Sign Up">Sign Up</Option>
<Option value="Sign In">Sign In</Option>
</Select>
</Space.Compact>
<Space.Compact>
<DatePicker.RangePicker style={{ width: '70%' }} />
</Space.Compact>
<Space.Compact>
<InputNumber defaultValue={12} />
</Space.Compact>
<Space.Compact>
<Cascader
style={{ width: '70%' }}
options={[
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
]}
placeholder="Select Address"
/>
</Space.Compact>
<Space.Compact direction="vertical">
<Button>vertical compact button</Button>
</Space.Compact>
</Space>
);
};

4
components/style/mixins/compact-item-vertical.less
View File

@ -3,12 +3,12 @@
border-radius: 0;
}
&-item&-first-item {
&-item&-first-item:not(&-last-item) {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&-item&-last-item {
&-item&-last-item:not(&-first-item) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}

16
components/style/mixins/compact-item.less
View File

@ -5,24 +5,24 @@
border-radius: 0;
}
&-item.@{prefix-cls}&-first-item:not(&-item-rtl) {
&-item.@{prefix-cls}&-first-item:not(&-last-item):not(&-item-rtl) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&-item.@{prefix-cls}&-last-item:not(&-item-rtl) {
&-item.@{prefix-cls}&-last-item:not(&-first-item):not(&-item-rtl) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
// ----------rtl for first item----------
&-item.@{prefix-cls}&-item-rtl&-first-item {
&-item.@{prefix-cls}&-item-rtl&-first-item:not(&-last-item) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
// ----------rtl for last item----------
&-item.@{prefix-cls}&-item-rtl&-last-item {
&-item.@{prefix-cls}&-item-rtl&-last-item:not(&-first-item) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@ -34,24 +34,24 @@
border-radius: 0;
}
&-item&-first-item.@{prefix-cls}:not(&-item-rtl) > .@{bordered-item-cls} {
&-item&-first-item.@{prefix-cls}:not(&-last-item):not(&-item-rtl) > .@{bordered-item-cls} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&-item&-last-item.@{prefix-cls}:not(&-item-rtl) > .@{bordered-item-cls} {
&-item&-last-item.@{prefix-cls}:not(&-first-item):not(&-item-rtl) > .@{bordered-item-cls} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
// ----------rtl for first item----------
&-item.@{prefix-cls}&-first-item&-item-rtl > .@{bordered-item-cls} {
&-item.@{prefix-cls}&-first-item&-item-rtl:not(&-last-item) > .@{bordered-item-cls} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
// ----------rtl for last item----------
&-item.@{prefix-cls}&-last-item&-item-rtl > .@{bordered-item-cls} {
&-item.@{prefix-cls}&-last-item&-item-rtl:not(&-first-item) > .@{bordered-item-cls} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

Write Preview
Loading…
Cancel
Save