From 5cae15f32aefbe64c2feed522673bb22f3909af6 Mon Sep 17 00:00:00 2001 From: Canbow Date: Tue, 10 Feb 2026 19:46:28 +0530 Subject: [PATCH 1/4] feat: migrate StyledAccordion to Sistent custom components Signed-off-by: Canbow --- .../StyledAccordion/StyledAccordion.tsx | 28 +++++++++++++++++++ src/custom/StyledAccordion/index.ts | 1 + src/custom/index.ts | 1 + 3 files changed, 30 insertions(+) create mode 100644 src/custom/StyledAccordion/StyledAccordion.tsx create mode 100644 src/custom/StyledAccordion/index.ts diff --git a/src/custom/StyledAccordion/StyledAccordion.tsx b/src/custom/StyledAccordion/StyledAccordion.tsx new file mode 100644 index 000000000..fae2affd7 --- /dev/null +++ b/src/custom/StyledAccordion/StyledAccordion.tsx @@ -0,0 +1,28 @@ +import { styled } from '@mui/material/styles'; +import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'; +import MuiAccordionSummary, { AccordionSummaryProps } from '@mui/material/AccordionSummary'; + +export const StyledAccordion = styled(MuiAccordion)(({ theme }) => ({ + border: `1px solid ${theme.palette.divider || 'rgba(0, 0, 0, .125)'}`, + '&:not(:last-child)': { + borderBottom: 0, + }, + '&:before': { + display: 'none', + }, + '&.Mui-expanded': { + margin: 'auto', + }, +})); + +export const StyledAccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, .05)' : 'rgba(0, 0, 0, .03)', + borderBottom: `1px solid ${theme.palette.divider || 'rgba(0, 0, 0, .125)'}`, + marginBottom: -1, + minHeight: 56, + '& .MuiAccordionSummary-content': { + '&.Mui-expanded': { + margin: '12px 0', + }, + }, +})); \ No newline at end of file diff --git a/src/custom/StyledAccordion/index.ts b/src/custom/StyledAccordion/index.ts new file mode 100644 index 000000000..2dd6d0889 --- /dev/null +++ b/src/custom/StyledAccordion/index.ts @@ -0,0 +1 @@ +export * from './StyledAccordion'; \ No newline at end of file diff --git a/src/custom/index.ts b/src/custom/index.ts index 3f1fda872..cc11f7ac0 100644 --- a/src/custom/index.ts +++ b/src/custom/index.ts @@ -3,3 +3,4 @@ export * from './CustomTooltip'; export * from './HelperTextPopover'; export * from './Markdown'; export * from './Modal'; +export * from './StyledAccordion'; \ No newline at end of file From f6b35465c0585b3ad906d33a66c5653a554f93a4 Mon Sep 17 00:00:00 2001 From: Canbow Date: Tue, 10 Feb 2026 19:56:00 +0530 Subject: [PATCH 2/4] feat: migrate StyledAccordion Signed-off-by: Canbow --- .../StyledAccordian.tsx} | 8 ++++++++ src/custom/StyledAccordian/index.ts | 1 + src/custom/StyledAccordion/index.ts | 1 - 3 files changed, 9 insertions(+), 1 deletion(-) rename src/custom/{StyledAccordion/StyledAccordion.tsx => StyledAccordian/StyledAccordian.tsx} (81%) create mode 100644 src/custom/StyledAccordian/index.ts delete mode 100644 src/custom/StyledAccordion/index.ts diff --git a/src/custom/StyledAccordion/StyledAccordion.tsx b/src/custom/StyledAccordian/StyledAccordian.tsx similarity index 81% rename from src/custom/StyledAccordion/StyledAccordion.tsx rename to src/custom/StyledAccordian/StyledAccordian.tsx index fae2affd7..3f4283be5 100644 --- a/src/custom/StyledAccordion/StyledAccordion.tsx +++ b/src/custom/StyledAccordian/StyledAccordian.tsx @@ -2,6 +2,10 @@ import { styled } from '@mui/material/styles'; import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'; import MuiAccordionSummary, { AccordionSummaryProps } from '@mui/material/AccordionSummary'; +/** + * StyledAccordion + * A customized Accordion component with Meshery-specific styling (borders, margins). + */ export const StyledAccordion = styled(MuiAccordion)(({ theme }) => ({ border: `1px solid ${theme.palette.divider || 'rgba(0, 0, 0, .125)'}`, '&:not(:last-child)': { @@ -15,6 +19,10 @@ export const StyledAccordion = styled(MuiAccordion)(({ theme }) }, })); +/** + * StyledAccordionSummary + * A customized AccordionSummary to match the StyledAccordion look. + */ export const StyledAccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({ backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, .05)' : 'rgba(0, 0, 0, .03)', borderBottom: `1px solid ${theme.palette.divider || 'rgba(0, 0, 0, .125)'}`, diff --git a/src/custom/StyledAccordian/index.ts b/src/custom/StyledAccordian/index.ts new file mode 100644 index 000000000..fb7ac0b67 --- /dev/null +++ b/src/custom/StyledAccordian/index.ts @@ -0,0 +1 @@ +export * from './StyledAccordian'; \ No newline at end of file diff --git a/src/custom/StyledAccordion/index.ts b/src/custom/StyledAccordion/index.ts deleted file mode 100644 index 2dd6d0889..000000000 --- a/src/custom/StyledAccordion/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './StyledAccordion'; \ No newline at end of file From b2b683d32f5d37db91a54e218481ad5456ac072d Mon Sep 17 00:00:00 2001 From: Canbow Date: Tue, 10 Feb 2026 20:11:14 +0530 Subject: [PATCH 3/4] feat: migrate StyledAccordion-v2 Signed-off-by: Canbow --- src/custom/StyledAccordian/index.ts | 1 - .../StyledAccordian.tsx => StyledAccordion/StyledAccordion.tsx} | 0 src/custom/StyledAccordion/index.ts | 1 + 3 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 src/custom/StyledAccordian/index.ts rename src/custom/{StyledAccordian/StyledAccordian.tsx => StyledAccordion/StyledAccordion.tsx} (100%) create mode 100644 src/custom/StyledAccordion/index.ts diff --git a/src/custom/StyledAccordian/index.ts b/src/custom/StyledAccordian/index.ts deleted file mode 100644 index fb7ac0b67..000000000 --- a/src/custom/StyledAccordian/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './StyledAccordian'; \ No newline at end of file diff --git a/src/custom/StyledAccordian/StyledAccordian.tsx b/src/custom/StyledAccordion/StyledAccordion.tsx similarity index 100% rename from src/custom/StyledAccordian/StyledAccordian.tsx rename to src/custom/StyledAccordion/StyledAccordion.tsx diff --git a/src/custom/StyledAccordion/index.ts b/src/custom/StyledAccordion/index.ts new file mode 100644 index 000000000..2dd6d0889 --- /dev/null +++ b/src/custom/StyledAccordion/index.ts @@ -0,0 +1 @@ +export * from './StyledAccordion'; \ No newline at end of file From 0c8dce73cd0270e1bcf0add2c4f15bb2cae07ca2 Mon Sep 17 00:00:00 2001 From: L Hemanth <143311872+Canbow@users.noreply.github.com> Date: Tue, 10 Feb 2026 20:18:08 +0530 Subject: [PATCH 4/4] Remove component description comments Removed comments describing the StyledAccordion and StyledAccordionSummary components. Signed-off-by: L Hemanth <143311872+Canbow@users.noreply.github.com> --- src/custom/StyledAccordion/StyledAccordion.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/custom/StyledAccordion/StyledAccordion.tsx b/src/custom/StyledAccordion/StyledAccordion.tsx index 3f4283be5..e2e057a26 100644 --- a/src/custom/StyledAccordion/StyledAccordion.tsx +++ b/src/custom/StyledAccordion/StyledAccordion.tsx @@ -2,10 +2,6 @@ import { styled } from '@mui/material/styles'; import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'; import MuiAccordionSummary, { AccordionSummaryProps } from '@mui/material/AccordionSummary'; -/** - * StyledAccordion - * A customized Accordion component with Meshery-specific styling (borders, margins). - */ export const StyledAccordion = styled(MuiAccordion)(({ theme }) => ({ border: `1px solid ${theme.palette.divider || 'rgba(0, 0, 0, .125)'}`, '&:not(:last-child)': { @@ -19,10 +15,6 @@ export const StyledAccordion = styled(MuiAccordion)(({ theme }) }, })); -/** - * StyledAccordionSummary - * A customized AccordionSummary to match the StyledAccordion look. - */ export const StyledAccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({ backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, .05)' : 'rgba(0, 0, 0, .03)', borderBottom: `1px solid ${theme.palette.divider || 'rgba(0, 0, 0, .125)'}`, @@ -33,4 +25,4 @@ export const StyledAccordionSummary = styled(MuiAccordionSummary)