Fixed #6000 - Remove .p-fluid and add new fluid property

packages/primevue/src/autocomplete/AutoComplete.d.ts

@@ -501,6 +501,11 @@ export interface AutoCompleteProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Defines a string value that labels an interactive element.
      */
@@ -528,11 +533,6 @@ export interface AutoCompleteProps {
      * @defaultValue false
      */
     unstyled?: boolean;
-    /**
-     * Spans 100% width of the container when enabled.
-     * @defaultValue false
-     */
-    fluid?: boolean;
 }
 
 /**

packages/primevue/src/button/BaseButton.vue

@@ -81,6 +81,10 @@ export default {
         plain: {
             type: Boolean,
             default: false
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: ButtonStyle,

packages/primevue/src/button/Button.d.ts

@@ -177,6 +177,11 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * @defaultValue false
      */
     plain?: boolean | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/button/style/ButtonStyle.js

@@ -78,6 +78,14 @@ const theme = ({ dt }) => `
     font-weight: ${dt('button.label.font.weight')};
 }
 
+.p-button-fluid {
+    width: 100%;
+}
+
+.p-button-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')};
@@ -607,7 +615,8 @@ const classes = {
             'p-button-outlined': props.outlined,
             'p-button-sm': props.size === 'small',
             'p-button-lg': props.size === 'large',
-            'p-button-plain': props.plain
+            'p-button-plain': props.plain,
+            'p-button-fluid': props.fluid
         }
     ],
     loadingIcon: 'p-button-loading-icon',

packages/primevue/src/cascadeselect/CascadeSelect.d.ts

@@ -415,6 +415,11 @@ export interface CascadeSelectProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
@@ -442,11 +447,6 @@ export interface CascadeSelectProps {
      * @defaultValue false
      */
     unstyled?: boolean;
-    /**
-     * Spans 100% width of the container when enabled.
-     * @defaultValue false
-     */
-    fluid?: boolean;
 }
 
 /**

packages/primevue/src/datepicker/BaseDatePicker.vue

@@ -232,6 +232,10 @@ export default {
                 return { severity: 'secondary', text: true, rounded: true };
             }
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         ariaLabelledby: {
             type: String,
             default: null

packages/primevue/src/datepicker/DatePicker.d.ts

@@ -784,6 +784,11 @@ export interface DatePickerProps {
      * @defaultValue { severity: 'secondary', text: true }
      */
     timepickerButtonProps?: object | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */

packages/primevue/src/datepicker/style/DatePickerStyle.js

@@ -71,11 +71,11 @@ const theme = ({ dt }) => `
     color: ${dt('datepicker.input.icon.color')};
 }
 
