feat(drawer): refactor classes as per mdc 0.28.0

also rename list-item details classes
stasson · Jan 13, 2018 · 6a9dc05 · 6a9dc05
1 parent 6d0e0c1
commit 6a9dc05
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 20 deletions.
diff --git a/components/drawer/mdc-drawer-header.vue b/components/drawer/mdc-drawer-header.vue
@@ -1,6 +1,6 @@
 <template>
-  <header class="mdc-drawer-header" :class="[headerClass]" v-if="show">
-    <div :class="[headerContentClass]">
+  <header class="mdc-drawer-header mdc-drawer__header" v-if="show">
+    <div class="mdc-drawer__header-content">
       <slot />
     </div>
   </header>
@@ -16,12 +16,6 @@ export default {
   },
   inject: ['mdcDrawer'],
   computed: {
-    headerClass () {
-      return this.mdcDrawer.type + '__header'
-    },
-    headerContentClass () {
-      return this.mdcDrawer.type + '__header-content'
-    },
     show () {
       if (this.temporary || this.persistent || this.permanent) {
         return (this.temporary && this.mdcDrawer.isTemporary) ||

diff --git a/components/drawer/mdc-drawer-item.vue b/components/drawer/mdc-drawer-item.vue
@@ -3,7 +3,7 @@
     class="mdc-drawer-item mdc-list-item" 
     :class="classes" :style="styles"
     @click="onClick">
-    <span class="mdc-list-item__start-detail" v-if="hasStartDetail">
+    <span class="mdc-list-item__graphic" v-if="hasStartDetail">
       <slot name="start-detail">
         <i class="material-icons" aria-hidden="true">{{startIcon}}</i>
       </slot>

diff --git a/components/drawer/mdc-permanent-drawer.vue b/components/drawer/mdc-permanent-drawer.vue
@@ -1,7 +1,7 @@
 <template>
-  <nav class="mdc-permanent-drawer mdc-typography">
-    <nav class="mdc-permanent-drawer__content">
-      <div class="mdc-permanent-drawer__toolbar-spacer" 
+  <nav class="mdc-permanent-drawer mdc-drawer--permanent mdc-typography">
+    <nav class="mdc-drawer__content">
+      <div class="mdc-drawer__toolbar-spacer" 
         v-if="toolbarSpacer"></div>
       <slot />
     </nav>

diff --git a/components/drawer/mdc-persistent-drawer.vue b/components/drawer/mdc-persistent-drawer.vue
@@ -1,7 +1,7 @@
 <template>
-  <aside class="mdc-persistent-drawer mdc-typography" :class="classes">
-    <nav ref="drawer" class="mdc-persistent-drawer__drawer">
-      <div class="mdc-persistent-drawer__toolbar-spacer" 
+  <aside class="mdc-persistent-drawer mdc-drawer--persistent mdc-typography" :class="classes">
+    <nav ref="drawer" class="mdc-drawer__drawer">
+      <div class="mdc-drawer__toolbar-spacer" 
         v-if="toolbarSpacer"></div>
       <slot />
     </nav>

diff --git a/components/drawer/mdc-temporary-drawer.vue b/components/drawer/mdc-temporary-drawer.vue
@@ -1,7 +1,7 @@
 <template>
-  <aside class="mdc-temporary-drawer mdc-typography" :class="classes">
-    <nav ref="drawer" class="mdc-temporary-drawer__drawer">
-      <div class="mdc-temporary-drawer__toolbar-spacer" v-if="toolbarSpacer"></div>
+  <aside class="mdc-temporary-drawer mdc-drawer--temporary mdc-typography" :class="classes">
+    <nav ref="drawer" class="mdc-drawer__drawer">
+      <div class="mdc-drawer__toolbar-spacer" v-if="toolbarSpacer"></div>
       <slot />
     </nav>
   </aside>

diff --git a/components/list/mdc-list-item.vue b/components/list/mdc-list-item.vue
@@ -1,7 +1,7 @@
 <template>
   <li class="mdc-list-item">
 
-    <span class="mdc-list-item__start-detail" v-if="hasStartDetail">
+    <span class="mdc-list-item__graphic" v-if="hasStartDetail">
       <slot name="start-detail"></slot>
     </span>
 
@@ -13,7 +13,7 @@
     </span>
     <slot v-else></slot>
 
-    <span class="mdc-list-item__end-detail" v-if="hasEndDetail">
+    <span class="mdc-list-item__meta" v-if="hasEndDetail">
       <slot name="end-detail"></slot>
     </span>