From cedf59015be54df5b393cbc00fa08e10d432425f Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 14 Jul 2019 14:08:19 +0800
Subject: [PATCH] [improvement] DropdownMenu: title ellipsis (#3847)

---
 src/dropdown-menu/index.js                    |  2 +-
 src/dropdown-menu/index.less                  |  6 ++-
 .../test/__snapshots__/demo.spec.js.snap      | 16 ++++----
 .../test/__snapshots__/index.spec.js.snap     | 40 +++++++++----------
 4 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
index e04211c3497..eb646f48395 100644
--- a/src/dropdown-menu/index.js
+++ b/src/dropdown-menu/index.js
@@ -95,7 +95,7 @@ export default createComponent({
           ]}
           style={{ color: item.showPopup ? this.activeColor : '' }}
         >
-          {item.displayTitle}
+          <div class="van-ellipsis">{item.displayTitle}</div>
         </span>
       </div>
     ));
diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less
index 1d92197bb6c..ba27fc390fe 100644
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@@ -11,6 +11,7 @@
     flex: 1;
     align-items: center;
     justify-content: center;
+    min-width: 0; // hack for flex ellipsis
 
     &:active {
       opacity: .7;
@@ -29,12 +30,15 @@
 
   &__title {
     position: relative;
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: 0 8px;
     font-size: @dropdown-menu-title-font-size;
 
     &::after {
       position: absolute;
       top: 3px;
-      right: -12px;
+      right: -4px;
       border: 3px solid;
       border-color: transparent transparent currentColor currentColor;
       transform: rotate(-45deg);
diff --git a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
index 606a0440025..bc0011e5d41 100644
--- a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
@@ -4,8 +4,8 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
       <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
         <!---->
       </div>
@@ -16,8 +16,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
       <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
         <!---->
       </div>
@@ -28,8 +28,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">全部商品</span></div>
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">默认排序</span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
       <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
         <!---->
       </div>
@@ -40,8 +40,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">全部商品</span></div>
-      <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
+      <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+      <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
       <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
         <!---->
       </div>
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index a4b194afc95..7fa7fb67ebf 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -2,8 +2,8 @@
 
 exports[`click option 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2011;">
       <div class="van-cell van-cell--clickable">
@@ -24,8 +24,8 @@ exports[`click option 1`] = `
 
 exports[`close-on-click-outside 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
@@ -47,7 +47,7 @@ exports[`close-on-click-outside 1`] = `
 
 exports[`destroy one item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <!---->
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
@@ -57,8 +57,8 @@ exports[`destroy one item 1`] = `
 
 exports[`didn\`t find matched option 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
@@ -70,8 +70,8 @@ exports[`didn\`t find matched option 1`] = `
 
 exports[`direction up 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
     <div class="van-overlay van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
@@ -93,8 +93,8 @@ exports[`direction up 1`] = `
 
 exports[`disable close-on-click-outside 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
@@ -116,7 +116,7 @@ exports[`disable close-on-click-outside 1`] = `
 
 exports[`disable dropdown item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>
+  <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>
@@ -125,8 +125,8 @@ exports[`disable dropdown item 1`] = `
 
 exports[`show dropdown item 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
@@ -148,8 +148,8 @@ exports[`show dropdown item 1`] = `
 
 exports[`show dropdown item 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
       <div class="van-cell van-cell--clickable">
@@ -180,8 +180,8 @@ exports[`show dropdown item 2`] = `
 
 exports[`show dropdown item 3`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
       <div class="van-cell van-cell--clickable">
@@ -212,8 +212,8 @@ exports[`show dropdown item 3`] = `
 
 exports[`title prop 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
   </div>