Merge branch 'main' into 15970-fix-datatable-toolbar-overflow

carbon-design-system · Mar 18, 2024 · adeff01 · adeff01
2 parents a43b652 + 7f81f71
commit adeff01
Show file tree

Hide file tree

Showing 26 changed files with 177 additions and 450 deletions.
diff --git a/.yarn/cache/downshift-npm-8.4.0-b434ce6fef-96a507693f.zip b/.yarn/cache/downshift-npm-8.4.0-b434ce6fef-96a507693f.zip
diff --git a/.yarn/cache/downshift-npm-8.5.0-d0e67cee4a-275f2b6868.zip b/.yarn/cache/downshift-npm-8.5.0-d0e67cee4a-275f2b6868.zip
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7,13 +7,14 @@ Array [
   "aiAuraHoverEnd",
   "aiAuraHoverStart",
   "aiAuraStart",
-  "aiAuraStartTable",
+  "aiAuraStartSm",
   "aiBorderEnd",
   "aiBorderStart",
   "aiBorderStrong",
   "aiDropShadow",
   "aiInnerShadow",
   "aiOverlay",
+  "aiPopoverBackground",
   "aiPopoverCaretBottom",
   "aiPopoverCaretBottomBackground",
   "aiPopoverCaretBottomBackgroundActions",
@@ -308,11 +309,6 @@ Array [
   "skeletonElement",
   "slow01",
   "slow02",
-  "slugBackground",
-  "slugBackgroundHover",
-  "slugGradient",
-  "slugGradientHover",
-  "slugHollowHover",
   "spacing",
   "spacing01",
   "spacing02",

diff --git a/packages/icon-build-helpers/src/builders/react/next/typescript.js b/packages/icon-build-helpers/src/builders/react/next/typescript.js
@@ -78,6 +78,7 @@ async function writeIndex(buckets, outDir) {
     templates.banner +
     '\n' +
     "export { default as Icon } from './Icon';\n" +
+    "export { CarbonIconProps, CarbonIconType } from './CarbonIcon';\n" +
     bucketModules.map((path) => "export * from './" + path + "';").join('\n') +
     '\n';
   await fs.writeFile(path.resolve(outDir, 'index.d.ts'), indexContent);

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10468,20 +10468,10 @@ Map {
       "className": Object {
         "type": "string",
       },
-      "dotType": Object {
-        "args": Array [
-          Array [
-            "default",
-            "hollow",
-          ],
-        ],
-        "type": "oneOf",
-      },
       "kind": Object {
         "args": Array [
           Array [
             "default",
-            "hollow",
             "inline",
           ],
         ],

diff --git a/packages/react/examples/react-router/.yarn/install-state.gz b/packages/react/examples/react-router/.yarn/install-state.gz
diff --git a/packages/react/examples/react-router/yarn.lock b/packages/react/examples/react-router/yarn.lock
@@ -7491,12 +7491,12 @@ __metadata:
   linkType: hard
 
 "follow-redirects@npm:^1.0.0":
-  version: 1.15.4
-  resolution: "follow-redirects@npm:1.15.4"
+  version: 1.15.6
+  resolution: "follow-redirects@npm:1.15.6"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 10/2e8f5f259a6b02dfa8dc199e08431848a7c3beed32eb4c19945966164a52c89f07b86c3afcc32ebe4279cf0a960520e45a63013d6350309c5ec90133c5d9351a
+  checksum: 10/70c7612c4cab18e546e36b991bbf8009a1a41cf85354afe04b113d1117569abf760269409cb3eb842d9f7b03d62826687086b081c566ea7b1e6613cf29030bf7
   languageName: node
   linkType: hard
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -55,7 +55,7 @@
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.4.0",
+    "downshift": "8.5.0",
     "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",

diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx
@@ -17,7 +17,6 @@ import * as SlugStories from './Slug.stories';
 - [Component API](#component-api)
   - [Slug `aiText`](#slug-aitext)
   - [Slug `aiTextLabel`](#slug-aitextlabel)
-  - [Slug `dotType`](#slug-dottype)
   - [Slug `kind`](#slug-kind)
   - [Slug `revertActive` and `onRevertClick`](#slug-revertactive-and-onrevertclick)
 - [Feedback](#feedback)
@@ -114,57 +113,16 @@ the `aiTextLabel` prop.
 </Slug>
 ```
 
-### Slug `dotType`
-
-When using the `inline` variant, you can switch between the `hollow` slug for
-content that does not need additional explainability or the `default` variant
-that will render the AI callout.
-
-<Slug
-  kind="inline"
-  dotType="default"
-  aiTextLabel="Text goes here"
-  className="sbdocs-slug">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
-<br />
-<Slug
-  kind="inline"
-  dotType="hollow"
-  aiTextLabel="Text goes here"
-  className="sbdocs-slug">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
-
-```jsx
-<Slug
-  kind="inline"
-  dotType="default"
-  aiTextLabel="Text goes here">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
-
-<Slug
-  kind="inline"
-  dotType="hollow"
-  aiTextLabel="Text goes here">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
-```
-
 ### Slug `kind`
 
-The `Slug` component has three variants, `default`, `hollow`, and `inline`. The
-`hollow` slugs represent items that don’t have any additional explainability.
-Therefore they don’t use the AI callout and instead use the standard Carbon
-tooltip, with a simple message.
+The `Slug` component has two variants, `default` and `inline`.
 
-<Slug kind="hollow" size="xs" className="sbdocs-slug">
+<Slug size="xs" className="sbdocs-slug">
   <SlugContent>AI was used to generate this content</SlugContent>
 </Slug>
 
 ```jsx
-<Slug kind="hollow" size="xs">
+<Slug size="xs">
   <SlugContent>AI was used to generate this content</SlugContent>
 </Slug>
 ```

diff --git a/packages/react/src/components/Slug/Slug.stories.js b/packages/react/src/components/Slug/Slug.stories.js
@@ -41,8 +41,6 @@ const aiContent = (
   </div>
 );
 
-const content = <span>AI was used to generate this content</span>;
-
 export const Default = () => (
   <>
     <div className="slug-container slug-container-example">
@@ -138,17 +136,6 @@ export const Default = () => (
         </SlugContent>
       </Slug>
     </div>
-    <div className="slug-container-example slug-container">
-      <Slug kind="hollow" autoAlign size="mini">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug kind="hollow" autoAlign size="2xs">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug kind="hollow" autoAlign size="xs">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-    </div>
     <div className="slug-container-example slug-container">
       <Slug autoAlign kind="inline" size="sm">
         <SlugContent>
@@ -255,43 +242,6 @@ export const Default = () => (
         </SlugContent>
       </Slug>
     </div>
-    <div className="slug-container-example slug-container">
-      <Slug autoAlign kind="inline" dotType="hollow" size="sm">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug autoAlign kind="inline" dotType="hollow" size="md">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug autoAlign kind="inline" dotType="hollow" size="lg">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-    </div>
-    <div className="slug-container-example slug-container">
-      <Slug
-        autoAlign
-        kind="inline"
-        dotType="hollow"
-        size="sm"
-        aiTextLabel="Text goes here">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug
-        autoAlign
-        kind="inline"
-        dotType="hollow"
-        size="md"
-        aiTextLabel="Text goes here">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug
-        autoAlign
-        kind="inline"
-        dotType="hollow"
-        size="lg"
-        aiTextLabel="Text goes here">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-    </div>
   </>
 );
 
@@ -373,11 +323,6 @@ Callout.argTypes = {
       disable: true,
     },
   },
-  dotType: {
-    table: {
-      disable: true,
-    },
-  },
   kind: {
     table: {
       disable: true,
@@ -411,43 +356,38 @@ Callout.argTypes = {
 };
 
 export const Playground = (args) => {
-  const { kind, dotType, showSlugActions = true } = args;
+  const { showSlugActions = true } = args;
 
-  let renderedContent;
-  if (kind === 'hollow' || dotType === 'hollow') {
-    renderedContent = content;
-  } else {
-    renderedContent = (
-      <>
-        <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>
-        {showSlugActions && (
-          <SlugActions>
-            <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>
-          </SlugActions>
-        )}
-      </>
-    );
-  }
+  const renderedContent = (
+    <>
+      <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>
+      {showSlugActions && (
+        <SlugActions>
+          <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>
+        </SlugActions>
+      )}
+    </>
+  );
 
   return (
     <>

diff --git a/packages/react/src/components/Slug/__tests__/Slug-test.js b/packages/react/src/components/Slug/__tests__/Slug-test.js
@@ -54,12 +54,6 @@ describe('Slug', () => {
       );
     });
 
-    it('should respect dotType prop', () => {
-      const { container } = render(<Slug kind="inline" dotType="hollow" />);
-
-      expect(container.firstChild).toHaveClass(`${prefix}--slug--hollow`);
-    });
-
     it('should respect kind prop', () => {
       render(<Slug kind="inline" />);
 

diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js
@@ -93,7 +93,6 @@ export const Slug = React.forwardRef(function Slug(
     autoAlign = true,
     children,
     className,
-    dotType,
     kind = 'default',
     onRevertClick,
     revertActive,
@@ -110,11 +109,6 @@ export const Slug = React.forwardRef(function Slug(
 
   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',
     [`${prefix}--slug--revert`]: revertActive,
   });
 
@@ -212,15 +206,10 @@ Slug.propTypes = {
    */
   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']),
+  kind: PropTypes.oneOf(['default', 'inline']),
 
   /**
    * Callback function that fires when the revert button is clicked

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -127,16 +127,12 @@ describe('@carbon/styles/scss/theme', () => {
         "support-caution-major",
         "support-caution-minor",
         "support-caution-undefined",
-        "slug-background",
-        "slug-gradient",
-        "slug-background-hover",
-        "slug-gradient-hover",
-        "slug-hollow-hover",
+        "ai-popover-background",
         "ai-popover-shadow-outer-01",
         "ai-popover-shadow-outer-02",
         "ai-inner-shadow",
+        "ai-aura-start-sm",
         "ai-aura-start",
-        "ai-aura-start-table",
         "ai-aura-end",
         "ai-aura-hover-background",
         "ai-aura-hover-start",

diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
@@ -1083,7 +1083,7 @@
     // Same gradient as background
     border-block-start: linear-gradient(
       to right,
-      $ai-aura-start-table 0%,
+      $ai-aura-start-sm 0%,
       $ai-aura-end 50%,
       transparent 50%
     );