feat(select): add new decorator prop

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -6830,6 +6830,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "decorator": Object {
+        "type": "node",
+      },
       "defaultValue": Object {
         "type": "any",
       },
@@ -6878,9 +6881,7 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
+      "slug": [Function],
       "warn": Object {
         "type": "bool",
       },

packages/react/src/components/FluidSelect/FluidSelect.stories.js

@@ -14,7 +14,10 @@ import {
   ToggletipButton,
   ToggletipContent,
 } from '../Toggletip';
-import { Information } from '@carbon/icons-react';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { Information, View, FolderOpen, Folders } from '@carbon/icons-react';
 import mdx from './FluidSelect.mdx';
 
 export default {
@@ -113,6 +116,52 @@ export const Default = () => (
   </div>
 );
 
+const aiLabel = (
+  <AILabel className="ai-label-container">
+    <AILabelContent>
+      <div>
+        <p className="secondary">AI Explained</p>
+        <h1>84%</h1>
+        <p className="secondary bold">Confidence score</p>
+        <p className="secondary">
+          Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+        </p>
+        <hr />
+        <p className="secondary">Model type</p>
+        <p className="bold">Foundation model</p>
+      </div>
+      <AILabelActions>
+        <IconButton kind="ghost" label="View">
+          <View />
+        </IconButton>
+        <IconButton kind="ghost" label="Open Folder">
+          <FolderOpen />
+        </IconButton>
+        <IconButton kind="ghost" label="Folders">
+          <Folders />
+        </IconButton>
+        <Button>View details</Button>
+      </AILabelActions>
+    </AILabelContent>
+  </AILabel>
+);
+
+export const withAILabel = () => (
+  <div style={{ width: 400 }}>
+    <FluidSelect id="select-1" labelText="Select an option" decorator={aiLabel}>
+      <SelectItem value="" text="" />
+      <SelectItem
+        value="An example option that is really long to show what should be done to handle long text"
+        text="An example option that is really long to show what should be done to handle long text"
+      />
+      <SelectItem value="Option 2" text="Option 2" />
+      <SelectItem value="Option 3" text="Option 3" />
+      <SelectItem value="Option 4" text="Option 4" />
+    </FluidSelect>
+  </div>
+);
+
 export const Playground = (args) => (
   <div style={{ width: args.playgroundWidth }}>
     <FluidSelect {...args} id="select-1">

packages/react/src/components/Form/Form.stories.js

@@ -365,7 +365,7 @@ export const withAILabel = (args) => {
             id="select-1"
             labelText="Select an option"
             helperText="Optional helper text"
-            slug={aiLabel}
+            decorator={aiLabel}
             {...rest}>
             <SelectItem value="" text="" />
             <SelectItem
@@ -476,7 +476,7 @@ export const withAILabel = (args) => {
           />
         </div>
         <div style={{ display: 'flex' }}>
-          <FluidSelect slug={aiLabel} {...rest} id="select-2">
+          <FluidSelect decorator={aiLabel} {...rest} id="select-2">
             <SelectItem value="" text="" />
             <SelectItem value="option-1" text="Option 1" />
             <SelectItem value="option-2" text="Option 2" />