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;
+  /** @beta Flag to prevent the accordion from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
+  /** @beta 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,16 +32,27 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
   headingLevel = 'h3',
   asDefinitionList = true,
   isBordered = false,
+  isNoPlainOnGlass = false,
+  isPlain = false,
   displaySize = 'default',
   togglePosition = 'end',
   ...props
 }: AccordionProps) => {
+  if (isPlain && isNoPlainOnGlass) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Accordion: When both isPlain and isNoPlainOnGlass are true, styling may conflict. It's recommended to pass only one prop according to the current theme.`
+    );
+  }
+
   const AccordionList: any = asDefinitionList ? 'dl' : 'div';
   return (
     <AccordionList
       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,81 @@ test('Renders with pf-m-bordered when isBordered=true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
 });
 
+test(`Renders without class ${styles.modifiers.noPlain} by default`, () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noPlain);
+});
+
+test(`Renders with class ${styles.modifiers.noPlain} when isNoPlainOnGlass`, () => {
+  render(<Accordion isNoPlainOnGlass>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlain);
+});
+
+test(`Renders without class ${styles.modifiers.plain} by default`, () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with class ${styles.modifiers.plain} when isPlain`, () => {
+  render(<Accordion isPlain>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.plain);
+});
+
+test('warns when both isPlain and isNoPlainOnGlass are true', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(
+    <Accordion isPlain isNoPlainOnGlass>
+      Test
+    </Accordion>
+  );
+
+  expect(consoleWarning).toHaveBeenCalledWith(
+    `Accordion: When both isPlain and isNoPlainOnGlass are true, styling may conflict. It's recommended to pass only one prop according to the current theme.`
+  );
+
+  consoleWarning.mockRestore();
+});
+
+test(`applies both ${styles.modifiers.plain} and ${styles.modifiers.noPlain} when both isPlain and isNoPlainOnGlass are true`, () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(
+    <Accordion isPlain isNoPlainOnGlass>
+      Test
+    </Accordion>
+  );
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.plain);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlain);
+
+  consoleWarning.mockRestore();
+});
+
+test('does not warn when only isNoPlainOnGlass is true', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<Accordion isNoPlainOnGlass>Test</Accordion>);
+
+  expect(consoleWarning).not.toHaveBeenCalled();
+
+  consoleWarning.mockRestore();
+});
+
+test('does not warn when only isPlain is true', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<Accordion isPlain>Test</Accordion>);
+
+  expect(consoleWarning).not.toHaveBeenCalled();
+
+  consoleWarning.mockRestore();
+});
+
 test('Renders without pf-m-display-lg by default', () => {
   render(<Accordion>Test</Accordion>);