feat: Add the as prop to Badge to support actionable badges (react-bootstrap#4295)

* feat: support actional bagdes by adding the as property to the Badge component (react-bootstrap#4227)

* add 'as' prop to Badge.js

* add unit test that verifies 'as' prop is working

Signed-off-by: mhatvan <[email protected]>

* * updated type definitions & simple.test.tsx for Badge

Signed-off-by: mhatvan <[email protected]>

* feat: added another TS test case

* fix: closing tag

* fix: prettier

Author: Markus Hatvan

src/Badge.js

@@ -20,17 +20,23 @@ const propTypes = {
    * some additional horizontal padding
    */
   pill: PropTypes.bool.isRequired,
+
+  /** @default span */
+  as: PropTypes.elementType,
 };
 
 const defaultProps = {
   pill: false,
 };
 
 const Badge = React.forwardRef(
-  ({ bsPrefix, variant, pill, className, ...props }, ref) => {
+  (
+    { bsPrefix, variant, pill, className, as: Component = 'span', ...props },
+    ref,
+  ) => {
     const prefix = useBootstrapPrefix(bsPrefix, 'badge');
     return (
-      <span
+      <Component
         ref={ref}
         {...props}
         className={classNames(

test/BadgeSpec.js

@@ -15,4 +15,12 @@ describe('Badge', () => {
         .text(),
     ).to.equal('Message');
   });
+
+  it('should support custom `as`', () => {
+    mount(
+      <Badge as="a" href="#" variant="primary" pill>
+        Message
+      </Badge>,
+    ).assertSingle('a[href="#"]');
+  });
 });

types/components/Badge.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { BsPrefixComponent } from './helpers';
 
-export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
+export interface BadgeProps {
   bsPrefix?: string;
   variant?:
     | 'primary'
@@ -14,6 +15,8 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   pill?: boolean;
 }
 
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps>;
+declare class Badge<
+  As extends React.ElementType = 'span'
+> extends BsPrefixComponent<As, BadgeProps> {}
 
 export default Badge;

types/simple.test.tsx

@@ -54,7 +54,9 @@ import {
   </Card>
 </Accordion>;
 
-<Badge pill={false} ref={React.createRef<HTMLSpanElement>()}>
+<Badge pill={false}>42</Badge>;
+
+<Badge as="a" href="#" variant="primary" pill>
   42
 </Badge>;