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,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.noPlainOnGlass,
+        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,41 @@ test('Renders with pf-m-bordered when isBordered=true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
 });
 
+test(`Renders without class ${styles.modifiers.noPlainOnGlass} by default`, () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Renders with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass`, () => {
+  render(<Accordion isNoPlainOnGlass>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+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(`applies both ${styles.modifiers.plain} and ${styles.modifiers.noPlainOnGlass} when both isPlain and isNoPlainOnGlass are true`, () => {
+  render(
+    <Accordion isPlain isNoPlainOnGlass>
+      Test
+    </Accordion>
+  );
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.plain);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
 test('Renders without pf-m-display-lg by default', () => {
   render(<Accordion>Test</Accordion>);
 

packages/react-integration/cypress/integration/accordion.spec.ts

@@ -28,4 +28,29 @@ describe('Accordion Demo Test', () => {
     cy.get('#divAccordion-item3-content').should('have.attr', 'role', 'region');
     cy.get('#definitionListAccordion-item1-content').should('not.have.attr', 'role');
   });
+
+  it('in glass theme, does not apply glass plain transparent background when pf-m-no-plain-on-glass is present (even with pf-m-plain)', () => {
+    cy.visit('http://localhost:3000/accordion-demo-nav-link');
+    cy.document().then((doc) => {
+      doc.documentElement.classList.add('pf-v6-theme-glass');
+    });
+
+    cy.get('[data-testid="accordion-glass-plain-both"]')
+      .should('have.class', 'pf-m-no-plain-on-glass')
+      .and('have.class', 'pf-m-plain');
+
+    /**
+     * This test fails due to a css bug.
+     */
+    cy.get('[data-testid="accordion-glass-plain-both"]').then(($el) => {
+      const el = $el[0];
+      const win = el.ownerDocument.defaultView;
+      if (!win) {
+        throw new Error('expected window');
+      }
+      const bg = win.getComputedStyle(el).backgroundColor;
+      const fullyTransparent = bg === 'transparent' || bg === 'rgba(0, 0, 0, 0)' || bg === 'rgba(0,0,0,0)';
+      expect(fullyTransparent, `expected non-transparent background, got ${bg}`).to.eq(false);
+    });
+  });
 });

packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx

@@ -103,6 +103,20 @@ export const AccordionDemo = () => {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
+      <br />
+      <Accordion
+        data-testid="accordion-glass-plain-both"
+        aria-label="Accordion for glass theme integration test"
+        isPlain
+        isNoPlainOnGlass
+      >
+        <AccordionItem isExpanded>
+          <AccordionToggle id="glass-plain-both-toggle">Glass theme: isPlain and isNoPlainOnGlass</AccordionToggle>
+          <AccordionContent id="glass-plain-both-content">
+            <p>Used by Cypress to verify classes and styles under pf-v6-theme-glass.</p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </>
   );
 };

yarn.lock

@@ -17300,15 +17300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^10.2.2":
-  version: 10.2.5
-  resolution: "minimatch@npm:10.2.5"
-  dependencies:
-    brace-expansion: "npm:^5.0.5"
-  checksum: 10c0/6bb058bd6324104b9ec2f763476a35386d05079c1f5fe4fbf1f324a25237cd4534d6813ecd71f48208f4e635c1221899bef94c3c89f7df55698fe373aaae20fd
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"