Skip to content

Commit

Permalink
chore(repo): update headlessui v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@nartc
nartc committed Jan 10, 2025
1 parent 9dbebbe commit c717ead
Show file tree
Hide file tree
Showing 17 changed files with 331 additions and 143 deletions.
40 changes: 23 additions & 17 deletions graph/ui-theme/src/lib/theme-panel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import { Menu, Transition } from '@headlessui/react';
import {
Menu,
MenuButton,
MenuItem,
MenuItems,
Transition,
} from '@headlessui/react';
import {
ComputerDesktopIcon,
MoonIcon,
Expand Down Expand Up @@ -28,7 +34,7 @@ export function ThemePanel({
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button
<MenuButton
className="inline-flex w-full justify-center rounded-md p-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 dark:text-sky-500"
data-cy="theme-open-modal-button"
>
Expand All @@ -42,7 +48,7 @@ export function ThemePanel({
{theme === 'dark' && (
<MoonIcon className="h-4 w-4" aria-hidden="true" />
)}
</Menu.Button>
</MenuButton>
</div>
<Transition
as={Fragment}
Expand All @@ -53,15 +59,15 @@ export function ThemePanel({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-50 mt-2 w-36 origin-top-right rounded-md bg-white text-slate-500 shadow-lg ring-1 ring-slate-900/10 ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:text-slate-400 dark:ring-0">
<MenuItems className="absolute right-0 z-50 mt-2 w-36 origin-top-right rounded-md bg-white text-slate-500 shadow-lg ring-1 ring-slate-900/10 ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:text-slate-400 dark:ring-0">
<div className="px-1 py-1">
<Menu.Item>
{({ active }) => (
<MenuItem>
{({ focus }) => (
<button
data-cy="system-theme-button"
className={classNames(
theme === 'system' ? 'text-blue-500 dark:text-sky-500' : '',
active ? 'bg-slate-50 dark:bg-slate-600/30' : '',
focus ? 'bg-slate-50 dark:bg-slate-600/30' : '',
'group flex w-full items-center rounded-md px-2 py-2 text-sm'
)}
onClick={() => setTheme('system')}
Expand All @@ -73,14 +79,14 @@ export function ThemePanel({
System
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
</MenuItem>
<MenuItem>
{({ focus }) => (
<button
data-cy="light-theme-button"
className={classNames(
theme === 'light' ? 'text-blue-500 dark:text-sky-500' : '',
active ? 'bg-slate-50 dark:bg-slate-600/30' : '',
focus ? 'bg-slate-50 dark:bg-slate-600/30' : '',
'group flex w-full items-center rounded-md px-2 py-2 text-sm'
)}
onClick={() => setTheme('light')}
Expand All @@ -89,14 +95,14 @@ export function ThemePanel({
Light
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
</MenuItem>
<MenuItem>
{({ focus }) => (
<button
data-cy="dark-theme-button"
className={classNames(
theme === 'dark' ? 'text-blue-500 dark:text-sky-500' : '',
active ? 'bg-slate-50 dark:bg-slate-600/30' : '',
focus ? 'bg-slate-50 dark:bg-slate-600/30' : '',
'group flex w-full items-center rounded-md px-2 py-2 text-sm'
)}
onClick={() => setTheme('dark')}
Expand All @@ -105,9 +111,9 @@ export function ThemePanel({
Dark
</button>
)}
</Menu.Item>
</MenuItem>
</div>
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
);
Expand Down
37 changes: 22 additions & 15 deletions nx-dev/feature-feedback/src/lib/feedback-dialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { Dialog, Transition } from '@headlessui/react';
import {
Description,
Dialog,
DialogPanel,
DialogTitle,
Transition,
TransitionChild,
} from '@headlessui/react';
import { ChangeEvent, Fragment, useMemo, useState } from 'react';
import { GithubIcon } from '@nx/nx-dev/ui-common';
import { cx } from '@nx/nx-dev/ui-primitives';
Expand Down Expand Up @@ -58,7 +65,7 @@ function FeedbackDialog({
return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog open={isOpen} onClose={closeDialog} className="relative z-50">
<Transition.Child
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
Expand All @@ -72,12 +79,12 @@ function FeedbackDialog({
className="fixed inset-0 bg-black/10 backdrop-blur-sm dark:bg-white/10"
aria-hidden="true"
/>
</Transition.Child>
</TransitionChild>

{/* This is the modal */}
<div className="fixed inset-0 w-full overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4">
<Transition.Child
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
Expand All @@ -86,16 +93,16 @@ function FeedbackDialog({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-slate-900">
<Dialog.Title
<DialogPanel className="relative w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-slate-900">
<DialogTitle
as="h3"
className="bg-white p-4 text-center text-lg font-medium leading-6 text-slate-700 dark:bg-slate-900 dark:text-slate-400"
>
What is on your mind?
<button className={styles.closebutton} onClick={closeDialog}>
&times;
</button>
</Dialog.Title>
</DialogTitle>

{/* The anatomy here should be
Expand Down Expand Up @@ -217,20 +224,20 @@ function FeedbackDialog({
</ul>
{isIdea && (
<div className={styles.fadeinout}>
<Dialog.Description>
<Description>
We are always looking to improve our documentation. If you
have any suggestions, please let us know.
</Dialog.Description>
<Dialog.Description className="pt-4">
</Description>
<Description className="pt-4">
<textarea
rows={5}
className="box-border w-full rounded dark:bg-gray-800"
required
value={feedback}
onChange={updateFeedback}
></textarea>
</Dialog.Description>
<Dialog.Description className="relative mt-4 flex justify-end rounded-l-md">
</Description>
<Description className="relative mt-4 flex justify-end rounded-l-md">
<button
onClick={submitFeedback}
disabled={formDisabled}
Expand All @@ -245,11 +252,11 @@ function FeedbackDialog({
>
Done
</button>
</Dialog.Description>
</Description>
</div>
)}
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
Expand Down
20 changes: 13 additions & 7 deletions nx-dev/ui-blog/src/lib/filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ import { FC, Fragment, SVGProps, useEffect, useState } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { ChevronDownIcon } from '@heroicons/react/24/outline';

import { Menu, Transition } from '@headlessui/react';
import {
Menu,
MenuButton,
MenuItem,
MenuItems,
Transition,
} from '@headlessui/react';
import { cx } from '@nx/nx-dev/ui-primitives';
import { BlogPostDataEntry } from '@nx/nx-dev/data-access-documents/node-only';

Expand Down Expand Up @@ -102,7 +108,7 @@ export function Filters({
{/* MOBILE */}
<div className="relative lg:hidden">
<Menu as="div" className="inline-block text-left">
<Menu.Button
<MenuButton
className="inline-flex w-full justify-center rounded-md border border-slate-400 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 hover:text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
aria-label="Select filter topic"
>
Expand All @@ -111,7 +117,7 @@ export function Filters({
className="-mr-1 ml-2 h-5 w-5 text-violet-200 hover:text-violet-100"
aria-hidden="true"
/>
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
Expand All @@ -121,13 +127,13 @@ export function Filters({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
as="ul"
className="absolute right-0 z-[31] mt-2 flex w-56 origin-top-right flex-col gap-4 rounded-md bg-white p-4 shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-slate-800 dark:text-white"
aria-label="Filter topics"
>
{filters.map((filter) => (
<Menu.Item as="li" className="text-lg" key={filter.value}>
<MenuItem as="li" className="text-lg" key={filter.value}>
<Link
className={cx('flex items-center gap-2')}
href={updateFilter(filter.value)}
Expand All @@ -141,9 +147,9 @@ export function Filters({
)}
{filter.label}
</Link>
</Menu.Item>
</MenuItem>
))}
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
</div>
Expand Down
19 changes: 12 additions & 7 deletions nx-dev/ui-cloud/src/lib/hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
'use client';
import { Dialog, Transition } from '@headlessui/react';
import {
Dialog,
DialogPanel,
Transition,
TransitionChild,
} from '@headlessui/react';
import { cx } from '@nx/nx-dev/ui-primitives';
import { PlayIcon } from '@heroicons/react/24/outline';
import { motion } from 'framer-motion';
Expand Down Expand Up @@ -92,7 +97,7 @@ export function Hero(): JSX.Element {
onClose={() => setIsOpen(false)}
className="relative z-10"
>
<Transition.Child
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
Expand All @@ -102,10 +107,10 @@ export function Hero(): JSX.Element {
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
</Transition.Child>
</TransitionChild>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
Expand All @@ -114,7 +119,7 @@ export function Hero(): JSX.Element {
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative w-auto transform overflow-hidden rounded-2xl border border-slate-600 text-left align-middle shadow-xl transition-all focus:outline-none dark:border-slate-800">
<DialogPanel className="relative w-auto transform overflow-hidden rounded-2xl border border-slate-600 text-left align-middle shadow-xl transition-all focus:outline-none dark:border-slate-800">
<iframe
width="812"
height="468"
Expand All @@ -125,8 +130,8 @@ export function Hero(): JSX.Element {
allowFullScreen
className="max-w-full"
/>
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
Expand Down
15 changes: 10 additions & 5 deletions nx-dev/ui-common/src/lib/headers/documentation-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,12 @@ import cx from 'classnames';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ButtonLink } from '../button';
import { Popover, Transition } from '@headlessui/react';
import {
Popover,
PopoverButton,
PopoverPanel,
Transition,
} from '@headlessui/react';
import { resourceMenuItems } from './menu-items';
import { SectionsMenu } from './sections-menu';
import { DiscordIcon } from '../discord-icon';
Expand Down Expand Up @@ -248,7 +253,7 @@ export function DocumentationHeader({
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
<PopoverButton
className={cx(
open ? 'text-blue-500 dark:text-sky-500' : '',
'group inline-flex items-center px-3 py-2 font-medium leading-tight outline-0 dark:text-slate-200'
Expand All @@ -266,7 +271,7 @@ export function DocumentationHeader({
)}
aria-hidden="true"
/>
</Popover.Button>
</PopoverButton>

<Transition
as={Fragment}
Expand All @@ -277,9 +282,9 @@ export function DocumentationHeader({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-60 z-30 mt-3 w-max max-w-2xl -translate-x-1/2 transform lg:left-20">
<PopoverPanel className="absolute left-60 z-30 mt-3 w-max max-w-2xl -translate-x-1/2 transform lg:left-20">
<SectionsMenu sections={resourceMenuItems} />
</Popover.Panel>
</PopoverPanel>
</Transition>
</>
)}
Expand Down
Loading

0 comments on commit c717ead

Please sign in to comment.