Creation of Multi-Accordion Block by Gowrishankar-Palanisamy · Pull Request #1185 · SEMOSS/semoss-ui

Gowrishankar-Palanisamy · 2025-05-20T16:07:11Z

This PR contains the following changes

--> Enhancement of accordion
-->Creation of multi accordion block

…nhance-multi-accordion

github-actions · 2025-05-20T16:07:22Z

@CodiumAI-Agent /describe

QodoAI-Agent · 2025-05-20T16:07:49Z

Title

Creation of Multi-Accordion Block

User description

This PR contains the following changes

--> Enhancement of accordion
-->Creation of multi accordion block

PR Type

Enhancement

Description

Replace accordion expand icon and styling
Add Multi-Accordion Block menu entry
Define default multi-accordion JSON configuration

Changes walkthrough 📝

Relevant files

Enhancement

AccordionBlock.tsx `Update accordion icon and style` libs/renderer/src/components/block-defaults/accordion-block/AccordionBlock.tsx Swap `ExpandMore` for `ArrowDropDown` icon Add `borderRadius` to accordion styling Simplify `expandIcon` prop usage	+3/-2

Configuration changes

default-menu.ts `Add Multi-Accordion Block menu entry` packages/client/src/components/blocks-workspace/menus/default-menu.ts Insert `Multi-Accordion Block` menu section Configure default JSON structure with three accordions Add helper text and images for new block	+320/-0

Need help?
Type /help how to ... in the comments thread for any questions about PR-Agent usage.
Check out the documentation for more information.

github-actions · 2025-05-20T16:08:08Z

@CodiumAI-Agent /review

