From ce84977714b7f7992dcc8dfe32c2b93daf67a112 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 6 Oct 2020 17:04:47 -0400
Subject: [PATCH] Remove unused lines prop, remove unused subtitle comp

---
 app/src/components/register.ts                |   5 +-
 .../components/v-divider/v-divider.story.ts   |  10 +-
 app/src/components/v-list/index.ts            |  15 +-
 app/src/components/v-list/readme.md           | 293 ------------
 .../components/v-list/v-list-item-icon.vue    |  18 +-
 .../v-list/v-list-item-subtitle.vue           |  39 --
 ...st-item-title.vue => v-list-item-text.vue} |   6 +-
 app/src/components/v-list/v-list-item.vue     |  47 +-
 app/src/components/v-list/v-list.story.ts     | 442 ------------------
 app/src/components/v-list/v-list.test.ts      | 223 ---------
 app/src/components/v-list/v-list.vue          |  16 +-
 app/src/components/v-select/v-select.test.ts  |   4 +-
 .../docs/components/navigation-item.vue       |   4 +-
 .../settings/components/navigation.vue        |   6 +-
 14 files changed, 35 insertions(+), 1093 deletions(-)
 delete mode 100644 app/src/components/v-list/readme.md
 delete mode 100644 app/src/components/v-list/v-list-item-subtitle.vue
 rename app/src/components/v-list/{v-list-item-title.vue => v-list-item-text.vue} (73%)
 delete mode 100644 app/src/components/v-list/v-list.story.ts
 delete mode 100644 app/src/components/v-list/v-list.test.ts

diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 791834dcaa..37167caa28 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -27,7 +27,7 @@ import VList, {
 	VListItemHint,
 	VListItemIcon,
 	VListItemSubtitle,
-	VListItemTitle,
+	VListItemText,
 } from './v-list/';
 import VMenu from './v-menu/';
 import VModal from './v-modal/';
@@ -77,8 +77,7 @@ Vue.component('v-list-group', VListGroup);
 Vue.component('v-list-item-content', VListItemContent);
 Vue.component('v-list-item-hint', VListItemHint);
 Vue.component('v-list-item-icon', VListItemIcon);
-Vue.component('v-list-item-subtitle', VListItemSubtitle);
-Vue.component('v-list-item-title', VListItemTitle);
+Vue.component('v-list-item-text', VListItemText);
 Vue.component('v-list-item', VListItem);
 Vue.component('v-list', VList);
 Vue.component('v-menu', VMenu);
diff --git a/app/src/components/v-divider/v-divider.story.ts b/app/src/components/v-divider/v-divider.story.ts
index 1ebd5467c0..2e53db5426 100644
--- a/app/src/components/v-divider/v-divider.story.ts
+++ b/app/src/components/v-divider/v-divider.story.ts
@@ -3,7 +3,7 @@ import readme from './readme.md';
 import withPadding from '../../../.storybook/decorators/with-padding';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { defineComponent } from '@vue/composition-api';
-import VList, { VListItem, VListItemContent, VListItemTitle, VListItemIcon } from '@/components/v-list';
+import VList, { VListItem, VListItemContent, VListItemText, VListItemIcon } from '@/components/v-list';
 import VIcon from '@/components/v-icon/';
 
 export default {
@@ -72,7 +72,7 @@ export const inList = () =>
 			VListItem,
 			VListItemContent,
 			VListItemIcon,
-			VListItemTitle,
+			VListItemText,
 			VIcon,
 		},
 		props: {},
@@ -82,7 +82,7 @@ export const inList = () =>
 					<v-list-item v-for="n in 3" @click="() => {}">
 						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
 						<v-list-item-content>
-							<v-list-item-title>Item {{ n }}</v-list-item-title>
+							<v-list-item-text>Item {{ n }}</v-list-item-text>
 						</v-list-item-content>
 					</v-list-item>
 
@@ -91,7 +91,7 @@ export const inList = () =>
 					<v-list-item v-for="n in 1" @click="() => {}">
 						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
 						<v-list-item-content>
-							<v-list-item-title>Item {{ n + 3 }}</v-list-item-title>
+							<v-list-item-text>Item {{ n + 3 }}</v-list-item-text>
 						</v-list-item-content>
 					</v-list-item>
 
@@ -100,7 +100,7 @@ export const inList = () =>
 					<v-list-item v-for="n in 3" @click="() => {}">
 						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
 						<v-list-item-content>
-							<v-list-item-title>Item {{ n + 4 }}</v-list-item-title>
+							<v-list-item-text>Item {{ n + 4 }}</v-list-item-text>
 						</v-list-item-content>
 					</v-list-item>
 				</v-list>
diff --git a/app/src/components/v-list/index.ts b/app/src/components/v-list/index.ts
index 9f91d5c3a4..e6ac55a2ae 100644
--- a/app/src/components/v-list/index.ts
+++ b/app/src/components/v-list/index.ts
@@ -1,20 +1,11 @@
 import VList from './v-list.vue';
 import VListItem from './v-list-item.vue';
 import VListItemContent from './v-list-item-content.vue';
