From be72908415da2b91e99378394258d512956346ce Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 27 May 2024 13:28:07 +0300
Subject: [PATCH] Fixed #5786 - Deprecate inputStyle and add inputVariant

---
 components/lib/autocomplete/style/AutoCompleteStyle.js |  2 +-
 .../lib/cascadeselect/style/CascadeSelectStyle.js      |  2 +-
 components/lib/checkbox/style/CheckboxStyle.js         |  2 +-
 components/lib/config/PrimeVue.d.ts                    |  4 ++++
 components/lib/config/PrimeVue.js                      |  1 +
 components/lib/inputchips/style/InputChipsStyle.js     |  2 +-
 components/lib/inputtext/style/InputTextStyle.js       |  2 +-
 components/lib/multiselect/style/MultiSelectStyle.js   |  2 +-
 components/lib/radiobutton/style/RadioButtonStyle.js   |  2 +-
 components/lib/select/style/SelectStyle.js             |  6 +++---
 components/lib/textarea/style/TextareaStyle.js         |  2 +-
 components/lib/treeselect/style/TreeSelectStyle.js     |  2 +-
 doc/common/apidoc/index.json                           |  9 +++++++++
 doc/configuration/InputStyleDoc.vue                    | 10 +++++-----
 doc/nuxt/configuration/OptionsDoc.vue                  |  2 +-
 15 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index a2fca6345..1d45115cf 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/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 }) => [
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index 09e48dfe6..26abb427f 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/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,
diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js
index 2df8cc333..c6704728c 100644
--- a/components/lib/checkbox/style/CheckboxStyle.js
+++ b/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',
diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts
index 740ae44a7..d6bab88b2 100644
--- a/components/lib/config/PrimeVue.d.ts
+++ b/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;
diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js
index a5a8042b4..b9430000c 100644
--- a/components/lib/config/PrimeVue.js
+++ b/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',
diff --git a/components/lib/inputchips/style/InputChipsStyle.js b/components/lib/inputchips/style/InputChipsStyle.js
index 75c34b675..be7a521ab 100644
--- a/components/lib/inputchips/style/InputChipsStyle.js
+++ b/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 }],
diff --git a/components/lib/inputtext/style/InputTextStyle.js b/components/lib/inputtext/style/InputTextStyle.js
index 6387bf2ae..ec295e6b7 100644
--- a/components/lib/inputtext/style/InputTextStyle.js
+++ b/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'
         }
     ]
 };
diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js
index 67abf6cdd..b4f6afcc4 100644
--- a/components/lib/multiselect/style/MultiSelectStyle.js
+++ b/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,
diff --git a/components/lib/radiobutton/style/RadioButtonStyle.js b/components/lib/radiobutton/style/RadioButtonStyle.js
index bb6e852b7..16d095231 100644
--- a/components/lib/radiobutton/style/RadioButtonStyle.js
+++ b/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',
diff --git a/components/lib/select/style/SelectStyle.js b/components/lib/select/style/SelectStyle.js
index b122dfb5f..d3db30a39 100644
--- a/components/lib/select/style/SelectStyle.js
+++ b/components/lib/select/style/SelectStyle.js
@@ -8,7 +8,7 @@ const theme = ({ dt }) => `
     user-select: none;
     background: ${dt('select.background')};
     border: 1px solid ${dt('select.border.color')};
-    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')}, 
+    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')},
         outline-color ${dt('select.transition.duration')}, box-shadow ${dt('select.transition.duration')};
     border-radius: ${dt('select.border.radius')};
     outline-color: transparent;
@@ -157,7 +157,7 @@ input.p-select-label {
     border: 0 none;
     color: ${dt('select.option.color')};
     background: transparent;
-    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')}, 
+    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')},
             box-shadow ${dt('select.transition.duration')}, outline-color ${dt('select.transition.duration')};
     border-radius: ${dt('select.option.border.radius')};
 }
@@ -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,
diff --git a/components/lib/textarea/style/TextareaStyle.js b/components/lib/textarea/style/TextareaStyle.js
index b96f91d0c..85872230c 100644
--- a/components/lib/textarea/style/TextareaStyle.js
+++ b/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'
         }
     ]
 };
diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js
index 8d41384c4..9c28c1b1e 100644
--- a/components/lib/treeselect/style/TreeSelectStyle.js
+++ b/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
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index fe97803c4..4e77ee895 100644
--- a/doc/common/apidoc/index.json
+++ b/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": ""
                         },
                         {
diff --git a/doc/configuration/InputStyleDoc.vue b/doc/configuration/InputStyleDoc.vue
index 80c9b5c19..5bd8b2feb 100644
--- a/doc/configuration/InputStyleDoc.vue
+++ b/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
-            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
-            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
-            PrimeVue configuration as well.
+            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
+            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,
+            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
+            <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" });
 `
             }
         };
diff --git a/doc/nuxt/configuration/OptionsDoc.vue b/doc/nuxt/configuration/OptionsDoc.vue
index a4ac297f6..f6531d25f 100644
--- a/doc/nuxt/configuration/OptionsDoc.vue
+++ b/doc/nuxt/configuration/OptionsDoc.vue
@@ -15,7 +15,7 @@ primevue: {
     options: {
         unstyled: true,
         ripple: true,
-        inputStyle: 'filled'
+        inputVariant: 'filled'
     }
 }
 `