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

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

* chore: update test cases

src/calendar/Calendar.tsx

@@ -487,7 +487,12 @@ export default defineComponent({
     };
 
     const renderFooter = () => (
-      <div class={bem('footer', { unfit: !props.safeAreaInsetBottom })}>
+      <div
+        class={[
+          bem('footer'),
+          { 'van-safe-area-bottom': props.safeAreaInsetBottom },
+        ]}
+      >
         {renderFooterButton()}
       </div>
     );

src/calendar/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-calendar-background-color: @calendar-background-color;
@@ -201,12 +200,8 @@
 
   &__footer {
     flex-shrink: 0;
-    padding: 0 var(--van-padding-md);
-    .safe-area-inset-bottom();
-
-    &--unfit {
-      padding-bottom: 0;
-    }
+    padding-left: var(--van-padding-md);
+    padding-right: var(--van-padding-md);
   }
 
   &__confirm {

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

@@ -271,7 +271,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div class="van-calendar__footer">
+    <div class="van-calendar__footer van-safe-area-bottom">
     </div>
   </div>
 </div>

src/calendar/test/__snapshots__/index.spec.ts.snap

@@ -64,7 +64,7 @@ exports[`color prop when type is range 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
             style="color: white; background: blue; border-color: blue;"
@@ -293,7 +293,7 @@ exports[`color prop when type is single 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
             style="color: white; background: blue; border-color: blue;"
@@ -526,7 +526,7 @@ exports[`formatter prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
     >
@@ -621,7 +621,7 @@ exports[`popup wrapper 2`] = `
           </div>
         </div>
       </div>
-      <div class="van-calendar__footer">
+      <div class="van-calendar__footer van-safe-area-bottom">
         <button type="button"
                 class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
         >
@@ -886,7 +886,7 @@ exports[`row-height prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
     >
@@ -1113,7 +1113,7 @@ exports[`should render title、footer、subtitle slot correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     Custom Footer
   </div>
 </div>

src/calendar/test/__snapshots__/prop.spec.ts.snap

@@ -212,7 +212,7 @@ exports[`lazy-render prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer">
+  <div class="van-calendar__footer van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
     >