From 75e832f05a9000cdc6ac4dd703b7fed3c27b4c3e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 31 Mar 2020 07:23:23 +0800
Subject: [PATCH] feat(SubmitBar): enable safe-area-inset-bottom by default
 (#5956)

---
 src/goods-action/demo/index.vue                       |  9 +++++----
 src/goods-action/index.js                             |  2 +-
 src/goods-action/index.less                           |  7 ++++---
 .../test/__snapshots__/index.spec.js.snap             |  2 ++
 src/goods-action/test/index.spec.js                   | 11 +++++++++++
 src/submit-bar/README.md                              |  8 ++++----
 src/submit-bar/README.zh-CN.md                        |  8 ++++----
 src/submit-bar/demo/index.vue                         |  1 +
 src/submit-bar/index.less                             |  7 ++++---
 src/submit-bar/index.tsx                              | 10 +++++-----
 src/submit-bar/test/__snapshots__/index.spec.js.snap  |  6 ++++++
 src/submit-bar/test/index.spec.js                     | 11 +++++++++++
 12 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/src/goods-action/demo/index.vue b/src/goods-action/demo/index.vue
index 36001d5c4..0b5f9f310 100644
--- a/src/goods-action/demo/index.vue
+++ b/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>
diff --git a/src/goods-action/index.js b/src/goods-action/index.js
index 1ea0a8a37..a5ec63f97 100644
--- a/src/goods-action/index.js
+++ b/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>
     );
diff --git a/src/goods-action/index.less b/src/goods-action/index.less
index c1ba67494..5f06c0846 100644
--- a/src/goods-action/index.less
+++ b/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;
   }
 }
diff --git a/src/goods-action/test/__snapshots__/index.spec.js.snap b/src/goods-action/test/__snapshots__/index.spec.js.snap
index 0a7960e23..c6108e99b 100644
--- a/src/goods-action/test/__snapshots__/index.spec.js.snap
+++ b/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>`;
diff --git a/src/goods-action/test/index.spec.js b/src/goods-action/test/index.spec.js
index ae6554558..c96de3d11 100644
--- a/src/goods-action/test/index.spec.js
+++ b/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();
+});
diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md
index bef4ec769..f7ef3de06 100644
--- a/src/submit-bar/README.md
+++ b/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
 
diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md
index 8bc1ff323..6af5701ae 100644
--- a/src/submit-bar/README.zh-CN.md
+++ b/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
 
diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue
index 82e9a70d8..cfeb247b0 100644
--- a/src/submit-bar/demo/index.vue
+++ b/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 {
diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less
index f9818d144..eb3f5170a 100644
--- a/src/submit-bar/index.less
+++ b/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;
   }
 }
diff --git a/src/submit-bar/index.tsx b/src/submit-bar/index.tsx
index 7aed0abdd..06b6ffc5b 100644
--- a/src/submit-bar/index.tsx
+++ b/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,
diff --git a/src/submit-bar/test/__snapshots__/index.spec.js.snap b/src/submit-bar/test/__snapshots__/index.spec.js.snap
index 113fba541..7c24b7229 100644
--- a/src/submit-bar/test/__snapshots__/index.spec.js.snap
+++ b/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">
diff --git a/src/submit-bar/test/index.spec.js b/src/submit-bar/test/index.spec.js
index de67bee22..06a8c36a1 100644
--- a/src/submit-bar/test/index.spec.js
+++ b/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();
+});