Fixed #3364 - Material Theme breaks in some components

primefaces · Sep 25, 2022 · 9f0a94a · 9f0a94a
1 parent 89e9a88
commit 9f0a94a
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 15 deletions.
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PrimeReact, { ariaLabel } from '../api/Api';
-import { Button } from '../button/Button';
 import { useMountEffect, usePrevious, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
 import { classNames, DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils';
 
 const CarouselItem = React.memo((props) => {
@@ -479,7 +479,12 @@ export const Carousel = React.memo(
                     'pi-chevron-up': isVertical
                 });
 
-                return <Button type="button" className={className} icon={iconClassName} onClick={navBackward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')} />;
+                return (
+                    <button type="button" className={className} onClick={navBackward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')}>
+                        <span className={iconClassName}></span>
+                        <Ripple />
+                    </button>
+                );
             }
 
             return null;
@@ -496,7 +501,12 @@ export const Carousel = React.memo(
                     'pi-chevron-down': isVertical
                 });
 
-                return <Button type="button" className={className} icon={iconClassName} onClick={navForward} disabled={isDisabled} aria-label={ariaLabel('nextPageLabel')} />;
+                return (
+                    <button type="button" className={className} onClick={navForward} disabled={isDisabled} aria-label={ariaLabel('nextPageLabel')}>
+                        <span className={iconClassName}></span>
+                        <Ripple />
+                    </button>
+                );
             }
 
             return null;
@@ -511,7 +521,9 @@ export const Carousel = React.memo(
 
             return (
                 <li key={key} className={className}>
-                    <Button type="button" className="p-link" onClick={(e) => onDotClick(e, index)} aria-label={`${ariaLabel('pageLabel')} ${index + 1}`} />
+                    <button type="button" className="p-link" onClick={(e) => onDotClick(e, index)} aria-label={`${ariaLabel('pageLabel')} ${index + 1}`}>
+                        <Ripple />
+                    </button>
                 </li>
             );
         };

diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { ariaLabel } from '../api/Api';
-import { Button } from '../button/Button';
+import { Ripple } from '../ripple/Ripple';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const FirstPageLink = React.memo((props) => {
     const className = classNames('p-paginator-first p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-double-left';
-    const element = <Button type="button" className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('firstPageLabel')} />;
+    const element = (
+        <button type="button" className={className} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('firstPageLabel')}>
+            <span className={iconClassName}></span>
+            <Ripple />
+        </button>
+    );
 
     if (props.template) {
         const defaultOptions = {

diff --git a/components/lib/paginator/LastPageLink.js b/components/lib/paginator/LastPageLink.js
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { ariaLabel } from '../api/Api';
-import { Button } from '../button/Button';
+import { Ripple } from '../ripple/Ripple';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const LastPageLink = React.memo((props) => {
     const className = classNames('p-paginator-last p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-double-right';
-    const element = <Button type="button" className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('lastPageLabel')} />;
+    const element = (
+        <button type="button" className={className} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('lastPageLabel')}>
+            <span className={iconClassName}></span>
+            <Ripple />
+        </button>
+    );
 
     if (props.template) {
         const defaultOptions = {

diff --git a/components/lib/paginator/NextPageLink.js b/components/lib/paginator/NextPageLink.js
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { ariaLabel } from '../api/Api';
-import { Button } from '../button/Button';
+import { Ripple } from '../ripple/Ripple';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const NextPageLink = React.memo((props) => {
     const className = classNames('p-paginator-next p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-right';
-    const element = <Button type="button" className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('nextPageLabel')} />;
+    const element = (
+        <button type="button" className={className} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('nextPageLabel')}>
+            <span className={iconClassName}></span>
+            <Ripple />
+        </button>
+    );
 
     if (props.template) {
         const defaultOptions = {

diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ariaLabel } from '../api/Api';
-import { Button } from '../button/Button';
+import { Ripple } from '../ripple/Ripple';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const PageLinks = React.memo((props) => {
@@ -29,9 +29,10 @@ export const PageLinks = React.memo((props) => {
             });
 
             let element = (
-                <Button type="button" className={className} onClick={(e) => onPageLinkClick(e, pageLink)} aria-label={`${ariaLabel('pageLabel')} ${pageLink + 1}`}>
+                <button type="button" className={className} onClick={(e) => onPageLinkClick(e, pageLink)} aria-label={`${ariaLabel('pageLabel')} ${pageLink + 1}`}>
                     {pageLink}
-                </Button>
+                    <Ripple />
+                </button>
             );
 
             if (props.template) {

diff --git a/components/lib/paginator/PrevPageLink.js b/components/lib/paginator/PrevPageLink.js
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { ariaLabel } from '../api/Api';
-import { Button } from '../button/Button';
+import { Ripple } from '../ripple/Ripple';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const PrevPageLink = React.memo((props) => {
     const className = classNames('p-paginator-prev p-paginator-element p-link', { 'p-disabled': props.disabled });
     const iconClassName = 'p-paginator-icon pi pi-angle-left';
-    const element = <Button type="button" className={className} icon={iconClassName} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('previousPageLabel')} />;
+    const element = (
+        <button type="button" className={className} onClick={props.onClick} disabled={props.disabled} aria-label={ariaLabel('previousPageLabel')}>
+            <span className={iconClassName}></span>
+            <Ripple />
+        </button>
+    );
 
     if (props.template) {
         const defaultOptions = {