feat(Style): add van-safe-area-bottom util class (#9205)

* feat(Style): add van-safe-area-bottom class

* chore: update test cases

src/tabbar/Tabbar.tsx

@@ -61,7 +61,7 @@ export default defineComponent({
     const renderPlaceholder = usePlaceholder(root, bem);
 
     // enable safe-area-inset-bottom by default when fixed
-    const isUnfit = () => !(props.safeAreaInsetBottom ?? props.fixed);
+    const enableSafeArea = () => props.safeAreaInsetBottom ?? props.fixed;
 
     const renderTabbar = () => {
       const { fixed, zIndex, border } = props;
@@ -70,8 +70,11 @@ export default defineComponent({
           ref={root}
           style={getZIndexStyle(zIndex)}
           class={[
-            bem({ unfit: isUnfit(), fixed }),
-            { [BORDER_TOP_BOTTOM]: border },
+            bem({ fixed }),
+            {
+              [BORDER_TOP_BOTTOM]: border,
+              'van-safe-area-bottom': enableSafeArea(),
+            },
           ]}
         >
           {slots.default?.()}

src/tabbar/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-tabbar-height: @tabbar-height;
@@ -14,15 +13,10 @@
   width: 100%;
   height: var(--van-tabbar-height);
   background-color: var(--van-tabbar-background-color);
-  .safe-area-inset-bottom();
 
   &--fixed {
     position: fixed;
     bottom: 0;
     left: 0;
   }
-
-  &--unfit {
-    padding-bottom: 0;
-  }
 }

src/tabbar/test/__snapshots__/demo.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
@@ -42,7 +42,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
@@ -82,7 +82,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
@@ -130,7 +130,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <img src="https://img.yzcdn.cn/vant/user-active.png">
@@ -165,7 +165,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active"
          style="color: rgb(238, 10, 36);"
     >
@@ -213,7 +213,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
     <div class="van-tabbar-item van-tabbar-item--active">
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">

src/tabbar/test/__snapshots__/index.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`should render placeholder element when using placeholder prop 1`] = `
 <div class="van-tabbar__placeholder"
      style="height: 50px;"
 >
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
+  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
   </div>
 </div>
 `;