docs: post-migration adjustments in examples

J-Sek · J-Sek · commit c15761374dc8 · 2026-01-02T18:38:15.000+01:00
diff --git a/packages/docs/src/components/components/ListItem.vue b/packages/docs/src/components/components/ListItem.vue
@@ -29,7 +29,7 @@
       </template>
     </v-card>
 
-    <h2 class="text-title-large">
+    <h2 class="text-title-large mt-4 mb-n3 font-weight-medium">
       <span class="text-capitalize">{{ name?.replace(/-/g, ' ') }}</span>
     </h2>
 
diff --git a/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue b/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card>
-    <v-card-title class="text-headline-small font-weight-regular bg-blue-grey">
+    <v-card-title class="font-weight-regular bg-blue-grey py-3">
       Profile
     </v-card-title>
 
diff --git a/packages/docs/src/examples/v-card/misc-card-reveal.vue b/packages/docs/src/examples/v-card/misc-card-reveal.vue
@@ -6,9 +6,9 @@
     <v-card-text>
       <div>Word of the Day</div>
 
-      <p class="text-headline-large font-weight-black">el·ee·mos·y·nar·y</p>
+      <div class="text-headline-large font-weight-black mb-4">el·ee·mos·y·nar·y</div>
 
-      <p>adjective</p>
+      <div class="mb-4">adjective</div>
 
       <div class="text-medium-emphasis">
         relating to or dependent on charity; charitable; charitable donations. Pertaining to alms.<br>
diff --git a/packages/docs/src/examples/v-card/misc-information-card.vue b/packages/docs/src/examples/v-card/misc-information-card.vue
@@ -6,9 +6,9 @@
     <v-card-text>
       <div>Word of the Day</div>
 
-      <p class="text-headline-large font-weight-black">be•nev•o•lent</p>
+      <div class="text-headline-large font-weight-black mb-4">be•nev•o•lent</div>
 
-      <p>adjective</p>
+      <div class="mb-4">adjective</div>
 
       <div class="text-medium-emphasis">
         well meaning and kindly.<br>
diff --git a/packages/docs/src/examples/v-card/misc-shopify-funding.vue b/packages/docs/src/examples/v-card/misc-shopify-funding.vue
@@ -1,17 +1,16 @@
 <template>
   <v-container>
     <v-card>
-      <v-card-title class="text-label-medium text-uppercase">
-        Progress
+      <v-card-title>
+        <div class="text-label-medium text-uppercase my-1">Progress</div>
 
         <div class="text-green-darken-3 text-display-medium font-weight-bold">90%</div>
 
         <div class="text-title-large text-medium-emphasis font-weight-regular">
           $2,938.00 remaining
         </div>
       </v-card-title>
-      <br>
-      <v-card-text>
+      <v-card-text class="pt-2 mt-8">
         <div
           :style="`right: calc(${review} - 32px)`"
           class="position-absolute mt-n8 text-body-small text-green-darken-3"
diff --git a/packages/docs/src/examples/v-card/misc-weather-card.vue b/packages/docs/src/examples/v-card/misc-weather-card.vue
@@ -19,7 +19,7 @@
     <v-card-text class="py-0">
       <v-row align="center" no-gutters>
         <v-col
-          class="text-display-large"
+          class="text-display-large font-weight-light"
           cols="6"
         >
           64&deg;F
diff --git a/packages/docs/src/examples/v-card/prop-color.vue b/packages/docs/src/examples/v-card/prop-color.vue
@@ -45,7 +45,7 @@
       >
         <v-card-item>
           <div>
-            <div class="text-label-medium text-uppercase mb-1">
+            <div class="text-label-medium text-uppercase mt-2 mb-3">
               {{ variant }}
             </div>
             <div class="text-title-large mb-1">
diff --git a/packages/docs/src/examples/v-data-iterator/misc-filter.vue b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
@@ -34,7 +34,7 @@
 
                 <v-list-item :subtitle="item.raw.subtitle" class="mb-2">
                   <template v-slot:title>
