@clayui/label 4.0.0

package/CHANGELOG.md

@@ -0,0 +1,73 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [4.0.0](https://github.com/liferay/clay/compare/v3.36.0...v4.0.0) (2021-10-06)
+
+**Note:** Version bump only for package @clayui/label
+
+# [3.32.0](https://github.com/liferay/clay/compare/v3.31.0...v3.32.0) (2021-07-28)
+
+**Note:** Version bump only for package @clayui/label
+
+## [3.4.1](https://github.com/liferay/clay/compare/@clayui/label@3.4.0...@clayui/label@3.4.1) (2021-01-13)
+
+### Bug Fixes
+
+-   **@clayui/label:** close icon should be times-small ([5181335](https://github.com/liferay/clay/commit/5181335))
+
+# [3.4.0](https://github.com/liferay/clay/compare/@clayui/label@3.3.1...@clayui/label@3.4.0) (2020-10-01)
+
+### Features
+
+-   **clayui.com:** Add JSP code example to Label ([e90068e](https://github.com/liferay/clay/commit/e90068e))
+-   **clayui.com:** Move API tables to new files and update document tabs, rename files to use singular naming instead of plural, change mainTabURL of pagination-bar to a proper one ([d812ee9](https://github.com/liferay/clay/commit/d812ee9))
+-   add displayName for all components ([cc3211d](https://github.com/liferay/clay/commit/cc3211d))
+
+## [3.3.1](https://github.com/liferay/clay/compare/@clayui/label@3.3.0...@clayui/label@3.3.1) (2020-06-18)
+
+**Note:** Version bump only for package @clayui/label
+
+# [3.3.0](https://github.com/liferay/clay/compare/@clayui/label@3.2.0...@clayui/label@3.3.0) (2020-04-24)
+
+### Features
+
+-   **@clayui/label:** Attempt at ClayLabel contentBefore prop ([cd634e2](https://github.com/liferay/clay/commit/cd634e2))
+-   **@clayui/label:** use a hybrid API appraoch to expose low-level components ([deffd0e](https://github.com/liferay/clay/commit/deffd0e))
+
+# [3.2.0](https://github.com/liferay/clay/tree/master/packages/clay-label/compare/@clayui/label@3.1.1...@clayui/label@3.2.0) (2020-03-26)
+
+### Features
+
+-   **@clayui/label:** add prop for inner element attributes ([2d1f489](https://github.com/liferay/clay/commit/2d1f489))
+
+## [3.1.1](https://github.com/liferay/clay/tree/master/packages/clay-label/compare/@clayui/label@3.1.0...@clayui/label@3.1.1) (2020-03-12)
+
+### Bug Fixes
+
+-   **@clayui/label:** use ClayLink over anchor tag ([746487f](https://github.com/liferay/clay/commit/746487f))
+
+# 3.1.0 (2020-02-28)
+
+### Bug Fixes
+
+-   update components to include 'types' and 'ts:main' package keys ([9e24b59](https://github.com/liferay/clay/commit/9e24b59))
+
+### Features
+
+-   **clay-form:** create high-level multi-select component ([feb3abc](https://github.com/liferay/clay/commit/feb3abc))
+-   added template demos ([c2f1064](https://github.com/liferay/clay/commit/c2f1064))
+-   update react-testing-library to be @testing-library/react ([bd78145](https://github.com/liferay/clay/commit/bd78145))
+
+## [3.0.3](https://github.com/liferay/clay/tree/master/packages/clay-label/compare/@clayui/label@3.0.1...@clayui/label@3.0.3) (2020-01-31)
+
+**Note:** Version bump only for package @clayui/label
+
+## [3.0.2](https://github.com/liferay/clay/tree/master/packages/clay-label/compare/@clayui/label@3.0.1...@clayui/label@3.0.2) (2020-01-20)
+
+**Note:** Version bump only for package @clayui/label
+
+## [3.0.1](https://github.com/liferay/clay/tree/master/packages/clay-label/compare/@clayui/label@3.0.0...@clayui/label@3.0.1) (2019-10-28)
+
+**Note:** Version bump only for package @clayui/label

package/README.mdx

@@ -0,0 +1,49 @@
+---
+title: 'Label'
+description: 'Labels are a visual pattern used to categorize information providing quick and easy recognition.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/labels/'
+packageNpm: '@clayui/label'
+---
+
+import {
+	Label,
+	LabelClosingActions,
+	LabelDisplayTypes,
+} from '$packages/clay-label/docs/index';
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Display Types](#display-types)
+-   [Closing Actions](#closing-actions)
+
+</div>
+</div>
+
+## Overview
+
+`ClayLabel` offers two different APIs for use by toggling the prop `withClose`. By default(`withClose={true}`), `ClayLabel` behaves like a high-level component. If you want to use the lower-level components and compose multiple parts to your label, all you need to do is set `withClose={false}`.
+
+Check out [this storybook example](storybook.clayui.com/?path=/story/components-claylabel--w-content-before) for a demo.
+
+## Display Types
+
+Using [`displayType`](#api-displayType) property you can use these color variations on Label component:
+
+<LabelDisplayTypes />
+
+## Closing Actions
+
+<div class="clay-site-alert alert alert-warning">
+	This property is mandatory if you want make your label dismissible.
+</div>
+
+Use [`closeButtonProps`](#api-closeButtonProps) property for applying custom properties to the button that wraps the closing icon.
+
+In this example, an Id was settled for the closing element:
+
+<LabelClosingActions />
+
+You can also set a state for the visibility of the ClayLabel for example, handling `onClick` property on the closing element.
+
+<Label />

package/lib/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+declare const ClayLabelItemExpand: React.ForwardRefExoticComponent<React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>>;
+declare type DisplayType = 'secondary' | 'info' | 'warning' | 'danger' | 'success' | 'unstyled';
+interface IBaseProps extends React.BaseHTMLAttributes<HTMLSpanElement> {
+    dismissible?: boolean;
+    displayType?: DisplayType;
+    large?: boolean;
+}
+interface IProps extends IBaseProps {
+    closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        ref?: (instance: HTMLButtonElement | null) => void;
+    };
+    innerElementProps?: React.ComponentProps<typeof ClayLabelItemExpand>;
+    spritemap?: string;
+    withClose?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
+    ItemAfter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    ItemBefore: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    ItemExpand: React.ForwardRefExoticComponent<React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>>;
+};
+export default _default;

package/lib/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _icon = _interopRequireDefault(require("@clayui/icon"));
+
+var _link = _interopRequireDefault(require("@clayui/link"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var ClayLabelItemAfter = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      otherProps = _objectWithoutProperties(_ref, ["children", "className"]);
+
+  return /*#__PURE__*/_react.default.createElement("span", _extends({}, otherProps, {
+    className: (0, _classnames.default)(className, 'label-item label-item-after'),
+    ref: ref
+  }), children);
+});
+
+ClayLabelItemAfter.displayName = 'ClayLabelItemAfter';
+
+var ClayLabelItemBefore = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      className = _ref2.className,
+      otherProps = _objectWithoutProperties(_ref2, ["children", "className"]);
+
+  return /*#__PURE__*/_react.default.createElement("span", _extends({}, otherProps, {
+    className: (0, _classnames.default)(className, 'label-item label-item-before'),
+    ref: ref
+  }), children);
+});
+
+ClayLabelItemBefore.displayName = 'ClayLabelItemBefore';
+
+var ClayLabelItemExpand = /*#__PURE__*/_react.default.forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      className = _ref3.className,
+      href = _ref3.href,
+      otherProps = _objectWithoutProperties(_ref3, ["children", "className", "href"]);
+
+  var TagName = href ? _link.default : 'span';
+  return /*#__PURE__*/_react.default.createElement(TagName, _extends({}, otherProps, {
+    className: (0, _classnames.default)(className, 'label-item label-item-expand'),
+    href: href,
+    ref: ref
+  }), children);
+});
+
+ClayLabelItemExpand.displayName = 'ClayLabelItemExpand';
+
+var ClayLabel = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+      className = _ref4.className,
+      dismissible = _ref4.dismissible,
+      _ref4$displayType = _ref4.displayType,
+      displayType = _ref4$displayType === void 0 ? 'secondary' : _ref4$displayType,
+      _ref4$large = _ref4.large,
+      large = _ref4$large === void 0 ? false : _ref4$large,
+      otherProps = _objectWithoutProperties(_ref4, ["children", "className", "dismissible", "displayType", "large"]);
+
+  return /*#__PURE__*/_react.default.createElement("span", _extends({}, otherProps, {
+    className: (0, _classnames.default)('label', className, _defineProperty({
+      'label-dismissible': dismissible,
+      'label-lg': large
+    }, "label-".concat(displayType), displayType)),
+    ref: ref
+  }), children);
+});
+
+ClayLabel.displayName = 'ClayLabel';
+
+var ClayLabelHybrid = /*#__PURE__*/_react.default.forwardRef(function (_ref5, ref) {
+  var children = _ref5.children,
+      closeButtonProps = _ref5.closeButtonProps,
+      href = _ref5.href,
+      _ref5$innerElementPro = _ref5.innerElementProps,
+      innerElementProps = _ref5$innerElementPro === void 0 ? {} : _ref5$innerElementPro,
+      _ref5$withClose = _ref5.withClose,
+      withClose = _ref5$withClose === void 0 ? true : _ref5$withClose,
+      spritemap = _ref5.spritemap,
+      otherProps = _objectWithoutProperties(_ref5, ["children", "closeButtonProps", "href", "innerElementProps", "withClose", "spritemap"]);
+
+  return /*#__PURE__*/_react.default.createElement(ClayLabel, _extends({
+    dismissible: withClose && !!closeButtonProps
+  }, otherProps, {
+    ref: ref
+  }), !withClose && children, withClose && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ClayLabelItemExpand, _extends({}, innerElementProps, {
+    href: href
+  }), children), closeButtonProps && /*#__PURE__*/_react.default.createElement(ClayLabelItemAfter, null, /*#__PURE__*/_react.default.createElement("button", _extends({}, closeButtonProps, {
+    className: (0, _classnames.default)(closeButtonProps.className, 'close'),
+    type: "button"
+  }), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    spritemap: spritemap,
+    symbol: "times-small"
+  })))));
+});
+
+ClayLabelHybrid.displayName = 'ClayLabel';
+
+var _default = Object.assign(ClayLabelHybrid, {
+  ItemAfter: ClayLabelItemAfter,
+  ItemBefore: ClayLabelItemBefore,
+  ItemExpand: ClayLabelItemExpand
+});
+
+exports.default = _default;

package/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "@clayui/label",
+	"version": "4.0.0",
+	"description": "ClayLabel component",
+	"license": "BSD-3-Clause",
+	"repository": "https://github.com/liferay/clay",
+	"engines": {
+		"node": ">=0.12.0",
+		"npm": ">=3.0.0"
+	},
+	"main": "lib/index.js",
+	"types": "lib/index.d.ts",
+	"ts:main": "src/index.tsx",
+	"files": [
+		"lib",
+		"src"
+	],
+	"scripts": {
+		"build": "babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
+		"build:types": "tsc --project ./tsconfig.declarations.json",
+		"prepublishOnly": "yarn build && yarn build:types",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"keywords": [
+		"clay",
+		"react"
+	],
+	"dependencies": {
+		"@clayui/icon": "^4.0.0",
+		"@clayui/link": "^4.0.0",
+		"classnames": "^2.2.6"
+	},
+	"peerDependencies": {
+		"@clayui/css": "3.x",
+		"react": "^16.12.0",
+		"react-dom": "^16.12.0"
+	},
+	"browserslist": [
+		"extends browserslist-config-clay"
+	],
+	"gitHead": "0d285c26936b985e7be90e61b6c21e04734a0ad9"
+}

package/src/__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rendering as a link  1`] = `
+<span
+  className="label label-secondary"
+>
+  <a
+    className="label-item label-item-expand"
+    href="#/foo/bar"
+  >
+    Label w/ link
+  </a>
+</span>
+`;
+
+exports[`Rendering default 1`] = `
+<span
+  className="label label-secondary"
+>
+  <span
+    className="label-item label-item-expand"
+  >
+    Default Label
+  </span>
+</span>
+`;
+
+exports[`Rendering renders as a link and closable 1`] = `
+<span
+  className="label label-dismissible label-secondary"
+>
+  <a
+    className="label-item label-item-expand"
+    href="#/foo/bar"
+  >
+    Label Closable
+  </a>
+  <span
+    className="label-item label-item-after"
+  >
+    <button
+      className="close"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        className="lexicon-icon lexicon-icon-times-small"
+        role="presentation"
+      >
+        <use
+          xlinkHref="path/to/spritemap#times-small"
+        />
+      </svg>
+    </button>
+  </span>
+</span>
+`;
+
+exports[`Rendering renders as closable 1`] = `
+<span
+  className="label label-dismissible label-secondary"
+>
+  <span
+    className="label-item label-item-expand"
+  >
+    Label Closable
+  </span>
+  <span
+    className="label-item label-item-after"
+  >
+    <button
+      className="close"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        className="lexicon-icon lexicon-icon-times-small"
+        role="presentation"
+      >
+        <use
+          xlinkHref="path/to/spritemap#times-small"
+        />
+      </svg>
+    </button>
+  </span>
+</span>
+`;
+
+exports[`Rendering renders with ItemAfter 1`] = `
+<span
+  className="label label-secondary"
+>
+  <span
+    className="label-item label-item-expand"
+  >
+    Label
+  </span>
+  <span
+    className="label-item label-item-after"
+  >
+    Content after
+  </span>
+</span>
+`;
+
+exports[`Rendering renders with ItemBefore 1`] = `
+<span
+  className="label label-secondary"
+>
+  <span
+    className="label-item label-item-before"
+  >
+    Content before
+  </span>
+  <span
+    className="label-item label-item-expand"
+  >
+    Label
+  </span>
+</span>
+`;
+
+exports[`Rendering with a different displayType  1`] = `
+<span
+  className="label label-success"
+>
+  <span
+    className="label-item label-item-expand"
+  >
+    Success Label
+  </span>
+</span>
+`;

package/src/__tests__/index.tsx

@@ -0,0 +1,111 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import ClayLabel from '..';
+import {cleanup, fireEvent, render} from '@testing-library/react';
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+const spritemap = 'path/to/spritemap';
+
+describe('Rendering', () => {
+	it('default', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel>{'Default Label'}</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('with a different displayType ', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel displayType="success">{'Success Label'}</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('as a link ', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel href="#/foo/bar">{'Label w/ link'}</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('renders as closable', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel
+				closeButtonProps={{
+					onClick: () => {},
+				}}
+				spritemap={spritemap}
+			>
+				{'Label Closable'}
+			</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('renders as a link and closable', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel
+				closeButtonProps={{
+					onClick: () => {},
+				}}
+				href="#/foo/bar"
+				spritemap={spritemap}
+			>
+				{'Label Closable'}
+			</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('renders with ItemBefore', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel withClose={false}>
+				<ClayLabel.ItemBefore>{'Content before'}</ClayLabel.ItemBefore>
+				<ClayLabel.ItemExpand>{'Label'}</ClayLabel.ItemExpand>
+			</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('renders with ItemAfter', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayLabel withClose={false}>
+				<ClayLabel.ItemExpand>{'Label'}</ClayLabel.ItemExpand>
+				<ClayLabel.ItemAfter>{'Content after'}</ClayLabel.ItemAfter>
+			</ClayLabel>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+});
+
+describe('Interactions', () => {
+	afterEach(cleanup);
+
+	it('clicking the close button should call closeButtonProps.onClick', () => {
+		const handleClose = jest.fn();
+
+		const {container} = render(
+			<ClayLabel
+				closeButtonProps={{onClick: handleClose}}
+				spritemap="foo/bar"
+			/>
+		);
+
+		const closeButton = container.querySelector('button');
+
+		fireEvent.click(closeButton as HTMLButtonElement, {});
+
+		expect(handleClose).toHaveBeenCalledTimes(1);
+	});
+});

package/src/index.tsx

@@ -0,0 +1,200 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import ClayIcon from '@clayui/icon';
+import ClayLink from '@clayui/link';
+import classNames from 'classnames';
+import React from 'react';
+
+const ClayLabelItemAfter = React.forwardRef<
+	HTMLSpanElement,
+	React.HTMLAttributes<HTMLSpanElement>
+>(({children, className, ...otherProps}, ref) => (
+	<span
+		{...otherProps}
+		className={classNames(className, 'label-item label-item-after')}
+		ref={ref}
+	>
+		{children}
+	</span>
+));
+
+ClayLabelItemAfter.displayName = 'ClayLabelItemAfter';
+
+const ClayLabelItemBefore = React.forwardRef<
+	HTMLSpanElement,
+	React.HTMLAttributes<HTMLSpanElement>
+>(({children, className, ...otherProps}, ref) => (
+	<span
+		{...otherProps}
+		className={classNames(className, 'label-item label-item-before')}
+		ref={ref}
+	>
+		{children}
+	</span>
+));
+
+ClayLabelItemBefore.displayName = 'ClayLabelItemBefore';
+
+const ClayLabelItemExpand = React.forwardRef<
+	HTMLAnchorElement | HTMLSpanElement,
+	React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement>
+>(({children, className, href, ...otherProps}, ref) => {
+	const TagName = href ? ClayLink : 'span';
+
+	return (
+		<TagName
+			{...otherProps}
+			className={classNames(className, 'label-item label-item-expand')}
+			href={href}
+			ref={ref as React.ComponentProps<typeof ClayLink>['ref']}
+		>
+			{children}
+		</TagName>
+	);
+});
+
+ClayLabelItemExpand.displayName = 'ClayLabelItemExpand';
+
+type DisplayType =
+	| 'secondary'
+	| 'info'
+	| 'warning'
+	| 'danger'
+	| 'success'
+	| 'unstyled';
+
+interface IBaseProps extends React.BaseHTMLAttributes<HTMLSpanElement> {
+	/**
+	 * Flag to indicate if `label-dismissible` class should be applied.
+	 */
+	dismissible?: boolean;
+
+	/**
+	 * Determines the style of the label.
+	 */
+	displayType?: DisplayType;
+
+	/**
+	 * Flag to indicate if the label should be of the `large` variant.
+	 */
+	large?: boolean;
+}
+
+const ClayLabel = React.forwardRef<HTMLSpanElement, IBaseProps>(
+	(
+		{
+			children,
+			className,
+			dismissible,
+			displayType = 'secondary',
+			large = false,
+			...otherProps
+		},
+		ref
+	) => {
+		return (
+			<span
+				{...otherProps}
+				className={classNames('label', className, {
+					'label-dismissible': dismissible,
+					'label-lg': large,
+					[`label-${displayType}`]: displayType,
+				})}
+				ref={ref}
+			>
+				{children}
+			</span>
+		);
+	}
+);
+
+ClayLabel.displayName = 'ClayLabel';
+
+interface IProps extends IBaseProps {
+	/**
+	 * HTML properties that are applied to the 'x' button.
+	 */
+	closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+		ref?: (instance: HTMLButtonElement | null) => void;
+	};
+
+	/**
+	 * Pros to add to the inner label item
+	 */
+	innerElementProps?: React.ComponentProps<typeof ClayLabelItemExpand>;
+
+	/**
+	 * Path to the location of the spritemap resource used for Icon.
+	 */
+	spritemap?: string;
+
+	/**
+	 * Flag to indicate if component should include the close button
+	 */
+	withClose?: boolean;
+}
+
+const ClayLabelHybrid = React.forwardRef<
+	HTMLAnchorElement | HTMLSpanElement,
+	IProps
+>(
+	(
+		{
+			children,
+			closeButtonProps,
+			href,
+			innerElementProps = {},
+			withClose = true,
+			spritemap,
+			...otherProps
+		}: IProps,
+		ref
+	) => {
+		return (
+			<ClayLabel
+				dismissible={withClose && !!closeButtonProps}
+				{...otherProps}
+				ref={ref}
+			>
+				{!withClose && children}
+
+				{withClose && (
+					<>
+						<ClayLabelItemExpand {...innerElementProps} href={href}>
+							{children}
+						</ClayLabelItemExpand>
+
+						{closeButtonProps && (
+							<ClayLabelItemAfter>
+								<button
+									{...closeButtonProps}
+									className={classNames(
+										closeButtonProps.className,
+										'close'
+									)}
+									type="button"
+								>
+									<ClayIcon
+										spritemap={spritemap}
+										symbol="times-small"
+									/>
+								</button>
+							</ClayLabelItemAfter>
+						)}
+					</>
+				)}
+			</ClayLabel>
+		);
+	}
+);
+
+ClayLabelHybrid.displayName = 'ClayLabel';
+
+export default Object.assign(ClayLabelHybrid, {
+	ItemAfter: ClayLabelItemAfter,
+	ItemBefore: ClayLabelItemBefore,
+	ItemExpand: ClayLabelItemExpand,
+});