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

* add logic to check if glass theme is on

* fix build issue

* fix test file

* fix test based of coderabbitai comment

* update isPlain prop comment

* updates to add prop and remove util class

* update unit test

* update tests

* update tests

* add warning

* Removed warning. Added test case for broken feature

* update cypress test

* bump core versions

Author: tlabaj

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.65",
+    "@patternfly/patternfly": "6.5.0-prerelease.67",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"

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-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.65",
+    "@patternfly/patternfly": "6.5.0-prerelease.67",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -35,7 +35,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.5.0-prerelease.65",
+    "@patternfly/patternfly": "6.5.0-prerelease.67",
     "@rhds/icons": "^2.1.0",
     "fs-extra": "^11.3.3",
     "tslib": "^2.8.1"

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>
     </>
   );
 };

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.65",
+    "@patternfly/patternfly": "6.5.0-prerelease.67",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.3"
   },

packages/react-tokens/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.4.4",
-    "@patternfly/patternfly": "6.5.0-prerelease.65",
+    "@patternfly/patternfly": "6.5.0-prerelease.67",
     "fs-extra": "^11.3.3"
   }
 }

yarn.lock

@@ -5070,10 +5070,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.5.0-prerelease.65":
-  version: 6.5.0-prerelease.65
-  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.65"
-  checksum: 10c0/5d6042bb3b3a562b3b1421395edbbd5899f84a3349d45be29f9d3d9a9e18968b8e86275f75a86b9a3720db905679b52a4227377b640c0096f498d584e5f4c2fb
+"@patternfly/patternfly@npm:6.5.0-prerelease.67":
+  version: 6.5.0-prerelease.67
+  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.67"
+  checksum: 10c0/7e42179e955ef0b300a8814925d59482ca67c87e1018fe350be9875691da86c49d61d5fc1ffc1f37275dc524605351686dd462ee1d0d6703b477308ed75a7c88
   languageName: node
   linkType: hard
 
@@ -5171,7 +5171,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.65"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.67"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -5192,7 +5192,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.36.8"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.65"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.67"
     "@patternfly/patternfly-a11y": "npm:5.1.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -5232,7 +5232,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.65"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.67"
     "@rhds/icons": "npm:^2.1.0"
     fs-extra: "npm:^11.3.3"
     tslib: "npm:^2.8.1"
@@ -5319,7 +5319,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.65"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.67"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
@@ -5361,7 +5361,7 @@ __metadata:
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
     "@adobe/css-tools": "npm:^4.4.4"
-    "@patternfly/patternfly": "npm:6.5.0-prerelease.65"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.67"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
   linkType: soft