@carbon/react 1.57.0 → 1.58.0

package/es/components/Popover/index.js

@@ -8,6 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import React__default, { useRef, useMemo, useEffect } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
@@ -25,6 +26,25 @@ const PopoverContext = /*#__PURE__*/React__default.createContext({
   },
   autoAlign: null
 });
+
+/**
+ * Deprecated popover alignment values.
+ * @deprecated Use NewPopoverAlignment instead.
+ */
+
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFunction(_ref, forwardRef) {
   let {
     isTabTip,
@@ -223,8 +243,9 @@ if (process.env.NODE_ENV !== "production") {
 Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
+   
    */
-  align: PropTypes.oneOf(['top', 'top-left',
+  align: deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
   'top-right',
   // deprecated use top-end instead
@@ -246,6 +267,10 @@ Popover.propTypes = {
 
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.

package/es/components/ProgressBar/ProgressBar.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface ProgressBarProps {
+export interface ProgressBarProps {
     /**
      * Additional CSS class names.
      */

package/es/components/ProgressBar/index.d.ts

@@ -4,6 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import ProgressBar from './ProgressBar';
+import ProgressBar, { type ProgressBarProps } from './ProgressBar';
 export default ProgressBar;
-export { ProgressBar };
+export { ProgressBar, type ProgressBarProps };

package/es/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
+export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
     /**
      * Provide `<ProgressStep>` components to be rendered in the
      * `<ProgressIndicator>`
@@ -63,7 +63,7 @@ declare namespace ProgressIndicator {
         vertical: PropTypes.Requireable<boolean>;
     };
 }
-interface ProgressStepProps {
+export interface ProgressStepProps {
     /**
      * Provide an optional className to be applied to the containing `<li>` node
      */

package/es/components/ProgressIndicator/index.d.ts

@@ -4,5 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { type ProgressIndicatorProps, type ProgressStepProps } from './ProgressIndicator';
 export { default as ProgressIndicatorSkeleton } from './ProgressIndicator.Skeleton';
 export * from './ProgressIndicator';
+export { type ProgressIndicatorProps, type ProgressStepProps };

package/es/components/RadioButton/RadioButton.d.ts

@@ -4,8 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 type ExcludedAttributes = 'onChange';
 export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
@@ -41,7 +40,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide label text to be read by screen readers when interacting with the
      * control
      */
-    labelText: ReactNodeLike;
+    labelText: ReactNode;
     /**
      * Provide a name for the underlying `<input>` node
      */
@@ -58,7 +57,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify the value of the `<RadioButton>`
      */

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -4,15 +4,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 export declare const RadioButtonGroupContext: React.Context<null>;
 type ExcludedAttributes = 'onChange';
 export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {
     /**
      * Provide a collection of `<RadioButton>` components to render in the group
      */
-    children?: ReactNodeLike;
+    children?: ReactNode;
     /**
      * Provide an optional className to be applied to the container node
      */
@@ -28,7 +27,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * Provide text that is used alongside the control label for additional help
      */
-    helperText?: ReactNodeLike;
+    helperText?: ReactNode;
     /**
      * Specify whether the control is currently invalid
      */
@@ -36,7 +35,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * Provide the text that is displayed when the control is in an invalid state
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Provide where label text should be placed
      */
@@ -45,7 +44,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide a legend to the RadioButtonGroup input that you are
      * exposing to the user
      */
-    legendText?: ReactNodeLike;
+    legendText?: ReactNode;
     /**
      * Specify the name of the underlying `<input>` nodes
      */
@@ -66,7 +65,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify whether the control is currently in warning state
      */
@@ -74,7 +73,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
     /**
      * Specify the value that is currently selected in the group
      */

package/es/components/Select/Select.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
 import React, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
@@ -80,7 +79,7 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify whether the control is currently in warning state
      */

package/es/components/Slider/Slider.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type KeyboardEventHandler, PureComponent } from 'react';
-import PropTypes, { ReactNodeLike } from 'prop-types';
+import React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
 /**
  * Distinguish two handles by lower and upper positions.
  */
@@ -26,7 +26,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     /**
      * The child nodes.
      */
-    children?: ReactNodeLike;
+    children?: ReactNode;
     /**
      * The CSS class name for the slider, set on the wrapping div.
      */
@@ -58,11 +58,11 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     /**
      * Provide the text that is displayed when the Slider is in an invalid state
      */
-    invalidText?: React.ReactNode;
+    invalidText?: ReactNode;
     /**
      * The label for the slider.
      */
-    labelText?: ReactNodeLike;
+    labelText?: ReactNode;
     /**
      * @deprecated
      * `true` to use the light version.

package/es/components/Slider/Slider.js

@@ -463,7 +463,7 @@ class Slider extends PureComponent {
         });
         if (adjustedValue !== targetValue) {
           this.setState({
-            correctedValue: targetValue,
+            correctedValue: targetValue.toString(),
             correctedPosition: handlePosition
           });
         } else {

package/es/components/StructuredList/index.d.ts

@@ -4,5 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { type StructuredListWrapperProps } from './StructuredList';
 export * from './StructuredList';
 export { default as StructuredListSkeleton, type StructuredListSkeletonProps, } from './StructuredList.Skeleton';
+export { type StructuredListWrapperProps };

package/es/components/Switch/Switch.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ButtonHTMLAttributes, ReactNode } from 'react';
-interface SwitchEventHandlersParams {
+export interface SwitchEventHandlersParams {
     index?: number;
     name?: string | number;
     text?: string;

package/es/components/Switch/index.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import Switch from './Switch';
+import Switch, { type SwitchProps } from './Switch';
 import IconSwitch from './IconSwitch';
 export default Switch;
-export { Switch, IconSwitch };
+export { Switch, IconSwitch, type SwitchProps };

package/es/components/Tab/index.d.ts

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Tab } from '../Tabs/Tabs';
+import { type TabProps } from '../Tabs/Tabs';
 export default Tab;
-export { Tab };
+export { Tab, type TabProps };

package/es/components/Tag/DismissibleTag.d.ts

@@ -4,15 +4,11 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES, TYPES } from './Tag';
 export interface DismissibleTagBaseProps {
-    /**
-     * Provide content to be rendered inside of a `DismissibleTag`
-     */
-    children?: React.ReactNode;
     /**
      * Provide a custom className that is applied to the containing <span>
      */
@@ -42,7 +38,11 @@ export interface DismissibleTagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
+    /**
+     * Provide text to be rendered inside of a the tag.
+     */
+    text?: string;
     /**
      * Text to show on clear filters
      */
@@ -54,12 +54,8 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, title, onClose, slug, size, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
-        /**
-         * Provide content to be rendered inside of a `DismissibleTag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide a custom className that is applied to the containing <span>
          */
@@ -90,6 +86,10 @@ declare const DismissibleTag: {
          * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
          */
         slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide text to be rendered inside of a the tag.
+         */
+        text: PropTypes.Requireable<string>;
         /**
          * Text to show on clear filters
          */

package/es/components/Tag/DismissibleTag.js

@@ -7,32 +7,46 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES, TYPES } from './Tag.js';
 import { Close } from '@carbon/icons-react';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 var _Close;
 const getInstanceId = setupGetInstanceId();
 const DismissibleTag = _ref => {
   let {
-    children,
     className,
     disabled,
     id,
     renderIcon,
-    title = 'Clear filter',
+    title = 'Dismiss',
     onClose,
     slug,
     size,
+    text,
     type,
     ...other
   } = _ref;
   const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx(`${prefix}--tag--filter`, className);
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  useLayoutEffect(() => {
+    const elementTagId = document.querySelector(`#${tagId}`);
+    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    isEllipsisActive(newElement);
+  }, [prefix, tagId]);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -46,6 +60,7 @@ const DismissibleTag = _ref => {
       kind: 'inline'
     });
   }
+  const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
 
   // Removing onClick from the spread operator
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -53,6 +68,7 @@ const DismissibleTag = _ref => {
     onClick,
     ...otherProps
   } = other;
+  const dismissLabel = `Dismiss "${text}"`;
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
     type: type,
     size: size,
@@ -62,20 +78,25 @@ const DismissibleTag = _ref => {
     id: tagId
   }, otherProps), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--interactive--tag-children`
-  }, children, normalizedSlug, /*#__PURE__*/React__default.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    title: text,
+    className: `${prefix}--tag__label`
+  }, text), /*#__PURE__*/React__default.createElement(Tooltip, {
+    label: isEllipsisApplied ? dismissLabel : title,
+    align: "bottom",
+    className: tooltipClasses,
+    leaveDelayMs: 0,
+    closeOnActivation: true
+  }, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: `${prefix}--tag__close-icon`,
     onClick: handleClose,
     disabled: disabled,
     "aria-label": title,
     title: title
-  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))));
+  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))), normalizedSlug));
 };
 DismissibleTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `DismissibleTag`
-   */
-  children: PropTypes.node,
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -106,6 +127,10 @@ DismissibleTag.propTypes = {
    * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
    */
   slug: PropTypes.node,
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes.string,
   /**
    * Text to show on clear filters
    */

package/es/components/Tag/OperationalTag.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { MouseEventHandler } from 'react';
+import PropTypes from 'prop-types';
+import React, { MouseEventHandler, ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 declare const TYPES: {
@@ -21,10 +21,6 @@ declare const TYPES: {
     'warm-gray': string;
 };
 export interface OperationalTagBaseProps {
-    /**
-     * Provide content to be rendered inside of a `OperationalTag`
-     */
-    children?: React.ReactNode;
     /**
      * Provide a custom className that is applied to the containing <span>
      */
@@ -51,7 +47,11 @@ export interface OperationalTagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
+    /**
+     * Provide text to be rendered inside of a the tag.
+     */
+    text?: string;
     /**
      * Specify the type of the `Tag`
      */
@@ -59,12 +59,8 @@ export interface OperationalTagBaseProps {
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
 declare const OperationalTag: {
-    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, slug, size, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any>>({ className, disabled, id, renderIcon, slug, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
-        /**
-         * Provide content to be rendered inside of a `OperationalTag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide a custom className that is applied to the containing <span>
          */
@@ -91,6 +87,10 @@ declare const OperationalTag: {
          * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
          */
         slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide text to be rendered inside of a the tag.
+         */
+        text: PropTypes.Requireable<string>;
         /**
          * Specify the type of the `Tag`
          */

package/es/components/Tag/OperationalTag.js

@@ -7,11 +7,15 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES } from './Tag.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 const getInstanceId = setupGetInstanceId();
 const TYPES = {
@@ -28,19 +32,29 @@ const TYPES = {
 };
 const OperationalTag = _ref => {
   let {
-    children,
     className,
     disabled,
     id,
     renderIcon,
     slug,
     size,
+    text,
     type = 'gray',
     ...other
   } = _ref;
   const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  useLayoutEffect(() => {
+    const elementTagId = document.querySelector(`#${tagId}`);
+    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    isEllipsisActive(newElement);
+  }, [prefix, tagId]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
@@ -48,6 +62,27 @@ const OperationalTag = _ref => {
       kind: 'inline'
     });
   }
+  const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+  if (isEllipsisApplied) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      label: text,
+      align: "bottom",
+      className: tooltipClasses,
+      leaveDelayMs: 0,
+      onMouseEnter: false,
+      closeOnActivation: true
+    }, /*#__PURE__*/React__default.createElement(Tag, _extends({
+      type: type,
+      size: size,
+      renderIcon: renderIcon,
+      disabled: disabled,
+      className: tagClasses,
+      id: tagId
+    }, other), /*#__PURE__*/React__default.createElement(Text, {
+      title: text,
+      className: `${prefix}--tag__label`
+    }, text), normalizedSlug));
+  }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
     type: type,
     size: size,
@@ -55,15 +90,12 @@ const OperationalTag = _ref => {
     disabled: disabled,
     className: tagClasses,
     id: tagId
-  }, other), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--interactive--tag-children`
-  }, children, normalizedSlug));
+  }, other), normalizedSlug, /*#__PURE__*/React__default.createElement(Text, {
+    title: text,
+    className: `${prefix}--tag__label`
+  }, text));
 };
 OperationalTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `OperationalTag`
-   */
-  children: PropTypes.node,
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -90,6 +122,10 @@ OperationalTag.propTypes = {
    * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
    */
   slug: PropTypes.node,
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes.string,
   /**
    * Specify the type of the `Tag`
    */