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

Merged
merged 17 commits into from
Jan 31, 2025
Merged

Accordion: change: do animation similar to ExpansionCard #3491

Changes from all commits
Commits
Show all changes
17 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
849f449
Update @navikt/core/css/darkside/accordion.darkside.css
JulianNymark Jan 27, 2025
f143cd3
Accordion: only set box-shadow line for indented items
JulianNymark Jan 29, 2025
dd12b87
Merge branch 'main' into refactor-accordion-animation
JulianNymark Jan 30, 2025
91b5c45
Merge branch 'main' into refactor-accordion-animation
JulianNymark Jan 31, 2025
6f57d5e
Merge branch 'main' into refactor-accordion-animation
JulianNymark Jan 31, 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
99 changes: 46 additions & 53 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 All @@ -73,10 +73,6 @@
background-color: var(--ax-border-subtleA);
}

.navds-accordion__item:last-child > .navds-accordion__content {
border-bottom: 1px solid transparent;
}

.navds-accordion__header::after {
top: initial;
bottom: 0;
Expand Down Expand Up @@ -115,67 +111,64 @@
}

/* ---------------------------- 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__item--no-animation {
animation: none;
}

@keyframes navds-accordion-content-animation {
0% {
opacity: 0.01;
}

20% {
opacity: 0.01;
}
.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);

100% {
opacity: 1;
@media (forced-colors: active) {
border-left: 1px solid canvastext;
}
}

.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
padding-inline: var(--ax-space-24) var(--ax-space-12);
box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
}

.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);
.navds-accordion__item {
& > .navds-accordion__content {
display: grid;
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, grid-template-rows, margin, min-height;
border-color: transparent;
opacity: 0;

/* Aligns content with heading-section */
padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
& .navds-accordion__content-inner {
min-height: 0;
padding-block: 0;
}
}

@media (forced-colors: active) {
border-left: 1px solid canvastext;
&[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__content-inner {
min-height: fit-content;
}
}

&:last-child {
border-bottom: 1px solid var(--ax-border-subtleA);
}
}
}

.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