fix(Accordion): implement css adjustments and native details by eirikbacker · Pull Request #2363 · digdir/designsystemet

eirikbacker · 2024-09-02T12:24:58Z

Fixes Use of <details> in Accordion #2100 🥳
Deprecates feat(Accordion): open when using search-in-page #2176, feat(Accordion): use native <details> element #2190
Built on top of <u-details> for better accessibility on mobile
Removes level from AccordionHeader as this is not supported by native <details>
Removes onHeaderClick from AccordionHeader as this is identical to adding a onClick handler
JS-based animation can be removed and replaced by CSS when calc-size(auto) is fully supported 🚀
Fixes shrinking chevron on mobile/zoom
Fixes text-align in AccordionHeader on mobile/zoom
Follows: Preparations for CSS-package #2295
Also works in dir="rtl"

Question: It is now implemented so search-in-page only works when using defaultOpen, as a controlled open should not be affected by user interaction. Just checking - does this make sense to you guys as well? :)

changeset-bot · 2024-09-02T12:25:01Z

⚠️ No Changeset found

Latest commit: 35cac99

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-09-02T12:25:14Z

Preview deployments for this pull request:

📖 Storybook 16. Sep 2024 - 15:20 (Norwegian time)

🖥 Storefront 16. Sep 2024 - 15:21 (Norwegian time)

github-actions · 2024-09-02T12:26:23Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	63.69%	4593 / 7211
🔵	Statements	63.69%	4593 / 7211
🔵	Functions	86.17%	162 / 188
🔵	Branches	75.6%	592 / 783

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/react/src/components/Accordion/AccordionContent.tsx	100%	100%	100%	100%
packages/react/src/components/Accordion/AccordionHeading.tsx	100%	100%	100%	100%
packages/react/src/components/Accordion/AccordionItem.tsx	78.66%	64.7%	80%	78.66%	61, 64, 103-116

Generated in workflow #345

eirikbacker · 2024-09-06T08:25:29Z

Closes #2364

github-actions · 2024-09-09T07:36:46Z

Preview deployments for this pull request:

Theme 16. Sep 2024 - 13:33 (Norwegian time)

eirikbacker · 2024-09-10T09:40:25Z

Design for new hover-colors: https://www.figma.com/proto/vpM9dqqQPHqU6ogfKp5tlr/branch/BoDyQWgF45QJjIAbJJM9sS/Designsystemet---Core-UI-Kit?page-id=13134%3A99159&node-id=37773-4265&node-type=FRAME&viewport=2401%2C777%2C0.19&t=bz3JYzZYqR9MkLp9-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=37773%3A4265

packages/css/accordion.css

packages/react/src/components/Accordion/AccordionHeading.tsx

github-actions · 2024-09-16T13:18:31Z

Preview deployments for this pull request:

Theme 16. Sep 2024 - 15:18 (Norwegian time)

github-actions · 2024-09-16T13:19:00Z

Preview deployments for this pull request:

Theme 16. Sep 2024 - 15:18 (Norwegian time)

github-actions · 2024-09-16T13:19:50Z

Preview deployments for this pull request:

Theme 16. Sep 2024 - 15:19 (Norwegian time)

- Fixes #2100 🥳 - Deprecates #2176, #2190 - Built on top of `<u-details>` for [better accessibility on mobile](https://u-elements.github.io/u-elements/elements/u-details#accessibility) - Removes `level` from `AccordionHeader` as this is not supported by native `<details>` - Removes `onHeaderClick` from `AccordionHeader` as this is identical to adding a `onClick` handler - JS-based animation can be removed and replaced by CSS when `calc-size(auto)` is fully supported 🚀 - Fixes shrinking chevron on mobile/zoom - Fixes text-align in AccordionHeader on mobile/zoom - Follows: #2295 - Also works in `dir="rtl"` Question: It is now implemented so search-in-page only works when using `defaultOpen`, as a controlled `open` should not be affected by user interaction. Just checking - does this make sense to you guys as well? :)

fix: start implementing css adjustments and native details

be59b75

eirikbacker self-assigned this Sep 2, 2024

eirikbacker mentioned this pull request Sep 2, 2024

feat(Accordion): use native <details> element #2190

Closed

eirikbacker mentioned this pull request Sep 2, 2024

Replace Accordion with Details and Card #2364

Closed

eirikbacker added 4 commits September 2, 2024 15:35

fix: css rewrites

e2938a4

fix: support right-to-left text

30a4b04

fix: typo

add6679

chore: comment margin usage

33a9c06

