mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: Form item has default height align with form size (#21476)

Browse Source 
* fix: Form item has default height align with form size

* fix lint

* update snapshot
This commit is contained in:
二货机器人 2020-02-19 22:04:25 +08:00 committed by GitHub
parent c968184348
commit 9f26e7a85e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 6124 additions and 5521 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

978
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

30
components/comment/__tests__/__snapshots__/demo.test.js.snap
View File

@ -160,10 +160,14 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<textarea
class="ant-input"
rows="4"
/>
<div
class="ant-form-item-control-input-content"
>
<textarea
class="ant-input"
rows="4"
/>
</div>
</div>
</div>
</div>
@ -176,14 +180,18 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
class="ant-btn ant-btn-primary"
type="submit"
<div
class="ant-form-item-control-input-content"
>
<span>
Add Comment
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="submit"
>
<span>
Add Comment
</span>
</button>
</div>
</div>
</div>
</div>

42
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -6979,11 +6979,15 @@ exports[`ConfigProvider components Form configProvider 1`] = `
<div
class="config-form-item-control-input"
>
<input
class="config-input"
type="text"
value=""
/>
<div
class="config-form-item-control-input-content"
>
<input
class="config-input"
type="text"
value=""
/>
</div>
</div>
<div
class="config-form-item-explain"
@ -7010,11 +7014,15 @@ exports[`ConfigProvider components Form normal 1`] = `
<div
class="ant-form-item-control-input"
>
<input
class="ant-input"
type="text"
value=""
/>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
type="text"
value=""
/>
</div>
</div>
<div
class="ant-form-item-explain"
@ -7041,11 +7049,15 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
<div
class="prefix-Form-item-control-input"
>
<input
class="prefix-Form"
type="text"
value=""
/>
<div
class="prefix-Form-item-control-input-content"
>
<input
class="prefix-Form"
type="text"
value=""
/>
</div>
</div>
<div
class="prefix-Form-item-explain"

6
components/form/Form.tsx
View File

@ -8,7 +8,7 @@ import { ConfigContext, ConfigConsumerProps } from '../config-provider';
import { FormContext } from './context';
import { FormLabelAlign } from './interface';
import { useForm, FormInstance } from './util';
import { SizeType, SizeContextProvider } from '../config-provider/SizeContext';
import SizeContext, { SizeType, SizeContextProvider } from '../config-provider/SizeContext';
export type FormLayout = 'horizontal' | 'inline' | 'vertical';
@ -26,6 +26,7 @@ export interface FormProps extends Omit<RcFormProps, 'form'> {
}
const InternalForm: React.FC<FormProps> = (props, ref) => {
const contextSize = React.useContext(SizeContext);
const { getPrefixCls, direction }: ConfigConsumerProps = React.useContext(ConfigContext);
const {
@ -39,7 +40,7 @@ const InternalForm: React.FC<FormProps> = (props, ref) => {
hideRequiredMark,
className = '',
layout = 'horizontal',
size,
size = contextSize,
} = props;
const prefixCls = getPrefixCls('form', customizePrefixCls);
@ -49,6 +50,7 @@ const InternalForm: React.FC<FormProps> = (props, ref) => {
[`${prefixCls}-${layout}`]: true,
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${size}`]: size,
},
className,
);

2
components/form/FormItemInput.tsx
View File

@ -92,7 +92,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({
<FormContext.Provider value={subFormContext}>
<Col {...mergedWrapperCol} className={className}>
<div className={`${baseClassName}-control-input`}>
{children}
<div className={`${baseClassName}-control-input-content`}>{children}</div>
{icon}
</div>
<CSSMotion

8564
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

12
components/form/__tests__/__snapshots__/index.test.js.snap
View File

@ -16,7 +16,11 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
<div
class="ant-form-item-control-input"
>
text
<div
class="ant-form-item-control-input-content"
>
text
</div>
</div>
</div>
</div>
@ -38,7 +42,11 @@ exports[`Form rtl render component should be rendered correctly in RTL direction
>
<div
class="ant-form-item-control-input"
/>
>
<div
class="ant-form-item-control-input-content"
/>
</div>
</div>
</div>
`;

317
components/form/style/index.less
View File

@ -25,6 +25,26 @@
&-rtl {
direction: rtl;
}
// ================================================================
// = Size =
// ================================================================
.formSize(@input-height) {
.@{form-item-prefix-cls}-label > label {
height: @input-height;
}
.@{form-item-prefix-cls}-control-input {
min-height: @input-height;
}
}
&-small {
.formSize(@input-height-sm);
}
&-large {
.formSize(@input-height-lg);
}
}
.explainAndExtraDistance(@num) when (@num>=0) {
@ -67,7 +87,7 @@
display: inline-flex;
align-items: center;
height: 100%;
max-height: @input-height-base;
height: @input-height-base;
color: @label-color;
font-size: @form-item-label-font-size;
@ -123,7 +143,13 @@
&-control-input {
position: relative;
.clearfix;
display: flex;
align-items: center;
min-height: @input-height-base;
&-content {
flex: auto;
}
}
&-explain,
@ -136,293 +162,6 @@
line-height: @line-height-base;
transition: color 0.3s @ease-out; // sync input color transition
}
// ================================================================
// = Status =
// ================================================================
/* Some non-status related component style is in `components.less` */
&-has-feedback {
// ========================= Input =========================
.@{ant-prefix}-input {
padding-right: 24px;
}
// https://github.com/ant-design/ant-design/issues/19884
.@{ant-prefix}-input-affix-wrapper {
.@{ant-prefix}-input-suffix {
padding-right: 18px;
}
}
// Fix issue: https://github.com/ant-design/ant-design/issues/7854
.@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
.@{ant-prefix}-input-suffix {
right: 28px;
.@{form-prefix-cls}-rtl & {
right: auto;
left: 28px;
}
}
}
.@{ant-prefix}-input-password-icon {
.@{form-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 18px;
}
}
// ======================== Switch =========================
.@{ant-prefix}-switch {
margin: 2px 0 4px;
}
// ======================== Select =========================
// Fix overlapping between feedback icon and <Select>'s arrow.
// https://github.com/ant-design/ant-design/issues/4431
> .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
> .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
:not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection__clear {
right: 28px;
.@{form-prefix-cls}-rtl & {
right: auto;
left: 28px;
}
}
> .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection-selected-value {
padding-right: 42px;
.@{form-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 42px;
}
}
// ======================= Cascader ========================
.@{ant-prefix}-cascader-picker {
&-arrow {
margin-right: 17px;
.@{form-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 17px;
}
}
&-clear {
right: 28px;
.@{form-prefix-cls}-rtl & {
right: auto;
left: 28px;
}
}
}
// ======================== Picker =========================
// Fix issue: https://github.com/ant-design/ant-design/issues/4783
.@{ant-prefix}-picker {
padding-right: @input-padding-horizontal-base + @font-size-base * 1.3;
&-large {
padding-right: @input-padding-horizontal-lg + @font-size-base * 1.3;
}
&-small {
padding-right: @input-padding-horizontal-sm + @font-size-base * 1.3;
}
}
// ===================== Status Group ======================
&.@{form-item-prefix-cls} {
&-has-success,
&-has-warning,
&-has-error,
&-is-validating {
// ====================== Icon ======================
.@{form-item-prefix-cls}-children-icon {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
width: @input-height-base;
height: 20px;
margin-top: -10px;
font-size: @font-size-base;
line-height: 20px;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back;
pointer-events: none;
.@{form-prefix-cls}-rtl & {
right: auto;
left: 0;
}
& svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
}
}
}
// ======================== Success ========================
&-has-success {
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
// ======================== Warning ========================
&-has-warning {
.form-control-validation(@warning-color; @warning-color; @form-warning-input-bg);
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @warning-color;
animation-name: diffZoomIn3 !important;
}
//select
.@{ant-prefix}-select {
.@{ant-prefix}-select-selector {
border-color: @warning-color !important;
}
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
.active(@warning-color);
}
}
//input-number, timepicker
.@{ant-prefix}-input-number,
.@{ant-prefix}-picker {
border-color: @warning-color;
&-focused,
&:focus {
.active(@warning-color);
}
&:not([disabled]):hover {
border-color: @warning-color;
}
}
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
.active(@warning-color);
}
}
// ========================= Error =========================
&-has-error {
.form-control-validation(@error-color; @error-color; @form-error-input-bg);
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @error-color;
animation-name: diffZoomIn2 !important;
}
//select
.@{ant-prefix}-select {
.@{ant-prefix}-select-selector {
border-color: @error-color !important;
}
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
.active(@error-color);
}
}
// fixes https://github.com/ant-design/ant-design/issues/20482
.@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
&.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
.@{ant-prefix}-select-selector {
border: 0;
}
}
.@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
.@{ant-prefix}-input:focus {
border-color: @error-color;
}
}
//input-number, timepicker
.@{ant-prefix}-input-number,
.@{ant-prefix}-picker {
border-color: @error-color;
&-focused,
&:focus {
.active(@error-color);
}
&:not([disabled]):hover {
border-color: @error-color;
}
}
.@{ant-prefix}-mention-wrapper {
.@{ant-prefix}-mention-editor {
&,
&:not([disabled]):hover {
border-color: @error-color;
}
}
&.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
.@{ant-prefix}-mention-editor:not([disabled]):focus {
.active(@error-color);
}
}
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
.active(@error-color);
}
// transfer
.@{ant-prefix}-transfer {
&-list {
border-color: @error-color;
&-search:not([disabled]) {
border-color: @input-border-color;
&:hover {
.hover();
}
&:focus {
.active();
}
}
}
}
}
// Patch to keep error explain color
&-has-error-leave {
.@{form-item-prefix-cls}-explain {
color: @error-color;
}
}
// ====================== Validating =======================
&-is-validating {
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
display: inline-block;
color: @primary-color;
}
}
}
.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {

290
components/form/style/status.less Normal file
View File

@ -0,0 +1,290 @@
@import './index.less';
.@{form-item-prefix-cls} {
// ================================================================
// = Status =
// ================================================================
/* Some non-status related component style is in `components.less` */
&-has-feedback {
// ========================= Input =========================
.@{ant-prefix}-input {
padding-right: 24px;
}
// https://github.com/ant-design/ant-design/issues/19884
.@{ant-prefix}-input-affix-wrapper {
.@{ant-prefix}-input-suffix {
padding-right: 18px;
}
}
// Fix issue: https://github.com/ant-design/ant-design/issues/7854
.@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
.@{ant-prefix}-input-suffix {
right: 28px;
.@{form-prefix-cls}-rtl & {
right: auto;
left: 28px;
}
}
}
.@{ant-prefix}-input-password-icon {
.@{form-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 18px;
}
}
// ======================== Switch =========================
.@{ant-prefix}-switch {
margin: 2px 0 4px;
}
// ======================== Select =========================
// Fix overlapping between feedback icon and <Select>'s arrow.
// https://github.com/ant-design/ant-design/issues/4431
> .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
> .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
:not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection__clear {
right: 28px;
.@{form-prefix-cls}-rtl & {
right: auto;
left: 28px;
}
}
> .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection-selected-value {
padding-right: 42px;
.@{form-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 42px;
}
}
// ======================= Cascader ========================
.@{ant-prefix}-cascader-picker {
&-arrow {
margin-right: 17px;
.@{form-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 17px;
}
}
&-clear {
right: 28px;
.@{form-prefix-cls}-rtl & {
right: auto;
left: 28px;
}
}
}
// ======================== Picker =========================
// Fix issue: https://github.com/ant-design/ant-design/issues/4783
.@{ant-prefix}-picker {
padding-right: @input-padding-horizontal-base + @font-size-base * 1.3;
&-large {
padding-right: @input-padding-horizontal-lg + @font-size-base * 1.3;
}
&-small {
padding-right: @input-padding-horizontal-sm + @font-size-base * 1.3;
}
}
// ===================== Status Group ======================
&.@{form-item-prefix-cls} {
&-has-success,
&-has-warning,
&-has-error,
&-is-validating {
// ====================== Icon ======================
.@{form-item-prefix-cls}-children-icon {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
width: @input-height-base;
height: 20px;
margin-top: -10px;
font-size: @font-size-base;
line-height: 20px;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back;
pointer-events: none;
.@{form-prefix-cls}-rtl & {
right: auto;
left: 0;
}
& svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
}
}
}
// ======================== Success ========================
&-has-success {
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
// ======================== Warning ========================
&-has-warning {
.form-control-validation(@warning-color; @warning-color; @form-warning-input-bg);
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @warning-color;
animation-name: diffZoomIn3 !important;
}
//select
.@{ant-prefix}-select {
.@{ant-prefix}-select-selector {
border-color: @warning-color !important;
}
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
.active(@warning-color);
}
}
//input-number, timepicker
.@{ant-prefix}-input-number,
.@{ant-prefix}-picker {
border-color: @warning-color;
&-focused,
&:focus {
.active(@warning-color);
}
&:not([disabled]):hover {
border-color: @warning-color;
}
}
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
.active(@warning-color);
}
}
// ========================= Error =========================
&-has-error {
.form-control-validation(@error-color; @error-color; @form-error-input-bg);
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @error-color;
animation-name: diffZoomIn2 !important;
}
//select
.@{ant-prefix}-select {
.@{ant-prefix}-select-selector {
border-color: @error-color !important;
}
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
.active(@error-color);
}
}
// fixes https://github.com/ant-design/ant-design/issues/20482
.@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
&.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
.@{ant-prefix}-select-selector {
border: 0;
}
}
.@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
.@{ant-prefix}-input:focus {
border-color: @error-color;
}
}
//input-number, timepicker
.@{ant-prefix}-input-number,
.@{ant-prefix}-picker {
border-color: @error-color;
&-focused,
&:focus {
.active(@error-color);
}
&:not([disabled]):hover {
border-color: @error-color;
}
}
.@{ant-prefix}-mention-wrapper {
.@{ant-prefix}-mention-editor {
&,
&:not([disabled]):hover {
border-color: @error-color;
}
}
&.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
.@{ant-prefix}-mention-editor:not([disabled]):focus {
.active(@error-color);
}
}
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
.active(@error-color);
}
// transfer
.@{ant-prefix}-transfer {
&-list {
border-color: @error-color;
&-search:not([disabled]) {
border-color: @input-border-color;
&:hover {
.hover();
}
&:focus {
.active();
}
}
}
}
}
// Patch to keep error explain color
&-has-error-leave {
.@{form-item-prefix-cls}-explain {
color: @error-color;
}
}
// ====================== Validating =======================
&-is-validating {
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
display: inline-block;
color: @primary-color;
}
}
}

16
components/input/__tests__/__snapshots__/index.test.js.snap
View File

@ -175,7 +175,7 @@ exports[`Input should support size 1`] = `
exports[`Input should support size in form 1`] = `
<form
class="ant-form ant-form-horizontal"
class="ant-form ant-form-horizontal ant-form-large"
>
<div
class="ant-row ant-form-item"
@ -186,11 +186,15 @@ exports[`Input should support size in form 1`] = `
<div
class="ant-form-item-control-input"
>
<input
class="ant-input ant-input-lg"
type="text"
value=""
/>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input ant-input-lg"
type="text"
value=""
/>
</div>
</div>
</div>
</div>

66
components/mentions/__tests__/__snapshots__/demo.test.js.snap
View File

@ -49,12 +49,16 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-mentions"
class="ant-form-item-control-input-content"
>
<textarea
id="coders"
rows="1"
/>
<div
class="ant-mentions"
>
<textarea
id="coders"
rows="1"
/>
</div>
</div>
</div>
</div>
@ -80,13 +84,17 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-mentions"
class="ant-form-item-control-input-content"
>
<textarea
id="bio"
placeholder="You can use @ to ref user here"
rows="3"
/>
<div
class="ant-mentions"
>
<textarea
id="bio"
placeholder="You can use @ to ref user here"
rows="3"
/>
</div>
</div>
</div>
</div>
@ -100,23 +108,27 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
class="ant-btn ant-btn-primary"
type="submit"
<div
class="ant-form-item-control-input-content"
>
<span>
Submit
</span>
</button>
   
<button
class="ant-btn"
type="button"
>
<span>
Reset
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="submit"
>
<span>
Submit
</span>
</button>
   
<button
class="ant-btn"
type="button"
>
<span>
Reset
</span>
</button>
</div>
</div>
</div>
</div>

572
components/skeleton/__tests__/__snapshots__/demo.test.js.snap
View File

@ -127,16 +127,20 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -160,66 +164,70 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button ant-radio-button-checked"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
</div>
</div>
</div>
@ -244,66 +252,70 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button ant-radio-button-checked"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="round"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Round
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="round"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Round
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Circle
</span>
</label>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Circle
</span>
</label>
</div>
</div>
</div>
</div>
@ -342,16 +354,20 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -375,66 +391,70 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button ant-radio-button-checked"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
</div>
</div>
</div>
@ -459,47 +479,51 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button"
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="square"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Square
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="square"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Square
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Circle
</span>
</label>
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="circle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Circle
</span>
</label>
</div>
</div>
</div>
</div>
@ -538,16 +562,20 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -571,66 +599,70 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button ant-radio-button-checked"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="large"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Large
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
</div>
</div>
</div>

658
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1634,16 +1634,20 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1666,16 +1670,20 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1698,16 +1706,20 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1730,17 +1742,21 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1763,17 +1779,21 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1796,17 +1816,21 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1829,17 +1853,21 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1862,16 +1890,20 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1894,17 +1926,21 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="true"
checked=""
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1927,16 +1963,20 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<div
class="ant-form-item-control-input"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-switch-inner"
/>
</button>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
@ -1960,66 +2000,70 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button ant-radio-button-checked"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="default"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Default
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="middle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Middle
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="middle"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Middle
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="small"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Small
</span>
</label>
</div>
</div>
</div>
</div>
@ -2044,65 +2088,69 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button ant-radio-button-checked"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Unset
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Unset
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="scroll"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Scroll
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="scroll"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Scroll
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="fixed"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Fixed Columns
</span>
</label>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="fixed"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Fixed Columns
</span>
</label>
</div>
</div>
</div>
</div>
@ -2127,46 +2175,50 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button ant-radio-button-checked"
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Unset
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Unset
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="fixed"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Fixed
</span>
</label>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="fixed"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Fixed
</span>
</label>
</div>
</div>
</div>
</div>
@ -2191,85 +2243,89 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
class="ant-form-item-control-input"
>
<div
class="ant-radio-group ant-radio-group-outline"
class="ant-form-item-control-input-content"
>
<label
class="ant-radio-button-wrapper"
<div
class="ant-radio-group ant-radio-group-outline"
>
<span
class="ant-radio-button"
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="top"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Top
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="top"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Top
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="bottom"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Bottom
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="bottom"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Bottom
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="both"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Both
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="both"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Both
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<input
class="ant-radio-button-input"
type="radio"
value="none"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
None
</span>
</label>
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="none"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
None
</span>
</label>
</div>
</div>
</div>
</div>

92
components/upload/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3005,56 +3005,60 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
<div
class="ant-form-item-control-input"
>
<span
class=""
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-upload ant-upload-select ant-upload-select-text"
<span
class=""
>
<span
class="ant-upload"
role="button"
tabindex="0"
<div
class="ant-upload ant-upload-select ant-upload-select-text"
>
<input
accept=""
style="display:none"
type="file"
/>
<button
class="ant-btn"
type="button"
<span
class="ant-upload"
role="button"
tabindex="0"
>
<span
aria-label="upload"
class="anticon anticon-upload"
role="img"
<input
accept=""
style="display:none"
type="file"
/>
<button
class="ant-btn"
type="button"
>
<svg
aria-hidden="true"
class=""
data-icon="upload"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="upload"
class="anticon anticon-upload"
role="img"
>
<path
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
<span>
Click to Upload
</span>
</button>
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
/>
</span>
<svg
aria-hidden="true"
class=""
data-icon="upload"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
<span>
Click to Upload
</span>
</button>
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
/>
</span>
</div>
</div>
</div>
</div>