feat(VNavigationDrawer): port to v3 (#13115)

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com> Co-authored-by: Albert Kaaman <albert@kaaman.nu> Co-authored-by: Kael <kaelwd@gmail.com>
vuetifyjs · Mar 15, 2021 · 95139d7 · 95139d7
1 parent 27b3205
commit 95139d7
Show file tree

Hide file tree

Showing 12 changed files with 318 additions and 1,134 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -41,5 +41,6 @@ module.exports = {
     '**/test/**/*.js',
     '**/__tests__/**/*.spec.js',
     '**/__tests__/**/*.spec.ts',
+    '**/__tests__/**/*.spec.tsx',
   ],
 }
diff --git a/packages/api-generator/src/locale/en/v-navigation-drawer.json b/packages/api-generator/src/locale/en/v-navigation-drawer.json
@@ -13,7 +13,6 @@
     "permanent": "The drawer remains visible regardless of screen size",
     "right": "Places the navigation drawer on the right",
     "src": "Specifies a [v-img](/components/images) as the component's background.",
-    "stateless": "Remove all automated state functionality (resize, mobile, route) and manually control the drawer state",
     "temporary": "A temporary drawer sits above its application and uses a scrim (overlay) to darken the background",
     "touchless": "Disable mobile touch functionality",
     "value": "Controls whether the component is visible or hidden."

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
@@ -1,128 +1,72 @@
-@import './_variables.scss'
+// Imports
+@import './index'
 
-// Theme
-+theme(v-navigation-drawer) using ($material)
-  background-color: map-get($material, 'navigation-drawer')
-
-  &:not(.v-navigation-drawer--floating)
-    .v-navigation-drawer__border
-      background-color: map-get($material, 'dividers')
-
-  .v-divider
-    border-color: map-get($material, 'dividers')
-
-// Block
 .v-navigation-drawer
-  -webkit-overflow-scrolling: touch
+  -webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling
+  background: $navigation-drawer-background
   display: flex
   flex-direction: column
-  left: 0
+  height: $navigation-drawer-height
   max-width: 100%
-  overflow: hidden
   pointer-events: auto
   top: 0
-  transition-duration: 0.2s
-  transition-timing-function: map-get($transition, 'fast-out-slow-in')
-  will-change: transform
-  transition-property: transform, visibility, width
-  +bootable()
+  transition-duration: $navigation-drawer-transition-duration
+  transition-property: $navigation-drawer-transition-property
+  transition-timing-function: $navigation-drawer-transition-timing-function
+  will-change: $navigation-drawer-will-change
 
-  &.v-navigation-drawer--right
-    &:after
-      left: 0
-      right: initial
+  @include border($navigation-drawer-border...)
+  @include elevation($navigation-drawer-elevation)
+  @include position($navigation-drawer-positions)
+  @include rounded($navigation-drawer-border-radius)
 
-  .v-list:not(.v-select-list)
-    background: inherit
+  &--absolute
+    z-index: $navigation-drawer-absolute-z-index
 
-// Element
-.v-navigation-drawer__border
-  position: absolute
-  right: 0
-  top: 0
-  height: 100%
-  width: $navigation-drawer-border-width
+  &--fixed
+    z-index: $navigation-drawer-fixed-z-index
 
-.v-navigation-drawer__content
-  height: 100%
-  overflow-y: auto
-  overflow-x: hidden
-
-.v-navigation-drawer__image
-  border-radius: inherit
-  height: 100%
-  position: absolute
-  top: 0
-  bottom: 0
-  z-index: -1
-  contain: strict
-  width: 100%
-
-  .v-image
-    border-radius: inherit
+  &--start
+    @include ltr()
+      border-right-width: $navigation-drawer-border-thin-width
+      left: 0
+      right: auto
 
-// Modifier
-.v-navigation-drawer--bottom.v-navigation-drawer--is-mobile
-  max-height: 50%
-  top: auto
-  bottom: 0
-  min-width: 100%
+    @include rtl()
+      border-left-width: $navigation-drawer-border-thin-width
+      left: auto
+      right: 0
 
-.v-navigation-drawer--right
-  left: auto
-  right: 0
+  &--end
+    @include ltr()
+      border-left-width: $navigation-drawer-border-thin-width
+      left: auto
+      right: 0
 
-  > .v-navigation-drawer__border
-    right: auto
-    left: 0
+    @include rtl()
+      border-right-width: $navigation-drawer-border-thin-width
+      left: 0
+      right: auto
 
-.v-navigation-drawer--absolute
-  z-index: 1
+  &--temporary
+    @include elevation($navigation-drawer-temporary-elevation)
 
-.v-navigation-drawer--fixed
-  z-index: 6
+.v-navigation-drawer__content
+  flex: 0 1 auto
+  height: $navigation-drawer-content-height
+  max-width: 100%
+  overflow-x: $navigation-drawer-content-overflow-x
+  overflow-y: $navigation-drawer-content-overflow-y
 
-.v-navigation-drawer--absolute
+.v-navigation-drawer__img
+  height: 100%
+  left: 0
   position: absolute
+  top: 0
+  width: 100%
+  z-index: -1
 
-.v-navigation-drawer--clipped:not(.v-navigation-drawer--temporary):not(.v-navigation-drawer--is-mobile)
-  z-index: 4
-
-.v-navigation-drawer--fixed
-  position: fixed
-
-.v-navigation-drawer--floating:after
-  display: none
-
-.v-navigation-drawer--mini-variant
-  overflow: hidden
-
-  .v-list-item
-    > *:first-child
-      margin-left: 0
-      margin-right: 0
-
-    > *:not(:first-child)
-      @include visually-hidden
-
-  .v-list-group--no-action .v-list-group__items,
-  .v-list-group--sub-group
-    display: none
-
-  &.v-navigation-drawer--custom-mini-variant
-    .v-list-item
-      justify-content: center
-
-.v-navigation-drawer--temporary
-  z-index: 7
-
-.v-navigation-drawer--mobile
-  z-index: 6
-
-.v-navigation-drawer--close
-  visibility: hidden
-
-.v-navigation-drawer--is-mobile,
-.v-navigation-drawer--temporary
-  &:not(.v-navigation-drawer--close)
-    +elevation($navigation-drawer-mobile-temporary-elevation)
+  img
+    height: $navigation-drawer-img-height
+    object-fit: $navigation-drawer-img-object-fit
+    width: $navigation-drawer-img-width