From fc825d7a33219d95e0a7e43ad553a722c220ceef Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 20 Aug 2020 11:54:04 +0800
Subject: [PATCH] breaking change: rename GoodsAction to ActionBar

---
 components.js                                 |  6 +-
 docs/markdown/changelog-v3.zh-CN.md           |  8 +-
 .../index.js                                  |  4 +-
 .../index.less                                |  8 +-
 .../index.js                                  |  4 +-
 src/action-bar-icon/index.less                | 27 ++++++
 src/{goods-action => action-bar}/README.md    | 72 +++++++--------
 .../README.zh-CN.md                           | 82 ++++++++---------
 .../demo/index.vue                            | 60 ++++++------
 src/{goods-action => action-bar}/index.js     |  4 +-
 src/{goods-action => action-bar}/index.less   |  6 +-
 .../test/__snapshots__/demo.spec.js.snap      | 91 +++++++++++++++++++
 .../test/__snapshots__/index.spec.js.snap     | 39 ++++++++
 .../test/demo.spec.js                         |  0
 .../test/index.spec.js                        |  8 +-
 src/dialog/Dialog.js                          | 12 +--
 src/goods-action-icon/index.less              | 27 ------
 .../test/__snapshots__/demo.spec.js.snap      | 91 -------------------
 .../test/__snapshots__/index.spec.js.snap     | 39 --------
 src/style/var.less                            | 26 +++---
 src/submit-bar/index.less                     |  2 +-
 vant.config.js                                | 16 ++--
 22 files changed, 315 insertions(+), 317 deletions(-)
 rename src/{goods-action-button => action-bar-button}/index.js (91%)
 rename src/{goods-action-button => action-bar-button}/index.less (75%)
 rename src/{goods-action-icon => action-bar-icon}/index.js (91%)
 create mode 100644 src/action-bar-icon/index.less
 rename src/{goods-action => action-bar}/README.md (56%)
 rename src/{goods-action => action-bar}/README.zh-CN.md (53%)
 rename src/{goods-action => action-bar}/demo/index.vue (60%)
 rename src/{goods-action => action-bar}/index.js (77%)
 rename src/{goods-action => action-bar}/index.less (73%)
 create mode 100644 src/action-bar/test/__snapshots__/demo.spec.js.snap
 create mode 100644 src/action-bar/test/__snapshots__/index.spec.js.snap
 rename src/{goods-action => action-bar}/test/demo.spec.js (100%)
 rename src/{goods-action => action-bar}/test/index.spec.js (91%)
 delete mode 100644 src/goods-action-icon/index.less
 delete mode 100644 src/goods-action/test/__snapshots__/demo.spec.js.snap
 delete mode 100644 src/goods-action/test/__snapshots__/index.spec.js.snap

diff --git a/components.js b/components.js
index 55da3420b..6b040c175 100644
--- a/components.js
+++ b/components.js
@@ -77,9 +77,9 @@ module.exports = [
   'coupon-list',
   'coupon-cell',
   'submit-bar',
-  'goods-action',
-  'goods-action-icon',
-  'goods-action-button',
+  'action-bar',
+  'action-bar-icon',
+  'action-bar-button',
   'address-edit',
   'form',
 ];
diff --git a/docs/markdown/changelog-v3.zh-CN.md b/docs/markdown/changelog-v3.zh-CN.md
index d151dda9b..0015ee053 100644
--- a/docs/markdown/changelog-v3.zh-CN.md
+++ b/docs/markdown/changelog-v3.zh-CN.md
@@ -72,6 +72,12 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - TreeSelect: `active-id.sync` 重命名为 `v-model:active-id`
 - TreeSelect: `main-active-index.sync` 重命名为 `v-model:main-active-index`
 
+##### 组件命名调整
+
+- GoodsAction：重命名为 `ActionBar`
+- GoodsActionIcon：重命名为 `ActionBarIcon`
+- GoodsActionButton：重命名为 `ActionBarButton`
+
 ##### API 命名调整
 
 以下改动是为了规范 API 命名：
@@ -82,7 +88,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - TreeSelect: `navclick` 事件重命名为 `click-nav`
 - TreeSelect: `itemclick` 事件重命名为 `click-item`
 
-##### 重命名徽标属性
+##### 徽标属性命名调整
 
 在之前的版本中，我们通过 info 属性来展示图标右上角的徽标信息，为了更符合社区的命名习惯，我们将这个属性重命名为 badge，影响以下组件：
 
