diff --git a/packages/react-core/src/components/Accordion/Accordion.tsx b/packages/react-core/src/components/Accordion/Accordion.tsx index 53096f97c2e..6919d575d66 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,16 +32,27 @@ export const Accordion: React.FunctionComponent = ({ headingLevel = 'h3', asDefinitionList = true, isBordered = false, + isNoPlainOnGlass = false, + isPlain = false, displaySize = 'default', togglePosition = 'end', ...props }: AccordionProps) => { + if (isPlain && isNoPlainOnGlass) { + // eslint-disable-next-line no-console + console.warn( + `Accordion: When both isPlain and isNoPlainOnGlass are true, styling may conflict. It's recommended to pass only one prop according to the current theme.` + ); + } + const AccordionList: any = asDefinitionList ? 'dl' : 'div'; return ( { expect(screen.getByText('Test')).toHaveClass('pf-m-bordered'); }); +test(`Renders without class ${styles.modifiers.noPlain} by default`, () => { + render(Test); + + expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noPlain); +}); + +test(`Renders with class ${styles.modifiers.noPlain} when isNoPlainOnGlass`, () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlain); +}); + +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('warns when both isPlain and isNoPlainOnGlass are true', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + Test + + ); + + expect(consoleWarning).toHaveBeenCalledWith( + `Accordion: When both isPlain and isNoPlainOnGlass are true, styling may conflict. It's recommended to pass only one prop according to the current theme.` + ); + + consoleWarning.mockRestore(); +}); + +test(`applies both ${styles.modifiers.plain} and ${styles.modifiers.noPlain} when both isPlain and isNoPlainOnGlass are true`, () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + Test + + ); + + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.plain); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlain); + + consoleWarning.mockRestore(); +}); + +test('does not warn when only isNoPlainOnGlass is true', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render(Test); + + expect(consoleWarning).not.toHaveBeenCalled(); + + consoleWarning.mockRestore(); +}); + +test('does not warn when only isPlain is true', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render(Test); + + expect(consoleWarning).not.toHaveBeenCalled(); + + consoleWarning.mockRestore(); +}); + test('Renders without pf-m-display-lg by default', () => { render(Test);