From 2a63f6fcb95f5d09354df81dba14c33bb548b5a3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Jul 2024 11:09:44 +0300
Subject: [PATCH] Init fluid refactor

---
 packages/primevue/src/autocomplete/AutoComplete.d.ts      | 5 +++++
 packages/primevue/src/autocomplete/BaseAutoComplete.vue   | 4 ++++
 .../primevue/src/autocomplete/style/AutoCompleteStyle.js  | 7 ++++---
 packages/primevue/src/button/style/ButtonStyle.js         | 8 --------
 packages/primevue/src/cascadeselect/BaseCascadeSelect.vue | 4 ++++
 packages/primevue/src/cascadeselect/CascadeSelect.d.ts    | 5 +++++
 .../src/cascadeselect/style/CascadeSelectStyle.js         | 7 ++++---
 7 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/primevue/src/autocomplete/AutoComplete.d.ts b/packages/primevue/src/autocomplete/AutoComplete.d.ts
index 194238bb9..56e7c152c 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.d.ts
+++ b/packages/primevue/src/autocomplete/AutoComplete.d.ts
@@ -528,6 +528,11 @@ export interface AutoCompleteProps {
      * @defaultValue false
      */
     unstyled?: boolean;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
 }
 
 /**
diff --git a/packages/primevue/src/autocomplete/BaseAutoComplete.vue b/packages/primevue/src/autocomplete/BaseAutoComplete.vue
index 3506a5ee6..fd953ff3c 100644
--- a/packages/primevue/src/autocomplete/BaseAutoComplete.vue
+++ b/packages/primevue/src/autocomplete/BaseAutoComplete.vue
@@ -178,6 +178,10 @@ export default {
         ariaLabelledby: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: AutoCompleteStyle,
diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
index 1dc884ec4..0059ebee8 100644
--- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
+++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -229,11 +229,11 @@ const theme = ({ dt }) => `
     padding: ${dt('autocomplete.empty.message.padding')};
 }
 
-.p-fluid .p-autocomplete {
+.p-autocomplete-fluid {
     display: flex;
 }
 
-.p-fluid .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
     width: 1%;
 }
 `;
@@ -251,7 +251,8 @@ const classes = {
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue || isNotEmpty(instance.inputValue),
             'p-inputwrapper-focus': instance.focused,
-            'p-autocomplete-open': instance.overlayVisible
+            'p-autocomplete-open': instance.overlayVisible,
+            'p-autocomplete-fluid': props.fluid
         }
     ],
     pcInput: 'p-autocomplete-input',
diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js
index 7902021c0..e5fe97698 100644
--- a/packages/primevue/src/button/style/ButtonStyle.js
+++ b/packages/primevue/src/button/style/ButtonStyle.js
@@ -78,14 +78,6 @@ const theme = ({ dt }) => `
     font-weight: ${dt('button.label.font.weight')};
 }
 
-.p-fluid .p-button {
-    width: 100%;
-}
-
-.p-fluid .p-button-icon-only {
-    width: ${dt('button.icon.only.width')};
-}
-
 .p-button:not(:disabled):hover {
     background: ${dt('button.primary.hover.background')};
     border: 1px solid ${dt('button.primary.hover.border.color')};
diff --git a/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue b/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue
index 7ece9d541..cc5f711df 100644
--- a/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue
+++ b/packages/primevue/src/cascadeselect/BaseCascadeSelect.vue
@@ -131,6 +131,10 @@ export default {
         ariaLabel: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: CascadeSelectStyle,
diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
index 0c9cb3264..6aa2be654 100644
--- a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
+++ b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
@@ -442,6 +442,11 @@ export interface CascadeSelectProps {
      * @defaultValue false
      */
     unstyled?: boolean;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
 }
 
 /**
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
index e4aa45598..2b82d4d29 100644
--- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
+++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -87,11 +87,11 @@ const theme = ({ dt }) => `
     visibility: hidden;
 }
 
-.p-fluid .p-cascadeselect {
+.p-cascadeselect-fluid {
     display: flex;
 }
 
-.p-fluid .p-cascadeselect .p-cascadeselect-label {
+.p-cascadeselect-fluid .p-cascadeselect-label {
     width: 1%;
 }
 
@@ -200,7 +200,8 @@ const classes = {
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-            'p-cascadeselect-open': instance.overlayVisible
+            'p-cascadeselect-open': instance.overlayVisible,
+            'p-cascadeselect-fluid': props.fluid
         }
     ],
     label: ({ instance, props }) => [