Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-17 01:17:29 +02:00
Code Issues Projects Releases Wiki Activity

chore: removes extra border on collapse for the event timeline (#9270)

Browse Source 
Fixes a small visual glitch where the event timeline panel (which
usually doesn't have a bottom border on the summary) would get a
bottom border during the collapsing animation.

This happens because to make the border act as we want, we switch
between using the summary's bottom border and the content's top
border, and I'd only updated one of the borders to respect the new
design.
This commit is contained in:
Thomas Heartman 2025-02-10 10:52:32 +01:00 committed by GitHub
parent 2b668bc5c8
commit cdeb515488
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -42,26 +42,41 @@ const ViewKeyConceptsButton = styled(Button)({
margin: 0, margin: 0,
}); });
const SectionAccordion = styled(Accordion)(({ theme }) => ({ const SectionAccordion = styled(Accordion, {
border: `1px solid ${theme.palette.divider}`, shouldForwardProp: (prop) => prop !== 'withSummaryContentBorder',
borderRadius: theme.shape.borderRadiusMedium, })<{ withSummaryContentBorder?: boolean }>(
backgroundColor: theme.palette.background.paper, ({ theme, withSummaryContentBorder = true }) => {
boxShadow: 'none', const borderStyle = `1px solid ${theme.palette.divider}`;
'& .expanded': { return {
'&:before': { border: `1px solid ${theme.palette.divider}`,
opacity: '0 !important', borderRadius: theme.shape.borderRadiusMedium,
}, backgroundColor: theme.palette.background.paper,
}, boxShadow: 'none',
'& .expanded': {
'&:before': {
opacity: '0 !important',
},
},
// add a top border to the region when the accordion is collapsed. ...(withSummaryContentBorder && {
// This retains the border between the summary and the region // add a top border to the region when the accordion is collapsed.
// during the collapsing animation // This retains the border between the summary and the region
"[aria-expanded='false']+.MuiCollapse-root .MuiAccordion-region": { // during the collapsing animation
borderTop: `1px solid ${theme.palette.divider}`, "[aria-expanded='false']+.MuiCollapse-root .MuiAccordion-region":
}, {
borderTop: borderStyle,
},
overflow: 'hidden', // add the border to the region for the accordion is expanded
})); "&>.MuiAccordionSummary-root[aria-expanded='true']": {
borderBottom: borderStyle,
},
}),
overflow: 'hidden',
};
},
);
const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
border: 'none', border: 'none',
@ -73,15 +88,6 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
}, },
})); }));
const StyledAccordionSummaryWithBorder = styled(StyledAccordionSummary)(
({ theme }) => ({
"&[aria-expanded='true']": {
// only add the border when it's open
borderBottom: `1px solid ${theme.palette.divider}`,
},
}),
);
const StyledAccordionDetails = styled(AccordionDetails)({ const StyledAccordionDetails = styled(AccordionDetails)({
padding: 0, padding: 0,
}); });
@ -121,6 +127,7 @@ const EventTimelinePanel = () => {
disableGutters disableGutters
expanded={expandTimeline ?? false} expanded={expandTimeline ?? false}
onChange={() => toggleSectionState('timeline')} onChange={() => toggleSectionState('timeline')}
withSummaryContentBorder={false}
> >
<StyledAccordionSummary <StyledAccordionSummary
expandIcon={ expandIcon={
@ -175,7 +182,7 @@ const FlagPanel = () => {
expanded={expandFlags ?? true} expanded={expandFlags ?? true}
onChange={() => toggleSectionState('flags')} onChange={() => toggleSectionState('flags')}
> >
<StyledAccordionSummaryWithBorder <StyledAccordionSummary
expandIcon={<ExpandMore titleAccess='Toggle flags section' />} expandIcon={<ExpandMore titleAccess='Toggle flags section' />}
id='flags-panel-header' id='flags-panel-header'
aria-controls='flags-panel-content' aria-controls='flags-panel-content'
@ -188,7 +195,7 @@ const FlagPanel = () => {
Feature flags you have created or favorited Feature flags you have created or favorited
</AccordionSummarySubtitle> </AccordionSummarySubtitle>
</AccordionSummaryText> </AccordionSummaryText>
</StyledAccordionSummaryWithBorder> </StyledAccordionSummary>
<StyledAccordionDetails> <StyledAccordionDetails>
<MyFlags <MyFlags
hasProjects={projects?.length > 0} hasProjects={projects?.length > 0}
@ -232,7 +239,7 @@ const ProjectPanel = () => {
expanded={expandProjects ?? true} expanded={expandProjects ?? true}
onChange={() => toggleSectionState('projects')} onChange={() => toggleSectionState('projects')}
> >
<StyledAccordionSummaryWithBorder <StyledAccordionSummary
expandIcon={ expandIcon={
<ExpandMore titleAccess='Toggle projects section' /> <ExpandMore titleAccess='Toggle projects section' />
} }
@ -246,7 +253,7 @@ const ProjectPanel = () => {
are a member of are a member of
</AccordionSummarySubtitle> </AccordionSummarySubtitle>
</AccordionSummaryText> </AccordionSummaryText>
</StyledAccordionSummaryWithBorder> </StyledAccordionSummary>
<StyledAccordionDetails> <StyledAccordionDetails>
<MyProjects <MyProjects
owners={personalDashboard?.projectOwners ?? []} owners={personalDashboard?.projectOwners ?? []}