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