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

style: fix Modal.confirm description long text layout (#45212)

Browse Source 
* style: fix Modal.confirm description long text layout

* demo: update Modal demos
This commit is contained in:
afc163 2023-10-08 16:38:54 +08:00 committed by GitHub
parent 75611b7db8
commit cece6e27df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -47,7 +47,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
aria-modal="true"
class="ant-modal ant-modal-pure-panel"
role="dialog"
style="width: 100%; height: 200px;"
style="width: 100%;"
>
<div
aria-hidden="true"
@ -132,7 +132,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
aria-modal="true"
class="ant-modal ant-modal-pure-panel"
role="dialog"
style="width: 100%; height: 200px;"
style="width: 100%;"
>
<div
aria-hidden="true"
@ -217,7 +217,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
aria-modal="true"
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
role="dialog"
style="width: 200px; height: 150px;"
style="width: 200px;"
>
<div
aria-hidden="true"
@ -290,7 +290,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
aria-modal="true"
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
role="dialog"
style="width: 300px; height: 200px;"
style="width: 300px;"
>
<div
aria-hidden="true"
@ -993,7 +993,7 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
aria-modal="true"
class="ant-modal ant-modal-pure-panel"
role="dialog"
style="width: 100%; height: 200px;"
style="width: 100%;"
>
<div
aria-hidden="true"
@ -1078,7 +1078,7 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
aria-modal="true"
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
role="dialog"
style="width: 200px; height: 150px;"
style="width: 200px;"
>
<div
aria-hidden="true"
@ -1151,7 +1151,7 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
aria-modal="true"
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
role="dialog"
style="width: 300px; height: 200px;"
style="width: 300px;"
>
<div
aria-hidden="true"

14
components/modal/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -41,7 +41,7 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
aria-modal="true"
class="ant-modal ant-modal-pure-panel"
role="dialog"
style="width:100%;height:200px"
style="width:100%"
>
<div
aria-hidden="true"
@ -126,7 +126,7 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
aria-modal="true"
class="ant-modal ant-modal-pure-panel"
role="dialog"
style="width:100%;height:200px"
style="width:100%"
>
<div
aria-hidden="true"
@ -211,7 +211,7 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
aria-modal="true"
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
role="dialog"
style="width:200px;height:150px"
style="width:200px"
>
<div
aria-hidden="true"
@ -284,7 +284,7 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
aria-modal="true"
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
role="dialog"
style="width:300px;height:200px"
style="width:300px"
>
<div
aria-hidden="true"
@ -957,7 +957,7 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
aria-modal="true"
class="ant-modal ant-modal-pure-panel"
role="dialog"
style="width:100%;height:200px"
style="width:100%"
>
<div
aria-hidden="true"
@ -1042,7 +1042,7 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
aria-modal="true"
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
role="dialog"
style="width:200px;height:150px"
style="width:200px"
>
<div
aria-hidden="true"
@ -1115,7 +1115,7 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
aria-modal="true"
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
role="dialog"
style="width:300px;height:200px"
style="width:300px"
>
<div
aria-hidden="true"

8
components/modal/demo/component-token.tsx
View File

@ -20,18 +20,18 @@ export default () => (
}}
>
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
<InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
<InternalPanel title="Hello World!" style={{ width: '100%' }}>
Hello World?!
</InternalPanel>
<ConfigProvider theme={{ token: { wireframe: true } }}>
<InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
<InternalPanel title="Hello World!" style={{ width: '100%' }}>
Hello World?!
</InternalPanel>
</ConfigProvider>
<InternalPanel type="success" style={{ width: 200, height: 150 }}>
<InternalPanel type="success" style={{ width: 200 }}>
A good news!
</InternalPanel>
<InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
<InternalPanel title="Confirm This?" type="confirm" style={{ width: 300 }}>
Some descriptions.
</InternalPanel>
</div>

6
components/modal/demo/wireframe.tsx
View File

@ -7,13 +7,13 @@ const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
export default () => (
<ConfigProvider theme={{ token: { wireframe: true } }}>
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
<InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
<InternalPanel title="Hello World!" style={{ width: '100%' }}>
Hello World?!
</InternalPanel>
<InternalPanel type="success" style={{ width: 200, height: 150 }}>
<InternalPanel type="success" style={{ width: 200 }}>
A good news!
</InternalPanel>
<InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
<InternalPanel title="Confirm This?" type="confirm" style={{ width: 300 }}>
Some descriptions.
</InternalPanel>
</div>

1
components/modal/style/confirmCmp.tsx
View File

@ -53,6 +53,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
flexDirection: 'column',
flex: 'auto',
rowGap: token.marginXS,
maxWidth: `calc(100% - ${token.modalConfirmIconSize + token.marginSM}px)`,
},
[`${confirmComponentCls}-title`]: {

11
components/modal/style/index.tsx
View File

@ -324,15 +324,8 @@ const genWireframeStyle: GenerateStyle<ModalToken> = (token) => {
[`${antCls}-modal-body`]: {
padding: `${token.padding * 2}px ${token.padding * 2}px ${token.paddingLG}px`,
},
[`${confirmComponentCls}-body`]: {
[`> ${token.iconCls}`]: {
marginInlineEnd: token.margin,
// `content` after `icon` should set marginLeft
[`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
marginInlineStart: token.modalConfirmIconSize + token.margin,
},
},
[`${confirmComponentCls}-body > ${token.iconCls}`]: {
marginInlineEnd: token.margin,
},
[`${confirmComponentCls}-btns`]: {
marginTop: token.marginLG,