Init fluid refactor

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;
 }
 
 /**

packages/primevue/src/autocomplete/BaseAutoComplete.vue

@@ -178,6 +178,10 @@ export default {
         ariaLabelledby: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: AutoCompleteStyle,

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',

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')};

packages/primevue/src/cascadeselect/BaseCascadeSelect.vue

@@ -131,6 +131,10 @@ export default {
         ariaLabel: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: CascadeSelectStyle,

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;
 }
 
 /**

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 }) => [