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 { children, prefixCls, overlay: overlayElements, trigger, disabled } = this.props;
-    const dropdownTrigger = React.cloneElement(children as any, {
+
-      className: classNames((children as any).props.className, `${prefixCls}-trigger`),
+    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 = overlay.props.selectable || false;
-    const selectable = (overlayProps && 'selectable' in overlayProps)
+    const fixedModeOverlay = React.cloneElement(overlay, {
-      ? overlayProps.selectable : false;
-    const fixedModeOverlay = React.cloneElement(overlay as any, {
       mode: 'vertical',
       selectable,
     });

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

@@ -6,35 +6,23 @@ exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
     class="ant-tag"
     data-show="true"
   >
-    <span
+    Tag 1
-      class="ant-tag-text"
-    >
-      Tag 1
-    </span>
   </div>
   <div
     class="ant-tag"
     data-show="true"
   >
-    <span
+    <a
-      class="ant-tag-text"
+      href="https://github.com/ant-design/ant-design/issues/1862"
     >
-      <a
+      Link
-        href="https://github.com/ant-design/ant-design/issues/1862"
+    </a>
-      >
-        Link
-      </a>
-    </span>
   </div>
   <div
     class="ant-tag"
     data-show="true"
   >
-    <span
+    Tag 2
-      class="ant-tag-text"
-    >
-      Tag 2
-    </span>
     <i
       class="anticon anticon-cross"
     />
@@ -43,11 +31,7 @@ exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
     class="ant-tag"
     data-show="true"
   >
-    <span
+    Prevent Default
-      class="ant-tag-text"
-    >
-      Prevent Default
-    </span>
     <i
       class="anticon anticon-cross"
     />
@@ -87,111 +71,67 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
       class="ant-tag ant-tag-magenta"
       data-show="true"
     >
-      <span
+      magenta
-        class="ant-tag-text"
-      >
-        magenta
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-red"
       data-show="true"
     >
-      <span
+      red
-        class="ant-tag-text"
-      >
-        red
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-volcano"
       data-show="true"
     >
-      <span
+      volcano
-        class="ant-tag-text"
-      >
-        volcano
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-orange"
       data-show="true"
     >
-      <span
+      orange
-        class="ant-tag-text"
-      >
-        orange
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-gold"
       data-show="true"
     >
-      <span
+      gold
-        class="ant-tag-text"
-      >
-        gold
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-lime"
       data-show="true"
     >
-      <span
+      lime
-        class="ant-tag-text"
-      >
-        lime
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-green"
       data-show="true"
     >
-      <span
+      green
-        class="ant-tag-text"
-      >
-        green
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-cyan"
       data-show="true"
     >
-      <span
+      cyan
-        class="ant-tag-text"
-      >
-        cyan
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-blue"
       data-show="true"
     >
-      <span
+      blue
-        class="ant-tag-text"
-      >
-        blue
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-geekblue"
       data-show="true"
     >
-      <span
+      geekblue
-        class="ant-tag-text"
-      >
-        geekblue
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-purple"
       data-show="true"
     >
-      <span
+      purple
-        class="ant-tag-text"
-      >
-        purple
-      </span>
     </div>
   </div>
   <h4
@@ -205,44 +145,28 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
       data-show="true"
       style="background-color:#f50"
     >
-      <span
+      #f50
-        class="ant-tag-text"
-      >
-        #f50
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-has-color"
       data-show="true"
       style="background-color:#2db7f5"
     >
-      <span
+      #2db7f5
-        class="ant-tag-text"
-      >
-        #2db7f5
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-has-color"
       data-show="true"
       style="background-color:#87d068"
     >
-      <span
+      #87d068
-        class="ant-tag-text"
-      >
-        #87d068
-      </span>
     </div>
     <div
       class="ant-tag ant-tag-has-color"
       data-show="true"
       style="background-color:#108ee9"
     >
-      <span
+      #108ee9
-        class="ant-tag-text"
-      >
-        #108ee9
-      </span>
     </div>
   </div>
 </div>
@@ -254,21 +178,13 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
     class="ant-tag"
     data-show="true"
   >
-    <span
+    Unremovable
-      class="ant-tag-text"
-    >
-      Unremovable
-    </span>
   </div>
   <div
     class="ant-tag"
     data-show="true"
   >
-    <span
+    Tag 2
-      class="ant-tag-text"
-    >
-      Tag 2
-    </span>
     <i
       class="anticon anticon-cross"
     />
@@ -277,11 +193,7 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
     class="ant-tag"
     data-show="true"
   >
-    <span
+    Tag 3
-      class="ant-tag-text"
-    >
-      Tag 3
-    </span>
     <i
       class="anticon anticon-cross"
     />
@@ -291,14 +203,10 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
     data-show="true"
     style="background:#fff;border-style:dashed"
   >
-    <span
+    <i
-      class="ant-tag-text"
+      class="anticon anticon-plus"
-    >
+    />
-      <i
+     New Tag
-        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,12 +29,10 @@
     color: @tag-default-color;
   }
 
-  &-text {
+  >a:first-child:last-child {
-    a:first-child:last-child {
+    display: inline-block;
-      display: inline-block;
+    margin: 0 -8px;
-      margin: 0 -8px;
+    padding: 0 8px;
-      padding: 0 8px;
-    }
   }
 
   .@{iconfont-css-prefix}-cross {