(
type="number"
value={value}
/>
+ {normalizedSlug}
{Icon ?
: null}
{!hideSteppers && (
@@ -555,6 +589,11 @@ NumberInput.propTypes = {
*/
size: PropTypes.oneOf(['sm', 'md', 'lg']),
+ /**
+ * Provide a `Slug` component to be rendered inside the `NumberInput` component
+ */
+ slug: PropTypes.node,
+
/**
* Specify how much the values should increase/decrease upon clicking on up/down button
*/
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index f940724d686b..b119b33d9ec3 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
import React, {
ChangeEventHandler,
ComponentPropsWithRef,
@@ -119,6 +119,11 @@ interface SelectProps
*/
size?: 'sm' | 'md' | 'lg';
+ /**
+ * Provide a `Slug` component to be rendered inside the `Dropdown` component
+ */
+ slug?: ReactNodeLike;
+
/**
* Specify whether the control is currently in warning state
*/
@@ -151,6 +156,7 @@ const Select = React.forwardRef(function Select(
warn = false,
warnText,
onChange,
+ slug,
...other
}: SelectProps,
ref: ForwardedRef
@@ -171,6 +177,7 @@ const Select = React.forwardRef(function Select(
[`${prefix}--select--warning`]: warn,
[`${prefix}--select--fluid--invalid`]: isFluid && invalid,
[`${prefix}--select--fluid--focus`]: isFluid && isFocused,
+ [`${prefix}--select--slug`]: slug,
});
const labelClasses = classNames(`${prefix}--label`, {
[`${prefix}--visually-hidden`]: hideLabel,
@@ -241,6 +248,14 @@ const Select = React.forwardRef(function Select(
},
};
+ // Slug is always size `mini`
+ let normalizedSlug;
+ if (slug) {
+ normalizedSlug = React.cloneElement(slug as React.ReactElement, {
+ size: 'mini',
+ });
+ }
+
const input = (() => {
return (
<>
@@ -295,6 +310,7 @@ const Select = React.forwardRef(function Select(
onFocus={handleFocus}
onBlur={handleFocus}>
{input}
+ {normalizedSlug}
{isFluid &&
}
{isFluid && error ? error : null}
@@ -396,6 +412,11 @@ Select.propTypes = {
*/
size: PropTypes.oneOf(['sm', 'md', 'lg']),
+ /**
+ * Provide a `Slug` component to be rendered inside the `Select` component
+ */
+ slug: PropTypes.node,
+
/**
* Specify whether the control is currently in warning state
*/
diff --git a/packages/react/src/components/Slug/Slug.js b/packages/react/src/components/Slug/Slug.js
deleted file mode 100644
index f2ebf4ac5a30..000000000000
--- a/packages/react/src/components/Slug/Slug.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2023
- *
- * 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 cx from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { usePrefix } from '../../internal/usePrefix';
-import {
- Toggletip,
- ToggletipButton,
- ToggletipContent,
- ToggletipActions,
-} from '../Toggletip';
-
-const Slug = React.forwardRef(function Slug(
- {
- aiText = 'AI',
- aiTextLabel,
- align,
- autoAlign = false,
- className,
- dotType,
- kind,
- size = 'xs',
- slugContent,
- },
- ref
-) {
- const prefix = usePrefix();
-
- const slugClasses = cx(className, {
- [`${prefix}--slug`]: true,
- [`${prefix}--slug--hollow`]: kind === 'hollow' || dotType === 'hollow',
- // Need to come up with a better name; explainable?
- // Need to be able to target the non-hollow variant another way
- // other than using `:not` all over the styles
- [`${prefix}--slug--enabled`]: kind !== 'hollow' && dotType !== 'hollow',
- });
-
- const slugButtonClasses = cx({
- [`${prefix}--slug__button`]: true,
- [`${prefix}--slug__button--${size}`]: size,
- [`${prefix}--slug__button--${kind}`]: kind,
- [`${prefix}--slug__button--inline-with-content`]:
- kind === 'inline' && aiTextLabel,
- });
-
- return (
-
-
-
- {aiText}
- {aiTextLabel && (
-
- {aiTextLabel}
-
- )}
-
-
- {slugContent}
-
-
-
-
- );
-});
-
-Slug.propTypes = {
- /**
- * Specify the correct translation of the AI text
- */
- aiText: PropTypes.string,
-
- /**
- * Specify additional text to be rendered next to the AI label in the inline variant
- */
- aiTextLabel: PropTypes.string,
-
- /**
- * Specify how the popover should align with the button
- */
- align: PropTypes.oneOf([
- 'top',
- 'top-left',
- 'top-right',
-
- 'bottom',
- 'bottom-left',
- 'bottom-right',
-
- 'left',
- 'left-bottom',
- 'left-top',
-
- 'right',
- 'right-bottom',
- 'right-top',
- ]),
-
- /**
- * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
- */
- autoAlign: PropTypes.bool,
-
- /**
- * Specify an optional className to be added to the AI slug
- */
- className: PropTypes.string,
-
- /**
- * Specify the type of dot that should be rendered in front of the inline variant
- */
- dotType: PropTypes.oneOf(['default', 'hollow']),
-
- /**
- * Specify the type of Slug, from the following list of types:
- */
- kind: PropTypes.oneOf(['default', 'hollow', 'inline']),
-
- /**
- * Specify the size of the button, from the following list of sizes:
- */
- size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
-
- /**
- * Specify the content you want rendered inside the slug ToggleTip
- */
- slugContent: PropTypes.node,
-};
-
-export default Slug;
diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js
index 8e4be8cfbb37..87c5808624d0 100644
--- a/packages/react/src/components/Slug/index.js
+++ b/packages/react/src/components/Slug/index.js
@@ -16,6 +16,9 @@ import {
ToggletipContent,
ToggletipActions,
} from '../Toggletip';
+import { IconButton } from '../IconButton';
+import { Undo } from '@carbon/icons-react';
+import { useId } from '../../internal/useId';
export const SlugContent = React.forwardRef(function SlugContent(
{ children, className },
@@ -80,17 +83,24 @@ export const Slug = React.forwardRef(function Slug(
aiText = 'AI',
aiTextLabel,
align,
- autoAlign = false,
+ autoAlign = true,
+ children,
className,
dotType,
kind,
+ onRevertClick,
+ revertActive,
+ revertLabel = 'Revert to AI input',
+ slugLabel = 'Show information',
size = 'xs',
- children,
+ ...rest
},
ref
) {
const prefix = usePrefix();
+ const id = useId('slug');
+
const slugClasses = cx(className, {
[`${prefix}--slug`]: true,
[`${prefix}--slug--hollow`]: kind === 'hollow' || dotType === 'hollow',
@@ -98,6 +108,7 @@ export const Slug = React.forwardRef(function Slug(
// Need to be able to target the non-hollow variant another way
// other than using `:not` all over the styles
[`${prefix}--slug--enabled`]: kind !== 'hollow' && dotType !== 'hollow',
+ [`${prefix}--slug--revert`]: revertActive,
});
const slugButtonClasses = cx({
@@ -108,19 +119,38 @@ export const Slug = React.forwardRef(function Slug(
kind === 'inline' && aiTextLabel,
});
+ const handleOnRevertClick = (evt) => {
+ if (onRevertClick) {
+ onRevertClick(evt);
+ }
+ };
+
+ const ariaLabel = `${aiText} - ${slugLabel}`;
+
return (
-
-
-
- {aiText}
- {aiTextLabel && (
-
- {aiTextLabel}
-
- )}
-
- {children}
-
+
+ {revertActive ? (
+
+
+
+ ) : (
+
+
+ {aiText}
+ {aiTextLabel && (
+
+ {aiTextLabel}
+
+ )}
+
+ {children}
+
+ )}
);
});
@@ -182,6 +212,21 @@ Slug.propTypes = {
*/
kind: PropTypes.oneOf(['default', 'hollow', 'inline']),
+ /**
+ * Callback function that fires when the revert button is clicked
+ */
+ onRevertClick: PropTypes.func,
+
+ /**
+ * Specify whether the revert button should be visible
+ */
+ revertActive: PropTypes.bool,
+
+ /**
+ * Specify the text that should be shown when the revert button is hovered
+ */
+ revertLabel: PropTypes.string,
+
/**
* Specify the size of the button, from the following list of sizes:
*/
@@ -191,4 +236,9 @@ Slug.propTypes = {
* Specify the content you want rendered inside the slug ToggleTip
*/
slugContent: PropTypes.node,
+
+ /**
+ * Specify the text that will be provided to the aria-label of the `Slug` button
+ */
+ slugLabel: PropTypes.string,
};
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index f29aafda7812..966648280590 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -119,6 +119,11 @@ export interface TextAreaProps
*/
rows?: number;
+ /**
+ * Provide a `Slug` component to be rendered inside the `TextArea` component
+ */
+ slug?: ReactNodeLike;
+
/**
* Provide the current value of the `