From 6c3faf1d14d460a3876bdafce7f58fd8dbac660d Mon Sep 17 00:00:00 2001
From: sai6855 <60743144+sai6855@users.noreply.github.com>
Date: Fri, 1 Sep 2023 17:00:22 +0530
Subject: [PATCH] add missing classes

---
 .../AccordionGroup/AccordionGroup.test.tsx    | 40 ++++++++++++++++++-
 .../src/AccordionGroup/AccordionGroup.tsx     |  7 +++-
 .../AccordionGroup/accordionGroupClasses.ts   | 30 ++++++++++++++
 3 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
index fcb6aaf45d5ed5..0d93095e4379df 100644
--- a/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
+++ b/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createRenderer, describeConformance } from 'test/utils';
+import { expect } from 'chai';
+import { createRenderer, describeConformance, describeJoyColorInversion } from 'test/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AccordionGroup, { accordionGroupClasses as classes } from '@mui/joy/AccordionGroup';
 
@@ -21,4 +22,41 @@ describe('<AccordionGroup />', () => {
       },
     },
   }));
+
+  describe('classes', () => {
+    (
+      [
+        { variant: 'outlined', class: classes.variantOutlined },
+        { variant: 'plain', class: classes.variantPlain },
+        { variant: 'soft', class: classes.variantSoft },
+        { variant: 'solid', class: classes.variantSolid },
+      ] as const
+    ).forEach((variantConfig) => {
+      it(`should have ${variantConfig.class} class for ${variantConfig.variant} variant `, () => {
+        const { getByTestId } = render(
+          <AccordionGroup data-testid="root" variant={variantConfig.variant} />,
+        );
+
+        expect(getByTestId('root')).to.have.class(variantConfig.class);
+      });
+    });
+    (
+      [
+        { color: 'danger', class: classes.colorDanger },
+        { color: 'neutral', class: classes.colorNeutral },
+        { color: 'primary', class: classes.colorPrimary },
+        { color: 'success', class: classes.colorSuccess },
+      ] as const
+    ).forEach((colorConfig) => {
+      it(`should have ${colorConfig.class} class for ${colorConfig.color} color `, () => {
+        const { getByTestId } = render(
+          <AccordionGroup data-testid="root" color={colorConfig.color} />,
+        );
+
+        expect(getByTestId('root')).to.have.class(colorConfig.class);
+      });
+    });
+
+    describeJoyColorInversion(<AccordionGroup />, { muiName: 'JoyAccordionGroup', classes });
+  });
 });
diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx
index 6ce32712ea8e44..5736452711a4fc 100644
--- a/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx
+++ b/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { OverridableComponent } from '@mui/types';
-import { useThemeProps } from '../styles';
+import { useColorInversion, useThemeProps } from '../styles';
 import styled from '../styles/styled';
 import { getAccordionGroupUtilityClass } from './accordionGroupClasses';
 import {
@@ -84,7 +84,7 @@ const AccordionGroup = React.forwardRef(function AccordionGroup(inProps, ref) {
 
   const {
     component = 'div',
-    color = 'neutral',
+    color: colorProp = 'neutral',
     children,
     disableDivider = false,
     variant = 'plain',
@@ -97,6 +97,9 @@ const AccordionGroup = React.forwardRef(function AccordionGroup(inProps, ref) {
 
   const externalForwardedProps = { ...other, component, slots, slotProps };
 
+  const { getColor } = useColorInversion(variant);
+  const color = getColor(inProps.color, colorProp);
+
   const ownerState = {
     ...props,
     component,
diff --git a/packages/mui-joy/src/AccordionGroup/accordionGroupClasses.ts b/packages/mui-joy/src/AccordionGroup/accordionGroupClasses.ts
index d559f8b5c4d2f9..fd7abccb56cca6 100644
--- a/packages/mui-joy/src/AccordionGroup/accordionGroupClasses.ts
+++ b/packages/mui-joy/src/AccordionGroup/accordionGroupClasses.ts
@@ -3,6 +3,26 @@ import { generateUtilityClass, generateUtilityClasses } from '../className';
 export interface AccordionGroupClasses {
   /** Class name applied to the root element. */
   root: string;
+  /** Class name applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Class name applied to the root element if `color="neutral"`. */
+  colorNeutral: string;
+  /** Class name applied to the root element if `color="danger"`. */
+  colorDanger: string;
+  /** Class name applied to the root element if `color="success"`. */
+  colorSuccess: string;
+  /** Class name applied to the root element if `color="warning"`. */
+  colorWarning: string;
+  /** Class name applied to the root element when color inversion is triggered. */
+  colorContext: string;
+  /** Class name applied to the root element if `variant="plain"`. */
+  variantPlain: string;
+  /** Class name applied to the root element if `variant="outlined"`. */
+  variantOutlined: string;
+  /** Class name applied to the root element if `variant="soft"`. */
+  variantSoft: string;
+  /** Class name applied to the root element if `variant="solid"`. */
+  variantSolid: string;
 }
 
 export type AccordionGroupClassKey = keyof AccordionGroupClasses;
@@ -13,6 +33,16 @@ export function getAccordionGroupUtilityClass(slot: string): string {
 
 const accordionGroupClasses: AccordionGroupClasses = generateUtilityClasses('MuiAccordionGroup', [
   'root',
+  'colorPrimary',
+  'colorNeutral',
+  'colorDanger',
+  'colorSuccess',
+  'colorWarning',
+  'colorContext',
+  'variantPlain',
+  'variantOutlined',
+  'variantSoft',
+  'variantSolid',
 ]);
 
 export default accordionGroupClasses;