feat(SubmitBar): enable safe-area-inset-bottom by default (#5956)

src/submit-bar/README.md

@@ -60,9 +60,9 @@ Use slot to add custom contents.
   @submit="onSubmit"
 >
   <van-checkbox v-model="checked">Check</van-checkbox>
-    <template #tip>
-        Some tips, <span @click="onClickEditAddress">Link</span>
-    </template>
+  <template #tip>
+    Some tips, <span @click="onClickEditAddress">Link</span>
+  </template>
 </van-submit-bar>
 ```
 
@@ -84,7 +84,7 @@ Use slot to add custom contents.
 | decimal-length | number of digits to appear after the decimal point | *number \| string* | `2` |
 | disabled | Whether to disable button | *boolean* | `false` |
 | loading | Whether to show loading icon | *boolean* | `false` |
-| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` |
 
 ### Events
 

src/submit-bar/README.zh-CN.md

@@ -60,9 +60,9 @@ Vue.use(SubmitBar);
   @submit="onSubmit"
 >
   <van-checkbox v-model="checked">全选</van-checkbox>
-    <template #tip>
-        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
-    </template>
+  <template #tip>
+    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
+  </template>
 </van-submit-bar>
 ```
 
@@ -84,7 +84,7 @@ Vue.use(SubmitBar);
 | decimal-length | 价格小数点后位数 | *number \| string* | `2` |
 | disabled | 是否禁用按钮 | *boolean* | `false` |
 | loading | 是否显示加载中的按钮 |  *boolean* | `false` |
-| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` |
+| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
 
 ### Events
 

src/submit-bar/demo/index.vue

@@ -92,6 +92,7 @@ export default {
 .demo-submit-bar {
   .van-submit-bar {
     position: relative;
+    padding-bottom: 0;
   }
 
   .edit-address {

src/submit-bar/index.less

@@ -6,6 +6,8 @@
   left: 0;
   z-index: @submit-bar-z-index;
   width: 100%;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
   background-color: @submit-bar-background-color;
   user-select: none;
 
@@ -75,8 +77,7 @@
     }
   }
 
-  &--safe-area-inset-bottom {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+  &--unfit {
+    padding-bottom: 0;
   }
 }

src/submit-bar/index.tsx

@@ -77,10 +77,7 @@ function SubmitBar(
   }
 
   return (
-    <div
-      class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
-      {...inherit(ctx)}
-    >
+    <div class={bem({ unfit: !props.safeAreaInsetBottom })} {...inherit(ctx)}>
       {slots.top && slots.top()}
       {Tip()}
       <div class={bem('bar')}>
@@ -112,7 +109,10 @@ SubmitBar.props = {
   textAlign: String,
   buttonText: String,
   suffixLabel: String,
-  safeAreaInsetBottom: Boolean,
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true,
+  },
   decimalLength: {
     type: [Number, String],
     default: 2,

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

@@ -8,6 +8,12 @@ exports[`decimal-length prop 1`] = `
 </div>
 `;
 
+exports[`disable safe-area-inset-bottom prop 1`] = `
+<div class="van-submit-bar van-submit-bar--unfit">
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"></button></div>
+</div>
+`;
+
 exports[`disable submit 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">

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

@@ -97,3 +97,14 @@ test('text-align prop', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('disable safe-area-inset-bottom prop', () => {
+  const wrapper = mount(SubmitBar, {
+    context: {
+      props: {
+        safeAreaInsetBottom: false,
+      },
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});