fix(VSelect): tweak default menu max-height value (#8225)

To display six menu items, a max-height of 304px is required, rather than 300px. This avoids the unsightly appearance of a vertical scrollbar.
vuetifyjs · Aug 1, 2019 · 7932d7a · 7932d7a
1 parent e711fbf
commit 7932d7a
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 43 deletions.
diff --git a/...ges/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap b/...ges/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
@@ -35,7 +35,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
           </div>
           <div class="v-menu">
             <div class="v-menu__content theme--light "
-                 style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                 style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
             >
             </div>
           </div>
@@ -132,7 +132,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
           </div>
           <div class="v-menu">
             <div class="v-menu__content theme--light "
-                 style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                 style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
             >
             </div>
           </div>
@@ -229,7 +229,7 @@ exports[`VDataFooter.ts should render with custom itemsPerPage 1`] = `
           </div>
           <div class="v-menu">
             <div class="v-menu__content theme--light "
-                 style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                 style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
             >
             </div>
           </div>
@@ -305,7 +305,7 @@ exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
           </div>
           <div class="v-menu">
             <div class="v-menu__content theme--light "
-                 style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                 style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
             >
             </div>
           </div>

diff --git a/...s/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap b/...s/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
@@ -47,7 +47,7 @@ exports[`VDataIterator.ts should render and match snapshot 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -138,7 +138,7 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -220,7 +220,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -302,7 +302,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -384,7 +384,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
@@ -54,7 +54,7 @@ exports[`VDataTable.ts should render 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -180,7 +180,7 @@ exports[`VDataTable.ts should render loading state 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -386,7 +386,7 @@ exports[`VDataTable.ts should render loading state 2`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -675,7 +675,7 @@ exports[`VDataTable.ts should render virtual table 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -866,7 +866,7 @@ exports[`VDataTable.ts should render with body slot 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -1155,7 +1155,7 @@ exports[`VDataTable.ts should render with data 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -1339,7 +1339,7 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -1766,7 +1766,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -2139,7 +2139,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -2343,7 +2343,7 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -2657,7 +2657,7 @@ exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -2994,7 +2994,7 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -3331,7 +3331,7 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>
@@ -3695,7 +3695,7 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
             </div>
             <div class="v-menu">
               <div class="v-menu__content theme--light "
-                   style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
               >
               </div>
             </div>

diff --git a/...s/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap b/...s/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
@@ -545,7 +545,7 @@ exports[`VDataTableHeader.ts mobile should render 1`] = `
               </div>
               <div class="v-menu">
                 <div class="v-menu__content theme--light "
-                     style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                     style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
                 >
                 </div>
               </div>
@@ -608,7 +608,7 @@ exports[`VDataTableHeader.ts mobile should render with data-table-select header
               </div>
               <div class="v-menu">
                 <div class="v-menu__content theme--light "
-                     style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                     style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
                 >
                 </div>
               </div>
@@ -673,7 +673,7 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
               </div>
               <div class="v-menu">
                 <div class="v-menu__content theme--light "
-                     style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                     style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
                 >
                 </div>
               </div>
@@ -725,7 +725,7 @@ exports[`VDataTableHeader.ts mobile should work with showGroupBy 1`] = `
               </div>
               <div class="v-menu">
                 <div class="v-menu__content theme--light "
-                     style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                     style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
                 >
                 </div>
               </div>
@@ -790,7 +790,7 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
               </div>
               <div class="v-menu">
                 <div class="v-menu__content theme--light "
-                     style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                     style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
                 >
                 </div>
               </div>
@@ -855,7 +855,7 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
               </div>
               <div class="v-menu">
                 <div class="v-menu__content theme--light "
-                     style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+                     style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
                 >
                 </div>
               </div>

diff --git a/...ges/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap b/...ges/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`VOverflowBtn.js should use default autocomplete selections 1`] = `
       </div>
       <div class="v-menu">
         <div class="v-menu__content theme--light v-autocomplete__content"
-             style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+             style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
         >
         </div>
       </div>
@@ -80,7 +80,7 @@ exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
       </div>
       <div class="v-menu">
         <div class="v-menu__content theme--light v-autocomplete__content"
-             style="max-height: 300px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+             style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
         >
         </div>
       </div>

diff --git a/packages/vuetify/src/components/VSelect/VSelect.ts b/packages/vuetify/src/components/VSelect/VSelect.ts
@@ -31,7 +31,7 @@ export const defaultMenuProps = {
   closeOnContentClick: false,
   disableKeys: true,
   openOnClick: false,
-  maxHeight: 300,
+  maxHeight: 304,
 }
 
 // Types