-import VListItemTitle from './v-list-item-title.vue';
-import VListItemSubtitle from './v-list-item-subtitle.vue';
+import VListItemText from './v-list-item-text.vue';
 import VListItemIcon from './v-list-item-icon.vue';
 import VListItemHint from './v-list-item-hint.vue';
 import VListGroup from './v-list-group.vue';
 
-export {
-	VList,
-	VListItem,
-	VListItemContent,
-	VListItemTitle,
-	VListItemSubtitle,
-	VListItemIcon,
-	VListItemHint,
-	VListGroup,
-};
+export { VList, VListItem, VListItemContent, VListItemText, VListItemIcon, VListItemHint, VListGroup };
+
 export default VList;
diff --git a/app/src/components/v-list/readme.md b/app/src/components/v-list/readme.md
deleted file mode 100644
index 756cb7bf22..0000000000
--- a/app/src/components/v-list/readme.md
+++ /dev/null
@@ -1,293 +0,0 @@
-# List
-
-```html
-<v-list>
-	<v-list-item v-for="item in items">
-		<v-list-item-content>
-			{{ item.text }}
-		</v-list-item-content>
-	</v-list-item>
-</v-list>
-```
-
-## Props
-
-| Prop        | Description                                                                                                 | Default |
-| ----------- | ----------------------------------------------------------------------------------------------------------- | ------- |
-| `dense`     | Removes some padding to make the list items closer together                                                 | `false` |
-| `threeLine` | Limits list items to three lines of text (1 of title, 2 of subtitle). Only works in webkit enabled browsers | `false` |
-| `nav`       | Adds a small margin and border-radius for nav menu styling                                                  | `false` |
-| `multiple`  | Allows multiple child groups to be open at once                                                             | `true`  |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description  | Data |
-| --------- | ------------ | ---- |
-| _default_ | List content |      |
-
-## CSS Variables
-
-| Variable                           | Default                          |
-| ---------------------------------- | -------------------------------- |
-| `--v-list-padding`                 | `8px 0`                          |
-| `--v-list-max-height`              | `none`                           |
-| `--v-list-max-width`               | `none`                           |
-| `--v-list-min-width`               | `none`                           |
-| `--v-list-min-height`              | `none`                           |
-| `--v-list-color`                   | `var(--foreground-normal)`        |
-| `--v-list-color-hover`             | `var(--foreground-normal)`        |
-| `--v-list-color-active`            | `var(--foreground-normal)`        |
-| `--v-list-background-color-hover`  | `var(--background-normal-alt)`  |
-| `--v-list-background-color-active` | `var(--background-normal-alt)` |
-
----
-
-# List Item
-
-A wrapper for list items that formats children nicely. Can be used on its own or inside a list component. Best used with subcomponents (see below).
-
-## Usage
-
-```html
-<v-list-item>
-	<v-list-item-title>Hello, world!</v-list-item-title>
-</v-list-item>
-```
-
-## Props
-
-| Prop       | Description                                                          | Default |
-|------------|----------------------------------------------------------------------|---------|
-| `dense`    | Removes some padding to make the individual list item shorter        | `false` |
-| `lines`    | Sets if the list item will support `1`, `2`, or `3` lines of content | `null`  |
-| `to`       | Render as vue router-link with to link                               | `null`  |
-| `disabled` | Disable the list item                                                | `false` |
-| `active`   | Enable the list item's active state                                  | `false` |
-| `exact`    | Set the `exact` prop on router-link. Used with `to`                  | `false` |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description       | Data |
-| --------- | ----------------- | ---- |
-| _default_ | List item content |      |
-
-## CSS Variables
-
-| Variable                                    | Default                                                                 |
-| ------------------------------------------- | ----------------------------------------------------------------------- |
-| `--v-list-item-one-line-min-height`         | `48px`                                                                  |
-| `--v-list-item-two-line-min-height`         | `60px`                                                                  |
-| `--v-list-item-three-line-min-height`       | `76px`                                                                  |
-| `--v-list-item-one-line-min-height-dense`   | `40px`                                                                  |
-| `--v-list-item-two-line-min-height-dense`   | `48px`                                                                  |
-| `--v-list-item-three-line-min-height-dense` | `64px`                                                                  |
-| `--v-list-item-padding`                     | `0 16px 0 calc(16px + var(--v-list-item-indent, 0px))`                  |
-| `--v-list-item-min-width`                   | `none`                                                                  |
-| `--v-list-item-max-width`                   | `none`                                                                  |
-| `--v-list-item-min-height`                  | `var(--v-list-item-one-line-min-height)`                                |
-| `--v-list-item-max-height`                  | `auto`                                                                  |
-| `--v-list-item-border-radius`               | `0`                                                                     |
-| `--v-list-item-margin-bottom`               | `0`                                                                     |
-| `--v-list-item-color`                       | `var(--v-list-color, var(--foreground-normal))`                          |
-| `--v-list-item-color-hover`                 | `var(--v-list-color-hover, var(--foreground-normal))`                    |
-| `--v-list-item-color-active`                | `var(--v-list-color-active, var(--foreground-normal))`                   |
-| `--v-list-item-background-color-hover`      | `var(--v-list-background-color-hover, var(--background-normal-alt))`   |
-| `--v-list-item-background-color-active`     | `var(--v-list-background-color-active, var(--background-normal-alt))` |
-
----
-
-# List Item Content
-
-A wrapper for the main text content of a list item. It adds some padding and helps control overflow. The parent of `v-list-title` and `v-list-subtitle` components, it's also the main controller of the `dense` option on lists.
-
-## Usage
-
-```html
-<v-list-item-content>Hello, world!</v-list-item-content>
-```
-
-## Props
-
-n/a
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description               | Data |
-| --------- | ------------------------- | ---- |
-| _default_ | List item content content |      |
-
-## CSS Variables
-
-| Variable                        | Default  |
-| ------------------------------- | -------- |
-| `--v-list-item-content-padding` | `12px 0` |
-
----
-
-# List Item Title
-
-Wrapper that adds typographic styling and margin for the subtitle/description of the list item. Responsive to `dense` and `threeLine` props.
-
-## Usage
-
-```html
-<v-list-item-title>Hello, world</v-list-item-title>
-```
-
-## Props
-
-n/a
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description             | Data |
-| --------- | ----------------------- | ---- |
-| _default_ | List item title content |      |
-
-## CSS Variables
-
-n/a
-
----
-
-# List Item Subtitle
-
-Wrapper that adds typographic styling and margin for the subtitle/description of the list item. Responsive to `dense` and `threeLine` props.
-
-## Usage
-
-```html
-<v-list-item-subtitle>This is the subtitle</v-list-item-subtitle>
-```
-
-## Props
-
-n/a
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description                | Data |
-| --------- | -------------------------- | ---- |
-| _default_ | List item subtitle content |      |
-
-## CSS Variables
-
-n/a
-
----
-
-# List Item Icon
-
-Wrapper for icon, action, or avatar type elements in a list item. Can be used on the left or right of an item.
-
-## Usage
-
-```html
-<v-list-item-icon>
-	<v-icon name="person" />
-</v-list-item-icon>
-```
-
-## Props
-
-| Prop     | Description                                                         | Default |
-| -------- | ------------------------------------------------------------------- | ------- |
-| `center` | Whether to center the element (good for action elements or avatars) | `false` |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description            | Data |
-| --------- | ---------------------- | ---- |
-| _default_ | List item icon content |      |
-
-## CSS Variables
-
-n/a
-
----
-
-# List Group
-
-Provides the ability to make a collapsable (sub)group of list items, within a list or independently. List groups can be nested to an arbitrary depth.
-
-```html
-<v-list>
-	<!-- Root level items -->
-	<v-list-item />
-	<v-list-item />
-
-	<v-list-group>
-		<template v-slot:activator>
-			... Click me to expand! ...
-		</template>
-
-		<v-list-item v-for="item in dropDownItems">
-			...item content etc.
-		</v-list-item>
-
-		<v-list-group>
-			<template v-slot:activator>
-				... Click me to expand this subgroup! ...
-			</template>
-
-			<v-list-item />
-			<v-list-item />
-
-			<v-list-group>
-				<template v-slot:activator>
-					... Click me to expand next subgroup! ...
-				</template>
-
-				<v-list-item v-for="item in subGroupDropdownItems">
-				</v-list-item>
-			</v-list-group>
-		</v-list-group>
-	</v-list-group>
-</v-list>
-```
-
-## Props
-
-| Prop       | Description                                                                     | Default |
-|------------|---------------------------------------------------------------------------------|---------|
-| `multiple` | Allow multiple subgroups to be open at the same time                            | `true`  |
-| `to`       | Where to link to. This will only make the chevron toggle the group active state |         |
-| `active`   | Render the activitor item in the active state                                   | `false` |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description   | Data |
-| --------- | ------------- | ---- |
-| _default_ | Group content |      |
-
-## CSS Variables
-
-n/a
diff --git a/app/src/components/v-list/v-list-item-icon.vue b/app/src/components/v-list/v-list-item-icon.vue
index 033fb30c39..52a9184299 100644
--- a/app/src/components/v-list/v-list-item-icon.vue
+++ b/app/src/components/v-list/v-list-item-icon.vue
@@ -35,6 +35,7 @@ body {
 		&:first-child {
 			margin-right: 12px;
 		}
+
 		&:last-child {
 			margin-left: 12px;
 		}
@@ -44,31 +45,22 @@ body {
 		.v-list,
 		.v-list-item {
 			#{$this} {
+				--v-icon-color: var(--v-list-item-icon-color);
+
 				margin-top: 4px;
 				margin-bottom: 4px;
-				--v-icon-color: var(--v-list-item-icon-color);
+
 				&:not(:only-child) {
 					&:first-child {
 						margin-right: 8px;
 					}
+
 					&:last-child {
 						margin-left: 8px;
 					}
 				}
 			}
 
-			&.large {
-				&.three-line,
-				&.two-line {
-					#{$this} {
-						align-self: flex-start;
-						&.center {
-							align-self: center;
-						}
-					}
-				}
-			}
-
 			&.large #{$this} .v-icon {
 				--v-icon-color: none;
 			}
