diff --git a/packages/react-core/src/components/Accordion/Accordion.tsx b/packages/react-core/src/components/Accordion/Accordion.tsx index 53096f97c2e..64b9c16898c 100644 --- a/packages/react-core/src/components/Accordion/Accordion.tsx +++ b/packages/react-core/src/components/Accordion/Accordion.tsx @@ -15,6 +15,10 @@ export interface AccordionProps extends React.HTMLProps { 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 = ({ headingLevel = 'h3', asDefinitionList = true, isBordered = false, + isNoPlainOnGlass = false, + isPlain = false, displaySize = 'default', togglePosition = 'end', ...props @@ -38,6 +44,8 @@ export const Accordion: React.FunctionComponent = ({ 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 diff --git a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx index c6260e3f8cd..7cfe2a82ba7 100644 --- a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx +++ b/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(Test); + + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noPlainOnGlass); +}); + +test(`Renders with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass`, () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlainOnGlass); +}); + +test(`Renders without class ${styles.modifiers.plain} by default`, () => { + render(Test); + + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.plain); +}); + +test(`Renders with class ${styles.modifiers.plain} when isPlain`, () => { + render(Test); + + 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( + + Test + + ); + + 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(Test); diff --git a/packages/react-integration/cypress/integration/accordion.spec.ts b/packages/react-integration/cypress/integration/accordion.spec.ts index d644571059f..6f2efc9b0ed 100644 --- a/packages/react-integration/cypress/integration/accordion.spec.ts +++ b/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); + }); + }); }); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx index 483342d1ca4..e0eb9d1e4c8 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx @@ -103,6 +103,20 @@ export const AccordionDemo = () => { +
+ + + Glass theme: isPlain and isNoPlainOnGlass + +

Used by Cypress to verify classes and styles under pf-v6-theme-glass.

+
+
+
); }; diff --git a/yarn.lock b/yarn.lock index eaa65640dcc..55b094e0b08 100644 --- a/yarn.lock +++ b/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"