[new feature] GoodsAction: update style (#3967)

src/goods-action/index.js

@@ -0,0 +1,20 @@
+import { createNamespace } from '../utils';
+import { ParentMixin } from '../mixins/relation';
+
+const [createComponent, bem] = createNamespace('goods-action');
+
+export default createComponent({
+  mixins: [ParentMixin('vanGoodsAction')],
+
+  props: {
+    safeAreaInsetBottom: Boolean
+  },
+
+  render(h) {
+    return (
+      <div class={bem({ 'safe-area-inset-bottom': this.safeAreaInsetBottom })}>
+        {this.slots()}
+      </div>
+    );
+  }
+});

src/goods-action/index.less

@@ -6,6 +6,7 @@
   bottom: 0;
   left: 0;
   display: flex;
+  align-items: center;
   background-color: @goods-action-background-color;
 
   &--safe-area-inset-bottom {

src/goods-action/index.tsx

@@ -1,34 +0,0 @@
-import { createNamespace } from '../utils';
-import { inherit } from '../utils/functional';
-
-// Types
-import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
-
-export type GoodsActionProps = {
-  safeAreaInsetBottom?: boolean;
-};
-
-const [createComponent, bem] = createNamespace('goods-action');
-
-function GoodsAction(
-  h: CreateElement,
-  props: GoodsActionProps,
-  slots: DefaultSlots,
-  ctx: RenderContext
-) {
-  return (
-    <div
-      class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
-      {...inherit(ctx, true)}
-    >
-      {slots.default && slots.default()}
-    </div>
-  );
-}
-
-GoodsAction.props = {
-  safeAreaInsetBottom: Boolean
-};
-
-export default createComponent<GoodsActionProps>(GoodsAction);

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

@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
           <!---->
         </div>购物车
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
   <div>
@@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
           <!---->
         </div>店铺
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
 </div>

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button render default slot 1`] = `<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button"><span class="van-button__text">Default Content</span></button>`;
+exports[`Button render default slot 1`] = `<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--last"><span class="van-button__text">Default Content</span></button>`;
 
 exports[`Icon render default slot 1`] = `
 <div role="button" tabindex="0" class="van-goods-action-icon">

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

@@ -3,31 +3,15 @@ import Icon from '../../goods-action-icon';
 import { mount } from '../../../test/utils';
 
 test('Button click event', () => {
-  const click = jest.fn();
-  const wrapper = mount(Button, {
-    context: {
-      on: {
-        click
-      }
-    }
-  });
-
+  const wrapper = mount(Button);
   wrapper.trigger('click');
-  expect(click).toHaveBeenCalledTimes(1);
+  expect(wrapper.emitted('click').length).toEqual(1);
 });
 
 test('Icon click event', () => {
-  const click = jest.fn();
-  const wrapper = mount(Icon, {
-    context: {
-      on: {
-        click
-      }
-    }
-  });
-
+  const wrapper = mount(Icon);
   wrapper.trigger('click');
-  expect(click).toHaveBeenCalledTimes(1);
+  expect(wrapper.emitted('click').length).toEqual(1);
 });
 
 test('Button render default slot', () => {