diff --git a/app/src/components/v-list/v-list-item-subtitle.vue b/app/src/components/v-list/v-list-item-subtitle.vue
deleted file mode 100644
index e28675f90c..0000000000
--- a/app/src/components/v-list/v-list-item-subtitle.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template functional>
-	<div class="v-list-item-subtitle">
-		<slot></slot>
-	</div>
-</template>
-
-<style lang="scss" scoped>
-.v-list-item-subtitle {
-	$this: &;
-
-	flex-basis: 100%;
-	flex-grow: 1;
-	flex-shrink: 1;
-	align-self: center;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-
-	@at-root {
-		.v-list,
-		.v-list-item,
-		.v-list .v-list-item {
-			&.one-line #{$this},
-			&.two-line #{$this} {
-				display: block;
-				white-space: nowrap;
-				-webkit-line-clamp: none;
-				-webkit-box-orient: none;
-			}
-			&.three-line #{$this} {
-				display: -webkit-box;
-				white-space: initial;
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-			}
-		}
-	}
-}
-</style>
diff --git a/app/src/components/v-list/v-list-item-title.vue b/app/src/components/v-list/v-list-item-text.vue
similarity index 73%
rename from app/src/components/v-list/v-list-item-title.vue
rename to app/src/components/v-list/v-list-item-text.vue
index 39c7c7ba00..3fc14f3f10 100644
--- a/app/src/components/v-list/v-list-item-title.vue
+++ b/app/src/components/v-list/v-list-item-text.vue
@@ -1,11 +1,11 @@
 <template functional>
