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

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

* chore: update test cases

src/action-bar/ActionBar.tsx

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

src/action-bar/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-action-bar-background-color: @action-bar-background-color;
@@ -16,9 +15,4 @@
   box-sizing: content-box;
   height: var(--van-action-bar-height);
   background-color: var(--van-action-bar-background-color);
-  .safe-area-inset-bottom();
-
-  &--unfit {
-    padding-bottom: 0;
-  }
 }

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

@@ -2,7 +2,7 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div class="van-action-bar">
+  <div class="van-action-bar van-safe-area-bottom">
     <div role="button"
          class="van-action-bar-icon"
          tabindex="0"
@@ -39,7 +39,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-action-bar">
+  <div class="van-action-bar van-safe-area-bottom">
     <div role="button"
          class="van-action-bar-icon"
          tabindex="0"
@@ -93,7 +93,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-action-bar">
+  <div class="van-action-bar van-safe-area-bottom">
     <div role="button"
          class="van-action-bar-icon"
          tabindex="0"
@@ -143,7 +143,7 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-action-bar">
+  <div class="van-action-bar van-safe-area-bottom">
     <div role="button"
          class="van-action-bar-icon"
          tabindex="0"

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should allow to disable safe-area-inset-bottom prop 1`] = `
-<div class="van-action-bar van-action-bar--unfit">
+<div class="van-action-bar">
 </div>
 `;