add logic to check if glass theme is on

Author: tlabaj

packages/react-core/src/components/Accordion/Accordion.tsx

@@ -1,5 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+import { hasGlassTheme } from '../../helpers/util';
 import { AccordionContext } from './AccordionContext';
 
 export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
@@ -15,6 +16,8 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   asDefinitionList?: boolean;
   /** Flag to indicate the accordion had a border */
   isBordered?: boolean;
+  /** Flag to indicate if the accordion is plain */
+  isPlain?: boolean;
   /** Display size variant. */
   displaySize?: 'default' | 'lg';
   /** Sets the toggle icon position for all accordion toggles. */
@@ -28,6 +31,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
   headingLevel = 'h3',
   asDefinitionList = true,
   isBordered = false,
+  isPlain = false,
   displaySize = 'default',
   togglePosition = 'end',
   ...props
@@ -38,6 +42,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       className={css(
         styles.accordion,
         isBordered && styles.modifiers.bordered,
+        !isPlain && hasGlassTheme() && styles.modifiers.noPlain,
         togglePosition === 'start' && styles.modifiers.toggleStart,
         displaySize === 'lg' && styles.modifiers.displayLg,
         className

packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -1,7 +1,11 @@
+import '@testing-library/jest-dom';
+// eslint-disable-next-line no-restricted-imports -- React in scope required for TS (test file)
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { Accordion } from '../Accordion';
 import { AccordionContext } from '../AccordionContext';
+// @ts-ignore - react-styles subpath module resolution
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 test('Renders without children', () => {
@@ -33,7 +37,7 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByText('Test')).toHaveAccessibleName('Label');
 });
 
-test(`Renders with class name ${styles.accordion}`, () => {
+test(`Renders with class ${styles.accordion}`, () => {
   render(<Accordion>Test</Accordion>);
 
   expect(screen.getByText('Test')).toHaveClass(styles.accordion);
@@ -62,7 +66,7 @@ test('Renders Accordion as a "div" when asDefinitionList is false', () => {
 test('Provides a ContentContainer of "dd" in a context by default', () => {
   render(
     <Accordion>
-      <AccordionContext.Consumer>{({ ContentContainer }) => ContentContainer}</AccordionContext.Consumer>
+      <AccordionContext.Consumer>{({ ContentContainer }) => String(ContentContainer)}</AccordionContext.Consumer>
     </Accordion>
   );
 
@@ -72,7 +76,7 @@ test('Provides a ContentContainer of "dd" in a context by default', () => {
 test('Provides a ContentContainer of "div" in a context when asDefinitionList is false', () => {
   render(
     <Accordion asDefinitionList={false}>
-      <AccordionContext.Consumer>{({ ContentContainer }) => ContentContainer}</AccordionContext.Consumer>
+      <AccordionContext.Consumer>{({ ContentContainer }) => String(ContentContainer)}</AccordionContext.Consumer>
     </Accordion>
   );
 
@@ -82,7 +86,7 @@ test('Provides a ContentContainer of "div" in a context when asDefinitionList is
 test('Provides a ToggleContainer of "dt" in a context by default', () => {
   render(
     <Accordion>
-      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+      <AccordionContext.Consumer>{({ ToggleContainer }) => String(ToggleContainer)}</AccordionContext.Consumer>
     </Accordion>
   );
 
@@ -92,7 +96,7 @@ test('Provides a ToggleContainer of "dt" in a context by default', () => {
 test('Provides a ToggleContainer of "h3" in a context when asDefinitionList is false', () => {
   render(
     <Accordion asDefinitionList={false}>
-      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+      <AccordionContext.Consumer>{({ ToggleContainer }) => String(ToggleContainer)}</AccordionContext.Consumer>
     </Accordion>
   );
 
@@ -102,7 +106,7 @@ test('Provides a ToggleContainer of "h3" in a context when asDefinitionList is f
 test('Provides a ToggleContainer of "h2" in a context when asDefinitionList is false and headingLevel is "h2"', () => {
   render(
     <Accordion asDefinitionList={false} headingLevel="h2">
-      <AccordionContext.Consumer>{({ ToggleContainer }) => ToggleContainer}</AccordionContext.Consumer>
+      <AccordionContext.Consumer>{({ ToggleContainer }) => String(ToggleContainer)}</AccordionContext.Consumer>
     </Accordion>
   );
 
@@ -121,6 +125,38 @@ 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 without class ${styles.modifiers.noPlain} when isPlain is undefined`, () => {
+  render(<Accordion isPlain={undefined}>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noPlain);
+});
+
+test(`Renders without class ${styles.modifiers.noPlain} when isPlain=false and glass theme is not applied`, () => {
+  render(<Accordion isPlain={false}>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noPlain);
+});
+
+test(`Renders with class ${styles.modifiers.noPlain} when isPlain=false and glass theme is applied`, () => {
+  document.documentElement.classList.add('pf-v6-theme-glass');
+  render(<Accordion isPlain={false}>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlain);
+  document.documentElement.classList.remove('pf-v6-theme-glass');
+});
+
+test(`Renders without class ${styles.modifiers.noPlain} when isPlain=true`, () => {
+  render(<Accordion isPlain>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noPlain);
+});
+
 test('Renders without pf-m-display-lg by default', () => {
   render(<Accordion>Test</Accordion>);
 

packages/react-core/src/helpers/util.ts

@@ -395,6 +395,15 @@ export const toCamel = (s: string) => s.replace(/([-_][a-z])/gi, camelize);
  */
 export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
+/**
+ * Checks if the PatternFly glass theme is applied at the document root.
+ * Used by components that adapt styling for glass theme (e.g. Accordion).
+ *
+ * @returns {boolean} - True if the glass theme class is present on the html element
+ */
+export const hasGlassTheme = (): boolean =>
+  typeof document !== 'undefined' && document.documentElement.classList.contains('pf-v6-theme-glass');
+
 /**
  * Calculate the width of the text
  * Example: