diff --git a/packages/react-core/package.json b/packages/react-core/package.json index d49a88e57fd..5a3646835d0 100644 --- a/packages/react-core/package.json +++ b/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" 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-docs/package.json b/packages/react-docs/package.json index 27e83b76133..ba3b87e4e85 100644 --- a/packages/react-docs/package.json +++ b/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:^", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index f12b73da4d5..58b9813c639 100644 --- a/packages/react-icons/package.json +++ b/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" 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/packages/react-styles/package.json b/packages/react-styles/package.json index df7a7b8ff47..731f54cbf95 100644 --- a/packages/react-styles/package.json +++ b/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" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 54eebb73c93..e339944d8a9 100644 --- a/packages/react-tokens/package.json +++ b/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" } } diff --git a/yarn.lock b/yarn.lock index 9b11737b8cf..7964640177c 100644 --- a/yarn.lock +++ b/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