Text support keyboard (#24195)

components/typography/Base.tsx

@@ -56,10 +56,11 @@ export interface BlockProps extends TypographyProps {
   underline?: boolean;
   delete?: boolean;
   strong?: boolean;
+  keyboard?: boolean;
 }
 
 function wrapperDecorations(
-  { mark, code, underline, delete: del, strong }: BlockProps,
+  { mark, code, underline, delete: del, strong, keyboard }: BlockProps,
   content: React.ReactNode,
 ) {
   let currentContent = content;
@@ -75,6 +76,7 @@ function wrapperDecorations(
   wrap(del, 'del');
   wrap(code, 'code');
   wrap(mark, 'mark');
+  wrap(keyboard, 'kbd');
 
   return currentContent;
 }
@@ -433,6 +435,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
       'delete',
       'underline',
       'strong',
+      'keyboard',
       ...configConsumerProps,
     ]);
     const cssEllipsis = this.canUseCSSEllipsis();

components/typography/__tests__/__snapshots__/demo.test.js.snap

@@ -80,6 +80,19 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
       </li>
     </ul>
   </div>
+  <div
+    class="ant-typography"
+  >
+    Press 
+    <span
+      class="ant-typography"
+    >
+      <kbd>
+        Esc
+      </kbd>
+    </span>
+     to exist...
+  </div>
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
@@ -168,6 +181,19 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
       </li>
     </ul>
   </div>
+  <div
+    class="ant-typography"
+  >
+    按
+    <span
+      class="ant-typography"
+    >
+      <kbd>
+        Esc
+      </kbd>
+    </span>
+    键退出阅读……
+  </div>
 </article>
 `;
 
@@ -707,6 +733,18 @@ exports[`renders ./components/typography/demo/text.md correctly 1`] = `
       </code>
     </span>
   </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <span
+      class="ant-typography"
+    >
+      <kbd>
+        Ant Design
+      </kbd>
+    </span>
+  </div>
   <div
     class="ant-space-item"
     style="margin-bottom:8px"

components/typography/demo/basic.md

@@ -56,6 +56,10 @@ ReactDOM.render(
       </ul>
     </Paragraph>
 
+    <Paragraph>
+      Press <Text keyboard>Esc</Text> to exist...
+    </Paragraph>
+
     <Divider />
 
     <Title>介绍</Title>
@@ -87,6 +91,10 @@ ReactDOM.render(
         </li>
       </ul>
     </Paragraph>
+
+    <Paragraph>
+      按<Text keyboard>Esc</Text>键退出阅读……
+    </Paragraph>
   </Typography>,
   mountNode,
 );

components/typography/demo/text.md

@@ -27,6 +27,7 @@ ReactDOM.render(
     <Text disabled>Ant Design</Text>
     <Text mark>Ant Design</Text>
     <Text code>Ant Design</Text>
+    <Text keyboard>Ant Design</Text>
     <Text underline>Ant Design</Text>
     <Text delete>Ant Design</Text>
     <Text strong>Ant Design</Text>

components/typography/index.en-US.md

@@ -25,6 +25,7 @@ Basic text writing, including headings, body text, lists, and more.
 | editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false |  |
 | ellipsis | Display ellipsis when text overflows | boolean | false |  |
 | mark | Marked style | boolean | false |  |
+| keyboard | Keyboard style | boolean | false | 4.3.0 |
 | underline | Underlined style | boolean | false |  |
 | onChange | Trigger when user edits the content | Function(string) | - |  |
 | strong | Bold style | boolean | false |  |

components/typography/index.zh-CN.md

@@ -19,13 +19,14 @@ cols: 1
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| code | 添加代码样式 | boolean | false |  |
 | copyable | 是否可拷贝，为对象时可设置复制文本以回调函数 | boolean \| { text: string, onCopy: Function } | false |  |
 | delete | 添加删除线样式 | boolean | false |  |
 | disabled | 禁用文本 | boolean | false |  |
 | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false |  |
 | ellipsis | 设置自动溢出省略 | boolean | false |  |
 | mark | 添加标记样式 | boolean | false |  |
-| code | 添加代码样式 | boolean | false |  |
+| keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
 | underline | 添加下划线样式 | boolean | false |  |
 | strong | 是否加粗 | boolean | false |  |
 | type | 文本类型 | `secondary` \| `warning` \| `danger` | - |  |

components/typography/style/index.less

@@ -98,8 +98,18 @@
     margin: 0 0.2em;
     padding: 0.2em 0.4em 0.1em;
     font-size: 85%;
-    background: rgba(0, 0, 0, 0.06);
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    background: rgba(150, 150, 150, 0.1);
+    border: 1px solid rgba(100, 100, 100, 0.2);
+    border-radius: 3px;
+  }
+
+  kbd {
+    margin: 0 0.2em;
+    padding: 0.15em 0.4em 0.1em;
+    font-size: 90%;
+    background: rgba(150, 150, 150, 0.06);
+    border: 1px solid rgba(100, 100, 100, 0.2);
+    border-bottom-width: 2px;
     border-radius: 3px;
   }