feat(Accordion): Added isPlain and isNoPlainOnGlass prop to Accordion

packages/react-core/src/components/Accordion/Accordion.tsx

@@ -15,6 +15,10 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   asDefinitionList?: boolean;
   /** Flag to indicate the accordion had a border */
   isBordered?: boolean;
+  /** Flag to prevent the accordion from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
+  /** Flag to add plain styling to the accordion. */
+  isPlain?: boolean;
   /** Display size variant. */
   displaySize?: 'default' | 'lg';
   /** Sets the toggle icon position for all accordion toggles. */
@@ -28,6 +32,8 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
   headingLevel = 'h3',
   asDefinitionList = true,
   isBordered = false,
+  isNoPlainOnGlass = false,
+  isPlain = false,
   displaySize = 'default',
   togglePosition = 'end',
   ...props
@@ -38,6 +44,8 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       className={css(
         styles.accordion,
         isBordered && styles.modifiers.bordered,
+        isNoPlainOnGlass && styles.modifiers.noPlain,
+        isPlain && styles.modifiers.plain,
         togglePosition === 'start' && styles.modifiers.toggleStart,
         displaySize === 'lg' && styles.modifiers.displayLg,
         className

packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 
 import { Accordion } from '../Accordion';
@@ -121,6 +122,30 @@ test('Renders with pf-m-bordered when isBordered=true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
 });
 
+test('Renders without class pf-m-no-plain by default', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-no-plain');
+});
+
+test('Renders with class pf-m-no-plain when isNoPlainOnGlass', () => {
+  render(<Accordion isNoPlainOnGlass>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-no-plain');
+});
+
+test('Renders without class pf-m-plain by default', () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-plain');
+});
+
+test('Renders with class pf-m-plain when isPlain', () => {
+  render(<Accordion isPlain>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-m-plain');
+});
+
 test('Renders without pf-m-display-lg by default', () => {
   render(<Accordion>Test</Accordion>);