style(Collapse): adjust border gag (#6361)

src/collapse-item/index.js

@@ -1,6 +1,5 @@
 // Utils
 import { createNamespace, isDef } from '../utils';
-import { BORDER_TOP } from '../utils/constant';
 import { raf, doubleRaf } from '../utils/dom/raf';
 
 // Mixins
@@ -173,7 +172,7 @@ export default createComponent({
 
   render() {
     return (
-      <div class={[bem(), { [BORDER_TOP]: this.index }]}>
+      <div class={[bem({ border: this.index })]}>
         {this.genTitle()}
         {this.genContent()}
       </div>

src/collapse-item/index.less

@@ -1,6 +1,15 @@
 @import '../style/var';
+@import '../style/mixins/hairline';
 
 .van-collapse-item {
+  position: relative;
+
+  &--border {
+    &::after {
+      .hairline-top(@cell-border-color, @padding-md, @padding-md);
+    }
+  }
+
   &__title {
     .van-cell__right-icon::before {
       transform: rotate(90deg);
@@ -8,7 +17,8 @@
     }
 
     &::after {
-      visibility: hidden;
+      right: @padding-md;
+      display: none;
     }
 
     &--expanded {
@@ -17,7 +27,7 @@
       }
 
       &::after {
-        visibility: visible;
+        display: block;
       }
     }
 

src/collapse/test/__snapshots__/demo.spec.js.snap

@@ -15,13 +15,13 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-collapse-item van-hairline--top">
+      <div class="van-collapse-item van-collapse-item--border">
         <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
       </div>
-      <div class="van-collapse-item van-hairline--top">
+      <div class="van-collapse-item van-collapse-item--border">
         <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
           <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
@@ -42,13 +42,13 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-collapse-item van-hairline--top">
+      <div class="van-collapse-item van-collapse-item--border">
         <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
       </div>
-      <div class="van-collapse-item van-hairline--top">
+      <div class="van-collapse-item van-collapse-item--border">
         <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
@@ -66,7 +66,7 @@ exports[`renders demo correctly 1`] = `
             <!----></i>
         </div>
       </div>
-      <div class="van-collapse-item van-hairline--top">
+      <div class="van-collapse-item van-collapse-item--border">
         <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon">
             <!----></i>
           <div class="van-cell__title"><span>标题2</span></div>

src/collapse/test/__snapshots__/index.spec.js.snap

@@ -8,13 +8,13 @@ exports[`disable border 1`] = `
         <!----></i>
     </div>
   </div>
-  <div class="van-collapse-item van-hairline--top">
+  <div class="van-collapse-item van-collapse-item--border">
     <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
       <div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
   </div>
-  <div class="van-collapse-item van-hairline--top">
+  <div class="van-collapse-item van-collapse-item--border">
     <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
       <div class="van-cell__title"><span>c</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
@@ -31,7 +31,7 @@ exports[`lazy render collapse content 1`] = `
         <!----></i>
     </div>
   </div>
-  <div class="van-collapse-item van-hairline--top" style="padding: 0px;">
+  <div class="van-collapse-item van-collapse-item--border" style="padding: 0px;">
     <div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
       <div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>