-
Notifications
You must be signed in to change notification settings - Fork 6
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.
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
Headless UI v2 #3085
Headless UI v2 #3085
Changes from 12 commits
94448f8
6998e58
6b612f6
76d0b30
f6d922b
300db84
7402363
829d8dd
0455818
7eeac67
d0705f0
285c927
2a089b7
6b6813b
320043c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -44,6 +44,7 @@ export default function App() { | |
return ( | ||
<ModalContext> | ||
<SentryRoutes> | ||
<Route path={`${appRoutes.donate}/:id`} element={<Donate />} /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Move There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great idea! |
||
<Route path={appRoutes.donate_widget}> | ||
<Route path=":id" element={<DonateWidget />} /> | ||
<Route | ||
|
@@ -82,7 +83,7 @@ export default function App() { | |
path={appRoutes.applications + "/:id"} | ||
element={<Application />} | ||
/> | ||
<Route path={`${appRoutes.donate}/:id`} element={<Donate />} /> | ||
|
||
<Route path={appRoutes.donate_thanks} element={<DonateThanks />} /> | ||
<Route | ||
path={appRoutes.stripe_payment_status} | ||
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,4 +1,9 @@ | ||||||
import { Popover, Transition } from "@headlessui/react"; | ||||||
import { | ||||||
Popover, | ||||||
PopoverButton, | ||||||
PopoverPanel, | ||||||
Transition, | ||||||
} from "@headlessui/react"; | ||||||
import ExtLink from "components/ExtLink"; | ||||||
import Icon from "components/Icon"; | ||||||
import LoaderRing from "components/LoaderRing"; | ||||||
|
@@ -20,7 +25,7 @@ export default function NavDropdown({ links }: Props) { | |||||
<Popover className="relative"> | ||||||
{({ open }) => ( | ||||||
<> | ||||||
<Popover.Button | ||||||
<PopoverButton | ||||||
data-testid="nav_dropdown" | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. most of the changes are of this nature
Suggested change
|
||||||
className={`${ | ||||||
open ? "text-white" : "text-white/90" | ||||||
|
@@ -42,7 +47,7 @@ export default function NavDropdown({ links }: Props) { | |||||
} max-sm:hidden transition duration-150 ease-in-out group-hover:text-blue-d7/80`} | ||||||
aria-hidden="true" | ||||||
/> | ||||||
</Popover.Button> | ||||||
</PopoverButton> | ||||||
<Transition | ||||||
as={Fragment} | ||||||
enter="transition ease-out duration-200" | ||||||
|
@@ -52,7 +57,7 @@ export default function NavDropdown({ links }: Props) { | |||||
leaveFrom="opacity-100 translate-y-0" | ||||||
leaveTo="opacity-0 translate-y-1" | ||||||
> | ||||||
<Popover.Panel className="absolute right-0 z-10 mt-3 sm:w-screen max-w-80 shadow-[0px_8px_20px] shadow-gray-d1 rounded-lg bg-gray-l6 dark:bg-blue-d6 transform"> | ||||||
<PopoverPanel className="absolute right-0 z-10 mt-3 sm:w-screen max-w-80 shadow-[0px_8px_20px] shadow-gray-d1 rounded-lg bg-gray-l6 dark:bg-blue-d6 transform"> | ||||||
{({ close }) => ( | ||||||
<nav className="overflow-hidden grid gap-y-2 w-full p-6"> | ||||||
{links.map((link) => | ||||||
|
@@ -88,7 +93,7 @@ export default function NavDropdown({ links }: Props) { | |||||
)} | ||||||
</nav> | ||||||
)} | ||||||
</Popover.Panel> | ||||||
</PopoverPanel> | ||||||
</Transition> | ||||||
</> | ||||||
)} | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,5 @@ | ||
import { Combobox } from "@headlessui/react"; | ||
import { ComboboxOption, ComboboxOptions } from "@headlessui/react"; | ||
import { isEmpty } from "helpers"; | ||
import React from "react"; | ||
import type { Country } from "types/components"; | ||
|
||
const containerStyle = | ||
|
@@ -16,29 +15,21 @@ export default function Options({ query, options }: Props) { | |
o.name.toLocaleLowerCase().includes(query.toLocaleLowerCase()) | ||
); | ||
return ( | ||
<Combobox.Options | ||
<ComboboxOptions | ||
className={containerStyle} | ||
style={{ height: options.length <= 10 ? "auto" : "10rem" }} | ||
> | ||
{(!isEmpty(options) && | ||
filtered.map((country) => ( | ||
<Combobox.Option | ||
as={React.Fragment} | ||
<ComboboxOption | ||
className="data-[selected]:bg-blue-l2 hover:bg-blue-l2 flex items-center gap-2 p-2 text-sm font-heading" | ||
key={country.name} | ||
value={country} | ||
> | ||
{({ active }) => ( | ||
<li | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
className={`${ | ||
active ? "bg-blue-l2 dark:bg-blue-d1" : "" | ||
} flex items-center gap-2 p-2 text-sm font-heading`} | ||
> | ||
<span className="text-2xl">{country.flag}</span> | ||
<span>{country.name}</span> | ||
</li> | ||
)} | ||
</Combobox.Option> | ||
<span className="text-2xl">{country.flag}</span> | ||
<span>{country.name}</span> | ||
</ComboboxOption> | ||
))) || <div className="p-2 text-sm">{query} not found</div>} | ||
</Combobox.Options> | ||
</ComboboxOptions> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we got many peer deps warning due to rework shipped in 4.3.0