QodoAI-Agent · 2025-05-20T16:08:50Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Icon Behavior The new `ArrowDropDown` icon may not rotate on expand/collapse like `ExpandMore`. Verify expand icon animation and alignment. import { ArrowDropDown } from "@mui/icons-material"; import { Accordion, Stack, styled } from "@semoss/ui"; import { Slot } from "../../blocks"; import { useBlock } from "../../../hooks"; import { BlockDef, BlockComponent, ListenerActions } from "../../../store"; const StyledAccordion = styled(Accordion)(({ theme }) => ({ padding: 0, margin: 0, borderRadius: "12px", "&.MuiAccordion-root:before": { backgroundColor: "white", }, })); const AccordionTrigger = styled(Accordion.Trigger)(({ theme }) => ({ "& .MuiAccordionSummary-content": { margin: 0, }, minHeight: "fit-content", margin: 0, padding: 0, borderRadius: "inherit", //if accordion is expanded, then remove the border radius from bottom left and right side of the trigger element "&.MuiButtonBase-root.Mui-expanded": { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, }, })); const AccordionContent = styled(Accordion.Content)(({ theme }) => ({ margin: 0, padding: 0, borderRadius: "inherit", borderTopLeftRadius: 0, borderTopRightRadius: 0, })); export interface AccordionBlockDef extends BlockDef<"accordion"> { widget: "accordion"; data: { style: CSSProperties; triggerBgColor: string; contentBgColor: string; showExpandIcon: boolean; show: string; }; slots: { header: true; content: true; }; listeners: { preProcess: { type: "sync" \| "async"; order: ListenerActions[]; }; }; } export const AccordionBlock: BlockComponent = observer(({ id }) => { const { attrs, data, slots, listeners } = useBlock<AccordionBlockDef>(id); useEffect(() => { if (listeners.preProcess) { listeners.preProcess(); } }, []); return ( <StyledAccordion {...attrs} sx={{ ...data.style, overflow: "hidden" }} square={true} disableGutters={true} > <AccordionTrigger sx={{ backgroundColor: data.triggerBgColor, }} expandIcon={<ArrowDropDown />} > Unused Property The `showExpandIcon` prop is still present in defaults but no longer honored. Consider removing it or reintroducing conditional logic. import { ArrowDropDown } from "@mui/icons-material"; import { Accordion, Stack, styled } from "@semoss/ui"; import { Slot } from "../../blocks"; import { useBlock } from "../../../hooks"; import { BlockDef, BlockComponent, ListenerActions } from "../../../store"; const StyledAccordion = styled(Accordion)(({ theme }) => ({ padding: 0, margin: 0, borderRadius: "12px", "&.MuiAccordion-root:before": { backgroundColor: "white", }, })); const AccordionTrigger = styled(Accordion.Trigger)(({ theme }) => ({ "& .MuiAccordionSummary-content": { margin: 0, }, minHeight: "fit-content", margin: 0, padding: 0, borderRadius: "inherit", //if accordion is expanded, then remove the border radius from bottom left and right side of the trigger element "&.MuiButtonBase-root.Mui-expanded": { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, }, })); const AccordionContent = styled(Accordion.Content)(({ theme }) => ({ margin: 0, padding: 0, borderRadius: "inherit", borderTopLeftRadius: 0, borderTopRightRadius: 0, })); export interface AccordionBlockDef extends BlockDef<"accordion"> { widget: "accordion"; data: { style: CSSProperties; triggerBgColor: string; contentBgColor: string; showExpandIcon: boolean; show: string; }; slots: { header: true; content: true; }; listeners: { preProcess: { type: "sync" \| "async"; order: ListenerActions[]; }; }; } export const AccordionBlock: BlockComponent = observer(({ id }) => { const { attrs, data, slots, listeners } = useBlock<AccordionBlockDef>(id); useEffect(() => { if (listeners.preProcess) { listeners.preProcess(); } }, []); return ( <StyledAccordion {...attrs} sx={{ ...data.style, overflow: "hidden" }} square={true} disableGutters={true} > <AccordionTrigger sx={{ backgroundColor: data.triggerBgColor, }} expandIcon={<ArrowDropDown />} > Config Maintainability The JSON for the multi-accordion block is very large and duplicated. Consider abstracting repeated structures to improve readability and reduce risks of inconsistencies. { section: SECTION_LAYOUT, name: 'Multi-Accordion Block', activeImage: BLOCK_IMAGES['ACCORDION_ACTIVE'], hoverImage: BLOCK_IMAGES['ACCORDION_HOVER'], helperText: 'Click to expand and collapse sections for more details', json: { widget: 'container', data: { style: { display: 'flex', flexDirection: 'column', }, }, listeners: {}, slots: { children: [ { widget: 'accordion', data: { style: { borderBottom: '1px solid #ccc', borderRadius: '0', }, triggerBgColor: '', contentBgColor: '', showExpandIcon: false, show: 'true', }, listeners: {}, slots: { header: [ { widget: 'container', data: { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '30%', }, }, listeners: {}, slots: { children: [ { widget: 'text', data: { style: { padding: '20px', whiteSpace: 'pre-line', textOverflow: 'ellipsis', }, text: 'Accordion 1', variant: 'p', show: 'true', }, listeners: {}, slots: {}, }, { widget: 'text', data: { style: { whiteSpace: 'pre-line', textOverflow: 'ellipsis', color: '#9c9696', fontWeight: 'normal', }, text: 'I am an accordion', variant: 'h4', show: 'true', }, listeners: {}, slots: {}, }, ], }, }, ], content: [ { widget: 'container', data: { style: { display: 'flex', flexDirection: 'row', gap: '18px', }, }, listeners: {}, slots: { children: [ { widget: 'text', data: { style: { padding: '20px', whiteSpace: 'pre-line', textOverflow: 'ellipsis', }, text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.', variant: 'p', show: 'true', }, listeners: {}, slots: {}, }, ], }, }, ], }, }, { widget: 'accordion', data: { style: { borderBottom: '1px solid #ccc', }, triggerBgColor: '', contentBgColor: '', showExpandIcon: false, show: 'true', }, listeners: {}, slots: { header: [ { widget: 'container', data: { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '30%', }, }, listeners: {}, slots: { children: [ { widget: 'text', data: { style: { padding: '20px', whiteSpace: 'pre-line', textOverflow: 'ellipsis', }, text: 'Accordion 2', variant: 'p', show: 'true', }, listeners: {}, slots: {}, }, { widget: 'text', data: { style: { whiteSpace: 'pre-line', textOverflow: 'ellipsis', color: '#9c9696', fontWeight: 'normal', }, text: 'I am an accordion', variant: 'h4', show: 'true', }, listeners: {}, slots: {}, }, ], }, }, ], content: [ { widget: 'container', data: { style: { display: 'flex', flexDirection: 'row', gap: '18px', }, }, listeners: {}, slots: { children: [ { widget: 'text', data: { style: { padding: '20px', whiteSpace: 'pre-line', textOverflow: 'ellipsis', }, text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.', variant: 'p', show: 'true', }, listeners: {}, slots: {}, }, ], }, }, ], }, }, { widget: 'accordion', data: { style: { borderBottom: '1px solid #ccc', }, triggerBgColor: '', contentBgColor: '', showExpandIcon: false, show: 'true', }, listeners: {}, slots: { header: [ { widget: 'container', data: { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '30%', }, }, listeners: {}, slots: { children: [ { widget: 'text', data: { style: { padding: '20px', whiteSpace: 'pre-line', textOverflow: 'ellipsis', }, text: 'Accordion 3', variant: 'p', show: 'true', }, listeners: {}, slots: {}, }, { widget: 'text', data: { style: { whiteSpace: 'pre-line', textOverflow: 'ellipsis', color: '#9c9696', fontWeight: 'normal', }, text: 'I am an accordion', variant: 'h4', show: 'true', }, listeners: {}, slots: {}, }, ], }, }, ], content: [ { widget: 'container', data: { style: { display: 'flex', flexDirection: 'row', gap: '18px', }, }, listeners: {}, slots: { children: [ { widget: 'text', data: { style: { padding: '20px', whiteSpace: 'pre-line', textOverflow: 'ellipsis', }, text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.', variant: 'p', show: 'true', }, listeners: {}, slots: {}, }, ], }, }, ], }, }, ], }, }, },

github-actions · 2025-05-20T16:08:53Z

@CodiumAI-Agent /improve

QodoAI-Agent · 2025-05-20T16:10:23Z

PR Code Suggestions ✨

Latest suggestions up to f828c84

Category	Suggestion	Impact
Possible issue	Conditionally render expand icon Respect the `data.showExpandIcon` flag when rendering the icon, so toggling visibility actually works. Render the icon only if `showExpandIcon` is true, otherwise pass `undefined`. libs/renderer/src/components/block-defaults/accordion-block/AccordionBlock.tsx [84] -expandIcon={<ArrowDropDown />} +expandIcon={data.showExpandIcon ? <ArrowDropDown /> : undefined} Suggestion importance[1-10]: 8 __ Why: The icon is currently always rendered, ignoring `data.showExpandIcon`, so adding this condition fixes a functional regression.	Medium
Possible issue	Use boolean instead of string Use boolean literals instead of strings for `show` (and similar) properties to avoid type mismatches at runtime. Replace `'true'`/`'false'` with `true`/`false`. packages/client/src/components/blocks-workspace/menus/default-menu.ts [111] -show: 'true', +show: true, Suggestion importance[1-10]: 6 __ Why: The `show` property is defined as a string but should be a boolean to match expected types and prevent runtime issues.	Low
General	Abstract repeated definitions Reduce the three nearly identical accordion definitions by mapping over a configuration array, improving maintainability and reducing duplication. Generate each accordion entry dynamically instead of hardcoding. packages/client/src/components/blocks-workspace/menus/default-menu.ts [100-224] -{ +const defaultAccordions = [ + { title: 'Accordion 1', subtitle: 'I am an accordion', content: 'Lorem ipsum…' }, + { title: 'Accordion 2', subtitle: 'I am an accordion', content: 'Lorem ipsum…' }, + { title: 'Accordion 3', subtitle: 'I am an accordion', content: 'Lorem ipsum…' }, +]; +… +slots: { + children: defaultAccordions.map(({ title, subtitle, content }) => ({ widget: 'accordion', - data: { - style: { borderBottom: '1px solid #ccc', borderRadius: '0', padding: '16px' }, - triggerBgColor: '', - contentBgColor: '', - showExpandIcon: false, - show: 'true', - }, - … -}, + data: { style: { borderBottom: '1px solid #ccc', padding: '16px' }, showExpandIcon: false, show: true }, + slots: { + header: [ /* build header from title/subtitle / ], + content: [ / build content from content */ ] + } + })) +} Suggestion importance[1-10]: 4 __ Why: Consolidating the repeated accordion entries into a mapping improves maintainability but is a broad refactoring outside the PR scope.	Low

Previous suggestions

Suggestions up to commit fd6a5f8

Category	Suggestion	Impact
General	Conditionally render expand icon Render the expand icon only when `data.showExpandIcon` is true to respect the configuration flag and avoid always displaying it. libs/renderer/src/components/block-defaults/accordion-block/AccordionBlock.tsx [84] -expandIcon={<ArrowDropDown />} +expandIcon={data.showExpandIcon ? <ArrowDropDown /> : undefined} Suggestion importance[1-10]: 8 __ Why: Without the `data.showExpandIcon` check the icon always renders, ignoring the original flag; this restores the intended conditional display.	Medium
General	Remove redundant borderRadius override Remove the explicit `borderRadius` override so that the styled Accordion’s default 12px radius is applied consistently. packages/client/src/components/blocks-workspace/menus/default-menu.ts [100-103] style: { borderBottom: '1px solid #ccc', - borderRadius: '0', }, Suggestion importance[1-10]: 5 __ Why: Overriding `borderRadius: '0'` conflicts with the default 12px radius defined in the styled Accordion and is unnecessary for consistency.	Low
Possible issue	Use boolean for show flag Change the `show` property from a string to a boolean to avoid type mismatches when evaluating visibility flags. packages/client/src/components/blocks-workspace/menus/default-menu.ts [107] -show: 'true', +show: true, Suggestion importance[1-10]: 7 __ Why: The JSON `show` property is defined as a string here, but consumers likely expect a boolean, so using `show: true` prevents type mismatches.	Medium

…nhance-multi-accordion

johbaxter · 2025-05-27T15:09:31Z

@Gowrishankar-Palanisamy Thank you Gowri

@bfekadu21 @ehynd
This is cool for now will have design audit and fix please create follow up ticket on audits

github-actions · 2025-05-27T15:10:26Z

@CodiumAI-Agent /update_changelog

QodoAI-Agent · 2025-05-27T15:10:56Z

Changelog updates: 🔄

2025-05-27 #1185

Added

Multi-Accordion Block for grouping multiple accordion sections
Enhanced Accordion component with updated drop-down icon and padding

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'

Gowrishankar-Palanisamy added 2 commits May 20, 2025 21:08

feat(multi-accordion-block): added the multi accordion block

5058b7b

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into feat/e…

fd6a5f8

…nhance-multi-accordion

Gowrishankar-Palanisamy requested a review from a team as a code owner May 20, 2025 16:07

Gowrishankar-Palanisamy linked an issue May 20, 2025 that may be closed by this pull request

Update current Accordion Block and Create New Multi-Accordion Block #900

Closed

Gowrishankar-Palanisamy added 2 commits May 26, 2025 12:07

Merge branch 'dev' of https://github.com/SEMOSS/semoss-ui into feat/e…

3d36e7d

…nhance-multi-accordion

feat(multi-accordion-block): added padding for multi accordion block

f828c84

johbaxter merged commit 231f9d2 into dev May 27, 2025
3 checks passed

johbaxter deleted the feat/enhance-multi-accordion branch May 27, 2025 15:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Creation of Multi-Accordion Block#1185

Creation of Multi-Accordion Block#1185
johbaxter merged 4 commits intodevfrom
feat/enhance-multi-accordion

Gowrishankar-Palanisamy commented May 20, 2025

Uh oh!

github-actions bot commented May 20, 2025

Uh oh!

QodoAI-Agent commented May 20, 2025

Uh oh!

github-actions bot commented May 20, 2025

Uh oh!

QodoAI-Agent commented May 20, 2025

Uh oh!

github-actions bot commented May 20, 2025

Uh oh!

QodoAI-Agent commented May 20, 2025 •

edited

Loading

Uh oh!

johbaxter commented May 27, 2025

Uh oh!

Uh oh!

github-actions bot commented May 27, 2025

Uh oh!

QodoAI-Agent commented May 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Gowrishankar-Palanisamy commented May 20, 2025

Uh oh!

github-actions bot commented May 20, 2025

Uh oh!

QodoAI-Agent commented May 20, 2025

Title

User description

PR Type

Description

Changes walkthrough 📝

Uh oh!

github-actions bot commented May 20, 2025

Uh oh!

QodoAI-Agent commented May 20, 2025

PR Reviewer Guide 🔍

Uh oh!

github-actions bot commented May 20, 2025

Uh oh!

QodoAI-Agent commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Code Suggestions ✨

Previous suggestions

Uh oh!

johbaxter commented May 27, 2025

Uh oh!

Uh oh!

github-actions bot commented May 27, 2025

Uh oh!

QodoAI-Agent commented May 27, 2025

2025-05-27 #1185

Added

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

QodoAI-Agent commented May 20, 2025 •

edited

Loading