[Joy] Add tests / classes for Breadcrumbs component (mui#33860)

packages/mui-joy/src/Breadcrumbs/Breadcrumbs.spec.tsx

@@ -0,0 +1,16 @@
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import * as React from 'react';
+
+<Breadcrumbs />;
+
+<Breadcrumbs component="div" />;
+
+// `size`
+<Breadcrumbs size="sm" />;
+<Breadcrumbs size="md" />;
+<Breadcrumbs size="lg" />;
+
+// @ts-expect-error there is no size `xs`
+<Breadcrumbs size="xs" />;
+// @ts-expect-error there is no size `xl`
+<Breadcrumbs size="xl" />;

packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer, describeConformance } from 'test/utils';
+import { ThemeProvider } from '@mui/joy/styles';
+import Breadcrumbs, { breadcrumbsClasses as classes } from '@mui/joy/Breadcrumbs';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+
+describe('<Breadcrumbs />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Breadcrumbs />, () => ({
+    classes,
+    inheritComponent: 'nav',
+    render,
+    ThemeProvider,
+    muiName: 'JoyBreadcrumbs',
+    refInstanceof: window.HTMLElement,
+    testVariantProps: { variant: 'solid' },
+    testCustomVariant: true,
+    skip: ['classesRoot', 'componentsProp'],
+  }));
+
+  describe('prop: size', () => {
+    it('md by default', () => {
+      const { getByRole } = render(<Breadcrumbs />);
+
+      expect(getByRole('navigation')).to.have.class(classes.sizeMd);
+    });
+    ['sm', 'md', 'lg'].forEach((size) => {
+      it(`should render ${size}`, () => {
+        const { getByRole } = render(<Breadcrumbs size={size} />);
+
+        expect(getByRole('navigation')).to.have.class(classes[`size${capitalize(size)}`]);
+      });
+    });
+  });
+});

packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx

@@ -4,6 +4,7 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useSlotProps } from '@mui/base/utils';
+import clsx from 'clsx';
 import { useThemeProps } from '../styles';
 import styled from '../styles/styled';
 import { getBreadcrumbsUtilityClass } from './breadcrumbsClasses';
@@ -23,7 +24,7 @@ const useUtilityClasses = (ownerState: BreadcrumbsOwnerState) => {
 };
 
 const BreadcrumbsRoot = styled('nav', {
-  name: 'MuiBreadcrumbs',
+  name: 'JoyBreadcrumbs',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: BreadcrumbsOwnerState }>(({ theme, ownerState }) => ({
@@ -46,7 +47,7 @@ const BreadcrumbsRoot = styled('nav', {
 }));
 
 const BreadcrumbsOl = styled('ol', {
-  name: 'MuiBreadcrumbs',
+  name: 'JoyBreadcrumbs',
   slot: 'Ol',
   overridesResolver: (props, styles) => styles.ol,
 })<{ ownerState: BreadcrumbsOwnerState }>({
@@ -60,13 +61,13 @@ const BreadcrumbsOl = styled('ol', {
 });
 
 const BreadcrumbsLi = styled('li', {
-  name: 'MuiBreadcrumbs',
+  name: 'JoyBreadcrumbs',
   slot: 'Ol',
   overridesResolver: (props, styles) => styles.ol,
 })<{ ownerState: BreadcrumbsOwnerState }>({});
 
 const BreadcrumbsSeparator = styled('li', {
-  name: 'MuiBreadcrumbs',
+  name: 'JoyBreadcrumbs',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator,
 })<{ ownerState: BreadcrumbsOwnerState }>({
@@ -78,7 +79,7 @@ const BreadcrumbsSeparator = styled('li', {
 const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
   const props = useThemeProps<typeof inProps & BreadcrumbsProps>({
     props: inProps,
-    name: 'MuiBreadcrumbs',
+    name: 'JoyBreadcrumbs',
   });
 
   const {
@@ -109,7 +110,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
       ref,
       as: component,
     },
-    className: classes.root,
+    className: clsx(classes.root, className),
   });
 
   const olProps = useSlotProps({

packages/mui-joy/src/Breadcrumbs/breadcrumbsClasses.ts

@@ -9,6 +9,12 @@ export interface BreadcrumbsClasses {
   li: string;
   /** Styles applied to the separator element. */
   separator: string;
+  /** Styles applied to the root element if `size="sm"`. */
+  sizeSm: string;
+  /** Styles applied to the root element if `size="md"`. */
+  sizeMd: string;
+  /** Styles applied to the root element if `size="lg"`. */
+  sizeLg: string;
 }
 
 export type BreadcrumbsClassKey = keyof BreadcrumbsClasses;
@@ -22,6 +28,9 @@ const breadcrumbsClasses: BreadcrumbsClasses = generateUtilityClasses('MuiBreadc
   'ol',
   'li',
   'separator',
+  'sizeSm',
+  'sizeMd',
+  'sizeLg',
 ]);
 
 export default breadcrumbsClasses;