feat(ActionSheet): enable safe-area-inset-bottom by default (#4524)

src/action-sheet/README.md

@@ -106,7 +106,7 @@ export default {
 | lock-scroll | Whether to lock background scroll | *boolean* | `true` | - |
 | duration | Transition duration, unit second | *number* | `0.3` | 2.0.3 |
 | get-container | Return the mount node for action-sheet | *string \| () => Element* | - | - |
-| 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/action-sheet/README.zh-CN.md

@@ -120,7 +120,7 @@ export default {
 | lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - |
 | duration | 动画时长，单位秒 | *number* | `0.3` | 2.0.3 |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => Element* | - | - |
-| 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/action-sheet/demo/index.vue

@@ -1,64 +1,29 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button
-        type="primary"
-        @click="show1 = true"
-      >
-        {{ $t('buttonText') }}
-      </van-button>
-      <van-action-sheet
-        v-model="show1"
-        :actions="simpleActions"
-        safe-area-inset-bottom
-        @select="onSelect"
-      />
+      <van-button type="primary" @click="show1 = true">{{ $t('buttonText') }}</van-button>
+      <van-action-sheet v-model="show1" :actions="simpleActions" @select="onSelect" />
     </demo-block>
 
     <demo-block :title="$t('status')">
-      <van-button
-        type="primary"
-        @click="show2 = true"
-      >
-        {{ $t('buttonText') }}
-      </van-button>
-      <van-action-sheet
-        v-model="show2"
-        :actions="statusActions"
-        safe-area-inset-bottom
-        @select="onSelect"
-      />
+      <van-button type="primary" @click="show2 = true">{{ $t('buttonText') }}</van-button>
+      <van-action-sheet v-model="show2" :actions="statusActions" @select="onSelect" />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-button
-        type="primary"
-        @click="show3 = true"
-      >
-        {{ $t('buttonText') }}
-      </van-button>
+      <van-button type="primary" @click="show3 = true">{{ $t('buttonText') }}</van-button>
       <van-action-sheet
         v-model="show3"
         :actions="simpleActions"
         :cancel-text="$t('cancel')"
-        safe-area-inset-bottom
         @cancel="onCancel"
         @select="onSelect"
       />
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-button
-        type="primary"
-        @click="show4 = true"
-      >
-        {{ $t('buttonText') }}
-      </van-button>
-      <van-action-sheet
-        v-model="show4"
-        :title="$t('title')"
-        safe-area-inset-bottom
-      >
+      <van-button type="primary" @click="show4 = true">{{ $t('buttonText') }}</van-button>
+      <van-action-sheet v-model="show4" :title="$t('title')">
         <p>{{ $t('content') }}</p>
       </van-action-sheet>
     </demo-block>
@@ -130,7 +95,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-action-sheet {
   background-color: @white;

src/action-sheet/index.tsx

@@ -148,7 +148,10 @@ ActionSheet.props = {
   cancelText: String,
   getContainer: [String, Function],
   closeOnClickAction: Boolean,
-  safeAreaInsetBottom: Boolean,
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true
+  },
   overlay: {
     type: Boolean,
     default: true

src/action-sheet/test/__snapshots__/demo.spec.js.snap

@@ -2,24 +2,16 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      弹出菜单
-    </span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
     <!---->
   </div>
 </div>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-popup van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
+<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
   <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
   <div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
   <div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
@@ -13,13 +13,13 @@ exports[`callback events 1`] = `
 `;
 
 exports[`color option 1`] = `
-<div class="van-popup van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
+<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
   <div class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></div>
 </div>
 `;
 
 exports[`disable lazy-render 1`] = `
-<div class="van-popup van-popup--bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
+<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
   <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
   <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
   <div class="van-action-sheet__cancel">Cancel</div>
@@ -29,7 +29,7 @@ exports[`disable lazy-render 1`] = `
 exports[`render title and default slot 1`] = ``;
 
 exports[`round prop 1`] = `
-<div class="van-popup van-popup--round van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
   <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
 </div>
 `;