From a302964a6a37a59a26fc1cf5f635366549bf5b9b Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 27 Nov 2021 18:46:42 +0800
Subject: [PATCH] fix(Tabs): rename wrapper class to `van-tab__panel-wrapper`
 (#9951)

---
 .../test/__snapshots__/index.spec.ts.snap     |  4 +--
 packages/vant/src/icon/demo/index.vue         | 28 ++++++++-----------
 .../icon/test/__snapshots__/demo.spec.ts.snap |  8 +++---
 packages/vant/src/tab/Tab.tsx                 |  2 +-
 packages/vant/src/tab/demo/index.vue          |  4 +--
 .../tab/test/__snapshots__/demo.spec.ts.snap  | 16 +++++------
 .../test/__snapshots__/index.spec.tsx.snap    | 18 ++++++------
 7 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
index f9e33e7a1..cca0ccf5f 100644
--- a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
@@ -111,7 +111,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
         <div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
              class="van-swipe__track"
         >
-          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+          <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
                id="van-tab"
                role="tabpanel"
                tabindex="-1"
@@ -146,7 +146,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
               </ul>
             </div>
           </div>
-          <div class="van-swipe-item van-tab__pane-wrapper"
+          <div class="van-swipe-item van-tab__panel-wrapper"
                id="van-tab"
                role="tabpanel"
                tabindex="0"
diff --git a/packages/vant/src/icon/demo/index.vue b/packages/vant/src/icon/demo/index.vue
index 9b8b1e109..241361dde 100644
--- a/packages/vant/src/icon/demo/index.vue
+++ b/packages/vant/src/icon/demo/index.vue
@@ -93,7 +93,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
 
 <template>
   <van-tabs v-model:active="tab" sticky>
-    <van-tab :title="t('demo')">
+    <van-tab class="demo-icon-tab-panel" :title="t('demo')">
       <demo-block :title="t('basicUsage')">
         <van-row>
           <van-col span="6" @click="copy(demoIcon)">
@@ -142,7 +142,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
       </demo-block>
     </van-tab>
 
-    <van-tab :title="t('basic')">
+    <van-tab class="demo-icon-tab-panel" :title="t('basic')">
       <van-row>
         <van-col
           v-for="icon in icons.basic"
@@ -156,7 +156,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
       </van-row>
     </van-tab>
 
-    <van-tab :title="t('outline')">
+    <van-tab class="demo-icon-tab-panel" :title="t('outline')">
       <van-row>
         <van-col
           v-for="icon in icons.outline"
@@ -170,7 +170,7 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
       </van-row>
     </van-tab>
 
-    <van-tab :title="t('filled')">
+    <van-tab class="demo-icon-tab-panel" :title="t('filled')">
       <van-row>
         <van-col
           v-for="icon in icons.filled"
@@ -190,16 +190,17 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
 .demo-icon {
   font-size: 0;
 
-  &-list {
-    box-sizing: border-box;
-    min-height: calc(100vh - 65px);
-    padding-top: 10px;
-  }
-
   &-notify {
     font-size: 13px;
   }
 
+  &-tab-panel {
+    width: auto;
+    margin: 20px;
+    background-color: var(--van-background-color-light);
+    border-radius: 12px;
+  }
+
   .van-col {
     display: inline-block;
     float: none;
@@ -227,12 +228,5 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
     color: var(--van-text-color);
     font-size: 32px;
   }
-
-  .van-tab__pane {
-    width: auto;
-    margin: 20px;
-    background-color: var(--van-background-color-light);
-    border-radius: 12px;
-  }
 }
 </style>
diff --git a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
index 58aab7db6..14bdd363e 100644
--- a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
@@ -64,7 +64,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__panel"
+         class="van-tab__panel demo-icon-tab-panel"
          tabindex="0"
          aria-labelledby="van-tabs-0"
          style
@@ -143,7 +143,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__panel"
+         class="van-tab__panel demo-icon-tab-panel"
          tabindex="-1"
          aria-labelledby="van-tabs-1"
          style="display: none;"
@@ -151,7 +151,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__panel"
+         class="van-tab__panel demo-icon-tab-panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"
@@ -159,7 +159,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__panel"
+         class="van-tab__panel demo-icon-tab-panel"
          tabindex="-1"
          aria-labelledby="van-tabs-3"
          style="display: none;"
diff --git a/packages/vant/src/tab/Tab.tsx b/packages/vant/src/tab/Tab.tsx
index 3018a160d..c7623f025 100644
--- a/packages/vant/src/tab/Tab.tsx
+++ b/packages/vant/src/tab/Tab.tsx
@@ -109,7 +109,7 @@ export default defineComponent({
           <SwipeItem
             id={id}
             role="tabpanel"
-            class={bem('pane-wrapper', { inactive: !active.value })}
+            class={bem('panel-wrapper', { inactive: !active.value })}
             tabindex={active.value ? 0 : -1}
             aria-hidden={!active.value}
             aria-labelledby={label}
diff --git a/packages/vant/src/tab/demo/index.vue b/packages/vant/src/tab/demo/index.vue
index d023c140f..7153f1441 100644
--- a/packages/vant/src/tab/demo/index.vue
+++ b/packages/vant/src/tab/demo/index.vue
@@ -182,12 +182,12 @@ const beforeChange = (name: number) => {
     vertical-align: -2px;
   }
 
-  .van-tab__pane {
+  .van-tab__panel {
     padding: 24px 20px;
     background-color: var(--van-background-color-light);
   }
 
-  .van-tabs--card .van-tab__pane {
+  .van-tabs--card .van-tab__panel {
     background-color: transparent;
   }
 }
diff --git a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
index 8837d64b9..a198e5382 100644
--- a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
@@ -758,7 +758,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
              class="van-swipe__track"
         >
-          <div class="van-swipe-item van-tab__pane-wrapper"
+          <div class="van-swipe-item van-tab__panel-wrapper"
                id="van-tab"
                role="tabpanel"
                tabindex="0"
@@ -770,7 +770,7 @@ exports[`should render demo and match snapshot 1`] = `
               content of tab 1
             </div>
           </div>
-          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+          <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
                id="van-tab"
                role="tabpanel"
                tabindex="-1"
@@ -782,7 +782,7 @@ exports[`should render demo and match snapshot 1`] = `
               content of tab 2
             </div>
           </div>
-          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+          <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
                id="van-tab"
                role="tabpanel"
                tabindex="-1"
@@ -791,7 +791,7 @@ exports[`should render demo and match snapshot 1`] = `
                style="width: 100px;"
           >
           </div>
-          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+          <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
                id="van-tab"
                role="tabpanel"
                tabindex="-1"
@@ -863,7 +863,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
              class="van-swipe__track"
         >
-          <div class="van-swipe-item van-tab__pane-wrapper"
+          <div class="van-swipe-item van-tab__panel-wrapper"
                id="van-tab"
                role="tabpanel"
                tabindex="0"
@@ -875,7 +875,7 @@ exports[`should render demo and match snapshot 1`] = `
               content of tab 1
             </div>
           </div>
-          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+          <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
                id="van-tab"
                role="tabpanel"
                tabindex="-1"
@@ -887,7 +887,7 @@ exports[`should render demo and match snapshot 1`] = `
               content of tab 2
             </div>
           </div>
-          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+          <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
                id="van-tab"
                role="tabpanel"
                tabindex="-1"
@@ -896,7 +896,7 @@ exports[`should render demo and match snapshot 1`] = `
                style="width: 100px;"
           >
           </div>
-          <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+          <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
                id="van-tab"
                role="tabpanel"
                tabindex="-1"
diff --git a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
index c4d75b04f..575fa0d20 100644
--- a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
@@ -395,7 +395,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
       <div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
            class="van-swipe__track"
       >
-        <div class="van-swipe-item van-tab__pane-wrapper"
+        <div class="van-swipe-item van-tab__panel-wrapper"
              id="van-tab"
              role="tabpanel"
              tabindex="0"
@@ -407,7 +407,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
             Text
           </div>
         </div>
-        <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+        <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
              id="van-tab"
              role="tabpanel"
              tabindex="-1"
@@ -419,7 +419,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
             Text
           </div>
         </div>
-        <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+        <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
              id="van-tab"
              role="tabpanel"
              tabindex="-1"
@@ -482,7 +482,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
       <div style="transition-duration: 300ms; transform: translateX(-100px); width: 300px;"
            class="van-swipe__track"
       >
-        <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+        <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
              id="van-tab"
              role="tabpanel"
              tabindex="-1"
@@ -494,7 +494,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
             Text
           </div>
         </div>
-        <div class="van-swipe-item van-tab__pane-wrapper"
+        <div class="van-swipe-item van-tab__panel-wrapper"
              id="van-tab"
              role="tabpanel"
              tabindex="0"
@@ -506,7 +506,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
             Text
           </div>
         </div>
-        <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+        <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
              id="van-tab"
              role="tabpanel"
              tabindex="-1"
@@ -572,7 +572,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
       <div style="transition-duration: 300ms; transform: translateX(-200px); width: 300px;"
            class="van-swipe__track"
       >
-        <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+        <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
              id="van-tab"
              role="tabpanel"
              tabindex="-1"
@@ -584,7 +584,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
             Text
           </div>
         </div>
-        <div class="van-swipe-item van-tab__pane-wrapper"
+        <div class="van-swipe-item van-tab__panel-wrapper"
              id="van-tab"
              role="tabpanel"
              tabindex="0"
@@ -596,7 +596,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
             Text
           </div>
         </div>
-        <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+        <div class="van-swipe-item van-tab__panel-wrapper van-tab__panel-wrapper--inactive"
              id="van-tab"
              role="tabpanel"
              tabindex="-1"