feat(VInput): add indent-details prop (#21265)

fixes #16679

Author: johnleider

packages/api-generator/src/locale/en/VInput.json

@@ -12,6 +12,7 @@
     "hint": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.",
     "iconColor": "Sets the color of the prepend/append icons.",
     "id": "Sets the DOM id on the component.",
+    "indentDetails": "Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls.",
     "loading": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
     "persistentHint": "Forces [hint](#props-hint) to always be visible.",
     "placeholder": "Sets the input's placeholder text.",

packages/docs/src/examples/v-form/misc-exposed.vue

@@ -22,6 +22,7 @@
         v-model="checkbox"
         :rules="[v => !!v || 'You must agree to continue!']"
         label="Do you agree?"
+        indent-details
         required
       ></v-checkbox>
 

packages/docs/src/examples/v-form/misc-vee-validate.vue

@@ -33,6 +33,7 @@
       label="Option"
       type="checkbox"
       value="1"
+      indent-details
     ></v-checkbox>
 
     <v-btn

packages/docs/src/examples/v-form/misc-vuelidate.vue

@@ -33,6 +33,7 @@
       v-model="state.checkbox"
       :error-messages="v$.checkbox.$errors.map(e => e.$message)"
       label="Do you agree?"
+      indent-details
       required
       @blur="v$.checkbox.$touch"
       @change="v$.checkbox.$touch"

packages/docs/src/pages/en/getting-started/upgrade-guide.md

@@ -35,6 +35,38 @@ export default createVuetify({
 
 ## Components
 
+### VTextField
+
+Removed the **$text-field-details-padding-inline** SASS variable.
+
+```diff { resource="src/styles/settings/_variables.scss" }
+@use 'vuetify/settings' with (
+-  $text-field-details-padding-inline: <value>
++  $input-details-padding-inline: <value>
+);
+```
+
+### VRadioGroup
+
+Removed the **$radio-group-details-padding-inline** SASS variable.
+
+```diff { resource="src/styles/settings/_variables.scss" }
+@use 'vuetify/settings' with (
+-  $radio-group-details-padding-inline: <value>
++  $input-details-padding-inline: <value>
+);
+```
+
+### VFileInput
+
+Removed the **$file-input-details-padding-inline** SASS variable.
+
+```diff { resource="src/styles/settings/_variables.scss" }
+@use 'vuetify/settings' with (
+-  $file-input-details-padding-inline: <value>
++  $input-details-padding-inline: <value>
+);
+
 ### VBtn display
 
 In Vuetify 3, VField's layout was changed from `display: flex` to `display: grid` to better handle its internal elements. However, the grid implementation had limitations with gap control, so in Vuetify 4 we've reverted back to using `display: flex`.

packages/vuetify/src/blueprints/md1.ts

@@ -24,6 +24,7 @@ export const md1: Blueprint = {
     },
     VCheckbox: {
       color: 'secondary',
+      indentDetails: false,
     },
     VCombobox: {
       variant: 'underlined',
@@ -44,6 +45,16 @@ export const md1: Blueprint = {
     },
     VSlider: {
       color: 'primary',
+      indentDetails: false,
+    },
+    VSwitch: {
+      indentDetails: false,
+    },
+    VRadioGroup: {
+      indentDetails: false,
+    },
+    VRangeSlider: {
+      indentDetails: false,
     },
     VTabs: {
       color: 'primary',

packages/vuetify/src/blueprints/md2.ts

@@ -23,6 +23,7 @@ export const md2: Blueprint = {
     },
     VCheckbox: {
       color: 'secondary',
+      indentDetails: true,
     },
     VCombobox: {
       variant: 'filled',
@@ -38,11 +39,21 @@ export const md2: Blueprint = {
         rounded: 'circle',
       },
     },
+    VRadioGroup: {
+      indentDetails: true,
+    },
     VSelect: {
       variant: 'filled',
     },
     VSlider: {
       color: 'primary',
+      indentDetails: true,
+    },
+    VRangeSlider: {
+      indentDetails: true,
+    },
+    VSwitch: {
+      indentDetails: true,
     },
     VTabs: {
       color: 'primary',

packages/vuetify/src/blueprints/md3.ts

@@ -32,6 +32,7 @@ export const md3: Blueprint = {
     VCheckbox: {
       color: 'secondary',
       inset: true,
+      indentDetails: true,
     },
     VChip: {
       rounded: 'sm',
@@ -74,11 +75,21 @@ export const md3: Blueprint = {
         rounded: undefined,
       },
     },
+    VRadioGroup: {
+      indentDetails: true,
+    },
     VSelect: {
       variant: 'outlined',
     },
     VSlider: {
       color: 'primary',
+      indentDetails: true,
+    },
+    VRangeSlider: {
+      indentDetails: true,
+    },
+    VSwitch: {
+      indentDetails: true,
     },
     VTabs: {
       color: 'primary',

packages/vuetify/src/components/VFileInput/VFileInput.sass

@@ -38,8 +38,3 @@
 
     &--dragging input[type="file"]
       z-index: 1
-
-    .v-input__details
-      padding-inline: $file-input-details-padding-inline
-      @at-root #{selector.append('.v-input--plain-underlined', &)}
-        padding-inline: 0

packages/vuetify/src/components/VFileInput/VFileInput.tsx

@@ -252,7 +252,6 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
               'v-file-input--chips': !!props.chips,
               'v-file-input--dragging': isDragging.value,
               'v-file-input--hide': props.hideInput,
-              'v-input--plain-underlined': isPlainOrUnderlined.value,
             },
             props.class,
           ]}
@@ -262,6 +261,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
           { ...inputProps }
           centerAffix={ !isPlainOrUnderlined.value }
           focused={ isFocused.value }
+          indentDetails={ props.indentDetails ?? !isPlainOrUnderlined.value }
         >
           {{
             ...slots,