feat(PageItem): add linkStyle and linkClassName props (#6636)

* Fix(Unable to add custom styles to PageItem Component) * Fix(Unable to add custom styles to PageItem Component) * Change innerStyle, innerClassName to linkStyle, linkClassName & adding tests
react-bootstrap · Jun 23, 2023 · cc8efc3 · cc8efc3
1 parent aeecea8
commit cc8efc3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/PageItem.tsx b/src/PageItem.tsx
@@ -13,6 +13,8 @@ export interface PageItemProps
   active?: boolean;
   activeLabel?: string;
   href?: string;
+  linkStyle?: React.CSSProperties;
+  linkClassName?: string;
 }
 
 const propTypes = {
@@ -30,6 +32,12 @@ const propTypes = {
 
   /** A callback function for when this component is clicked. */
   onClick: PropTypes.func,
+
+  /** custom style for the inner component of the PageItem */
+  linkStyle: PropTypes.object,
+
+  /** custom className for the inner component of the PageItem */
+  linkClassName: PropTypes.string,
 };
 
 const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> =
@@ -42,6 +50,8 @@ const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> =
         style,
         activeLabel = '(current)',
         children,
+        linkStyle,
+        linkClassName,
         ...props
       }: PageItemProps,
       ref,
@@ -53,7 +63,11 @@ const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> =
           style={style}
           className={classNames(className, 'page-item', { active, disabled })}
         >
-          <Component className="page-link" {...props}>
+          <Component
+            className={classNames('page-link', linkClassName)}
+            style={linkStyle}
+            {...props}
+          >
             {children}
             {active && activeLabel && (
               <span className="visually-hidden">{activeLabel}</span>

diff --git a/test/PageItemSpec.tsx b/test/PageItemSpec.tsx
@@ -49,5 +49,23 @@ describe('<PageItem>', () => {
 
       pageItemInnerElem.classList.contains('page-link').should.be.true;
     });
+
+    it('should apply className to the inner component if linkClassName is set', () => {
+      const { container } = render(
+        <PageItem linkClassName="custom-class-name" />,
+      );
+      const pageItemElem = container.firstElementChild!;
+      const pageItemInnerElem = pageItemElem.firstElementChild!;
+
+      pageItemInnerElem.classList.contains('custom-class-name').should.be.true;
+    });
+
+    it('should apply style to the inner component if linkStyle is set', () => {
+      const { container } = render(<PageItem linkStyle={{ color: 'red' }} />);
+      const pageItemElem = container.firstElementChild!;
+      const pageItemInnerElem = pageItemElem.firstElementChild!;
+
+      pageItemInnerElem.getAttribute('style')!.should.equal('color: red;');
+    });
   });
 });