eirikbacker mentioned this pull request Sep 2, 2024

Preparations for CSS-package #2295

Closed

eirikbacker changed the title ~~fix: start implementing css adjustments and native details~~ fix(Accordion): start implementing css adjustments and native details Sep 2, 2024

eirikbacker and others added 4 commits September 9, 2024 09:25

Merge branch 'next' into fix/css-native-accordion

e0cc806

docs: update accordionheading

614d068

fix: typo

e50cef3

docs: update accordion usage

265c339

eirikbacker added 4 commits September 9, 2024 09:54

fix: animate content

8254fc0

fix: better selector

d78035c

fix: exports

c78aa98

fix: lint

c2682b1

eirikbacker marked this pull request as ready for review September 9, 2024 08:18

eirikbacker requested review from Barsnes and mimarz as code owners September 9, 2024 08:18

Merge branch 'next' into fix/css-native-accordion

a68d26b

mimarz reviewed Sep 11, 2024

View reviewed changes

packages/css/accordion.css Outdated Show resolved Hide resolved

mimarz reviewed Sep 11, 2024

View reviewed changes

packages/react/src/components/Accordion/AccordionHeading.tsx Outdated Show resolved Hide resolved

eirikbacker marked this pull request as draft September 11, 2024 07:28

eirikbacker and others added 4 commits September 11, 2024 12:47

fix: pr feedbacks

0b13e2d

fix(Accordion): controlled onfound

0b47c46

Merge branch 'next' into fix/css-native-accordion

15fd174

fix(Accordion): follow same color logic as card

a8f605a

mimarz mentioned this pull request Sep 12, 2024

feat(Accordion): open when using search-in-page #2176

Closed

eirikbacker and others added 6 commits September 12, 2024 12:48

fix(Accordion): adjust colors

17cf8e3

Merge branch 'next' into fix/css-native-accordion

092ea64

fix(Accordion): improve onfound implementation

f61f419

Merge branch 'next' into fix/css-native-accordion

f3c5a7e

Merge branch 'next' into fix/css-native-accordion

f7d8de4

fix(Accordion): types

cbc1c89

eirikbacker marked this pull request as ready for review September 13, 2024 13:24

eirikbacker requested a review from mimarz September 13, 2024 13:24

docs(Accordion): add content

c688748

eirikbacker changed the title ~~fix(Accordion): start implementing css adjustments and native details~~ fix(Accordion): implement css adjustments and native details Sep 13, 2024

eirikbacker and others added 7 commits September 16, 2024 08:23

docs(Accordion): onfound description

a466e8a

Merge branch 'next' into fix/css-native-accordion

2669b6d

fix(Accordion): make chevron animate with content

b99d8e9

Merge branch 'next' into fix/css-native-accordion

68b4b57

fix(Accordion): drop chevron animation

f13325b

chore(Accordion): update comment about chevron

6228a65

Merge branch 'next' into fix/css-native-accordion

35cac99

mimarz approved these changes Sep 16, 2024

View reviewed changes

eirikbacker merged commit 595a75b into next Sep 16, 2024

eirikbacker deleted the fix/css-native-accordion branch September 16, 2024 13:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

fix(Accordion): implement css adjustments and native details#2363

fix(Accordion): implement css adjustments and native details#2363
eirikbacker merged 32 commits intonextfrom
fix/css-native-accordion

eirikbacker commented Sep 2, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Sep 2, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Sep 2, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Sep 2, 2024 •

edited

Loading

Uh oh!

eirikbacker commented Sep 6, 2024

Uh oh!

github-actions bot commented Sep 9, 2024 •

edited

Loading

Uh oh!

eirikbacker commented Sep 10, 2024

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Sep 16, 2024

Uh oh!

github-actions bot commented Sep 16, 2024

Uh oh!

github-actions bot commented Sep 16, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

eirikbacker commented Sep 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Sep 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Sep 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report

Uh oh!

eirikbacker commented Sep 6, 2024

Uh oh!

github-actions bot commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eirikbacker commented Sep 10, 2024

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Sep 16, 2024

Uh oh!

github-actions bot commented Sep 16, 2024

Uh oh!

github-actions bot commented Sep 16, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

eirikbacker commented Sep 2, 2024 •

edited

Loading

changeset-bot bot commented Sep 2, 2024 •

edited

Loading

github-actions bot commented Sep 2, 2024 •

edited

Loading

github-actions bot commented Sep 2, 2024 •

edited

Loading

github-actions bot commented Sep 9, 2024 •

edited

Loading