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] Keep active Accordion in viewport #1243

Closed
wants to merge 2 commits into from
Closed

[accordion] Keep active Accordion in viewport #1243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52b6bb6
keep active accordion in viewport
yash49 Dec 29, 2024
43f6bc0
Merge branch 'master' into keep-active-accordion-in-viewport
mj12albert Jan 17, 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
4 changes: 4 additions & 0 deletions ...app/(public)/(content)/react/components/accordion/demos/hero/css-modules/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@

.Item {
border-bottom: 1px solid var(--color-gray-200);

&[data-closed] {
overflow-anchor: none;
}
Comment on lines +14 to +16
Copy link
Member

Choose a reason for hiding this comment

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

@yash49 I tested this on iOS Firefox (overflow-anchor isn't supported in Safari at all) and it doesn't seem to work like the recording you added in mui/material-ui#44002 (comment) 🤔

RPReplay_Final1737383561.MP4

Copy link
Author

Choose a reason for hiding this comment

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

I see 🙁
thanks for the review @mj12albert
ig we can close this PR

}

.Header {
Expand Down
6 changes: 3 additions & 3 deletions docs/src/app/(public)/(content)/react/components/accordion/demos/hero/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Accordion } from '@base-ui-components/react/accordion';
export default function ExampleAccordion() {
return (
<Accordion.Root className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900">
<Accordion.Item className="border-b border-gray-200">
<Accordion.Item className="data-[closed]:[overflow-anchor:none] border-b border-gray-200">
<Accordion.Header>
<Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
What is Base UI?
Expand All @@ -19,7 +19,7 @@ export default function ExampleAccordion() {
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item className="border-b border-gray-200">
<Accordion.Item className="data-[closed]:[overflow-anchor:none] border-b border-gray-200">
<Accordion.Header>
<Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
How do I get started?
Expand All @@ -34,7 +34,7 @@ export default function ExampleAccordion() {
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item className="border-b border-gray-200">
<Accordion.Item className="data-[closed]:[overflow-anchor:none] border-b border-gray-200">
<Accordion.Header>
<Accordion.Trigger className="group flex w-full cursor-pointer items-baseline justify-between gap-4 py-2 text-left font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800">
Can I use it for my project?
Expand Down
Loading