Skip to content

fix: Layout shift issue when accordion is opened #894

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
curlyfriesplease wants to merge 3 commits into
base: master
Choose a base branch
from
+21 −13
Open

fix: Layout shift issue when accordion is opened #894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0759ffd
Removes useless CSS that was causing a layout shift
curlyfriesplease Jun 10, 2026
70e906c
Merge branch 'master' into ENG-5196-accordion-animation
curlyfriesplease Jun 10, 2026
7039d0f
fix: Empty commit to please GA actions
curlyfriesplease Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/components/Molecules/Accordion/Accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,6 @@ const Copy = styled.div`
visibility: none;
transition: all 0.2s cubic-bezier(0, 0, 0.25, 0.82);
padding: 0 ${spacing('l')};
@media ${({ theme }) => theme.allBreakpoints('M')} {
padding: 0 ${spacing('lg')};
}

${({ isOpen, contentBottomPadding }) => (isOpen && css`
height: auto;
Expand Down
25 changes: 21 additions & 4 deletions src/components/Molecules/Accordion/Accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,33 @@ import Text from '../../Atoms/Text/Text';

```js
import Text from '../../Atoms/Text/Text';

<div style={{width: '752px'}}>
<Accordion
contentBottomPadding="100px"
title={
<Text textTag="p" weight="700">
I am a title with an overridden text type and weight, to 'p' 700 which is the new donate preference
I am a title with an overridden text type and weight, to 'p' 700 which is the new donate preference, and in a width simulating our real world use on desktop (NB because width is fixed, this is only to demonstrate desktop mode, don't use for examining mobile view)
</Text>
}
>

<Text tag="p" size="s">lorem ipsum</Text>
<Text tag="p" size="s">
A STAR template answer is a structured way of responding to behavioural interview questions. Here's what it stands for:
<br />
<br />
S - Situation: Begin by setting the scene. Describe the context or situation you were in.
<br />
<br />
T - Task: Next, explain the task or challenge you were faced with. What needed to be accomplished?
<br />
<br />
A - Action: Then, detail the actions you took to address the situation or task. What specific steps did you take, and why?
<br />
<br />
R - Result: Finally, discuss the results or outcomes of your actions. What happened as a result of your efforts? Try to quantify the impact if possible.
<br />
<br />
Using the STAR template helps you provide a clear and concise response that highlights your abilities and experiences effectively. It guides you through structuring your answer in a way that makes it easy for the interviewer to understand and evaluate your skills and competencies.
</Text>
</Accordion>
</div>
```
6 changes: 0 additions & 6 deletions src/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,12 +186,6 @@ exports[`renders correctly 1`] = `
}
}

@media (min-width:740px) {
.c8 {
padding: 0 3rem;
}
}

<div
className="c0"
>
Expand Down
Loading