upgraded radix-ui as to asChild, refactored <button className=""> to <Button color="secondary"> (#632)

This commit is contained in:
Peer_Rich 2021-09-14 09:20:24 +01:00 committed by GitHub
parent 8ae43ea990
commit e9ff62109d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 104 additions and 109 deletions

View File

@ -1,3 +1,4 @@
/* legacy and soon deprecated, please refactor to use <Dialog> only */
import { Fragment, ReactNode } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { CheckIcon, InformationCircleIcon } from "@heroicons/react/outline";

View File

@ -2,6 +2,7 @@ import Link from "next/link";
import React, { Fragment, useEffect, useState } from "react";
import { useRouter } from "next/router";
import { signOut, useSession } from "next-auth/client";
// TODO: replace headlessui with radix-ui
import { Menu, Transition } from "@headlessui/react";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
import { SelectorIcon } from "@heroicons/react/outline";

View File

@ -1,6 +1,5 @@
import React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { Slot } from "@radix-ui/react-slot";
export function Tooltip({
children,
@ -23,7 +22,7 @@ export function Tooltip({
open={open}
defaultOpen={defaultOpen}
onOpenChange={onOpenChange}>
<TooltipPrimitive.Trigger as={Slot}>{children}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content
className="bg-black text-xs -mt-2 text-white px-1 py-0.5 shadow-lg rounded-sm"
side="top"

View File

@ -1,3 +1,4 @@
// TODO: replace headlessui with radix-ui
import { Switch } from "@headlessui/react";
import TimezoneSelect from "react-timezone-select";
import { useEffect, useState } from "react";

View File

@ -64,15 +64,16 @@ export default function MemberListItem(props: {
className="absolute right-0 z-10 origin-top-right bg-white rounded-sm shadow-lg top-10 w-44 ring-1 ring-black ring-opacity-5 focus:outline-none">
<li className="text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
<Dialog>
<DialogTrigger
as={Button}
onClick={(e) => {
e.stopPropagation();
}}
color="warn"
StartIcon={UserRemoveIcon}
className="w-full">
Remove User
<DialogTrigger asChild>
<Button
onClick={(e) => {
e.stopPropagation();
}}
color="warn"
StartIcon={UserRemoveIcon}
className="w-full">
Remove User
</Button>
</DialogTrigger>
<ConfirmationDialogContent
variety="danger"

View File

@ -30,9 +30,8 @@
"@radix-ui/react-collapsible": "^0.0.17",
"@radix-ui/react-dialog": "^0.1.0",
"@radix-ui/react-slider": "^0.0.17",
"@radix-ui/react-slot": "^0.0.12",
"@radix-ui/react-switch": "^0.0.15",
"@radix-ui/react-tooltip": "^0.0.21",
"@radix-ui/react-tooltip": "^0.1.0",
"@tailwindcss/forms": "^0.3.3",
"async": "^3.2.1",
"bcryptjs": "^2.4.3",

View File

@ -4,6 +4,7 @@ import Shell from "@components/Shell";
import { useRouter } from "next/router";
import dayjs from "dayjs";
import { Fragment } from "react";
// TODO: replace headlessui with radix-ui
import { Menu, Transition } from "@headlessui/react";
import { DotsHorizontalIcon } from "@heroicons/react/solid";
import classNames from "@lib/classNames";

View File

@ -8,6 +8,7 @@ import { LocationType } from "@lib/location";
import Shell from "@components/Shell";
import { getSession } from "@lib/auth";
import { Scheduler } from "@components/ui/Scheduler";
// TODO: replace headlessui with radix-ui
import { Disclosure, RadioGroup } from "@headlessui/react";
import { PhoneIcon, XIcon } from "@heroicons/react/outline";
import { HttpError } from "@lib/core/http/error";

View File

@ -2,6 +2,7 @@ import { Dialog, DialogContent } from "@components/Dialog";
import Loader from "@components/Loader";
import { Tooltip } from "@components/Tooltip";
import { Button } from "@components/ui/Button";
// TODO: replace headlessui with radix-ui
import { Menu, Transition } from "@headlessui/react";
import {
ClockIcon,

View File

@ -245,9 +245,8 @@ export default function Onboarding(props: OnboardingProps) {
onClick={() => {
setIsAddCalDavIntegrationDialogOpen(false);
}}
as="button"
className="btn btn-white mx-2">
Cancel
asChild>
<Button color="secondary">Cancel</Button>
</DialogClose>
</div>
</DialogContent>

View File

@ -15,6 +15,7 @@ import { getSession } from "@lib/auth";
import AddAppleIntegration, {
ADD_APPLE_INTEGRATION_FORM_TITLE,
} from "@lib/integrations/Apple/components/AddAppleIntegration";
import Button from "@components/ui/Button";
export type Integration = {
installed: boolean;
@ -178,9 +179,9 @@ export default function Home({ integrations }: Props) {
})}
</ul>
</div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<DialogClose as="button" className="btn btn-white mx-2">
Cancel
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-2">
<DialogClose asChild>
<Button color="secondary">Cancel</Button>
</DialogClose>
</div>
</DialogContent>
@ -222,9 +223,9 @@ export default function Home({ integrations }: Props) {
))}
</ul>
</div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<DialogClose as="button" className="btn btn-white mx-2">
Confirm
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-2">
<DialogClose asChild>
<Button color="secondary">Confirm</Button>
</DialogClose>
</div>
</DialogContent>
@ -292,20 +293,19 @@ export default function Home({ integrations }: Props) {
onSubmit={handleAddCalDavIntegrationSaveButtonPress}
/>
</div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-2">
<Button
type="submit"
form={ADD_CALDAV_INTEGRATION_FORM_TITLE}
className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
Save
</button>
</Button>
<DialogClose
onClick={() => {
setIsAddCalDavIntegrationDialogOpen(false);
}}
as="button"
className="btn btn-white mx-2">
Cancel
asChild>
<Button color="secondary">Cancel</Button>
</DialogClose>
</div>
</DialogContent>
@ -335,7 +335,7 @@ export default function Home({ integrations }: Props) {
onSubmit={handleAddAppleIntegrationSaveButtonPress}
/>
</div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-2">
<button
type="submit"
form={ADD_APPLE_INTEGRATION_FORM_TITLE}
@ -346,9 +346,8 @@ export default function Home({ integrations }: Props) {
onClick={() => {
setIsAddAppleIntegrationDialogOpen(false);
}}
as="button"
className="btn btn-white mx-2">
Cancel
asChild>
<Button color="secondary">Cancel</Button>
</DialogClose>
</div>
</DialogContent>

146
yarn.lock
View File

@ -827,10 +827,10 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/popper@0.0.10":
version "0.0.10"
resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.0.10.tgz#9f707d9cec8762423f81acaf8e650e40a554cb73"
integrity sha512-YFKuPqQPKscreQid7NuB4it3PMzSwGg03vgrud6sVliHkI43QNAOHyrHyMNo015jg6QK5GVDn+7J2W5uygqSGA==
"@radix-ui/popper@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.1.0.tgz#c387a38f31b7799e1ea0d2bb1ca0c91c2931b063"
integrity sha512-uzYeElL3w7SeNMuQpXiFlBhTT+JyaNMCwDfjKkrzugEcYrf5n52PHqncNdQPUtR42hJh8V9FsqyEDbDxkeNjJQ==
dependencies:
"@babel/runtime" "^7.13.10"
csstype "^3.0.4"
@ -849,14 +849,13 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-arrow@0.0.15":
version "0.0.15"
resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-0.0.15.tgz#2fb7e4cab626f87d4f7a403672c57bce74b0a7b4"
integrity sha512-lw3/3nPmEeK67IgndT764w/65EMm5psXnr2efCeo0eWOERTnFAswNka2bKJUSKY02FHECkH4qVzhwupFyeYv0g==
"@radix-ui/react-arrow@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-0.1.0.tgz#9491f7244c574c0a7a281de8bf8c55b85438948d"
integrity sha512-BfrFYTOEVjG7lukoXcveEVgNl6+hvKdMlxXQhQrkZxNYBq6TuJ2VRWfcWzCPJNbVv09g2NXoh2cBGWCLMVH1nQ==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-polymorphic" "0.0.13"
"@radix-ui/react-primitive" "0.0.15"
"@radix-ui/react-primitive" "0.1.0"
"@radix-ui/react-avatar@^0.0.15":
version "0.0.15"
@ -1002,31 +1001,20 @@
resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.13.tgz#d010d48281626191c9513f11db5d82b37662418a"
integrity sha512-0sGqBp+v9/yrsMhPfAejxcem2MwAFgaSAxF3Sieaklm6ZVYM/hTZxxWI5NVOLGV+482GwW0wIqwpVUzREjmh+w==
"@radix-ui/react-popper@0.0.18":
version "0.0.18"
resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-0.0.18.tgz#e85ec077c18ffca92ce97cc19586dcc6f022fffb"
integrity sha512-j8nPqX5scAmeGuyW9VQv+M4MkKsV/ulR1Yt0eu13LyGLT3L7FM2YBMt3KlbpUxrT3mrNGC0eEQAiVgm/G3/fGQ==
"@radix-ui/react-popper@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-0.1.0.tgz#5b41c806870c51562ca7dbfc137bdfe8c8eeb761"
integrity sha512-WfNSqAA5caPv7zJD+LPMoIBiNW7rsbyzt903NFYpd0cHDweprYdAWTAtXvjjY2wb193UVTGkJUAWwYz3f0ku7A==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/popper" "0.0.10"
"@radix-ui/react-arrow" "0.0.15"
"@radix-ui/react-compose-refs" "0.0.5"
"@radix-ui/react-context" "0.0.5"
"@radix-ui/react-polymorphic" "0.0.13"
"@radix-ui/react-primitive" "0.0.15"
"@radix-ui/react-use-rect" "0.0.7"
"@radix-ui/react-use-size" "0.0.6"
"@radix-ui/rect" "0.0.5"
"@radix-ui/react-portal@0.0.15":
version "0.0.15"
resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.0.15.tgz#833bccb192aafb9420bd037d5827e88caf429dc4"
integrity sha512-qMESsdqph1gbRGzy9oSzUoeZYXnR2egXVcEZDqmesfn8w/o1rC1wadKkyBf7qo/YyjUX4mvXknAA+ftp1aQp+w==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-polymorphic" "0.0.13"
"@radix-ui/react-primitive" "0.0.15"
"@radix-ui/react-use-layout-effect" "0.0.5"
"@radix-ui/popper" "0.1.0"
"@radix-ui/react-arrow" "0.1.0"
"@radix-ui/react-compose-refs" "0.1.0"
"@radix-ui/react-context" "0.1.0"
"@radix-ui/react-primitive" "0.1.0"
"@radix-ui/react-use-rect" "0.1.0"
"@radix-ui/react-use-size" "0.1.0"
"@radix-ui/rect" "0.1.0"
"@radix-ui/react-portal@0.1.0":
version "0.1.0"
@ -1090,7 +1078,7 @@
"@radix-ui/react-use-previous" "0.0.5"
"@radix-ui/react-use-size" "0.0.6"
"@radix-ui/react-slot@0.0.12", "@radix-ui/react-slot@^0.0.12":
"@radix-ui/react-slot@0.0.12":
version "0.0.12"
resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.0.12.tgz#c4d8a75fffca561aeeca2ed9603384d86757f60a"
integrity sha512-Em8P/xYyh3O/32IhrmARJNH+J/XCAVnw6h2zGu6oeReliIX7ktU67pMSeyyIZiU2hNXzaXYB/xDdixizQe/DGA==
@ -1122,28 +1110,27 @@
"@radix-ui/react-use-previous" "0.0.5"
"@radix-ui/react-use-size" "0.0.6"
"@radix-ui/react-tooltip@^0.0.21":
version "0.0.21"
resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.0.21.tgz#86160645cf0441fa7f465c8aaa265887cc3ff9b4"
integrity sha512-+QLMXclfX0XM3inY5LEAvmKsomQ+S0cqzo1v/oS8CiIcawg01RDLV9mzjDYLnpE4eKokn30d+gk4r1YAtWIbZA==
"@radix-ui/react-tooltip@^0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.0.tgz#ce51db528f97e3a44bf437810032441bb22270b1"
integrity sha512-6zzA9JUHdHLUSwYClYEOgONTbWEwO7kbh6ho92FHBic2ruIBKktT9MS71/c/G9yvuDNgpi4C5SJXCPLA4dTI3g==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive" "0.0.5"
"@radix-ui/react-compose-refs" "0.0.5"
"@radix-ui/react-context" "0.0.5"
"@radix-ui/react-id" "0.0.6"
"@radix-ui/react-polymorphic" "0.0.13"
"@radix-ui/react-popper" "0.0.18"
"@radix-ui/react-portal" "0.0.15"
"@radix-ui/react-presence" "0.0.15"
"@radix-ui/react-primitive" "0.0.15"
"@radix-ui/react-slot" "0.0.12"
"@radix-ui/react-use-controllable-state" "0.0.6"
"@radix-ui/react-use-escape-keydown" "0.0.6"
"@radix-ui/react-use-layout-effect" "0.0.5"
"@radix-ui/react-use-previous" "0.0.5"
"@radix-ui/react-use-rect" "0.0.7"
"@radix-ui/react-visually-hidden" "0.0.15"
"@radix-ui/primitive" "0.1.0"
"@radix-ui/react-compose-refs" "0.1.0"
"@radix-ui/react-context" "0.1.0"
"@radix-ui/react-id" "0.1.0"
"@radix-ui/react-popper" "0.1.0"
"@radix-ui/react-portal" "0.1.0"
"@radix-ui/react-presence" "0.1.0"
"@radix-ui/react-primitive" "0.1.0"
"@radix-ui/react-slot" "0.1.0"
"@radix-ui/react-use-controllable-state" "0.1.0"
"@radix-ui/react-use-escape-keydown" "0.1.0"
"@radix-ui/react-use-layout-effect" "0.1.0"
"@radix-ui/react-use-previous" "0.1.0"
"@radix-ui/react-use-rect" "0.1.0"
"@radix-ui/react-visually-hidden" "0.1.0"
"@radix-ui/react-use-body-pointer-events@0.1.0":
version "0.1.0"
@ -1190,14 +1177,6 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-escape-keydown@0.0.6":
version "0.0.6"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.0.6.tgz#1ad1c81b99961b7dbe376ef54151ebc8bef627a0"
integrity sha512-MJpVj21BYwWllmp2xbXPqpKPssJ1WWrZi+Qx7PY5hVcBhQr5Jo6yKwIX677pH5Yql95ENTTT5LW3q+LVFYIISw==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-callback-ref" "0.0.5"
"@radix-ui/react-use-escape-keydown@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.1.0.tgz#dc80cb3753e9d1bd992adbad9a149fb6ea941874"
@ -1227,13 +1206,20 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-rect@0.0.7":
version "0.0.7"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.0.7.tgz#e3a55fa7183ef436042198787bf38f8c9befcc14"
integrity sha512-OmaeFTgyiGNAchaxzDu+kFLz4Ly8RUcT5nwfoz4Nddd86I8Zdq93iNFnOpVLoVYqBnFEmvR6zexHXNFATrMbbQ==
"@radix-ui/react-use-previous@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.0.tgz#fed880d41187d0fdd1e19c4588402765f342777e"
integrity sha512-0fxNc33rYnCzDMPSiSnfS8YklnxQo8WqbAQXPAgIaaA1jRu2qFB916PL4qCIW+avcAAqFD38vWhqDqcVmBharA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/rect" "0.0.5"
"@radix-ui/react-use-rect@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.0.tgz#074defa995c104e66319817c0b57ddbe3a22d53e"
integrity sha512-BTj9vMz336G3ukxCOb3QLC1oEOtGrWKPTdEG0pFEw75jyg360rLsfuydYemOtGFPVamXL9Pxo9JCwMcxLWdUlA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/rect" "0.1.0"
"@radix-ui/react-use-size@0.0.6":
version "0.0.6"
@ -1242,19 +1228,25 @@
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-visually-hidden@0.0.15":
version "0.0.15"
resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.0.15.tgz#7bd18af3fb5da1349f9b04006d22c3d6e9ce0453"
integrity sha512-8J13Nzu9MfT2z+mDTGRfBukPi5L9LXLV7w1HvNZPVqxGLK8p7/CoXnt8XdS1HKSFm6akZmWJXMZVNVBUsONOcA==
"@radix-ui/react-use-size@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.0.tgz#dc49295d646f5d3f570943dbb88bd94fc7db7daf"
integrity sha512-TcZAsR+BYI46w/RbaSFCRACl+Jh6mDqhu6GS2r0iuJpIVrj8atff7qtTjmMmfGtEDNEjhl7DxN3pr1nTS/oruQ==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-polymorphic" "0.0.13"
"@radix-ui/react-primitive" "0.0.15"
"@radix-ui/rect@0.0.5":
version "0.0.5"
resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.0.5.tgz#6000d8d800288114af4bbc5863e6b58755d7d978"
integrity sha512-gXw171KbjyttA7K1DRIvPguLmKsg8raitB67MIcsdZwcquy+a1O2w3xY21NIKEqGhJwqJkECPUmMJDXgMNYuAg==
"@radix-ui/react-visually-hidden@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.0.tgz#94d546c0507c4140bb369803a66fe557edf12897"
integrity sha512-PS1SNgcx79ZOq+IiHJZNL0aNNl5ygYKQ8DI+7+xK+PlLyA6KpVEhk7D9VMyWUygWWqE6trOgcOG0AyuhnLlmjQ==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-primitive" "0.1.0"
"@radix-ui/rect@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.0.tgz#6e4becf9f0161bae08a40a8a13185e6bcac9b185"
integrity sha512-YcQuy5hUDnS8CkmIKJA6lE8wQpMqv8KN3SoO3dtOg7FQmZo1lgF1yAtrp5STJYxs1n7UChW3eEhrKXl/LmbHJQ==
dependencies:
"@babel/runtime" "^7.13.10"