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

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

* chore: update test cases

src/submit-bar/SubmitBar.tsx

@@ -104,7 +104,9 @@ export default defineComponent({
     };
 
     return () => (
-      <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
+      <div
+        class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
+      >
         {slots.top?.()}
         {renderTip()}
         <div class={bem('bar')}>

src/submit-bar/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-submit-bar-height: @submit-bar-height;
@@ -32,7 +31,6 @@
   width: 100%;
   background-color: var(--van-submit-bar-background-color);
   user-select: none;
-  .safe-area-inset-bottom();
 
   &__tip {
     padding: var(--van-submit-bar-tip-padding);
@@ -98,8 +96,4 @@
       background: var(--van-gradient-red);
     }
   }
-
-  &--unfit {
-    padding-bottom: 0;
-  }
 }

src/submit-bar/test/__snapshots__/demo.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div class="van-submit-bar">
+  <div class="van-submit-bar van-safe-area-bottom">
     <div class="van-submit-bar__bar">
       <div class="van-submit-bar__text">
         <span>
@@ -29,7 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-submit-bar">
+  <div class="van-submit-bar van-safe-area-bottom">
     <div class="van-submit-bar__tip">
       <i class="van-badge__wrapper van-icon van-icon-info-o van-submit-bar__tip-icon">
       </i>
@@ -64,7 +64,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-submit-bar">
+  <div class="van-submit-bar van-safe-area-bottom">
     <div class="van-submit-bar__bar">
       <div class="van-submit-bar__text">
         <span>
@@ -102,7 +102,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-submit-bar">
+  <div class="van-submit-bar van-safe-area-bottom">
     <div class="van-submit-bar__tip">
       Some tips,
       <span class="edit-address">

src/submit-bar/test/__snapshots__/index.spec.ts.snap

@@ -11,7 +11,7 @@ exports[`should change the color of submit button when using button-color prop 1
 `;
 
 exports[`should render button slot correctly 1`] = `
-<div class="van-submit-bar">
+<div class="van-submit-bar van-safe-area-bottom">
   <div class="van-submit-bar__bar">
     Custom button
   </div>
@@ -66,7 +66,7 @@ exports[`should render suffix-label correctly 1`] = `
 `;
 
 exports[`should render top slot correctly 1`] = `
-<div class="van-submit-bar">
+<div class="van-submit-bar van-safe-area-bottom">
   Custom Top
   <div class="van-submit-bar__bar">
     <button type="button"

src/submit-bar/test/index.spec.ts

@@ -87,7 +87,7 @@ test('should allow to disable safe-area-inset-bottom prop', () => {
       safeAreaInsetBottom: false,
     },
   });
-  expect(wrapper.find('.van-submit-bar--unfit').exists()).toBeTruthy();
+  expect(wrapper.find('.van-safe-area-bottom').exists()).toBeFalsy();
 });
 
 test('should change the color of submit button when using button-color prop', () => {