refactor(select): Replace Label & BottomLine with FloatingLabel &

LineRipple (#96) BREAKING CHANGES: Use FloatingLabel and LineRipple instead of the removed SelectLabel and SelectBottomLine.
matsp · Apr 24, 2018 · 43fe087 · 43fe087
1 parent 7ddf97a
commit 43fe087
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 93 deletions.
diff --git a/components/select/README.md b/components/select/README.md
@@ -7,12 +7,12 @@
   <option v-for="option in selectOptions" :key="option.text" :value="option.value" :selected="selected === option.value">
     {{ option.text }}
   </option>
- <m-select-label
+ <m-floating-label
    slot="label"
   :floatAbove="selected !== ''">
   Pick a food group
-</m-select-label> 
-<m-select-bottom-line slot="bottomLine"/>
+</m-floating-label> 
+<m-line-ripple slot="bottomLine"/>
 </m-select>
 ```
 

diff --git a/components/select/SelectBottomLine.vue b/components/select/SelectBottomLine.vue
diff --git a/components/select/SelectLabel.vue b/components/select/SelectLabel.vue
diff --git a/components/select/index.js b/components/select/index.js
@@ -1,15 +1,11 @@
 import Select from './Select.vue'
-import SelectBottomLine from './SelectBottomLine.vue'
-import SelectLabel from './SelectLabel.vue'
 import './styles.scss'
 
 import { initPlugin } from '../'
 
 const plugin = {
   install (vm) {
     vm.component('m-select', Select)
-    vm.component('m-select-bottom-line', SelectBottomLine)
-    vm.component('m-select-label', SelectLabel)
   }
 }
 export default plugin

diff --git a/demo/views/SelectView.vue b/demo/views/SelectView.vue
@@ -12,10 +12,10 @@
               :selected="selected === option.value">
               {{ option.text }}
             </option>
-            <m-select-label
+            <m-floating-label
               slot="label"
-              :float-above="selected !== ''">Pick a food group</m-select-label>
-            <m-select-bottom-line slot="bottomLine"/>
+              :float-above="selected !== ''">Pick a food group</m-floating-label>
+            <m-line-ripple slot="bottomLine"/>
           </m-select>
         </m-layout-grid-cell>
       </m-layout-grid-inner>
@@ -34,10 +34,10 @@
               :selected="selected === option.value">
               {{ option.text }}
             </option>
-            <m-select-label
+            <m-floating-label
               slot="label"
-              :float-above="selected !== ''">Pick a food group</m-select-label>
-            <m-select-bottom-line slot="bottomLine"/>
+              :float-above="selected !== ''">Pick a food group</m-floating-label>
+            <m-line-ripple slot="bottomLine"/>
           </m-select>
         </m-layout-grid-cell>
       </m-layout-grid-inner>
@@ -50,10 +50,14 @@ import Vue from 'vue'
 import List from '../../dist/list'
 import Menu from '../../dist/menu'
 import Select from '../../dist/select'
+import FloatingLabel from '../../dist/floating-label'
+import LineRipple from '../../dist/line-ripple'
 
 Vue.use(List)
 Vue.use(Menu)
 Vue.use(Select)
+Vue.use(FloatingLabel)
+Vue.use(LineRipple)
 
 export default {
   data () {