-.p-fluid .p-datepicker {
+.p-datepicker-fluid {
     display: flex;
 }
 
-.p-fluid .p-datepicker-input {
+.p-datepicker-fluid .p-datepicker-input {
     width: 1%;
 }
 
@@ -374,6 +374,7 @@ const classes = {
         'p-datepicker p-component p-inputwrapper',
         {
             'p-invalid': props.invalid,
+            'p-datepicker-fluid': props.fluid,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': state.focused,
             'p-focus': state.focused || state.overlayVisible

packages/primevue/src/inlinemessage/style/InlineMessageStyle.js

@@ -26,10 +26,6 @@ const theme = ({ dt }) => `
     width: 0;
 }
 
-.p-fluid .p-inlinemessage {
-    display: flex;
-}
-
 .p-inlinemessage-info {
     background: ${dt('inlinemessage.info.background')};
     border: 1px solid ${dt('inlinemessage.info.border.color')};

packages/primevue/src/inputchips/style/InputChipsStyle.js

@@ -98,10 +98,6 @@ const theme = ({ dt }) => `
 .p-inputchips-input-item input::placeholder {
     color: ${dt('inputchips.placeholder.color')};
 }
-
-.p-fluid .p-inputchips {
-    display: flex;
-}
 `;
 
 const classes = {

packages/primevue/src/inputgroup/BaseInputGroup.vue

@@ -5,6 +5,12 @@ import InputGroupStyle from 'primevue/inputgroup/style';
 export default {
     name: 'BaseInputGroup',
     extends: BaseComponent,
+    props: {
+        fluid: {
+            type: Boolean,
+            default: false
+        }
+    },
     style: InputGroupStyle,
     provide() {
         return {

packages/primevue/src/inputgroup/InputGroup.d.ts

@@ -22,6 +22,10 @@ export interface InputGroupPassThroughMethodOptions {
      * Defines instance.
      */
     instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: InputGroupProps;
     /**
      * Defines valid attributes.
      */
@@ -63,6 +67,11 @@ export interface InputGroupPassThroughAttributes {
  * Defines valid properties in InputGroup component.
  */
 export interface InputGroupProps {
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/inputgroup/style/InputGroupStyle.js

@@ -28,9 +28,9 @@ const theme = ({ dt }) => `
 }
 
 .p-inputgroup .p-inputtext,
-.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup-fluid .p-inputtext,
 .p-inputgroup .p-inputwrapper,
-.p-fluid .p-inputgroup .p-input {
+.p-inputgroup-fluid .p-input {
     flex: 1 1 auto;
     width: 1%;
 }
@@ -92,17 +92,22 @@ const theme = ({ dt }) => `
     border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')};
 }
 
-.p-fluid .p-inputgroup .p-button {
+.p-inputgroup-fluid .p-button {
     width: auto;
 }
 
-.p-fluid .p-inputgroup .p-button.p-button-icon-only {
+.p-inputgroup-fluid .p-button.p-button-icon-only {
     width: 2.5rem;
 }
 `;
 
 const classes = {
-    root: 'p-inputgroup'
+    root: ({ props }) => [
+        'p-inputgroup',
+        {
+            'p-inputgroup-fluid': props.fluid
+        }
+    ]
 };
 
 export default BaseStyle.extend({

packages/primevue/src/inputmask/BaseInputMask.vue

@@ -46,6 +46,10 @@ export default {
         variant: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: InputMaskStyle,

packages/primevue/src/inputmask/InputMask.d.ts

@@ -144,6 +144,11 @@ export interface InputMaskProps {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false

packages/primevue/src/inputmask/InputMask.vue

@@ -7,6 +7,7 @@
         :invalid="invalid"
         :variant="variant"
         :placeholder="placeholder"
+        :fluid="fluid"
         :unstyled="unstyled"
         @input="onInput"
         @focus="onFocus"

packages/primevue/src/inputnumber/BaseInputNumber.vue

@@ -133,6 +133,10 @@ export default {
             type: String,
             default: null
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null

packages/primevue/src/inputnumber/InputNumber.d.ts

@@ -334,6 +334,11 @@ export interface InputNumberProps {
      * Placeholder text for the input.
      */
     placeholder?: string | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * 	Identifier of the focus input to match a label defined for the chips.
      */

packages/primevue/src/inputnumber/style/InputNumberStyle.js

@@ -131,15 +131,15 @@ const theme = ({ dt }) => `
     flex: 1 1 auto;
 }
 
-.p-fluid .p-inputnumber {
+.p-inputnumber-fluid {
     width: 100%;
 }
 
-.p-fluid .p-inputnumber .p-inputnumber-input {
+.p-inputnumber-fluid .p-inputnumber-input {
     width: 1%;
 }
 
-.p-fluid .p-inputnumber-vertical .p-inputnumber-input {
+.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
     width: 100%;
 }
 `;
@@ -152,7 +152,8 @@ const classes = {
             'p-inputwrapper-focus': instance.focused,
             'p-inputnumber-stacked': props.showButtons && props.buttonLayout === 'stacked',
             'p-inputnumber-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
-            'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical'
+            'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical',
+            'p-inputnumber-fluid': instance.fluid
         }
     ],
     pcInput: 'p-inputnumber-input',

packages/primevue/src/inputtext/BaseInputText.vue

@@ -18,6 +18,10 @@ export default {
         variant: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: InputTextStyle,

packages/primevue/src/inputtext/InputText.d.ts

@@ -101,6 +101,11 @@ export interface InputTextProps extends InputHTMLAttributes {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/inputtext/style/InputTextStyle.js

@@ -61,7 +61,7 @@ const theme = ({ dt }) => `
     padding: ${dt('inputtext.lg.padding.y')} ${dt('inputtext.lg.padding.x')};
 }
 
-.p-fluid .p-inputtext {
+.p-inputtext-fluid {
     width: 100%;
 }
 `;
@@ -74,7 +74,8 @@ 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' || instance.$primevue.config.inputVariant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
+            'p-inputtext-fluid': props.fluid
         }
     ]
 };

packages/primevue/src/multiselect/BaseMultiSelect.vue

@@ -26,7 +26,14 @@ export default {
             type: Boolean,
             default: false
         },
-        disabled: Boolean,
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null

packages/primevue/src/multiselect/MultiSelect.d.ts

@@ -364,6 +364,11 @@ export interface MultiSelectProps {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Identifier of the underlying input element.
      */

packages/primevue/src/multiselect/style/MultiSelectStyle.js

@@ -191,7 +191,7 @@ const theme = ({ dt }) => `
     padding: calc(${dt('multiselect.padding.y')} / 2) calc(${dt('multiselect.padding.x')} / 2);
 }
 
-.p-fluid .p-multiselect {
+.p-multiselect-fluid {
     display: flex;
 }
 `;
@@ -211,7 +211,8 @@ const classes = {
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-            'p-multiselect-open': instance.overlayVisible
+            'p-multiselect-open': instance.overlayVisible,
+            'p-multiselect-fluid': props.fluid
         }
     ],
     labelContainer: 'p-multiselect-label-container',

packages/primevue/src/password/BasePassword.vue

@@ -79,6 +79,10 @@ export default {
             type: Boolean,
             default: false
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null

packages/primevue/src/password/Password.d.ts

@@ -247,6 +247,11 @@ export interface PasswordProps extends InputHTMLAttributes {
      * @defaultValue false
      */
     required?: boolean | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Identifier of the underlying input element.
      */

packages/primevue/src/password/style/PasswordStyle.js

@@ -35,10 +35,14 @@ const theme = ({ dt }) => `
     background: ${dt('password.strength.strong.background')};
 }
 
-.p-fluid .p-password {
+.p-password-fluid {
     display: flex;
 }
 
+.p-password-fluid .p-password-input {
+    width: 100%;
+}
+
 .p-password-input::-ms-reveal,
 .p-password-input::-ms-clear {
     display: none;
@@ -83,7 +87,8 @@ const classes = {
         'p-password p-component p-inputwrapper',
         {
             'p-inputwrapper-filled': instance.filled,
-            'p-inputwrapper-focus': instance.focused
+            'p-inputwrapper-focus': instance.focused,
+            'p-password-fluid': props.fluid
         }
     ],
     pcInput: 'p-password-input',

packages/primevue/src/select/BaseSelect.vue

@@ -50,6 +50,10 @@ export default {
             type: Boolean,
             default: false
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null

packages/primevue/src/select/Select.d.ts

@@ -375,6 +375,11 @@ export interface SelectProps {
      * @defaultValue false
      */
     showClear?: boolean | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * @deprecated since v4.0. Use 'labelId' instead.
      * Identifier of the underlying input element.

packages/primevue/src/select/style/SelectStyle.js

@@ -188,13 +188,9 @@ input.p-select-label {
     padding: ${dt('select.empty.message.padding')};
 }
 
-.p-fluid .p-select {
+.p-select-fluid {
     display: flex;
 }
-
-.p-fluid .p-select-label {
-    width: 1%;
-}
 `;
 
 const classes = {
@@ -207,7 +203,8 @@ const classes = {
             'p-focus': state.focused,
             'p-inputwrapper-filled': instance.hasSelectedOption,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,
-            'p-select-open': state.overlayVisible
+            'p-select-open': state.overlayVisible,
+            'p-select-fluid': props.fluid
         }
     ],
     label: ({ instance, props }) => [

packages/primevue/src/splitbutton/BaseSplitButton.vue

@@ -34,6 +34,10 @@ export default {
             type: Boolean,
             default: false
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         class: {
             type: null,
             default: null

packages/primevue/src/splitbutton/SplitButton.d.ts

@@ -147,6 +147,11 @@ export interface SplitButtonProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Style class of the component.
      */

packages/primevue/src/splitbutton/SplitButton.vue

@@ -10,6 +10,7 @@
             :icon="icon"
             :outlined="outlined"
             :size="size"
+            :fluid="fluid"
             :aria-label="label"
             @click="onDefaultButtonClick"
             v-bind="buttonProps"

packages/primevue/src/splitbutton/style/SplitButtonStyle.js

@@ -32,7 +32,7 @@ const theme = ({ dt }) => `
     min-width: 100%;
 }
 
-.p-fluid .p-splitbutton {
+.p-splitbutton-fluid {
     display: flex;
 }
 
@@ -56,7 +56,8 @@ const classes = {
         'p-splitbutton p-component',
         {
             'p-splitbutton-raised': props.raised,
-            'p-splitbutton-rounded': props.rounded
+            'p-splitbutton-rounded': props.rounded,
+            'p-splitbutton-fluid': props.fluid
         }
     ],
     pcButton: 'p-splitbutton-button',

packages/primevue/src/textarea/BaseTextarea.vue

@@ -15,6 +15,10 @@ export default {
         variant: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: TextareaStyle,

packages/primevue/src/textarea/Textarea.d.ts

@@ -107,6 +107,11 @@ export interface TextareaProps extends TextareaHTMLAttributes {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/textarea/style/TextareaStyle.js

@@ -51,7 +51,7 @@ const theme = ({ dt }) => `
     color: ${dt('textarea.placeholder.color')};
 }
 
-.p-fluid .p-textarea {
+.p-textarea-fluid {
     width: 100%;
 }
 
@@ -68,7 +68,8 @@ 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' || instance.$primevue.config.inputVariant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
+            'p-textarea-fluid': props.fluid
         }
     ]
 };

packages/primevue/src/treeselect/BaseTreeSelect.vue

@@ -52,6 +52,10 @@ export default {
             type: Boolean,
             default: false
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null

packages/primevue/src/treeselect/TreeSelect.d.ts

@@ -204,6 +204,11 @@ export interface TreeSelectProps {
      * Defines the selection mode.
      */
     selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Style class of the overlay panel.
      */

packages/primevue/src/treeselect/style/TreeSelectStyle.js

@@ -113,7 +113,7 @@ const theme = ({ dt }) => `
     background: transparent;
 }
 
-.p-fluid .p-treeselect {
+.p-treeselect-fluid {
     display: flex;
 }
 
@@ -147,7 +147,8 @@ const classes = {
             '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
+            'p-treeselect-open': instance.overlayVisible,
+            'p-treeselect-fluid': props.fluid
         }
     ],
     labelContainer: 'p-treeselect-label-container',