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

fix: typography title margin issue (#34302)

pull/34293/head
afc163 3 years ago
committed by GitHub
parent
d595229d6b
commit
0e27f8af7e
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 320 additions and 317 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. 299
      components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
  2. 275
      components/typography/__tests__/__snapshots__/demo.test.js.snap
  3. 23
      components/typography/demo/interactive.md
  4. 40
      components/typography/style/index.less

299
components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -650,10 +650,10 @@ exports[`renders ./components/typography/demo/ellipsis-middle.md extend context
exports[`renders ./components/typography/demo/interactive.md extend context correctly 1`] = `
Array [
<h1
<div
class="ant-typography"
>
h1. Ant Design
This is an editable text.
<div
aria-label="Edit"
class="ant-typography-edit"
@ -705,26 +705,26 @@ Array [
</div>
</div>
</div>
</h1>,
<h2
</div>,
<div
class="ant-typography"
>
h2. Ant Design
Custom Edit icon and replace tooltip text.
<div
aria-label="Edit"
aria-label="click to edit text"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="edit"
class="anticon anticon-edit"
role="button"
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
>
<svg
aria-hidden="true"
data-icon="edit"
data-icon="highlight"
fill="currentColor"
focusable="false"
height="1em"
@ -732,7 +732,7 @@ Array [
width="1em"
>
<path
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
/>
</svg>
</span>
@ -756,18 +756,81 @@ Array [
class="ant-tooltip-inner"
role="tooltip"
>
Edit
click to edit text
</div>
</div>
</div>
</div>
</h2>,
<h3
</div>,
"Trigger edit with: ",
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="icon"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
icon
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="text"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
text
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="both"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
both
</span>
</label>
</div>,
<div
class="ant-typography"
>
h3. Ant Design
Text or icon as trigger - click to start editing.
<div
aria-label="Edit"
aria-label="click to edit text"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
@ -812,31 +875,31 @@ Array [
class="ant-tooltip-inner"
role="tooltip"
>
Edit
click to edit text
</div>
</div>
</div>
</div>
</h3>,
<h4
</div>,
<div
class="ant-typography"
>
h4. Ant Design
Editable text with a custom enter icon in edit field.
<div
aria-label="Edit"
aria-label="click to edit text"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="edit"
class="anticon anticon-edit"
role="button"
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
>
<svg
aria-hidden="true"
data-icon="edit"
data-icon="highlight"
fill="currentColor"
focusable="false"
height="1em"
@ -844,7 +907,7 @@ Array [
width="1em"
>
<path
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
/>
</svg>
</span>
@ -868,31 +931,31 @@ Array [
class="ant-tooltip-inner"
role="tooltip"
>
Edit
click to edit text
</div>
</div>
</div>
</div>
</h4>,
<h5
</div>,
<div
class="ant-typography"
>
h5. Ant Design
Editable text with no enter icon in edit field.
<div
aria-label="Edit"
aria-label="click to edit text"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="edit"
class="anticon anticon-edit"
role="button"
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
>
<svg
aria-hidden="true"
data-icon="edit"
data-icon="highlight"
fill="currentColor"
focusable="false"
height="1em"
@ -900,7 +963,7 @@ Array [
width="1em"
>
<path
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
/>
</svg>
</span>
@ -924,16 +987,16 @@ Array [
class="ant-tooltip-inner"
role="tooltip"
>
Edit
click to edit text
</div>
</div>
</div>
</div>
</h5>,
</div>,
<div
class="ant-typography"
>
This is an editable text.
Hide Edit tooltip.
<div
aria-label="Edit"
class="ant-typography-edit"
@ -979,9 +1042,7 @@ Array [
<div
class="ant-tooltip-inner"
role="tooltip"
>
Edit
</div>
/>
</div>
</div>
</div>
@ -989,22 +1050,22 @@ Array [
<div
class="ant-typography"
>
Custom Edit icon and replace tooltip text.
This is an editable text with limited length.
<div
aria-label="click to edit text"
aria-label="Edit"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
aria-label="edit"
class="anticon anticon-edit"
role="button"
>
<svg
aria-hidden="true"
data-icon="highlight"
data-icon="edit"
fill="currentColor"
focusable="false"
height="1em"
@ -1012,7 +1073,7 @@ Array [
width="1em"
>
<path
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
/>
</svg>
</span>
@ -1036,81 +1097,19 @@ Array [
class="ant-tooltip-inner"
role="tooltip"
>
click to edit text
Edit
</div>
</div>
</div>
</div>
</div>,
"Trigger edit with: ",
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="icon"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
icon
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="text"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
text
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="both"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
both
</span>
</label>
</div>,
<div
<h1
class="ant-typography"
style="margin:0"
>
Text or icon as trigger - click to start editing.
h1. Ant Design
<div
aria-label="click to edit text"
aria-label="Edit"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
@ -1155,31 +1154,32 @@ Array [
class="ant-tooltip-inner"
role="tooltip"
>
click to edit text
Edit
</div>
</div>
</div>
</div>
</div>,
<div
</h1>,
<h2
class="ant-typography"
style="margin:0"
>
Editable text with a custom enter icon in edit field.
h2. Ant Design
<div
aria-label="click to edit text"
aria-label="Edit"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
aria-label="edit"
class="anticon anticon-edit"
role="button"
>
<svg
aria-hidden="true"
data-icon="highlight"
data-icon="edit"
fill="currentColor"
focusable="false"
height="1em"
@ -1187,7 +1187,7 @@ Array [
width="1em"
>
<path
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
/>
</svg>
</span>
@ -1211,31 +1211,32 @@ Array [
class="ant-tooltip-inner"
role="tooltip"
>
click to edit text
Edit
</div>
</div>
</div>
</div>
</div>,
<div
</h2>,
<h3
class="ant-typography"
style="margin:0"
>
Editable text with no enter icon in edit field.
h3. Ant Design
<div
aria-label="click to edit text"
aria-label="Edit"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
aria-label="edit"
class="anticon anticon-edit"
role="button"
>
<svg
aria-hidden="true"
data-icon="highlight"
data-icon="edit"
fill="currentColor"
focusable="false"
height="1em"
@ -1243,7 +1244,7 @@ Array [
width="1em"
>
<path
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
/>
</svg>
</span>
@ -1267,16 +1268,17 @@ Array [
class="ant-tooltip-inner"
role="tooltip"
>
click to edit text
Edit
</div>
</div>
</div>
</div>
</div>,
<div
</h3>,
<h4
class="ant-typography"
style="margin:0"
>
Hide Edit tooltip.
h4. Ant Design
<div
aria-label="Edit"
class="ant-typography-edit"
@ -1322,15 +1324,18 @@ Array [
<div
class="ant-tooltip-inner"
role="tooltip"
/>
>
Edit
</div>
</div>
</div>
</div>
</div>,
<div
</h4>,
<h5
class="ant-typography"
style="margin:0"
>
This is an editable text with limited length.
h5. Ant Design
<div
aria-label="Edit"
class="ant-typography-edit"
@ -1382,7 +1387,11 @@ Array [
</div>
</div>
</div>
</div>,
</h5>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>,
<div
class="ant-typography"
>

275
components/typography/__tests__/__snapshots__/demo.test.js.snap
View File

@ -554,10 +554,10 @@ exports[`renders ./components/typography/demo/ellipsis-middle.md correctly 1`] =
exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
Array [
<h1
<div
class="ant-typography"
>
h1. Ant Design
This is an editable text.
<div
aria-label="Edit"
class="ant-typography-edit"
@ -585,26 +585,26 @@ Array [
</svg>
</span>
</div>
</h1>,
<h2
</div>,
<div
class="ant-typography"
>
h2. Ant Design
Custom Edit icon and replace tooltip text.
<div
aria-label="Edit"
aria-label="click to edit text"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="edit"
class="anticon anticon-edit"
role="button"
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
>
<svg
aria-hidden="true"
data-icon="edit"
data-icon="highlight"
fill="currentColor"
focusable="false"
height="1em"
@ -612,18 +612,81 @@ Array [
width="1em"
>
<path
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
/>
</svg>
</span>
</div>
</h2>,
<h3
</div>,
"Trigger edit with: ",
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="icon"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
icon
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="text"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
text
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="both"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
both
</span>
</label>
</div>,
<div
class="ant-typography"
>
h3. Ant Design
Text or icon as trigger - click to start editing.
<div
aria-label="Edit"
aria-label="click to edit text"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
@ -649,26 +712,26 @@ Array [
</svg>
</span>
</div>
</h3>,
<h4
</div>,
<div
class="ant-typography"
>
h4. Ant Design
Editable text with a custom enter icon in edit field.
<div
aria-label="Edit"
aria-label="click to edit text"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="edit"
class="anticon anticon-edit"
role="button"
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
>
<svg
aria-hidden="true"
data-icon="edit"
data-icon="highlight"
fill="currentColor"
focusable="false"
height="1em"
@ -676,31 +739,31 @@ Array [
width="1em"
>
<path
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
/>
</svg>
</span>
</div>
</h4>,
<h5
</div>,
<div
class="ant-typography"
>
h5. Ant Design
Editable text with no enter icon in edit field.
<div
aria-label="Edit"
aria-label="click to edit text"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="edit"
class="anticon anticon-edit"
role="button"
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
>
<svg
aria-hidden="true"
data-icon="edit"
data-icon="highlight"
fill="currentColor"
focusable="false"
height="1em"
@ -708,16 +771,16 @@ Array [
width="1em"
>
<path
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
/>
</svg>
</span>
</div>
</h5>,
</div>,
<div
class="ant-typography"
>
This is an editable text.
Hide Edit tooltip.
<div
aria-label="Edit"
class="ant-typography-edit"
@ -749,22 +812,22 @@ Array [
<div
class="ant-typography"
>
Custom Edit icon and replace tooltip text.
This is an editable text with limited length.
<div
aria-label="click to edit text"
aria-label="Edit"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
aria-label="edit"
class="anticon anticon-edit"
role="button"
>
<svg
aria-hidden="true"
data-icon="highlight"
data-icon="edit"
fill="currentColor"
focusable="false"
height="1em"
@ -772,81 +835,19 @@ Array [
width="1em"
>
<path
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
/>
</svg>
</span>
</div>
</div>,
"Trigger edit with: ",
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="icon"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
icon
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="text"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
text
</span>
</label>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="both"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
both
</span>
</label>
</div>,
<div
<h1
class="ant-typography"
style="margin:0"
>
Text or icon as trigger - click to start editing.
h1. Ant Design
<div
aria-label="click to edit text"
aria-label="Edit"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
@ -872,26 +873,27 @@ Array [
</svg>
</span>
</div>
</div>,
<div
</h1>,
<h2
class="ant-typography"
style="margin:0"
>
Editable text with a custom enter icon in edit field.
h2. Ant Design
<div
aria-label="click to edit text"
aria-label="Edit"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
aria-label="edit"
class="anticon anticon-edit"
role="button"
>
<svg
aria-hidden="true"
data-icon="highlight"
data-icon="edit"
fill="currentColor"
focusable="false"
height="1em"
@ -899,31 +901,32 @@ Array [
width="1em"
>
<path
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
/>
</svg>
</span>
</div>
</div>,
<div
</h2>,
<h3
class="ant-typography"
style="margin:0"
>
Editable text with no enter icon in edit field.
h3. Ant Design
<div
aria-label="click to edit text"
aria-label="Edit"
class="ant-typography-edit"
role="button"
style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
tabindex="0"
>
<span
aria-label="highlight"
class="anticon anticon-highlight"
role="img"
aria-label="edit"
class="anticon anticon-edit"
role="button"
>
<svg
aria-hidden="true"
data-icon="highlight"
data-icon="edit"
fill="currentColor"
focusable="false"
height="1em"
@ -931,16 +934,17 @@ Array [
width="1em"
>
<path
d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
/>
</svg>
</span>
</div>
</div>,
<div
</h3>,
<h4
class="ant-typography"
style="margin:0"
>
Hide Edit tooltip.
h4. Ant Design
<div
aria-label="Edit"
class="ant-typography-edit"
@ -968,11 +972,12 @@ Array [
</svg>
</span>
</div>
</div>,
<div
</h4>,
<h5
class="ant-typography"
style="margin:0"
>
This is an editable text with limited length.
h5. Ant Design
<div
aria-label="Edit"
class="ant-typography-edit"
@ -1000,7 +1005,11 @@ Array [
</svg>
</span>
</div>
</div>,
</h5>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>,
<div
class="ant-typography"
>

23
components/typography/demo/interactive.md
View File

@ -15,7 +15,7 @@ Provide additional interactive capacity of editable and copyable.
```jsx
import React, { useState } from 'react';
import { Checkbox, Radio, Typography } from 'antd';
import { Checkbox, Radio, Typography, Divider } from 'antd';
import { CheckOutlined, HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons';
const { Paragraph } = Typography;
@ -59,11 +59,6 @@ const Demo = () => {
return (
<>
<Typography.Title editable level={1}>h1. Ant Design</Typography.Title>
<Typography.Title editable level={2}>h2. Ant Design</Typography.Title>
<Typography.Title editable level={3}>h3. Ant Design</Typography.Title>
<Typography.Title editable level={4}>h4. Ant Design</Typography.Title>
<Typography.Title editable level={5}>h5. Ant Design</Typography.Title>
<Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
<Paragraph
editable={{
@ -124,6 +119,22 @@ const Demo = () => {
>
{lengthLimitedStr}
</Paragraph>
<Typography.Title editable level={1} style={{ margin: 0 }}>
h1. Ant Design
</Typography.Title>
<Typography.Title editable level={2} style={{ margin: 0 }}>
h2. Ant Design
</Typography.Title>
<Typography.Title editable level={3} style={{ margin: 0 }}>
h3. Ant Design
</Typography.Title>
<Typography.Title editable level={4} style={{ margin: 0 }}>
h4. Ant Design
</Typography.Title>
<Typography.Title editable level={5} style={{ margin: 0 }}>
h5. Ant Design
</Typography.Title>
<Divider />
<Paragraph copyable>This is a copyable text.</Paragraph>
<Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
<Paragraph

40
components/typography/style/index.less
View File

@ -77,22 +77,16 @@
.typography-title-5();
}
div&-h1,
div&-h2,
div&-h3,
div&-h4,
div&-h5 {
& > textarea {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
h1&,
h2&,
h3&,
h4&,
h5& {
.@{typography-prefix-cls} + & {
margin-top: @typography-title-margin-top;
}
}
div&-h5 > textarea {
padding-top: 3px;
}
div,
ul,
li,
@ -226,26 +220,6 @@
/* stylelint-disable-next-line property-no-vendor-prefix */
-moz-transition: none;
}
.@{typography-prefix-cls}& {
&.@{typography-prefix-cls}-h1,
&.@{typography-prefix-cls}-h2,
&.@{typography-prefix-cls}-h3 {
margin-top: -1px;
margin-bottom: calc(@typography-title-margin-bottom - 1px);
}
&.@{typography-prefix-cls}-h4 {
margin-top: -2px;
margin-bottom: calc(@typography-title-margin-bottom - 2px);
}
&.@{typography-prefix-cls}-h5 {
margin-top: -4px;
margin-bottom: calc(@typography-title-margin-bottom - 4px);
line-height: 1;
}
}
}
// list

Write Preview
Loading…
Cancel
Save