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

src/goods-action/demo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <demo-section>
     <demo-block :title="t('basicUsage')">
-      <van-goods-action :safe-area-inset-bottom="false">
+      <van-goods-action>
         <van-goods-action-icon
           icon="chat-o"
           :text="t('icon1')"
@@ -26,7 +26,7 @@
     </demo-block>
 
     <demo-block :title="t('iconBadge')">
-      <van-goods-action :safe-area-inset-bottom="false">
+      <van-goods-action>
         <van-goods-action-icon icon="chat-o" dot :text="t('icon1')" />
         <van-goods-action-icon icon="cart-o" badge="5" :text="t('icon2')" />
         <van-goods-action-icon icon="shop-o" badge="12" :text="t('icon3')" />
@@ -36,7 +36,7 @@
     </demo-block>
 
     <demo-block v-if="!isWeapp" :title="t('customIconColor')">
-      <van-goods-action :safe-area-inset-bottom="false">
+      <van-goods-action>
         <van-goods-action-icon
           icon="chat-o"
           :text="t('icon1')"
@@ -54,7 +54,7 @@
     </demo-block>
 
     <demo-block :title="t('customButtonColor')">
-      <van-goods-action :safe-area-inset-bottom="false">
+      <van-goods-action>
         <van-goods-action-icon icon="chat-o" :text="t('icon1')" />
         <van-goods-action-icon icon="cart-o" :text="t('icon2')" />
         <van-goods-action-button
@@ -117,6 +117,7 @@ export default {
 .demo-goods-action {
   .van-goods-action {
     position: relative;
+    padding-bottom: 0;
   }
 }
 </style>

src/goods-action/index.js

@@ -15,7 +15,7 @@ export default createComponent({
 
   render() {
     return (
-      <div class={bem({ 'safe-area-inset-bottom': this.safeAreaInsetBottom })}>
+      <div class={bem({ unfit: !this.safeAreaInsetBottom })}>
         {this.slots()}
       </div>
     );

src/goods-action/index.less

@@ -9,10 +9,11 @@
   align-items: center;
   box-sizing: content-box;
   height: @goods-action-height;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
   background-color: @goods-action-background-color;
 
-  &--safe-area-inset-bottom {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+  &--unfit {
+    padding-bottom: 0;
   }
 }

src/goods-action/test/__snapshots__/index.spec.js.snap

@@ -31,3 +31,5 @@ exports[`Icon render icon slot with info 1`] = `
   </div>Text
 </div>
 `;
+
+exports[`disable safe-area-inset-bottom prop 1`] = `<div class="van-goods-action van-goods-action--unfit"></div>`;

src/goods-action/test/index.spec.js

@@ -1,3 +1,4 @@
+import GoodsAction from '..';
 import Button from '../../goods-action-button';
 import Icon from '../../goods-action-icon';
 import { mount } from '../../../test';
@@ -84,3 +85,13 @@ test('Icon render icon slot with dot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('disable safe-area-inset-bottom prop', () => {
+  const wrapper = mount(GoodsAction, {
+    propsData: {
+      safeAreaInsetBottom: false,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

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();
+});