Fix #3428: p-input-filled/ripple-disabled added to overlays (#3763)

primefaces · Dec 8, 2022 · c1b3b95 · c1b3b95
1 parent 37746ac
commit c1b3b95
Show file tree

Hide file tree

Showing 17 changed files with 69 additions and 22 deletions.
diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { localeOption } from '../api/Api';
+import PrimeReact, { localeOption } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
@@ -105,7 +105,10 @@ export const AutoCompletePanel = React.memo(
         };
 
         const createElement = () => {
-            const className = classNames('p-autocomplete-panel p-component', props.panelClassName);
+            const className = classNames('p-autocomplete-panel p-component', props.panelClassName, {
+                'p-input-filled': PrimeReact.inputStyle === 'filled',
+                'p-ripple-disabled': PrimeReact.ripple === false
+            });
             const style = { maxHeight: props.scrollHeight, ...(props.panelStyle || {}) };
             const content = createContent();
 

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -3253,7 +3253,9 @@ export const Calendar = React.memo(
             'p-datepicker-timeonly': props.timeOnly,
             'p-datepicker-multiple-month': props.numberOfMonths > 1,
             'p-datepicker-monthpicker': currentView === 'month',
-            'p-datepicker-touch-ui': props.touchUI
+            'p-datepicker-touch-ui': props.touchUI,
+            'p-input-filled': PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': PrimeReact.ripple === false
         });
         const content = createContent();
         const datePicker = createDatePicker();

diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Ripple } from '../ripple/Ripple';
-import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import PrimeReact from '../api/Api';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const CascadeSelectSub = React.memo((props) => {
     const [activeOptionState, setActiveOptionState] = React.useState(null);
@@ -226,7 +227,10 @@ export const CascadeSelectSub = React.memo((props) => {
         return props.options ? props.options.map(createOption) : null;
     };
 
-    const className = classNames('p-cascadeselect-panel p-cascadeselect-items', props.className);
+    const className = classNames('p-cascadeselect-panel p-cascadeselect-items', props.className, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+    });
     const submenu = createMenu();
 
     return (

diff --git a/components/lib/colorpicker/ColorPickerPanel.js b/components/lib/colorpicker/ColorPickerPanel.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PrimeReact from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Portal } from '../portal/Portal';
 import { classNames } from '../utils/Utils';
@@ -7,7 +8,9 @@ export const ColorPickerPanel = React.forwardRef((props, ref) => {
     const createElement = () => {
         const className = classNames('p-colorpicker-panel', props.panelClassName, {
             'p-colorpicker-overlay-panel': !props.inline,
-            'p-disabled': props.disabled
+            'p-disabled': props.disabled,
+            'p-input-filled': PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': PrimeReact.ripple === false
         });
 
         return (

diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
@@ -241,7 +241,10 @@ export const ConfirmPopup = React.memo(
 
         const createElement = () => {
             const otherProps = ObjectUtils.findDiffKeys(props, ConfirmPopup.defaultProps);
-            const className = classNames('p-confirm-popup p-component', getPropValue('className'));
+            const className = classNames('p-confirm-popup p-component', getPropValue('className'), {
+                'p-input-filled': PrimeReact.inputStyle === 'filled',
+                'p-ripple-disabled': PrimeReact.ripple === false
+            });
             const content = createContent();
             const footer = createFooter();
 

diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
@@ -173,7 +173,10 @@ export const ContextMenu = React.memo(
 
         const createContextMenu = () => {
             const otherProps = ObjectUtils.findDiffKeys(props, ContextMenu.defaultProps);
-            const className = classNames('p-contextmenu p-component', props.className);
+            const className = classNames('p-contextmenu p-component', props.className, {
+                'p-input-filled': PrimeReact.inputStyle === 'filled',
+                'p-ripple-disabled': PrimeReact.ripple === false
+            });
 
             return (
                 <CSSTransition

diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -512,7 +512,9 @@ export const Dialog = React.forwardRef((props, ref) => {
         const className = classNames('p-dialog p-component', props.className, {
             'p-dialog-rtl': props.rtl,
             'p-dialog-maximized': maximized,
-            'p-dialog-default': !maximized
+            'p-dialog-default': !maximized,
+            'p-input-filled': PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': PrimeReact.ripple === false
         });
         const maskClassName = classNames(
             'p-dialog-mask',

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { localeOption } from '../api/Api';
+import PrimeReact, { localeOption } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Portal } from '../portal/Portal';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
@@ -185,7 +185,10 @@ export const DropdownPanel = React.memo(
         };
 
         const createElement = () => {
-            const className = classNames('p-dropdown-panel p-component', props.panelClassName);
+            const className = classNames('p-dropdown-panel p-component', props.panelClassName, {
+                'p-input-filled': PrimeReact.inputStyle === 'filled',
+                'p-ripple-disabled': PrimeReact.ripple === false
+            });
             const filter = createFilter();
             const content = createContent();
 

diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
@@ -142,7 +142,9 @@ export const Galleria = React.memo(
                 {
                     'p-galleria-fullscreen': props.fullScreen,
                     'p-galleria-indicator-onitem': props.showIndicatorsOnItem,
-                    'p-galleria-item-nav-onhover': props.showItemNavigatorsOnHover && !props.fullScreen
+                    'p-galleria-item-nav-onhover': props.showItemNavigatorsOnHover && !props.fullScreen,
+                    'p-input-filled': PrimeReact.inputStyle === 'filled',
+                    'p-ripple-disabled': PrimeReact.ripple === false
                 },
                 thumbnailsPosClassName,
                 indicatorPosClassName

diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
@@ -230,7 +230,9 @@ export const Menu = React.memo(
                 const className = classNames(
                     'p-menu p-component',
                     {
-                        'p-menu-overlay': props.popup
+                        'p-menu-overlay': props.popup,
+                        'p-input-filled': PrimeReact.inputStyle === 'filled',
+                        'p-ripple-disabled': PrimeReact.ripple === false
                     },
                     props.className
                 );

diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { localeOption } from '../api/Api';
+import PrimeReact, { localeOption } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Portal } from '../portal/Portal';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
@@ -202,7 +202,9 @@ export const MultiSelectPanel = React.memo(
                 {
                     'p-multiselect-inline': props.inline,
                     'p-multiselect-flex': props.flex,
-                    'p-multiselect-limited': !allowOptionSelect
+                    'p-multiselect-limited': !allowOptionSelect,
+                    'p-input-filled': PrimeReact.inputStyle === 'filled',
+                    'p-ripple-disabled': PrimeReact.ripple === false
                 },
                 props.panelClassName
             );

diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
@@ -201,7 +201,10 @@ export const OverlayPanel = React.forwardRef((props, ref) => {
 
     const createElement = () => {
         const otherProps = ObjectUtils.findDiffKeys(props, OverlayPanel.defaultProps);
-        const className = classNames('p-overlaypanel p-component', props.className);
+        const className = classNames('p-overlaypanel p-component', props.className, {
+            'p-input-filled': PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': PrimeReact.ripple === false
+        });
         const closeIcon = createCloseIcon();
 
         return (

diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
@@ -258,7 +258,10 @@ export const Password = React.memo(
         };
 
         const createPanel = () => {
-            const panelClassName = classNames('p-password-panel p-component', props.panelClassName);
+            const panelClassName = classNames('p-password-panel p-component', props.panelClassName, {
+                'p-input-filled': PrimeReact.inputStyle === 'filled',
+                'p-ripple-disabled': PrimeReact.ripple === false
+            });
             const { strength, width } = meterState || { strength: '', width: '0%' };
             const header = ObjectUtils.getJSXElement(props.header, props);
             const footer = ObjectUtils.getJSXElement(props.footer, props);

diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
@@ -166,7 +166,10 @@ export const Sidebar = React.forwardRef((props, ref) => {
 
     const createElement = () => {
         const otherProps = ObjectUtils.findDiffKeys(props, Sidebar.defaultProps);
-        const className = classNames('p-sidebar p-component', props.className);
+        const className = classNames('p-sidebar p-component', props.className, {
+            'p-input-filled': PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': PrimeReact.ripple === false
+        });
         const maskClassName = classNames(
             'p-sidebar-mask',
             {

diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
@@ -89,7 +89,9 @@ export const TieredMenu = React.memo(
             const className = classNames(
                 'p-tieredmenu p-component',
                 {
-                    'p-tieredmenu-overlay': props.popup
+                    'p-tieredmenu-overlay': props.popup,
+                    'p-input-filled': PrimeReact.inputStyle === 'filled',
+                    'p-ripple-disabled': PrimeReact.ripple === false
                 },
                 props.className
             );

diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
@@ -99,7 +99,10 @@ export const Toast = React.memo(
 
         const createElement = () => {
             const otherProps = ObjectUtils.findDiffKeys(props, Toast.defaultProps);
-            const className = classNames('p-toast p-component p-toast-' + props.position, props.className);
+            const className = classNames('p-toast p-component p-toast-' + props.position, props.className, {
+                'p-input-filled': PrimeReact.inputStyle === 'filled',
+                'p-ripple-disabled': PrimeReact.ripple === false
+            });
 
             return (
                 <div ref={containerRef} id={props.id} className={className} style={props.style} {...otherProps}>

diff --git a/components/lib/treeselect/TreeSelectPanel.js b/components/lib/treeselect/TreeSelectPanel.js
@@ -1,12 +1,16 @@
 import * as React from 'react';
+import PrimeReact from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Portal } from '../portal/Portal';
 import { classNames } from '../utils/Utils';
 
 export const TreeSelectPanel = React.forwardRef((props, ref) => {
     const createElement = () => {
         const wrapperStyle = { maxHeight: props.scrollHeight || 'auto' };
-        const className = classNames('p-treeselect-panel p-component', props.panelClassName);
+        const className = classNames('p-treeselect-panel p-component', props.panelClassName, {
+            'p-input-filled': PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': PrimeReact.ripple === false
+        });
 
         return (
             <CSSTransition