-                    <strong class="text-title-large mb-2">{{ item.raw.title }}</strong>
+                    <strong class="d-block text-title-large py-2 text-truncate">{{ item.raw.title }}</strong>
                   </template>
                 </v-list-item>
 
diff --git a/packages/docs/src/examples/v-data-iterator/slot-default.vue b/packages/docs/src/examples/v-data-iterator/slot-default.vue
@@ -21,7 +21,7 @@
                 start
               ></v-icon>
 
-              <h4>{{ item.raw.name }}</h4>
+              <h4 class="my-0 text-title-large font-weight-medium">{{ item.raw.name }}</h4>
             </v-card-title>
 
             <v-card-text>
diff --git a/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue b/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue
@@ -64,7 +64,7 @@
               subtitle="Lorem ipsum dil orei namdie dkaf"
             >
               <template v-slot:title>
-                <strong class="text-title-large">
+                <strong class="d-block text-title-large py-2 text-truncate">
                   {{ item.raw.name }}
                 </strong>
               </template>
diff --git a/packages/docs/src/examples/v-img/prop-max-height.vue b/packages/docs/src/examples/v-img/prop-max-height.vue
@@ -13,7 +13,7 @@
               height="125"
               src="https://picsum.photos/350/165?random"
             ></v-img>
-            <v-card-title class="text-title-large">
+            <v-card-title class="text-title-medium py-3">
               height
             </v-card-title>
           </v-card>
@@ -27,7 +27,7 @@
               src="https://picsum.photos/350/165?random"
               cover
             ></v-img>
-            <v-card-title class="text-title-large">
+            <v-card-title class="text-title-medium py-3">
               height with cover
             </v-card-title>
           </v-card>
@@ -40,7 +40,7 @@
               max-height="125"
               src="https://picsum.photos/350/165?random"
             ></v-img>
-            <v-card-title class="text-title-large">
+            <v-card-title class="text-title-medium py-3">
               max-height
             </v-card-title>
           </v-card>
@@ -54,7 +54,7 @@
               src="https://picsum.photos/350/165?random"
               cover
             ></v-img>
-            <v-card-title class="text-title-large">
+            <v-card-title class="text-title-medium py-3">
               max-height with cover
             </v-card-title>
           </v-card>
diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue
@@ -43,13 +43,7 @@
 
   const tab = ref(null)
 
-  const items = [
-    'web',
-    'shopping',
-    'videos',
-    'images',
-    'news',
-  ]
+  const items = ['Web', 'Shopping', 'Videos', 'Images', 'News']
   const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
 </script>
 
@@ -58,9 +52,7 @@
     data () {
       return {
         tab: null,
-        items: [
-          'web', 'shopping', 'videos', 'images', 'news',
-        ],
+        items: ['Web', 'Shopping', 'Videos', 'Images', 'News'],
         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
       }
     },

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`<v-card-text class="py-0">`
`20`	`20`	`<v-row align="center" no-gutters>`
`21`	`21`	`<v-col`
`22`		`- class="text-display-large"`
	`22`	`+ class="text-display-large font-weight-light"`
`23`	`23`	`cols="6"`
`24`	`24`	`>`
`25`	`25`	`64°F`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@`
`45`	`45`	`>`
`46`	`46`	`<v-card-item>`
`47`	`47`	`<div>`
`48`		`- <div class="text-label-medium text-uppercase mb-1">`
	`48`	`+ <div class="text-label-medium text-uppercase mt-2 mb-3">`
`49`	`49`	`{{ variant }}`
`50`	`50`	`</div>`
`51`	`51`	`<div class="text-title-large mb-1">`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@`
`64`	`64`	`subtitle="Lorem ipsum dil orei namdie dkaf"`
`65`	`65`	`>`
`66`	`66`	`<template v-slot:title>`
`67`		`- <strong class="text-title-large">`
	`67`	`+ <strong class="d-block text-title-large py-2 text-truncate">`
`68`	`68`	`{{ item.raw.name }}`
`69`	`69`	`</strong>`
`70`	`70`	`</template>`