Fixed #5786 - Deprecate inputStyle and add inputVariant

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -257,7 +257,7 @@ const classes = {
     inputMultiple: ({ props, instance }) => [
         'p-autocomplete-input-multiple',
         {
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
         }
     ],
     chipItem: ({ instance, i }) => [

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -196,7 +196,7 @@ const classes = {
         {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,

components/lib/checkbox/style/CheckboxStyle.js

@@ -120,7 +120,7 @@ const classes = {
             'p-checkbox-checked': instance.checked,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
         }
     ],
     box: 'p-checkbox-box',

components/lib/config/PrimeVue.d.ts

@@ -110,7 +110,11 @@ import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
 
 export interface PrimeVueConfiguration {
     ripple?: boolean;
+    /**
+     * @deprecated since v4.0. Use 'inputVariant' instead.
+     */
     inputStyle?: 'filled' | 'outlined' | undefined;
+    inputVariant?: 'filled' | 'outlined' | undefined;
     locale?: PrimeVueLocaleOptions;
     filterMatchModeOptions?: any;
     zIndex?: PrimeVueZIndexOptions;

components/lib/config/PrimeVue.js

@@ -6,6 +6,7 @@ import { inject, reactive, ref, watch } from 'vue';
 export const defaultOptions = {
     ripple: false,
     inputStyle: null,
+    inputVariant: null,
     locale: {
         startsWith: 'Starts with',
         contains: 'Contains',

components/lib/inputchips/style/InputChipsStyle.js

@@ -118,7 +118,7 @@ const classes = {
     input: ({ props, instance }) => [
         'p-inputchips-input',
         {
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
         }
     ],
     chipItem: ({ state, index }) => ['p-inputchips-chip-item', { 'p-focus': state.focusedIndex === index }],

components/lib/inputtext/style/InputTextStyle.js

@@ -64,7 +64,7 @@ const classes = {
             'p-inputtext-sm': props.size === 'small',
             'p-inputtext-lg': props.size === 'large',
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
         }
     ]
 };

components/lib/multiselect/style/MultiSelectStyle.js

@@ -207,7 +207,7 @@ const classes = {
             'p-multiselect-display-chip': props.display === 'chip',
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,

components/lib/radiobutton/style/RadioButtonStyle.js

@@ -125,7 +125,7 @@ const classes = {
             'p-radiobutton-checked': instance.checked,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
         }
     ],
     box: 'p-radiobutton-box',

components/lib/select/style/SelectStyle.js

@@ -203,7 +203,7 @@ const classes = {
         {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
             'p-focus': state.focused,
             'p-inputwrapper-filled': instance.hasSelectedOption,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,

components/lib/textarea/style/TextareaStyle.js

@@ -68,7 +68,7 @@ const classes = {
             'p-filled': instance.filled,
             'p-textarea-resizable ': props.autoResize,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
         }
     ]
 };

components/lib/treeselect/style/TreeSelectStyle.js

@@ -138,7 +138,7 @@ const classes = {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-focus': instance.focused,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
             'p-inputwrapper-filled': !instance.emptyValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-treeselect-open': instance.overlayVisible

doc/common/apidoc/index.json

@@ -18272,6 +18272,15 @@
                             "optional": true,
                             "readonly": false,
                             "type": "\"filled\" | \"outlined\"",
+                            "default": "",
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'inputVariant' instead."
+                        },
+                        {
+                            "name": "inputVariant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
                             "default": ""
                         },
                         {

doc/configuration/InputStyleDoc.vue

@@ -1,10 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled
+            Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-variant-filled</i> to an ancestor of an input enables the
-            style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components
+            filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element,
-            that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to <i>filled</i> at
+            components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputVariant to
-            PrimeVue configuration as well.
+            <i>filled</i> at PrimeVue configuration as well.
         </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
@@ -20,7 +20,7 @@ import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { inputStyle: "filled" });
+app.use(PrimeVue, { inputVariant: "filled" });
 `
             }
         };

doc/nuxt/configuration/OptionsDoc.vue

@@ -15,7 +15,7 @@ primevue: {
     options: {
         unstyled: true,
         ripple: true,
-        inputStyle: 'filled'
+        inputVariant: 'filled'
     }
 }
 `