-	<div class="v-list-item-title type-text">
-		<slot></slot>
+	<div class="v-list-item-text type-text">
+		<slot />
 	</div>
 </template>
 
 <style lang="scss" scoped>
-.v-list-item-title {
+.v-list-item-text {
 	flex-basis: 100%;
 	flex-grow: 1;
 	flex-shrink: 1;
diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index dc4ab6af97..0d7102f265 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -10,9 +10,6 @@
 			large,
 			dense,
 			link: isClickable,
-			'three-line': lines === 3,
-			'two-line': lines === 2,
-			'one-line': lines === 1,
 			disabled,
 			dashed,
 		}"
@@ -21,7 +18,7 @@
 		:target="component === 'a' ? '_blank' : null"
 		v-on="disabled === false && $listeners"
 	>
-		<slot></slot>
+		<slot />
 	</component>
 </template>
 
@@ -39,10 +36,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		lines: {
-			type: Number as PropType<1 | 2 | 3>,
-			default: null,
-		},
 		to: {
 			type: [String, Object] as PropType<string | Location>,
 			default: null,
@@ -88,18 +81,14 @@ export default defineComponent({
 
 <style>
 body {
-	--v-list-item-one-line-min-height-large: 40px;
-	--v-list-item-two-line-min-height-large: 52px;
-	--v-list-item-three-line-min-height-large: 64px;
-	--v-list-item-one-line-min-height: 32px;
-	--v-list-item-two-line-min-height: 36px;
-	--v-list-item-three-line-min-height: 52px;
+	--v-list-item-min-height-large: 40px;
+	--v-list-item-min-height: 32px;
 	--v-list-item-padding-large: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
 	--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
 	--v-list-item-margin: 2px 0;
 	--v-list-item-min-width: none;
 	--v-list-item-max-width: none;
-	--v-list-item-min-height: var(--v-list-item-one-line-min-height);
+	--v-list-item-min-height: var(--v-list-item-min-height);
 	--v-list-item-max-height: auto;
 	--v-list-item-border-radius: var(--border-radius);
 	--v-list-item-margin-bottom: 0;
@@ -176,13 +165,13 @@ body {
 	}
 
 	&.dense {
-		::v-deep .v-list-item-title {
+		::v-deep .v-list-item-text {
 			color: var(--foreground-subdued);
 		}
 
 		&:hover,
 		&.active {
-			::v-deep .v-list-item-title {
+			::v-deep .v-list-item-text {
 				color: var(--primary);
 			}
 		}
@@ -192,22 +181,12 @@ body {
 		.v-list,
 		#{$this},
 		.v-list #{$this} {
-			--v-list-item-min-height: var(--v-list-item-one-line-min-height);
-			&.one-line {
-				--v-list-item-min-height: var(--v-list-item-one-line-min-height);
-			}
-			&.two-line {
-				--v-list-item-min-height: var(--v-list-item-two-line-min-height);
-			}
-			&.three-line {
-				--v-list-item-min-height: var(--v-list-item-three-line-min-height);
-			}
+			--v-list-item-min-height: var(--v-list-item-min-height);
 		}
 
 		.v-list.large {
 			#{$this}:not(.dense) {
-				--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
-
+				--v-list-item-min-height: var(--v-list-item-min-height-large);
 				--v-list-item-padding-large: 0 8px;
 				--v-list-item-border-radius: 4px;
 
@@ -217,16 +196,6 @@ body {
 				&:not(:last-child):not(:only-child) {
 					margin-bottom: 4px;
 				}
-
-				&.one-line {
-					--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
-				}
-				&.two-line {
-					--v-list-item-min-height: var(--v-list-item-two-line-min-height-large);
-				}
-				&.three-line {
-					--v-list-item-min-height: var(--v-list-item-three-line-min-height-large);
-				}
 			}
 		}
 	}
diff --git a/app/src/components/v-list/v-list.story.ts b/app/src/components/v-list/v-list.story.ts
deleted file mode 100644
index a3bad36cfe..0000000000
--- a/app/src/components/v-list/v-list.story.ts
+++ /dev/null
@@ -1,442 +0,0 @@
-import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import Vue from 'vue';
-import VList from './v-list.vue';
-import VListItem from './v-list-item.vue';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import VListItemContent from './v-list-item-content.vue';
-import VListItemTitle from './v-list-item-title.vue';
-import VListItemSubTitle from './v-list-item-subtitle.vue';
-import VListItemIcon from './v-list-item-icon.vue';
-import VListGroup from './v-list-group.vue';
-import VSheet from '../v-sheet';
-import VCheckbox from '../v-checkbox';
-import VueRouter from 'vue-router';
-import markdown from './readme.md';
-import { defineComponent, reactive } from '@vue/composition-api';
-import withBackground from '../../../.storybook/decorators/with-background';
-
-Vue.component('v-list', VList);
-Vue.component('v-list-item', VListItem);
-Vue.component('v-list-item-content', VListItemContent);
-Vue.component('v-list-item-title', VListItemTitle);
-Vue.component('v-list-item-subtitle', VListItemSubTitle);
-Vue.component('v-list-item-icon', VListItemIcon);
-Vue.component('v-checkbox', VCheckbox);
-Vue.component('v-list-group', VListGroup);
-
-Vue.component('v-sheet', VSheet);
-
-Vue.use(VueRouter);
-const router = new VueRouter();
-
-export default {
-	title: 'Components / List',
-	component: VList,
-	decorators: [withKnobs, withPadding, withBackground],
-	parameters: {
-		notes: markdown,
-	},
-};
-
-export const basic = () =>
-	defineComponent({
-		props: {
-			dense: {
-				default: boolean('Dense', false, 'Full List'),
-			},
-			dense0: {
-				default: boolean('Dense', false, 'List Item 0'),
-			},
-			dense1: {
-				default: boolean('Dense', false, 'List Item 1'),
-			},
-			dense2: {
-				default: boolean('Dense', false, 'List Item 2'),
-			},
-			dense3: {
-				default: boolean('Dense', false, 'List Item 3'),
-			},
-			nav: {
-				default: boolean('Nav', false, 'Full List'),
-			},
-		},
-		setup() {
-			return {
-				items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 200px; ">
-		<v-list :dense="dense" :nav="nav">
-			<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i">
-				<v-list-item-content>
-					{{ item }}
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const listGroups = () =>
-	defineComponent({
-		router: router,
-		props: {
-			multiple: {
-				default: boolean('Multiple', true),
-			},
-			multipleGroup: {
-				default: boolean('Multiple (in the nested groups)', true),
-			},
-		},
-		setup() {
-			return {
-				items: [0, 1, 2, 3],
-			};
-		},
-		template: `
-			<v-sheet style="--v-sheet-max-width: 600px;">
-				<v-list :multiple="multiple">
-					<v-list-item>
-						<v-list-item-icon>
-							<v-icon name="home" />
-						</v-list-item-icon>
-						<v-list-item-title>Home</v-list-item-title>
-					</v-list-item>
-					<v-list-group :multiple="multipleGroup">
-						<template v-slot:activator>
-							<v-list-item-icon>
-								<v-icon name="box" />
-							</v-list-item-icon>
-							<v-list-item-title>Collections</v-list-item-title>
-						</template>
-
-						<v-list-item>
-							<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-							<v-list-item-title>Users</v-list-item-title>
-						</v-list-item>
-					</v-list-group>
-					<v-list-group :multiple="multipleGroup">
-						<template v-slot:activator>
-							<v-list-item-icon>
-								<v-icon name="folder" />
-							</v-list-item-icon>
-							<v-list-item-title>Files</v-list-item-title>
-						</template>
-
-						<v-list-group :multiple="multipleGroup">
-							<template v-slot:activator>
-								<v-list-item-icon>
-									<v-icon name="cloud_download" />
-								</v-list-item-icon>
-								<v-list-item-title>Download</v-list-item-title>
-							</template>
-
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 1</v-list-item-title>
-							</v-list-item>
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 2</v-list-item-title>
-							</v-list-item>
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 3</v-list-item-title>
-							</v-list-item>
-						</v-list-group>
-
-						<v-list-group :multiple="multipleGroup">
-							<template v-slot:activator>
-								<v-list-item-icon>
-									<v-icon name="cloud_upload" />
-								</v-list-item-icon>
-								<v-list-item-title>Upload</v-list-item-title>
-							</template>
-
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 1</v-list-item-title>
-							</v-list-item>
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 2</v-list-item-title>
-							</v-list-item>
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 3</v-list-item-title>
-							</v-list-item>
-
-							<v-list-group :multiple="multipleGroup">
-								<template v-slot:activator>
-									<v-list-item-icon>
-										<v-icon name="attach_file" />
-									</v-list-item-icon>
-									<v-list-item-title>Sub-sub-sub section</v-list-item-title>
-								</template>
-
-								<v-list-item>
-									<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-									<v-list-item-title>Section 1</v-list-item-title>
-								</v-list-item>
-								<v-list-item>
-									<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-									<v-list-item-title>Section 2</v-list-item-title>
-								</v-list-item>
-								<v-list-item>
-									<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-									<v-list-item-title>Section 3</v-list-item-title>
-								</v-list-item>
-							</v-list-group>
-						</v-list-group>
-					</v-list-group>
-				</v-list>
-			</v-sheet>
-		`,
-	});
-
-export const withSubtitle = () =>
-	defineComponent({
-		router: router,
-		props: {
-			dense: {
-				default: boolean('Dense', false, 'Full List'),
-			},
-			dense0: {
-				default: boolean('Dense', false, 'List Item 0'),
-			},
-			dense1: {
-				default: boolean('Dense', false, 'List Item 1'),
-			},
-			dense2: {
-				default: boolean('Dense', false, 'List Item 2'),
-			},
-			dense3: {
-				default: boolean('Dense', false, 'List Item 3'),
-			},
-			lines0: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 0'),
-			},
-			lines1: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 1'),
-			},
-			lines2: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 2'),
-			},
-			lines3: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 3'),
-			},
-			nav: {
-				default: boolean('Nav', false, 'Full List'),
-			},
-			dynamicSubtitle: {
-				default: text('Subtitle 3', '', 'Full List'),
-			},
-			lines: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'Full List'),
-			},
-		},
-		setup() {
-			return {
-				items: {
-					0: { title: 'List Item 0', subtitle: 'This is a list item subtitle.' },
-					1: {
-						title: 'List Item 1',
-						subtitle:
-							"This is another example of a list item subtitle. But this time, it's pretty long so you can see who two-line and three-line wrapping work",
-					},
-					2: {
-						title: 'List Item 2',
-						subtitle: "This is yet another example of a list subtitle. It's of medium length.",
-					},
-				},
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 400px; ">
-		<v-list :dense="dense" :nav="nav" :lines="lines">
-			<v-list-item v-for="(item, i) in items" :lines="$props['lines' + i]" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
-				<v-list-item-content>
-					<v-list-item-title>{{ item.title }}</v-list-item-title>
-					<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
-				</v-list-item-content>
-			</v-list-item>
-			<v-list-item :dense="dense3" :lines="lines3" :key=3 :to="'/' + 3">
-				<v-list-item-content>
-					<v-list-item-title>List Item 3</v-list-item-title>
-					<v-list-item-subtitle>{{ dynamicSubtitle }}</v-list-item-subtitle>
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const withIconsToo = () =>
-	defineComponent({
-		router: router,
-		props: {
-			dense: {
-				default: boolean('Dense', false, 'Full List'),
-			},
-			nav: {
-				default: boolean('Nav', false, 'Full List'),
-			},
-			subtitle: {
-				default: boolean('Subtitle', false, 'Full List'),
-			},
-			lines: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'Full List'),
-			},
-			leftIconCenter: {
-				default: boolean('Left Icon Centered', false, 'Full List'),
-			},
-			rightIconCenter: {
-				default: boolean('Right Icon Centered', true, 'Full List'),
-			},
-			leftIcon: {
-				default: boolean('Left Icon', true, 'Full List'),
-			},
-			rightIcon: {
-				default: boolean('Right Icon', false, 'Full List'),
-			},
-		},
-		setup() {
-			const onChange = action('change');
-			return {
-				onChange,
-				items: reactive({
-					0: {
-						title: 'List Item 0',
-						subtitle: 'This is a list item subtitle.',
-						checked: false,
-					},
-					1: {
-						title: 'List Item 1',
-						subtitle:
-							"This is another example of a list item subtitle. But this time, it's pretty long so you can see who two-line and three-line wrapping work",
-						checked: false,
-					},
-					2: {
-						title: 'List Item 2',
-						subtitle: "This is yet another example of a list subtitle. It's of medium length.",
-						checked: false,
-					},
-					3: {
-						title: 'List Item 3',
-						subtitle: '',
-						checked: false,
-					},
-				}),
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 400px; ">
-		<v-list :dense="dense" :nav="nav" :lines="lines">
-			<v-list-item v-for="(item, i) in items" :key="i" :to="'/' + i">
-				<v-list-item-icon v-if="leftIcon" :center="leftIconCenter">
-					<v-icon name="info" />
-				</v-list-item-icon>
-				<v-list-item-content>
-					<v-list-item-title>{{ item.title }}</v-list-item-title>
-					<v-list-item-subtitle v-if="subtitle">{{ item.subtitle }}</v-list-item-subtitle>
-				</v-list-item-content>
-				<v-list-item-icon v-if="rightIcon" :center="rightIconCenter">
-					<v-checkbox v-model="item.checked" @change="onChange"/>
-				</v-list-item-icon>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const withLinks = () =>
-	defineComponent({
-		router: router,
-		props: {
-			dense: {
-				default: boolean('Dense', false, 'Full List'),
-			},
-			dense0: {
-				default: boolean('Dense', false, 'List Item 0'),
-			},
-			dense1: {
-				default: boolean('Dense', false, 'List Item 1'),
-			},
-			dense2: {
-				default: boolean('Dense', false, 'List Item 2'),
-			},
-			dense3: {
-				default: boolean('Dense', false, 'List Item 3'),
-			},
-			nav: {
-				default: boolean('Nav', false, 'Full List'),
-			},
-		},
-		setup() {
-			return {
-				items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 200px; ">
-		<v-list :dense="dense" :nav="nav">
-			<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
-				<v-list-item-content>
-					{{ item }}
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const withClicks = () =>
-	defineComponent({
-		props: {},
-		setup() {
-			return {
-				items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
-				clickHandler: action('onClick'),
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 200px; ">
-		<v-list>
-			<v-list-item v-for="(item, i) in items" :key="i" @click="clickHandler">
-				<v-list-item-content>
-					{{ item }}
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const orphanListItems = () =>
-	defineComponent({
-		router: router,
-		props: {
-			dense0: {
-				default: boolean('Dense', false, 'List Item 0'),
-			},
-			dense1: {
-				default: boolean('Dense', false, 'List Item 1'),
-			},
-			dense2: {
-				default: boolean('Dense', false, 'List Item 2'),
-			},
-			dense3: {
-				default: boolean('Dense', false, 'List Item 3'),
-			},
-		},
-		setup() {
-			return {
-				items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 200px; ">
-		<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
-			<v-list-item-content>
-				{{item}}
-			</v-list-item-content>
-		</v-list-item>
-	</v-sheet>`,
-	});
diff --git a/app/src/components/v-list/v-list.test.ts b/app/src/components/v-list/v-list.test.ts
deleted file mode 100644
index 2f2d0fd0fa..0000000000
--- a/app/src/components/v-list/v-list.test.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-import { mount, createLocalVue } from '@vue/test-utils';
-import VueCompositionAPI from '@vue/composition-api';
-import VueRouter from 'vue-router';
-import router from '@/router';
-import VList from './v-list.vue';
-import VListItem from './v-list-item.vue';
-import VListItemIcon from './v-list-item-icon.vue';
-import VListGroup from './v-list-group.vue';
-import VIcon from '@/components/v-icon';
-import TransitionExpand from '@/components/transition/expand';
-
-const localVue = createLocalVue();
-localVue.use(VueCompositionAPI);
-localVue.use(VueRouter);
-localVue.component('v-list-item', VListItem);
-localVue.component('v-list', VList);
-localVue.component('v-list-item-icon', VListItemIcon);
-localVue.component('v-list-group', VListGroup);
-localVue.component('v-icon', VIcon);
-localVue.component('transition-expand', TransitionExpand);
-
-describe('List', () => {
-	it('Renders the provided markup in the default slot', () => {
-		const component = mount(VList, {
-			localVue,
-			slots: {
-				default: `<v-list-item>Item Text</v-list-item>`,
-			},
-		});
-
-		expect(component.text()).toContain('Item Text');
-	});
-
-	it('Adds the dense class for dense lists', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				dense: true,
-			},
-		});
-
-		expect(component.classes()).toContain('dense');
-	});
-
-	it('Adds the three-line class for lines = 3', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				lines: 3,
-			},
-			slots: {
-				default: `<v-list-item/>
-						<v-list-item/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.classes()).toContain('three-line');
-	});
-
-	it('Adds the two-line class for lines = 2', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				lines: 2,
-			},
-			slots: {
-				default: `<v-list-item/>
-						<v-list-item/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.classes()).toContain('two-line');
-	});
-
-	it('Adds the two-line class to only one element, rest is 3', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				lines: 3,
-			},
-			slots: {
-				default: `<v-list-item :lines="2"/>
-						<v-list-item/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.find('.v-list-item:first-of-type').classes()).toContain('two-line');
-		expect(component.classes()).toContain('three-line');
-	});
-
-	it('Adds the nav class for nav lists', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				nav: true,
-			},
-		});
-
-		expect(component.classes()).toContain('nav');
-	});
-
-	it('Adds the centered class for cenetered icons in items', () => {
-		const component = mount(VListItem, {
-			localVue,
-			slots: {
-				default: `<v-list-item-icon center/>`,
-			},
-			propsData: {
-				nav: true,
-			},
-		});
-
-		expect(component.find('.v-list-item-icon').classes()).toContain('center');
-	});
-
-	it('Has the right number of list items', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				dense: false,
-			},
-			slots: {
-				default: `<v-list-item/>
-						<v-list-item/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.findAll('.v-list-item').length).toEqual(3);
-	});
-
-	it('Adds the dense class to one list-item, but not the other', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				dense: false,
-			},
-			slots: {
-				default: `<v-list-item dense/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.find('.v-list-item:first-of-type').classes()).toContain('dense');
-		expect(component.find('.v-list-item:nth-of-type(2)').classes()).not.toContain('dense');
-	});
-
-	it('Item has the link class when to prop is set', () => {
-		const component = mount(VListItem, {
-			localVue,
-			router: router,
-			propsData: {
-				to: '/',
-			},
-		});
-
-		expect(component.classes()).toContain('link');
-	});
-
-	it('Renders as a router-link if the to prop is set', () => {
-		const component = mount(VListItem, {
-			localVue,
-			router: router,
-			propsData: {
-				to: '/',
-			},
-		});
-
-		expect((component.vm as any).component).toBe('router-link');
-	});
-
-	it('Has link class when onClick is set', () => {
-		const onClick = jest.fn();
-
-		const component = mount(VListItem, {
-			localVue,
-			listeners: {
-				click: onClick,
-			},
-		});
-
-		expect(component.classes()).toContain('link');
-	});
-
-	it('Click event fires correctly', () => {
-		const onClick = jest.fn();
-		const component = mount(VListItem, {
-			localVue,
-			listeners: {
-				click: onClick,
-			},
-		});
-
-		component.find('.v-list-item').trigger('click');
-		expect(onClick).toHaveBeenCalled();
-	});
-
-	it('Opens a list group when activator item is clicked', async () => {
-		const component = mount(VList, {
-			localVue,
-			slots: {
-				default: `
-						<v-list-group>
-							<template v-slot:activator>
-								Click me!
-							</template>
-							<v-list-item class="test"/>
-							<v-list-item/>
-						</v-list-group>
-						<v-list-item/>
-						<v-list-item/>
-						`,
-			},
-		});
-		expect(component.find('.test').isVisible()).toBe(false);
-		component.find('.activator').trigger('click');
-		await component.vm.$nextTick();
-		expect(component.find('.test').isVisible()).toBe(true);
-	});
-});
diff --git a/app/src/components/v-list/v-list.vue b/app/src/components/v-list/v-list.vue
index 890e52015e..9a6391a092 100644
--- a/app/src/components/v-list/v-list.vue
+++ b/app/src/components/v-list/v-list.vue
@@ -1,14 +1,6 @@
 <template>
-	<ul
-		class="v-list"
-		:class="{
-			large,
-			'three-line': lines === 3,
-			'two-line': lines === 2,
-			'one-line': lines === 1,
-		}"
-	>
-		<slot></slot>
+	<ul class="v-list" :class="{ large }">
+		<slot />
 	</ul>
 </template>
 
@@ -22,10 +14,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		lines: {
-			type: Number as PropType<1 | 2 | 3>,
-			default: null,
-		},
 		multiple: {
 			type: Boolean,
 			default: true,
diff --git a/app/src/components/v-select/v-select.test.ts b/app/src/components/v-select/v-select.test.ts
index a92e91dba4..dc4ec814f1 100644
--- a/app/src/components/v-select/v-select.test.ts
+++ b/app/src/components/v-select/v-select.test.ts
@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 
 import VMenu from '@/components/v-menu/';
-import VList, { VListItem, VListItemContent, VListItemTitle } from '@/components/v-list/';
+import VList, { VListItem, VListItemContent, VListItemText } from '@/components/v-list/';
 import VCheckbox from '@/components/v-checkbox/';
 
 const localVue = createLocalVue();
@@ -12,7 +12,7 @@ localVue.component('v-menu', VMenu);
 localVue.component('v-list', VList);
 localVue.component('v-list-item', VListItem);
 localVue.component('v-list-item-content', VListItemContent);
-localVue.component('v-list-item-title', VListItemTitle);
+localVue.component('v-list-item-text', VListItemText);
 localVue.component('v-checkbox', VCheckbox);
 
 describe('Components / Select', () => {
diff --git a/app/src/modules/docs/components/navigation-item.vue b/app/src/modules/docs/components/navigation-item.vue
index 1fd77130b4..4b42491eac 100644
--- a/app/src/modules/docs/components/navigation-item.vue
+++ b/app/src/modules/docs/components/navigation-item.vue
@@ -2,7 +2,7 @@
 	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :subdued="subdued">
 		<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 		<v-list-item-content>
-			<v-list-item-title>{{ section.name }}</v-list-item-title>
+			<v-list-item-text>{{ section.name }}</v-list-item-text>
 		</v-list-item-content>
 	</v-list-item>
 	<div v-else-if="section.flat === true">
@@ -18,7 +18,7 @@
 		<template #activator>
 			<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title>{{ section.name }}</v-list-item-title>
+				<v-list-item-text>{{ section.name }}</v-list-item-text>
 			</v-list-item-content>
 		</template>
 		<navigation-list-item
diff --git a/app/src/modules/settings/components/navigation.vue b/app/src/modules/settings/components/navigation.vue
index ec7286396d..80283e553b 100644
--- a/app/src/modules/settings/components/navigation.vue
+++ b/app/src/modules/settings/components/navigation.vue
@@ -3,7 +3,7 @@
 		<v-list-item v-for="item in navItems" :to="item.to" :key="item.to">
 			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title>{{ item.name }}</v-list-item-title>
+				<v-list-item-text>{{ item.name }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>
 
@@ -12,14 +12,14 @@
 		<v-list-item v-for="item in externalItems" :href="item.href" :key="item.href">
 			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title>{{ item.name }}</v-list-item-title>
+				<v-list-item-text>{{ item.name }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>
 
 		<v-list-item href="https://github.com/directus/directus/releases" class="version">
 			<v-list-item-icon><v-icon name="directus" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title class="version">Directus {{ version }}</v-list-item-title>
+				<v-list-item-text class="version">Directus {{ version }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>
 	</v-list>