From 912a2a9ff94e6a7db7680070a2bb1c8e7119f73b Mon Sep 17 00:00:00 2001
From: Bryce Osterhaus <bryce.osterhaus@liferay.com>
Date: Wed, 3 Apr 2019 11:25:21 -0700
Subject: [PATCH] Fixes #1757 - Update structure

---
 packages/clay-label/src/ClayLabel.tsx | 37 ++++++++++++---------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/packages/clay-label/src/ClayLabel.tsx b/packages/clay-label/src/ClayLabel.tsx
index 6a4e0e94b8..85721007cb 100644
--- a/packages/clay-label/src/ClayLabel.tsx
+++ b/packages/clay-label/src/ClayLabel.tsx
@@ -9,8 +9,9 @@ import classNames from 'classnames';
 
 type DisplayType = 'secondary' | 'info' | 'warning' | 'danger' | 'success';
 
-interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-	closeButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
+interface Props
+	extends React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
+	closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 	displayType?: DisplayType;
 	large?: boolean;
 }
@@ -24,8 +25,18 @@ const ClayLabel: React.FunctionComponent<Props> = ({
 	large = false,
 	...otherProps
 }) => {
-	const content = (
-		<>
+	const TagName = href ? 'a' : 'span';
+
+	return (
+		<TagName
+			{...otherProps}
+			className={classNames('label', className, {
+				'label-dismissible': closeButtonProps,
+				'label-lg': large,
+				[`label-${displayType}`]: displayType,
+			})}
+			href={href}
+		>
 			<span className="label-item label-item-expand">{children}</span>
 
 			{closeButtonProps && (
@@ -39,24 +50,8 @@ const ClayLabel: React.FunctionComponent<Props> = ({
 					</button>
 				</span>
 			)}
-		</>
+		</TagName>
 	);
-
-	const attrs = {
-		...otherProps,
-		className: classNames('label', className, {
-			'label-dismissible': closeButtonProps,
-			'label-lg': large,
-			[`label-${displayType}`]: displayType,
-		}),
-		href,
-	};
-
-	if (!href) {
-		delete attrs.href;
-	}
-
-	return React.createElement(href ? 'a' : 'span', attrs, content);
 };
 
 export default ClayLabel;