Merge branch 'main' into renovate/downshift-8.x

.all-contributorsrc

@@ -1268,6 +1268,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "amanlajpal",
+      "name": "Aman Lajpal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/42869088?v=4",
+      "profile": "https://github.com/amanlajpal",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"

.percy.yml

@@ -1,3 +1,4 @@
+# Percy config
 version: 2
 snapshot:
   widths:

README.md

@@ -254,6 +254,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/cordesmj"><img src="https://avatars.githubusercontent.com/u/7409239?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cordesmj</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cordesmj" title="Code">💻</a></td>
     <td align="center"><a href="https://med-aziz-chebbi.web.app/"><img src="https://avatars.githubusercontent.com/u/60013060?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aziz Chebbi</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=azizChebbi" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/misiekhardcore"><img src="https://avatars.githubusercontent.com/u/58469680?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michał Konopski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=misiekhardcore" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/amanlajpal"><img src="https://avatars.githubusercontent.com/u/42869088?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aman Lajpal</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=amanlajpal" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=amanlajpal" title="Documentation">📖</a></td>
   </tr>
 </table>
 

e2e/components/MenuButton/MenuButton-test.avt.e2e.js

@@ -0,0 +1,137 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('MenuButton @avt', () => {
+  test('@avt-default-state MenuButton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('MenuButton');
+  });
+
+  test('@avt-advanced-states MenuButton with danger', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--with-danger',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('MenuButton-with-danger');
+  });
+
+  test('@avt-advanced-states MenuButton with dividers', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--with-dividers',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('MenuButton-with-dividers');
+  });
+
+  test('@avt-keyboard-nav MenuButton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const actionButton = page.getByRole('button', { name: 'Action' });
+    await expect(actionButton).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(actionButton).toBeFocused();
+
+    // Entering the menu button
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menuitem').first()).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('menuitem').nth(1)).toBeFocused();
+    // Skip the disabled item and come back to the first item
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('menuitem').first()).toBeFocused();
+
+    // Closing by selecting an item and focusing on the action button
+    await page.keyboard.press('Enter');
+    await expect(actionButton).toBeFocused();
+  });
+
+  test('@avt-keyboard-nav MenuButton with danger', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--with-danger',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const actionButton = page.getByRole('button', { name: 'Action' });
+    await expect(actionButton).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(actionButton).toBeFocused();
+
+    // Entering the menu button
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menuitem').first()).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+
+    // Validate danger button
+    await expect(page.getByRole('menuitem').last()).toBeFocused();
+    await expect(page.getByText('Danger action')).toBeVisible();
+
+    // Closing by selecting an item and focusing on the action button
+    await page.keyboard.press('Enter');
+    await expect(actionButton).toBeFocused();
+  });
+
+  test('@avt-keyboard-nav MenuButton with dividers', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MenuButton',
+      id: 'components-menubutton--with-dividers',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const actionButton = page.getByRole('button', { name: 'Action' });
+    await expect(actionButton).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(actionButton).toBeFocused();
+
+    // Entering the menu button
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('menuitem').first()).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await expect(page.getByRole('menuitem').last()).toBeFocused();
+    expect(page.getByRole('separator')).toBeTruthy();
+
+    // Closing by selecting an item and focusing on the action button
+    await page.keyboard.press('Enter');
+    await expect(actionButton).toBeFocused();
+  });
+});

e2e/components/MenuButton/MenuButton-test.e2e.js

@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('MenuButton', () => {
   themes.forEach((theme) => {
@@ -23,15 +23,4 @@ test.describe('MenuButton', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'MenuButton',
-      id: 'components-menubutton--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('MenuButton');
-  });
 });

e2e/test-utils/snapshot.js

@@ -17,10 +17,21 @@ const { expect } = require('@playwright/test');
 async function snapshot(page, context) {
   const id = getSnapshotId(context);
 
+  /**
+   * Restrict mobile snapshots to only the white theme. There's not really a strong
+   * reason for snapshotting components across 4 themes in mobile as components don't
+   * really have different visual states per breakpoint, per theme.
+   * The overall thinking is that if a bug appears in white, it'll be the same bug
+   * present in all other themes.
+   * This configuration overrides any global setting for `widths` in .percy.yml or otherwise.
+   * See https://github.com/carbon-design-system/carbon/issues/14779
+   */
+  const widths = context.themes === 'white' ? [1366, 360] : [1366];
+
   if (process.env.ENABLE_LOCAL_SNAPSHOTS) {
     expect(await page.screenshot()).toMatchSnapshot(`${id}.png`);
   } else {
-    await percySnapshot(page, id);
+    await percySnapshot(page, id, { widths: widths });
   }
 }
 

packages/react/src/components/SkeletonIcon/SkeletonIcon.js → packages/react/src/components/SkeletonIcon/SkeletonIcon.tsx

@@ -4,18 +4,28 @@
  * 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 from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SkeletonIcon = ({ className, ...other }) => {
+interface SkeletonIconProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+
+  /**
+   * The CSS styles.
+   */
+  style?: React.CSSProperties;
+}
+
+const SkeletonIcon: React.FC<SkeletonIconProps> = ({ className, ...other }) => {
   const prefix = usePrefix();
 
-  const skeletonIconClasses = classNames({
+  const skeletonIconClasses = classNames(className, {
     [`${prefix}--icon--skeleton`]: true,
-    [className]: className,
   });
 
   return <div className={skeletonIconClasses} {...other} />;

packages/react/src/components/UIShell/SideNavDetails.js → packages/react/src/components/UIShell/SideNavDetails.tsx

@@ -10,12 +10,18 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 
+export interface SideNavDetailsProps {
+  children?: React.ReactNode;
+  className?: string;
+  title: string;
+}
+
 const SideNavDetails = ({
   children,
   className: customClassName,
   title,
   ...rest
-}) => {
+}: SideNavDetailsProps) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__details`, customClassName);
   return (

packages/react/src/components/UIShell/SideNavDivider.js → packages/react/src/components/UIShell/SideNavDivider.tsx

@@ -10,15 +10,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 
-function SideNavDivider({ className }) {
+interface SideNavDividerProps {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className?: string;
+}
+const SideNavDivider: React.FC<SideNavDividerProps> = ({ className }) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--side-nav__divider`, className);
   return (
     <li className={classNames}>
       <hr />
     </li>
   );
-}
+};
 
 SideNavDivider.propTypes = {
   /**

packages/styles/scss/_zone.scss

@@ -36,8 +36,8 @@ $-components: (
 
 @each $name, $theme in $zones {
   .#{config.$prefix}--#{'' + $name} {
-    background: var(--cds-background);
-    color: var(--cds-text-primary);
+    background-color: custom-property.get-var('background');
+    color: custom-property.get-var('text-primary');
 
     @each $key, $value in $theme {
       @if type-of($value) == color {

packages/type/scss/_default-type.scss

@@ -6,6 +6,7 @@
 //
 @use 'sass:meta';
 @use 'styles' as *;
+@use 'prefix' as *;
 
 /// Include default type styles
 /// @access public
@@ -40,7 +41,7 @@
   }
 
   a {
-    color: var(--cds-link-primary, #0062fe);
+    color: var(--#{$prefix}-link-primary, #0062fe);
   }
 
   em {