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

primefaces · Jul 2, 2024 · 544fe3f · 544fe3f
1 parent f85d3a5
commit 544fe3f
Show file tree

Hide file tree

Showing 41 changed files with 183 additions and 49 deletions.
diff --git a/packages/primevue/src/autocomplete/AutoComplete.d.ts b/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;
 }
 
 /**

diff --git a/packages/primevue/src/button/BaseButton.vue b/packages/primevue/src/button/BaseButton.vue
@@ -81,6 +81,10 @@ export default {
         plain: {
             type: Boolean,
             default: false
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: ButtonStyle,

diff --git a/packages/primevue/src/button/Button.d.ts b/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.
      */

diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/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',

diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts b/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;
 }
 
 /**

diff --git a/packages/primevue/src/datepicker/BaseDatePicker.vue b/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

diff --git a/packages/primevue/src/datepicker/DatePicker.d.ts b/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.
      */

diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/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

diff --git a/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js b/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')};

diff --git a/packages/primevue/src/inputchips/style/InputChipsStyle.js b/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 = {

diff --git a/packages/primevue/src/inputgroup/BaseInputGroup.vue b/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 {

diff --git a/packages/primevue/src/inputgroup/InputGroup.d.ts b/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.
      */

diff --git a/packages/primevue/src/inputgroup/style/InputGroupStyle.js b/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({

diff --git a/packages/primevue/src/inputmask/BaseInputMask.vue b/packages/primevue/src/inputmask/BaseInputMask.vue
@@ -46,6 +46,10 @@ export default {
         variant: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: InputMaskStyle,

diff --git a/packages/primevue/src/inputmask/InputMask.d.ts b/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

diff --git a/packages/primevue/src/inputmask/InputMask.vue b/packages/primevue/src/inputmask/InputMask.vue
@@ -7,6 +7,7 @@
         :invalid="invalid"
         :variant="variant"
         :placeholder="placeholder"
+        :fluid="fluid"
         :unstyled="unstyled"
         @input="onInput"
         @focus="onFocus"

diff --git a/packages/primevue/src/inputnumber/BaseInputNumber.vue b/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

diff --git a/packages/primevue/src/inputnumber/InputNumber.d.ts b/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.
      */

diff --git a/packages/primevue/src/inputnumber/style/InputNumberStyle.js b/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',

diff --git a/packages/primevue/src/inputtext/BaseInputText.vue b/packages/primevue/src/inputtext/BaseInputText.vue
@@ -18,6 +18,10 @@ export default {
         variant: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: InputTextStyle,

diff --git a/packages/primevue/src/inputtext/InputText.d.ts b/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.
      */

diff --git a/packages/primevue/src/inputtext/style/InputTextStyle.js b/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
         }
     ]
 };

diff --git a/packages/primevue/src/multiselect/BaseMultiSelect.vue b/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

diff --git a/packages/primevue/src/multiselect/MultiSelect.d.ts b/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.
      */