Skip to content
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

Accordion: change: do animation similar to ExpansionCard #3491

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Accordion: change: do animation similar to ExpansionCard #3491

Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9cf3ff4
Accordion: change: do animation similar to ExpansionCard
JulianNymark Jan 7, 2025
d754300
changeset
JulianNymark Jan 9, 2025
225dd01
change: comment expansioncard -> accordion
JulianNymark Jan 9, 2025
29399d7
Merge branch 'main' into refactor-accordion-animation
JulianNymark Jan 9, 2025
dcba91e
don't need changeset for unreleased code
JulianNymark Jan 10, 2025
178c5f8
:construction: attempt to smooth out expansion of accordion
JulianNymark Jan 10, 2025
2354add
Merge branch 'main' into refactor-accordion-animation
JulianNymark Jan 16, 2025
cddcba2
working animation
JulianNymark Jan 16, 2025
49eeb4a
Merge branch 'main' into refactor-accordion-animation
JulianNymark Jan 17, 2025
8449974
Update @navikt/core/css/darkside/accordion.darkside.css
JulianNymark Jan 17, 2025
21841aa
Merge branch 'main' into refactor-accordion-animation
JulianNymark Jan 23, 2025
92beffb
accordion: remove border-bottom on content, add on item
JulianNymark Jan 23, 2025
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
88 changes: 38 additions & 50 deletions @navikt/core/css/darkside/accordion.darkside.css
View file
Open in desktop
JulianNymark marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like this snippet breaks after these changes, needs to be updates so that the "last" border at the bottom matches rest of the accordions

.navds-accordion__item:last-child > .navds-accordion__content

Screenshot 2025-01-17 at 12 20 03
Screenshot 2025-01-17 at 12 20 29

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah... right... i didn't try to open the last accordion element 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't see a good way around adding another div here 😞, do you see one? (if you revert this to using padding instead of margins, then you'll see the animation looks wonky for the "line" on the left (box-shadow). but adding more divs is brutish, but works.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If i understood the issue correctly something like this could work:

.navds-accordion__item[data-expanded="true"]:last-child {
  margin-block-end: var(--ax-space-24);
  border-bottom: 1px solid var(--ax-border-subtleA);
}

Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
}

.navds-accordion--small .navds-accordion__header {
padding-block: var(--a-spacing-2);
padding-block: var(--ax-space-8);
}

.navds-accordion__header::before,
Expand Down Expand Up @@ -115,67 +115,55 @@
}

/* ---------------------------- Accordion content --------------------------- */
.navds-accordion__content {
--__acx-accordion-content-line-width: 2px;

padding-inline: var(--ax-space-24) var(--ax-space-12);
display: none;
overflow: hidden;
padding-block: 0;
max-height: 0;
border-color: transparent;
transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete;
animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1);
}
.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
padding-block: var(--ax-space-8);
padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);

.navds-accordion__item--no-animation {
animation: none;
@media (forced-colors: active) {
border-left: 1px solid canvastext;
}
}

@keyframes navds-accordion-content-animation {
0% {
opacity: 0.01;
}
.navds-accordion__item {
& > .navds-accordion__content {
display: grid;
box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
grid-template-rows: 0fr;
visibility: hidden;
overflow: hidden;
margin-inline: var(--ax-space-24) var(--ax-space-12);
margin-block: 0;
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
transition-duration: 250ms;
transition-property: visibility, opacity, height, grid-template-rows, margin, min-height;
JulianNymark marked this conversation as resolved.
Show resolved Hide resolved
border-color: transparent;
opacity: 0;

20% {
opacity: 0.01;
& .navds-accordion__content-inner {
min-height: 0;
padding-block: 0;
}
}

100% {
&[data-expanded="true"] > .navds-accordion__content {
grid-template-rows: 1fr;
visibility: visible;
margin-block: var(--ax-space-8);
margin-block-end: var(--ax-space-24);
border-color: var(--ax-border-subtleA);
opacity: 1;
}
}

.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
padding-inline: var(--ax-space-24) var(--ax-space-12);
}

.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
padding-block: var(--ax-space-8);

/* Aligns content with heading-section */
padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);

@media (forced-colors: active) {
border-left: 1px solid canvastext;
& .navds-accordion__content-inner {
min-height: fit-content;
}
}
}

.navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
display: block;
opacity: 1;
overflow: visible;
max-height: fit-content;
padding-block: var(--ax-space-8);
padding-block-end: var(--ax-space-24);
border-color: var(--ax-border-subtleA);
}
/* ---------------- Accordion No Animation (defaultOpen) ---------------- */

@starting-style {
.navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
padding-block: 0;
max-height: 0;
border-color: transparent;
.navds-accordion__item--no-animation {
& > .navds-accordion__content {
transition: none;
}
}
Loading