Remove span.ant-tag-text in Tag, and remove type casting in Dropdown (#9055)

* Remove span.ant-tag-text

Warp React.ReactNode with span element is not suggested. It may cause anti-specification problem: `<span><span>I'm spec breaker</span></span>`. span is not a general tags container.
Another benefit from this change is keeping the same structure with CheckableTag.
After inspecting the removing of the style of .ant-tag-text, seems bringing no problems. The old example employeed this css class has gone long long time ago. See: 0635877a51

* Use React.Children.only api to supress type casting

By codes, the children and the overlay of Dropdown must be **single** and **valid React.ReactElement**. React.Children.only takes it and report more friendly React internal built error messages.

* Revert hack CSS styles: filling .ant-tag's block area with orphan child anchor

components/dropdown/dropdown.tsx

@@ -49,16 +49,18 @@ export default class Dropdown extends React.Component<DropDownProps, any> {
   }
 
   render() {
-    const { children, prefixCls, overlay, trigger, disabled } = this.props;
-    const dropdownTrigger = React.cloneElement(children as any, {
-      className: classNames((children as any).props.className, `${prefixCls}-trigger`),
+    const { children, prefixCls, overlay: overlayElements, trigger, disabled } = this.props;
+
+    const child = React.Children.only(children);
+    const overlay = React.Children.only(overlayElements);
+
+    const dropdownTrigger = React.cloneElement(child, {
+      className: classNames(child.props.className, `${prefixCls}-trigger`),
       disabled,
     });
     // menu cannot be selectable in dropdown defaultly
-    const overlayProps = overlay && (overlay as any).props;
-    const selectable = (overlayProps && 'selectable' in overlayProps)
-      ? overlayProps.selectable : false;
-    const fixedModeOverlay = React.cloneElement(overlay as any, {
+    const selectable = overlay.props.selectable || false;
+    const fixedModeOverlay = React.cloneElement(overlay, {
       mode: 'vertical',
       selectable,
     });

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

@@ -5,36 +5,24 @@ exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
   <div
     class="ant-tag"
     data-show="true"
-  >
-    <span
-      class="ant-tag-text"
   >
     Tag 1
-    </span>
   </div>
   <div
     class="ant-tag"
     data-show="true"
-  >
-    <span
-      class="ant-tag-text"
   >
     <a
       href="https://github.com/ant-design/ant-design/issues/1862"
     >
       Link
     </a>
-    </span>
   </div>
   <div
     class="ant-tag"
     data-show="true"
-  >
-    <span
-      class="ant-tag-text"
   >
     Tag 2
-    </span>
     <i
       class="anticon anticon-cross"
     />
@@ -42,12 +30,8 @@ exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
   <div
     class="ant-tag"
     data-show="true"
-  >
-    <span
-      class="ant-tag-text"
   >
     Prevent Default
-    </span>
     <i
       class="anticon anticon-cross"
     />
@@ -86,112 +70,68 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
     <div
       class="ant-tag ant-tag-magenta"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       magenta
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-red"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       red
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-volcano"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       volcano
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-orange"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       orange
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-gold"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       gold
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-lime"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       lime
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-green"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       green
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-cyan"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       cyan
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-blue"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       blue
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-geekblue"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       geekblue
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-purple"
       data-show="true"
-    >
-      <span
-        class="ant-tag-text"
     >
       purple
-      </span>
     </div>
   </div>
   <h4
@@ -204,45 +144,29 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
       class="ant-tag ant-tag-has-color"
       data-show="true"
       style="background-color:#f50"
-    >
-      <span
-        class="ant-tag-text"
     >
       #f50
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-has-color"
       data-show="true"
       style="background-color:#2db7f5"
-    >
-      <span
-        class="ant-tag-text"
     >
       #2db7f5
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-has-color"
       data-show="true"
       style="background-color:#87d068"
-    >
-      <span
-        class="ant-tag-text"
     >
       #87d068
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-has-color"
       data-show="true"
       style="background-color:#108ee9"
-    >
-      <span
-        class="ant-tag-text"
     >
       #108ee9
-      </span>
     </div>
   </div>
 </div>
@@ -253,22 +177,14 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
   <div
     class="ant-tag"
     data-show="true"
-  >
-    <span
-      class="ant-tag-text"
   >
     Unremovable
-    </span>
   </div>
   <div
     class="ant-tag"
     data-show="true"
-  >
-    <span
-      class="ant-tag-text"
   >
     Tag 2
-    </span>
     <i
       class="anticon anticon-cross"
     />
@@ -276,12 +192,8 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
   <div
     class="ant-tag"
     data-show="true"
-  >
-    <span
-      class="ant-tag-text"
   >
     Tag 3
-    </span>
     <i
       class="anticon anticon-cross"
     />
@@ -290,15 +202,11 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
     class="ant-tag"
     data-show="true"
     style="background:#fff;border-style:dashed"
-  >
-    <span
-      class="ant-tag-text"
   >
     <i
       class="anticon anticon-plus"
     />
      New Tag
-    </span>
   </div>
 </div>
 `;

components/tag/index.tsx

@@ -106,7 +106,7 @@ export default class Tag extends React.Component<TagProps, TagState> {
         className={classString}
         style={tagStyle}
       >
-        <span className={`${prefixCls}-text`}>{children}</span>
+        {children}
         {closeIcon}
       </div>
     );

components/tag/style/index.less

@@ -29,13 +29,11 @@
     color: @tag-default-color;
   }
 
-  &-text {
-    a:first-child:last-child {
+  >a:first-child:last-child {
     display: inline-block;
     margin: 0 -8px;
     padding: 0 8px;
   }
-  }
 
   .@{iconfont-css-prefix}-cross {
     .iconfont-size-under-12px(10px);