docs(examples): use text VBtns instead of flat ones (#6558)

packages/docs/src/components/core/OpenCollectiveBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <v-btn
-    flat
+    text
     href="https://opencollective.com/vuetify"
     large
     rel="noopener"

packages/docs/src/components/core/Snackbar.vue

@@ -28,7 +28,7 @@
         :color="computedColor"
         :ripple="false"
         v-bind="bind"
-        :flat="snackbar.color !== 'store'"
+        :text="snackbar.color !== 'store'"
         dark
         depressed
         @click="onClick"

packages/docs/src/components/core/Versions.vue

@@ -9,7 +9,7 @@
     <v-btn
       slot="activator"
       class="hidden-md-and-down"
-      flat
+      text
     >
       <span
         class="text-lowercase mr-1"

packages/docs/src/components/getting-started/Roadmap.vue

@@ -44,7 +44,7 @@
               :input-value="item.value"
               :ripple="false"
               class="font-weight-light ma-0"
-              flat
+              text
             >
               <span
                 class="mr-2"

packages/docs/src/components/themes/Premium.vue

@@ -87,7 +87,7 @@
               <v-btn
                 :href="`${template.url}?ref=vuetifyjs.com`"
                 color="primary"
-                flat
+                text
                 outline
                 target="_blank"
                 rel="noopener"

packages/docs/src/examples/bottom-navigation/toggle.vue

@@ -5,7 +5,7 @@
   >
     <v-card-text class="text-xs-center">
       <v-btn
-        flat
+        text
         color="primary"
         @click="showNav = !showNav"
       >
@@ -19,17 +19,17 @@
       absolute
       color="transparent"
     >
-      <v-btn flat color="teal">
+      <v-btn text color="teal">
         <span>Recents</span>
         <v-icon>history</v-icon>
       </v-btn>
 
-      <v-btn flat color="teal">
+      <v-btn text color="teal">
         <span>Favorites</span>
         <v-icon>favorite</v-icon>
       </v-btn>
 
-      <v-btn flat color="teal">
+      <v-btn text color="teal">
         <span>Nearby</span>
         <v-icon>place</v-icon>
       </v-btn>

packages/docs/src/examples/bottom-navigation/usage.vue

@@ -11,7 +11,7 @@
     >
       <v-btn
         color="teal"
-        flat
+        text
         value="recent"
       >
         <span>Recent</span>
@@ -20,7 +20,7 @@
 
       <v-btn
         color="teal"
-        flat
+        text
         value="favorites"
       >
         <span>Favorites</span>
@@ -29,7 +29,7 @@
 
       <v-btn
         color="teal"
-        flat
+        text
         value="nearby"
       >
         <span>Nearby</span>

packages/docs/src/examples/button-groups/appBar.vue

@@ -28,19 +28,19 @@
       class="transparent"
       multiple
     >
-      <v-btn :value="1" flat>
+      <v-btn :value="1" text>
         <v-icon>format_bold</v-icon>
       </v-btn>
 
-      <v-btn :value="2" flat>
+      <v-btn :value="2" text>
         <v-icon>format_italic</v-icon>
       </v-btn>
 
-      <v-btn :value="3" flat>
+      <v-btn :value="3" text>
         <v-icon>format_underlined</v-icon>
       </v-btn>
 
-      <v-btn :value="4" flat>
+      <v-btn :value="4" text>
         <v-icon>format_color_fill</v-icon>
       </v-btn>
     </v-btn-toggle>
@@ -54,19 +54,19 @@
       v-model="toggle_exclusive"
       class="transparent"
     >
-      <v-btn :value="1" flat>
+      <v-btn :value="1" text>
         <v-icon>format_align_left</v-icon>
       </v-btn>
 
-      <v-btn :value="2" flat>
+      <v-btn :value="2" text>
         <v-icon>format_align_center</v-icon>
       </v-btn>
 
-      <v-btn :value="3" flat>
+      <v-btn :value="3" text>
         <v-icon>format_align_right</v-icon>
       </v-btn>
 
-      <v-btn :value="4" flat>
+      <v-btn :value="4" text>
         <v-icon>format_align_justify</v-icon>
       </v-btn>
     </v-btn-toggle>

packages/docs/src/examples/button-groups/usage.vue

@@ -6,104 +6,104 @@
           <v-flex xs12 sm6 class="py-2">
             <p>Exclusive</p>
             <v-btn-toggle v-model="toggle_exclusive">
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_left</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_center</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_right</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_justify</v-icon>
               </v-btn>
             </v-btn-toggle>
           </v-flex>
           <v-flex xs12 sm6 class="py-2">
             <p>Multiple</p>
             <v-btn-toggle v-model="toggle_multiple" multiple>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_bold</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_italic</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_underlined</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_color_fill</v-icon>
               </v-btn>
             </v-btn-toggle>
           </v-flex>
           <v-flex xs12 sm6 class="py-2">
             <p>No Options Selected</p>
             <v-btn-toggle v-model="toggle_none">
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_left</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_center</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_right</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_justify</v-icon>
               </v-btn>
             </v-btn-toggle>
           </v-flex>
           <v-flex xs12 sm6 class="py-2">
             <p>Mandatory</p>
             <v-btn-toggle v-model="toggle_one" mandatory>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_left</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_center</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_right</v-icon>
               </v-btn>
-              <v-btn flat>
+              <v-btn text>
                 <v-icon>format_align_justify</v-icon>
               </v-btn>
             </v-btn-toggle>
           </v-flex>
           <v-flex xs12 sm6 class="py-2">
             <p>Text Options</p>
             <v-btn-toggle v-model="text">
-              <v-btn flat value="left">
+              <v-btn text value="left">
                 Left
               </v-btn>
-              <v-btn flat value="center">
+              <v-btn text value="center">
                 Center
               </v-btn>
-              <v-btn flat value="right">
+              <v-btn text value="right">
                 Right
               </v-btn>
-              <v-btn flat value="justify">
+              <v-btn text value="justify">
                 Justify
               </v-btn>
             </v-btn-toggle>
           </v-flex>
           <v-flex xs12 sm6 class="py-2">
             <p>Text &amp; Icon Options</p>
             <v-btn-toggle v-model="icon">
-              <v-btn flat value="left">
+              <v-btn text value="left">
                 <span>Left</span>
                 <v-icon>format_align_left</v-icon>
               </v-btn>
-              <v-btn flat value="center">
+              <v-btn text value="center">
                 <span>Center</span>
                 <v-icon>format_align_center</v-icon>
               </v-btn>
-              <v-btn flat value="right">
+              <v-btn text value="right">
                 <span>Right</span>
                 <v-icon>format_align_right</v-icon>
               </v-btn>
-              <v-btn flat value="justify">
+              <v-btn text value="justify">
                 <span>Justify</span>
                 <v-icon>format_align_justify</v-icon>
               </v-btn>

packages/docs/src/examples/buttons/flat.vue

@@ -2,46 +2,46 @@
   <v-layout align-center>
     <v-flex xs12 sm4 text-xs-center>
       <div>
-        <v-btn flat small>Normal</v-btn>
+        <v-btn text small>Normal</v-btn>
       </div>
       <div>
-        <v-btn flat small color="primary">Primary</v-btn>
+        <v-btn text small color="primary">Primary</v-btn>
       </div>
       <div>
-        <v-btn flat small color="error">Error</v-btn>
+        <v-btn text small color="error">Error</v-btn>
       </div>
       <div>
-        <v-btn flat small disabled>Disabled</v-btn>
+        <v-btn text small disabled>Disabled</v-btn>
       </div>
     </v-flex>
 
     <v-flex xs12 sm4 text-xs-center>
       <div>
-        <v-btn flat>Normal</v-btn>
+        <v-btn text>Normal</v-btn>
       </div>
       <div>
-        <v-btn flat color="primary">Primary</v-btn>
+        <v-btn text color="primary">Primary</v-btn>
       </div>
       <div>
-        <v-btn flat color="error">Error</v-btn>
+        <v-btn text color="error">Error</v-btn>
       </div>
       <div>
-        <v-btn flat disabled>Disabled</v-btn>
+        <v-btn text disabled>Disabled</v-btn>
       </div>
     </v-flex>
 
     <v-flex xs12 sm4 text-xs-center>
       <div>
-        <v-btn flat large>Normal</v-btn>
+        <v-btn text large>Normal</v-btn>
       </div>
       <div>
-        <v-btn flat large color="primary">Primary</v-btn>
+        <v-btn text large color="primary">Primary</v-btn>
       </div>
       <div>
-        <v-btn flat large color="error">Error</v-btn>
+        <v-btn text large color="error">Error</v-btn>
       </div>
       <div>
-        <v-btn flat large disabled>Disabled</v-btn>
+        <v-btn text large disabled>Disabled</v-btn>
       </div>
     </v-flex>
   </v-layout>

packages/docs/src/examples/buttons/icon.vue

@@ -8,25 +8,25 @@
           </v-flex>
 
           <v-flex xs12 sm3>
-            <v-btn flat icon color="pink">
+            <v-btn text icon color="pink">
               <v-icon>favorite</v-icon>
             </v-btn>
           </v-flex>
 
           <v-flex xs12 sm3>
-            <v-btn flat icon color="indigo">
+            <v-btn text icon color="indigo">
               <v-icon>star</v-icon>
             </v-btn>
           </v-flex>
 
           <v-flex xs12 sm3>
-            <v-btn flat icon color="green">
+            <v-btn text icon color="green">
               <v-icon>cached</v-icon>
             </v-btn>
           </v-flex>
 
           <v-flex xs12 sm3>
-            <v-btn flat icon color="deep-orange">
+            <v-btn text icon color="deep-orange">
               <v-icon>thumb_up</v-icon>
             </v-btn>
           </v-flex>

packages/docs/src/examples/calendars/events.vue

@@ -51,7 +51,7 @@
                   </v-card-title>
                   <v-card-actions>
                     <v-btn
-                      flat
+                      text
                       color="secondary"
                     >
                       Cancel