diff --git a/src/goods-action-button/index.js b/src/action-bar-button/index.js
similarity index 91%
rename from src/goods-action-button/index.js
rename to src/action-bar-button/index.js
index fbb3d63d6..77d819131 100644
--- a/src/goods-action-button/index.js
+++ b/src/action-bar-button/index.js
@@ -3,10 +3,10 @@ import { route, routeProps } from '../utils/router';
 import { ChildrenMixin } from '../mixins/relation';
 import Button from '../button';
 
-const [createComponent, bem] = createNamespace('goods-action-button');
+const [createComponent, bem] = createNamespace('action-bar-button');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanGoodsAction')],
+  mixins: [ChildrenMixin('vanActionBar')],
 
   props: {
     ...routeProps,
diff --git a/src/goods-action-button/index.less b/src/action-bar-button/index.less
similarity index 75%
rename from src/goods-action-button/index.less
rename to src/action-bar-button/index.less
index 28a2dba31..32bb62f38 100644
--- a/src/goods-action-button/index.less
+++ b/src/action-bar-button/index.less
@@ -1,8 +1,8 @@
 @import '../style/var';
 
-.van-goods-action-button {
+.van-action-bar-button {
   flex: 1;
-  height: @goods-action-button-height;
+  height: @action-bar-button-height;
   font-weight: @font-weight-bold;
   font-size: @font-size-md;
   border: none;
@@ -21,11 +21,11 @@
   }
 
   &--warning {
-    background: @goods-action-button-warning-color;
+    background: @action-bar-button-warning-color;
   }
 
   &--danger {
-    background: @goods-action-button-danger-color;
+    background: @action-bar-button-danger-color;
   }
 
   @media (max-width: 321px) {
diff --git a/src/goods-action-icon/index.js b/src/action-bar-icon/index.js
similarity index 91%
rename from src/goods-action-icon/index.js
rename to src/action-bar-icon/index.js
index dff2835e0..7964f429d 100644
--- a/src/goods-action-icon/index.js
+++ b/src/action-bar-icon/index.js
@@ -4,10 +4,10 @@ import { ChildrenMixin } from '../mixins/relation';
 import Info from '../info';
 import Icon from '../icon';
 
-const [createComponent, bem] = createNamespace('goods-action-icon');
+const [createComponent, bem] = createNamespace('action-bar-icon');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanGoodsAction')],
+  mixins: [ChildrenMixin('vanActionBar')],
 
   props: {
     ...routeProps,
diff --git a/src/action-bar-icon/index.less b/src/action-bar-icon/index.less
new file mode 100644
index 000000000..0cb001cc6
--- /dev/null
+++ b/src/action-bar-icon/index.less
@@ -0,0 +1,27 @@
+@import '../style/var';
+
+.van-action-bar-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: @action-bar-icon-width;
+  height: @action-bar-icon-height;
+  color: @action-bar-icon-text-color;
+  font-size: @action-bar-icon-font-size;
+  line-height: 1;
+  text-align: center;
+  background-color: @white;
+  cursor: pointer;
+
+  &:active {
+    background-color: @action-bar-icon-active-color;
+  }
+
+  &__icon {
+    position: relative;
+    width: 1em;
+    margin: 0 auto 5px;
+    color: @action-bar-icon-color;
+    font-size: @action-bar-icon-size;
+  }
+}
diff --git a/src/goods-action/README.md b/src/action-bar/README.md
similarity index 56%
rename from src/goods-action/README.md
rename to src/action-bar/README.md
index fe3c623cf..38fd7db4b 100644
--- a/src/goods-action/README.md
+++ b/src/action-bar/README.md
@@ -1,14 +1,14 @@
-# GoodsAction
+# ActionBar
 
 ### Install
 
 ```js
 import Vue from 'vue';
-import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
+import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
 
-Vue.use(GoodsAction);
-Vue.use(GoodsActionButton);
-Vue.use(GoodsActionIcon);
+Vue.use(ActionBar);
+Vue.use(ActionBarButton);
+Vue.use(ActionBarIcon);
 ```
 
 ## Usage
@@ -16,12 +16,12 @@ Vue.use(GoodsActionIcon);
 ### Basic Usage
 
 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
-  <van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
-  <van-goods-action-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
-  <van-goods-action-button type="danger" text="Button" @click="onClickButton" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
+  <van-action-bar-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
+  <van-action-bar-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
+  <van-action-bar-button type="danger" text="Button" @click="onClickButton" />
+</van-action-bar>
 ```
 
 ```js
@@ -44,47 +44,47 @@ export default {
 Use `badge` prop to show badge in icon
 
 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" dot />
-  <van-goods-action-icon icon="cart-o" text="Icon2" badge="5" />
-  <van-goods-action-icon icon="shop-o" text="Icon3" badge="12" />
-  <van-goods-action-button type="warning" text="Button" />
-  <van-goods-action-button type="danger" text="Button" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="Icon1" dot />
+  <van-action-bar-icon icon="cart-o" text="Icon2" badge="5" />
+  <van-action-bar-icon icon="shop-o" text="Icon3" badge="12" />
+  <van-action-bar-button type="warning" text="Button" />
+  <van-action-bar-button type="danger" text="Button" />
+</van-action-bar>
 ```
 
 ### Custom Icon Color
 
 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
-  <van-goods-action-icon icon="cart-o" text="Icon2" />
-  <van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
-  <van-goods-action-button type="warning" text="Button" />
-  <van-goods-action-button type="danger" text="Button" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="Icon1" color="#07c160" />
+  <van-action-bar-icon icon="cart-o" text="Icon2" />
+  <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />
+  <van-action-bar-button type="warning" text="Button" />
+  <van-action-bar-button type="danger" text="Button" />
+</van-action-bar>
 ```
 
 ### Custom Button Color
 
 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" />
-  <van-goods-action-icon icon="shop-o" text="Icon2" />
-  <van-goods-action-button color="#be99ff" type="warning" text="Button" />
-  <van-goods-action-button color="#7232dd" type="danger" text="Button" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="Icon1" />
+  <van-action-bar-icon icon="shop-o" text="Icon2" />
+  <van-action-bar-button color="#be99ff" type="warning" text="Button" />
+  <van-action-bar-button color="#7232dd" type="danger" text="Button" />
+</van-action-bar>
 ```
 
 ## API
 
-### GoodsAction Props
+### ActionBar Props
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
 
-### GoodsActionIcon Props
+### ActionBarIcon Props
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -98,7 +98,7 @@ Use `badge` prop to show badge in icon
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
 
-### GoodsActionButton Props
+### ActionBarButton Props
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -113,14 +113,14 @@ Use `badge` prop to show badge in icon
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
 
-### GoodsActionIcon Slots
+### ActionBarIcon Slots
 
 | Name    | Description |
 | ------- | ----------- |
 | default | Text        |
 | icon    | Custom icon |
 
-### GoodsActionButton Slots
+### ActionBarButton Slots
 
 | Name    | Description    |
 | ------- | -------------- |
diff --git a/src/goods-action/README.zh-CN.md b/src/action-bar/README.zh-CN.md
similarity index 53%
rename from src/goods-action/README.zh-CN.md
rename to src/action-bar/README.zh-CN.md
index 5740dc931..6828f658f 100644
--- a/src/goods-action/README.zh-CN.md
+++ b/src/action-bar/README.zh-CN.md
@@ -1,14 +1,14 @@
-# GoodsAction 商品导航
+# ActionBar 动作栏
 
 ### 引入
 
 ```js
 import Vue from 'vue';
-import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
+import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
 
-Vue.use(GoodsAction);
-Vue.use(GoodsActionButton);
-Vue.use(GoodsActionIcon);
+Vue.use(ActionBar);
+Vue.use(ActionBarButton);
+Vue.use(ActionBarIcon);
 ```
 
 ## 代码演示
@@ -16,16 +16,12 @@ Vue.use(GoodsActionIcon);
 ### 基础用法
 
 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
-  <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
-  <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
-  <van-goods-action-button
-    type="danger"
-    text="立即购买"
-    @click="onClickButton"
-  />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
+  <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
+  <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
+  <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
+</van-action-bar>
 ```
 
 ```js
@@ -45,54 +41,54 @@ export default {
 
 ### 徽标提示
 
-在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
+在 ActionBarIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
 
 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" dot />
-  <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
-  <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
-  <van-goods-action-button type="warning" text="加入购物车" />
-  <van-goods-action-button type="danger" text="立即购买" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" dot />
+  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
+  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
+  <van-action-bar-button type="warning" text="加入购物车" />
+  <van-action-bar-button type="danger" text="立即购买" />
+</van-action-bar>
 ```
 
 ### 自定义图标颜色
 
-通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色
+通过 ActionBarIcon 的`color`属性可以自定义图标的颜色
 
 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
-  <van-goods-action-icon icon="cart-o" text="购物车" />
-  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
-  <van-goods-action-button type="warning" text="加入购物车" />
-  <van-goods-action-button type="danger" text="立即购买" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" color="#07c160" />
+  <van-action-bar-icon icon="cart-o" text="购物车" />
+  <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
+  <van-action-bar-button type="warning" text="加入购物车" />
+  <van-action-bar-button type="danger" text="立即购买" />
+</van-action-bar>
 ```
 
 ### 自定义按钮颜色
 
-通过 GoodsActionButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
+通过 ActionBarButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
 
 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" />
-  <van-goods-action-icon icon="shop-o" text="店铺" />
-  <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
-  <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" />
+  <van-action-bar-icon icon="shop-o" text="店铺" />
+  <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" />
+  <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
+</van-action-bar>
 ```
 
 ## API
 
-### GoodsAction Props
+### ActionBar Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 
-### GoodsActionIcon Props
+### ActionBarIcon Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -107,7 +103,7 @@ export default {
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
 
-### GoodsActionButton Props
+### ActionBarButton Props
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -121,14 +117,14 @@ export default {
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
 
-### GoodsActionIcon Slots
+### ActionBarIcon Slots
 
 | 名称    | 说明       |
 | ------- | ---------- |
 | default | 文本内容   |
 | icon    | 自定义图标 |
 
-### GoodsActionButton Slots
+### ActionBarButton Slots
 
 | 名称    | 说明         |
 | ------- | ------------ |
diff --git a/src/goods-action/demo/index.vue b/src/action-bar/demo/index.vue
similarity index 60%
rename from src/goods-action/demo/index.vue
rename to src/action-bar/demo/index.vue
index 85ff7f0cc..96cd4ab28 100644
--- a/src/goods-action/demo/index.vue
+++ b/src/action-bar/demo/index.vue
@@ -1,73 +1,69 @@
 <template>
   <demo-section>
     <demo-block :title="t('basicUsage')">
-      <van-goods-action>
-        <van-goods-action-icon
+      <van-action-bar>
+        <van-action-bar-icon
           icon="chat-o"
           :text="t('icon1')"
           @click="onClickIcon"
         />
-        <van-goods-action-icon
+        <van-action-bar-icon
           icon="cart-o"
           :text="t('icon2')"
           @click="onClickIcon"
         />
-        <van-goods-action-icon
+        <van-action-bar-icon
           icon="shop-o"
           :text="t('icon3')"
           @click="onClickIcon"
         />
-        <van-goods-action-button
+        <van-action-bar-button
           type="danger"
           :text="t('button2')"
           @click="onClickButton"
         />
-      </van-goods-action>
+      </van-action-bar>
     </demo-block>
 
     <demo-block :title="t('iconBadge')">
-      <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')" />
-        <van-goods-action-button type="warning" :text="t('button1')" />
-        <van-goods-action-button type="danger" :text="t('button2')" />
-      </van-goods-action>
+      <van-action-bar>
+        <van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
+        <van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
+        <van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
+        <van-action-bar-button type="warning" :text="t('button1')" />
+        <van-action-bar-button type="danger" :text="t('button2')" />
+      </van-action-bar>
     </demo-block>
 
     <demo-block v-if="!isWeapp" :title="t('customIconColor')">
-      <van-goods-action>
-        <van-goods-action-icon
-          icon="chat-o"
-          :text="t('icon1')"
-          color="#07c160"
-        />
-        <van-goods-action-icon icon="cart-o" :text="t('icon2')" />
-        <van-goods-action-icon
+      <van-action-bar>
+        <van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
+        <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
+        <van-action-bar-icon
           icon="star"
           :text="t('collected')"
           color="#ff5000"
         />
-        <van-goods-action-button type="warning" :text="t('button1')" />
-        <van-goods-action-button type="danger" :text="t('button2')" />
-      </van-goods-action>
+        <van-action-bar-button type="warning" :text="t('button1')" />
+        <van-action-bar-button type="danger" :text="t('button2')" />
+      </van-action-bar>
     </demo-block>
 
     <demo-block :title="t('customButtonColor')">
-      <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
+      <van-action-bar>
+        <van-action-bar-icon icon="chat-o" :text="t('icon1')" />
+        <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
+        <van-action-bar-button
           color="#be99ff"
           type="warning"
           :text="t('button1')"
         />
-        <van-goods-action-button
+        <van-action-bar-button
           color="#7232dd"
           type="danger"
           :text="t('button2')"
         />
-      </van-goods-action>
+      </van-action-bar>
     </demo-block>
   </demo-section>
 </template>
@@ -114,8 +110,8 @@ export default {
 </script>
 
 <style lang="less">
-.demo-goods-action {
-  .van-goods-action {
+.demo-action-bar {
+  .van-action-bar {
     position: relative;
     padding-bottom: 0;
   }
diff --git a/src/goods-action/index.js b/src/action-bar/index.js
similarity index 77%
rename from src/goods-action/index.js
rename to src/action-bar/index.js
index aeca65893..172215075 100644
--- a/src/goods-action/index.js
+++ b/src/action-bar/index.js
@@ -1,10 +1,10 @@
 import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
 
-const [createComponent, bem] = createNamespace('goods-action');
+const [createComponent, bem] = createNamespace('action-bar');
 
 export default createComponent({
-  mixins: [ParentMixin('vanGoodsAction')],
+  mixins: [ParentMixin('vanActionBar')],
 
   props: {
     safeAreaInsetBottom: {
diff --git a/src/goods-action/index.less b/src/action-bar/index.less
similarity index 73%
rename from src/goods-action/index.less
rename to src/action-bar/index.less
index 5f06c0846..48cd61d64 100644
--- a/src/goods-action/index.less
+++ b/src/action-bar/index.less
@@ -1,6 +1,6 @@
 @import '../style/var';
 
-.van-goods-action {
+.van-action-bar {
   position: fixed;
   right: 0;
   bottom: 0;
@@ -8,10 +8,10 @@
   display: flex;
   align-items: center;
   box-sizing: content-box;
-  height: @goods-action-height;
+  height: @action-bar-height;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
-  background-color: @goods-action-background-color;
+  background-color: @action-bar-background-color;
 
   &--unfit {
     padding-bottom: 0;
diff --git a/src/action-bar/test/__snapshots__/demo.spec.js.snap b/src/action-bar/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..3b49bfc00
--- /dev/null
+++ b/src/action-bar/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
+          <!---->
+        </div>店铺
+      </div> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <div class="van-info van-info--dot"></div>
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <div class="van-info">5</div>
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
+          <div class="van-info">12</div>
+        </div>店铺
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon" style="color: rgb(7, 193, 96);">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-star van-action-bar-icon__icon" style="color: rgb(255, 80, 0);">
+          <!---->
+        </div>已收藏
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/action-bar/test/__snapshots__/index.spec.js.snap b/src/action-bar/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..f96684d67
--- /dev/null
+++ b/src/action-bar/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button render default slot 1`] = `
+<button class="van-button van-button--default van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last">
+  <div class="van-button__content"><span class="van-button__text">Default Content</span></div>
+</button>
+`;
+
+exports[`Icon render default slot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-icon van-icon-undefined van-action-bar-icon__icon">
+    <!---->
+  </div>Default Content
+</div>
+`;
+
+exports[`Icon render icon slot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon
+    <!---->
+  </div>Text
+</div>
+`;
+
+exports[`Icon render icon slot with dot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-info van-info--dot"></div>
+  </div>Text
+</div>
+`;
+
+exports[`Icon render icon slot with info 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-info">1</div>
+  </div>Text
+</div>
+`;
+
+exports[`disable safe-area-inset-bottom prop 1`] = `<div class="van-action-bar van-action-bar--unfit"></div>`;
diff --git a/src/goods-action/test/demo.spec.js b/src/action-bar/test/demo.spec.js
similarity index 100%
rename from src/goods-action/test/demo.spec.js
rename to src/action-bar/test/demo.spec.js
diff --git a/src/goods-action/test/index.spec.js b/src/action-bar/test/index.spec.js
similarity index 91%
rename from src/goods-action/test/index.spec.js
rename to src/action-bar/test/index.spec.js
index c96de3d11..e49915da8 100644
--- a/src/goods-action/test/index.spec.js
+++ b/src/action-bar/test/index.spec.js
@@ -1,6 +1,6 @@
-import GoodsAction from '..';
-import Button from '../../goods-action-button';
-import Icon from '../../goods-action-icon';
+import ActionBar from '..';
+import Button from '../../action-bar-button';
+import Icon from '../../action-bar-icon';
 import { mount } from '../../../test';
 
 test('Button click event', () => {
@@ -87,7 +87,7 @@ test('Icon render icon slot with dot', () => {
 });
 
 test('disable safe-area-inset-bottom prop', () => {
-  const wrapper = mount(GoodsAction, {
+  const wrapper = mount(ActionBar, {
     propsData: {
       safeAreaInsetBottom: false,
     },
diff --git a/src/dialog/Dialog.js b/src/dialog/Dialog.js
index 4a04abd07..501136e20 100644
--- a/src/dialog/Dialog.js
+++ b/src/dialog/Dialog.js
@@ -2,8 +2,8 @@ import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import Popup from '../popup';
 import Button from '../button';
-import GoodsAction from '../goods-action';
-import GoodsActionButton from '../goods-action-button';
+import ActionBar from '../action-bar';
+import ActionBarButton from '../action-bar-button';
 
 const [createComponent, bem, t] = createNamespace('dialog');
 
@@ -107,9 +107,9 @@ export default createComponent({
 
     genRoundButtons() {
       return (
-        <GoodsAction class={bem('footer')}>
+        <ActionBar class={bem('footer')}>
           {this.showCancelButton && (
-            <GoodsActionButton
+            <ActionBarButton
               size="large"
               type="warning"
               text={this.cancelButtonText || t('cancel')}
@@ -122,7 +122,7 @@ export default createComponent({
             />
           )}
           {this.showConfirmButton && (
-            <GoodsActionButton
+            <ActionBarButton
               size="large"
               type="danger"
               text={this.confirmButtonText || t('confirm')}
@@ -134,7 +134,7 @@ export default createComponent({
               }}
             />
           )}
-        </GoodsAction>
+        </ActionBar>
       );
     },
 
diff --git a/src/goods-action-icon/index.less b/src/goods-action-icon/index.less
deleted file mode 100644
index d331e731a..000000000
--- a/src/goods-action-icon/index.less
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '../style/var';
-
-.van-goods-action-icon {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: @goods-action-icon-width;
-  height: @goods-action-icon-height;
-  color: @goods-action-icon-text-color;
-  font-size: @goods-action-icon-font-size;
-  line-height: 1;
-  text-align: center;
-  background-color: @white;
-  cursor: pointer;
-
-  &:active {
-    background-color: @goods-action-icon-active-color;
-  }
-
-  &__icon {
-    position: relative;
-    width: 1em;
-    margin: 0 auto 5px;
-    color: @goods-action-icon-color;
-    font-size: @goods-action-icon-size;
-  }
-}
diff --git a/src/goods-action/test/__snapshots__/demo.spec.js.snap b/src/goods-action/test/__snapshots__/demo.spec.js.snap
deleted file mode 100644
index e8414e63f..000000000
--- a/src/goods-action/test/__snapshots__/demo.spec.js.snap
+++ /dev/null
@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-goods-action">
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
-          <!---->
-        </div>客服
-      </div>
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
-          <!---->
-        </div>购物车
-      </div>
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
-          <!---->
-        </div>店铺
-      </div> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--last van-goods-action-button--danger">
-        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div class="van-goods-action">
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
-          <div class="van-info van-info--dot"></div>
-        </div>客服
-      </div>
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
-          <div class="van-info">5</div>
-        </div>购物车
-      </div>
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
-          <div class="van-info">12</div>
-        </div>店铺
-      </div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
-        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
-        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div class="van-goods-action">
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(7, 193, 96);">
-          <!---->
-        </div>客服
-      </div>
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
-          <!---->
-        </div>购物车
-      </div>
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-star van-goods-action-icon__icon" style="color: rgb(255, 80, 0);">
-          <!---->
-        </div>已收藏
-      </div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
-        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
-        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
-      </button>
-    </div>
-  </div>
-  <div>
-    <div class="van-goods-action">
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
-          <!---->
-        </div>客服
-      </div>
-      <div role="button" tabindex="0" class="van-goods-action-icon">
-        <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-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
-        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
-        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
-      </button>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/goods-action/test/__snapshots__/index.spec.js.snap b/src/goods-action/test/__snapshots__/index.spec.js.snap
deleted file mode 100644
index ccf848e36..000000000
--- a/src/goods-action/test/__snapshots__/index.spec.js.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button render default slot 1`] = `
-<button class="van-button van-button--default van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--last">
-  <div class="van-button__content"><span class="van-button__text">Default Content</span></div>
-</button>
-`;
-
-exports[`Icon render default slot 1`] = `
-<div role="button" tabindex="0" class="van-goods-action-icon">
-  <div class="van-icon van-icon-undefined van-goods-action-icon__icon">
-    <!---->
-  </div>Default Content
-</div>
-`;
-
-exports[`Icon render icon slot 1`] = `
-<div role="button" tabindex="0" class="van-goods-action-icon">
-  <div class="van-goods-action-icon__icon">Custom Icon
-    <!---->
-  </div>Text
-</div>
-`;
-
-exports[`Icon render icon slot with dot 1`] = `
-<div role="button" tabindex="0" class="van-goods-action-icon">
-  <div class="van-goods-action-icon__icon">Custom Icon<div class="van-info van-info--dot"></div>
-  </div>Text
-</div>
-`;
-
-exports[`Icon render icon slot with info 1`] = `
-<div role="button" tabindex="0" class="van-goods-action-icon">
-  <div class="van-goods-action-icon__icon">Custom Icon<div class="van-info">1</div>
-  </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/style/var.less b/src/style/var.less
index a40138923..b66033175 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -378,19 +378,19 @@
 @grid-item-text-color: @gray-7;
 @grid-item-text-font-size: @font-size-sm;
 
-// GoodsAction
-@goods-action-background-color: @white;
-@goods-action-height: 50px;
-@goods-action-icon-width: 48px;
-@goods-action-icon-height: 100%;
-@goods-action-icon-color: @text-color;
-@goods-action-icon-size: 18px;
-@goods-action-icon-font-size: @font-size-xs;
-@goods-action-icon-active-color: @active-color;
-@goods-action-icon-text-color: @gray-7;
-@goods-action-button-height: 40px;
-@goods-action-button-warning-color: @gradient-orange;
-@goods-action-button-danger-color: @gradient-red;
+// ActionBar
+@action-bar-background-color: @white;
+@action-bar-height: 50px;
+@action-bar-icon-width: 48px;
+@action-bar-icon-height: 100%;
+@action-bar-icon-color: @text-color;
+@action-bar-icon-size: 18px;
+@action-bar-icon-font-size: @font-size-xs;
+@action-bar-icon-active-color: @active-color;
+@action-bar-icon-text-color: @gray-7;
+@action-bar-button-height: 40px;
+@action-bar-button-warning-color: @gradient-orange;
+@action-bar-button-danger-color: @gradient-red;
 
 // IndexAnchor
 @index-anchor-z-index: 1;
diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less
index 7d7f7cd28..9598f3e68 100644
--- a/src/submit-bar/index.less
+++ b/src/submit-bar/index.less
@@ -72,7 +72,7 @@
     border: none;
 
     &--danger {
-      background: @goods-action-button-danger-color;
+      background: @action-bar-button-danger-color;
     }
   }
 
diff --git a/vant.config.js b/vant.config.js
index d2e0ba17d..68ae3d46c 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -286,6 +286,10 @@ module.exports = {
           {
             title: '导航组件',
             items: [
+              {
+                path: 'action-bar',
+                title: 'ActionBar 动作栏',
+              },
               {
                 path: 'grid',
                 title: 'Grid 宫格',
@@ -347,10 +351,6 @@ module.exports = {
                 path: 'coupon-list',
                 title: 'Coupon 优惠券',
               },
-              {
-                path: 'goods-action',
-                title: 'GoodsAction 商品导航',
-              },
               {
                 path: 'submit-bar',
                 title: 'SubmitBar 提交订单栏',
@@ -620,6 +620,10 @@ module.exports = {
           {
             title: 'Navigation Components',
             items: [
+              {
+                path: 'action-bar',
+                title: 'ActionBar',
+              },
               {
                 path: 'grid',
                 title: 'Grid',
@@ -681,10 +685,6 @@ module.exports = {
                 path: 'coupon-list',
                 title: 'Coupon',
               },
-              {
-                path: 'goods-action',
-                title: 'GoodsAction',
-              },
               {
                 path: 'submit-bar',
                 title: 'SubmitBar',