From 90244fc2fb98714573fe5ec83a4df3fbf2c67f76 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 21 Dec 2021 13:29:57 +0700 Subject: [PATCH] Add radix tooltips to side nav --- .../NavigationBar/NavigationIconButton.tsx | 43 +- studio/package-lock.json | 407 ++++++++++++++++-- studio/package.json | 1 + studio/styles/ui.scss | 6 + 4 files changed, 421 insertions(+), 36 deletions(-) diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx index d7b8fe94f9e..f563c5a0c7b 100644 --- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx +++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx @@ -1,5 +1,8 @@ import { FC } from 'react' import Link from 'next/link' +import { Typography } from '@supabase/ui' +import * as Tooltip from '@radix-ui/react-tooltip' + import { Route } from 'components/ui/ui.types' interface Props { @@ -9,18 +12,34 @@ interface Props { const NavigationIconButton: FC = ({ route, isActive = false }) => { return ( - - - {route.icon} - - + + + + + {route.icon} + + + + + +
+ {route.label} +
+ + ) } diff --git a/studio/package-lock.json b/studio/package-lock.json index 5e031e16441..86f5b809ac1 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1,18 +1,19 @@ { "name": "studio", - "version": "0.0.6", + "version": "0.0.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "studio", - "version": "0.0.6", + "version": "0.0.8", "dependencies": { "@auth0/nextjs-auth0": "^1.6.1", "@headlessui/react": "^1.4.1", "@monaco-editor/react": "^4.3.1", "@next/bundle-analyzer": "^12.0.4", "@radix-ui/react-portal": "^0.1.1", + "@radix-ui/react-tooltip": "^0.1.6", "@sentry/browser": "^6.15.0", "@sentry/nextjs": "^6.15.0", "@supabase/grid": "^2.3.9", @@ -2190,6 +2191,35 @@ "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz", "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==" }, + "node_modules/@radix-ui/popper": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/popper/-/popper-0.1.0.tgz", + "integrity": "sha512-uzYeElL3w7SeNMuQpXiFlBhTT+JyaNMCwDfjKkrzugEcYrf5n52PHqncNdQPUtR42hJh8V9FsqyEDbDxkeNjJQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "csstype": "^3.0.4" + } + }, + "node_modules/@radix-ui/primitive": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-0.1.0.tgz", + "integrity": "sha512-tqxZKybwN5Fa3VzZry4G6mXAAb9aAqKmPtnVbZpL0vsBwvOHTBwsjHVPXylocYLwEtBY9SCe665bYnNB515uoA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/react-arrow": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.3.tgz", + "integrity": "sha512-9x1gRYdlUD5OUwY7L+M+4FY/YltDSsrNSj8QXGPbxZxL5ghWXB/4lhyIGccCwk/e8ggfmQYv9SRNmn3LavPo3A==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "0.1.3" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz", @@ -2201,13 +2231,55 @@ "react": "^16.8 || ^17.0" } }, - "node_modules/@radix-ui/react-portal": { + "node_modules/@radix-ui/react-context": { "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-0.1.1.tgz", - "integrity": "sha512-ZJFgUBsaFS4cryONfRZXuYxtv87ziRGqFu+wP91rVKF8TpkeQgvPP2QBLIfIGzotr3G1n8t7gHaNJkZtKVeXvw==", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-0.1.1.tgz", + "integrity": "sha512-PkyVX1JsLBioeu0jB9WvRpDBBLtLZohVDT3BB5CTSJqActma8S8030P57mWZb4baZifMvN7KKWPAA40UmWKkQg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-id": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-0.1.4.tgz", + "integrity": "sha512-/hq5m/D0ZfJWOS7TLF+G0l08KDRs87LBE46JkAvgKkg1fW4jkucx9At9D9vauIPSbdNmww5kXEp566hMlA8eXA==", "dependencies": { "@babel/runtime": "^7.13.10", - "@radix-ui/react-primitive": "0.1.1", + "@radix-ui/react-use-layout-effect": "0.1.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-popper": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-0.1.3.tgz", + "integrity": "sha512-2OV2YaJv7iTZexJY3HJ7B6Fs1A/3JXd3fRGU4JY0guACfGMD1C/jSgds505MKQOTiHE/quI6j3/q8yfzFjJR9g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/popper": "0.1.0", + "@radix-ui/react-arrow": "0.1.3", + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-context": "0.1.1", + "@radix-ui/react-primitive": "0.1.3", + "@radix-ui/react-use-rect": "0.1.1", + "@radix-ui/react-use-size": "0.1.0", + "@radix-ui/rect": "0.1.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-portal": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-0.1.3.tgz", + "integrity": "sha512-DrV+sPYLs0HhmX5/b7yRT6nLM9Nl6FtQe2KUG+46kiCOKQ+0XzNMO5hmeQtyq0mRf/qlC02rFu6OMsWpIqVsJg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "0.1.3", "@radix-ui/react-use-layout-effect": "0.1.0" }, "peerDependencies": { @@ -2215,22 +2287,35 @@ "react-dom": "^16.8 || ^17.0" } }, - "node_modules/@radix-ui/react-primitive": { + "node_modules/@radix-ui/react-presence": { "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.1.tgz", - "integrity": "sha512-65GCHeDV/ikicXKR2rLSO6w+dyUQwSG2J1JD2qm4suK1259nTuRvPsPBrbhZpoXWQKj2drMZfhhclXVfzwW1Kw==", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-0.1.1.tgz", + "integrity": "sha512-LsL+NcWDpFUAYCmXeH02o4pgqcSLpwxP84UIjCtpIKrsPe2vLuhcp79KC/jZJeXz+of2lUpMAxpM+eCpxFZtlg==", "dependencies": { "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "0.1.1" + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-use-layout-effect": "0.1.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.3.tgz", + "integrity": "sha512-fcyADaaAx2jdqEDLsTs6aX50S3L1c9K9CC6XMpJpuXFJCU4n9PGTFDZRtY2gAoXXoRCPIBsklCopSmGb6SsDjQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "0.1.2" }, "peerDependencies": { "react": "^16.8 || ^17.0" } }, "node_modules/@radix-ui/react-slot": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.1.tgz", - "integrity": "sha512-deq3K7cCXQ+tWMZF2GKl3zGMcwVbyQDiMY/UcPI0Q1DDudRG2dWrEwcYbYajEelc07oOxzNyKpaXZLOpNxquuA==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.2.tgz", + "integrity": "sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==", "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "0.1.0" @@ -2239,6 +2324,67 @@ "react": "^16.8 || ^17.0" } }, + "node_modules/@radix-ui/react-tooltip": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-0.1.6.tgz", + "integrity": "sha512-0uaRpRmTCQo5yMUkDpv4LEDnaQDoeLXcNNhZonCZdbZBQ7ntvjURIWIigq1/pXZp0UX7oPpFzsXD9jUp8JT0WA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "0.1.0", + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-context": "0.1.1", + "@radix-ui/react-id": "0.1.4", + "@radix-ui/react-popper": "0.1.3", + "@radix-ui/react-portal": "0.1.3", + "@radix-ui/react-presence": "0.1.1", + "@radix-ui/react-primitive": "0.1.3", + "@radix-ui/react-slot": "0.1.2", + "@radix-ui/react-use-controllable-state": "0.1.0", + "@radix-ui/react-use-escape-keydown": "0.1.0", + "@radix-ui/react-use-previous": "0.1.0", + "@radix-ui/react-use-rect": "0.1.1", + "@radix-ui/react-visually-hidden": "0.1.3" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0", + "react-dom": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.1.0.tgz", + "integrity": "sha512-Va041McOFFl+aV+sejvl0BS2aeHx86ND9X/rVFmEFQKTXCp6xgUK0NGUAGcgBlIjnJSbMYPGEk1xKSSlVcN2Aw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz", + "integrity": "sha512-zv7CX/PgsRl46a52Tl45TwqwVJdmqnlQEQhaYMz/yBOD2sx2gCkCFSoF/z9mpnYWmS6DTLNTg5lIps3fV6EnXg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "0.1.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.1.0.tgz", + "integrity": "sha512-tDLZbTGFmvXaazUXXv8kYbiCcbAE8yKgng9s95d8fCO+Eundv0Jngbn/hKPhDDs4jj9ChwRX5cDDnlaN+ugYYQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "0.1.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, "node_modules/@radix-ui/react-use-layout-effect": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz", @@ -2250,6 +2396,60 @@ "react": "^16.8 || ^17.0" } }, + "node_modules/@radix-ui/react-use-previous": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-0.1.0.tgz", + "integrity": "sha512-0fxNc33rYnCzDMPSiSnfS8YklnxQo8WqbAQXPAgIaaA1jRu2qFB916PL4qCIW+avcAAqFD38vWhqDqcVmBharA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-use-rect": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz", + "integrity": "sha512-kHNNXAsP3/PeszEmM/nxBBS9Jbo93sO+xuMTcRfwzXsmxT5gDXQzAiKbZQ0EecCPtJIzqvr7dlaQi/aP1PKYqQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/rect": "0.1.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-use-size": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-0.1.0.tgz", + "integrity": "sha512-TcZAsR+BYI46w/RbaSFCRACl+Jh6mDqhu6GS2r0iuJpIVrj8atff7qtTjmMmfGtEDNEjhl7DxN3pr1nTS/oruQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-visually-hidden": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.3.tgz", + "integrity": "sha512-dPU6ZR2WQ/W9qv7E1Y8/I8ymqG+8sViU6dQQ6sfr2/8yGr0I4mmI7ywTnqXaE+YS9gHLEZHdQcEqTNESg6YfdQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "0.1.3" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/rect": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-0.1.1.tgz", + "integrity": "sha512-g3hnE/UcOg7REdewduRPAK88EPuLZtaq7sA9ouu8S+YEtnyFRI16jgv6GZYe3VMoQLL1T171ebmEPtDjyxWLzw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@react-dnd/asap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", @@ -15287,6 +15487,32 @@ "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz", "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==" }, + "@radix-ui/popper": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/popper/-/popper-0.1.0.tgz", + "integrity": "sha512-uzYeElL3w7SeNMuQpXiFlBhTT+JyaNMCwDfjKkrzugEcYrf5n52PHqncNdQPUtR42hJh8V9FsqyEDbDxkeNjJQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "csstype": "^3.0.4" + } + }, + "@radix-ui/primitive": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-0.1.0.tgz", + "integrity": "sha512-tqxZKybwN5Fa3VzZry4G6mXAAb9aAqKmPtnVbZpL0vsBwvOHTBwsjHVPXylocYLwEtBY9SCe665bYnNB515uoA==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-arrow": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.3.tgz", + "integrity": "sha512-9x1gRYdlUD5OUwY7L+M+4FY/YltDSsrNSj8QXGPbxZxL5ghWXB/4lhyIGccCwk/e8ggfmQYv9SRNmn3LavPo3A==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "0.1.3" + } + }, "@radix-ui/react-compose-refs": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz", @@ -15295,34 +15521,125 @@ "@babel/runtime": "^7.13.10" } }, - "@radix-ui/react-portal": { + "@radix-ui/react-context": { "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-0.1.1.tgz", - "integrity": "sha512-ZJFgUBsaFS4cryONfRZXuYxtv87ziRGqFu+wP91rVKF8TpkeQgvPP2QBLIfIGzotr3G1n8t7gHaNJkZtKVeXvw==", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-0.1.1.tgz", + "integrity": "sha512-PkyVX1JsLBioeu0jB9WvRpDBBLtLZohVDT3BB5CTSJqActma8S8030P57mWZb4baZifMvN7KKWPAA40UmWKkQg==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-id": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-0.1.4.tgz", + "integrity": "sha512-/hq5m/D0ZfJWOS7TLF+G0l08KDRs87LBE46JkAvgKkg1fW4jkucx9At9D9vauIPSbdNmww5kXEp566hMlA8eXA==", "requires": { "@babel/runtime": "^7.13.10", - "@radix-ui/react-primitive": "0.1.1", + "@radix-ui/react-use-layout-effect": "0.1.0" + } + }, + "@radix-ui/react-popper": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-0.1.3.tgz", + "integrity": "sha512-2OV2YaJv7iTZexJY3HJ7B6Fs1A/3JXd3fRGU4JY0guACfGMD1C/jSgds505MKQOTiHE/quI6j3/q8yfzFjJR9g==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/popper": "0.1.0", + "@radix-ui/react-arrow": "0.1.3", + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-context": "0.1.1", + "@radix-ui/react-primitive": "0.1.3", + "@radix-ui/react-use-rect": "0.1.1", + "@radix-ui/react-use-size": "0.1.0", + "@radix-ui/rect": "0.1.1" + } + }, + "@radix-ui/react-portal": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-0.1.3.tgz", + "integrity": "sha512-DrV+sPYLs0HhmX5/b7yRT6nLM9Nl6FtQe2KUG+46kiCOKQ+0XzNMO5hmeQtyq0mRf/qlC02rFu6OMsWpIqVsJg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "0.1.3", + "@radix-ui/react-use-layout-effect": "0.1.0" + } + }, + "@radix-ui/react-presence": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-0.1.1.tgz", + "integrity": "sha512-LsL+NcWDpFUAYCmXeH02o4pgqcSLpwxP84UIjCtpIKrsPe2vLuhcp79KC/jZJeXz+of2lUpMAxpM+eCpxFZtlg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "0.1.0", "@radix-ui/react-use-layout-effect": "0.1.0" } }, "@radix-ui/react-primitive": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.1.tgz", - "integrity": "sha512-65GCHeDV/ikicXKR2rLSO6w+dyUQwSG2J1JD2qm4suK1259nTuRvPsPBrbhZpoXWQKj2drMZfhhclXVfzwW1Kw==", + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.3.tgz", + "integrity": "sha512-fcyADaaAx2jdqEDLsTs6aX50S3L1c9K9CC6XMpJpuXFJCU4n9PGTFDZRtY2gAoXXoRCPIBsklCopSmGb6SsDjQ==", "requires": { "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "0.1.1" + "@radix-ui/react-slot": "0.1.2" } }, "@radix-ui/react-slot": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.1.tgz", - "integrity": "sha512-deq3K7cCXQ+tWMZF2GKl3zGMcwVbyQDiMY/UcPI0Q1DDudRG2dWrEwcYbYajEelc07oOxzNyKpaXZLOpNxquuA==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.2.tgz", + "integrity": "sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==", "requires": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "0.1.0" } }, + "@radix-ui/react-tooltip": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-0.1.6.tgz", + "integrity": "sha512-0uaRpRmTCQo5yMUkDpv4LEDnaQDoeLXcNNhZonCZdbZBQ7ntvjURIWIigq1/pXZp0UX7oPpFzsXD9jUp8JT0WA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "0.1.0", + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-context": "0.1.1", + "@radix-ui/react-id": "0.1.4", + "@radix-ui/react-popper": "0.1.3", + "@radix-ui/react-portal": "0.1.3", + "@radix-ui/react-presence": "0.1.1", + "@radix-ui/react-primitive": "0.1.3", + "@radix-ui/react-slot": "0.1.2", + "@radix-ui/react-use-controllable-state": "0.1.0", + "@radix-ui/react-use-escape-keydown": "0.1.0", + "@radix-ui/react-use-previous": "0.1.0", + "@radix-ui/react-use-rect": "0.1.1", + "@radix-ui/react-visually-hidden": "0.1.3" + } + }, + "@radix-ui/react-use-callback-ref": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.1.0.tgz", + "integrity": "sha512-Va041McOFFl+aV+sejvl0BS2aeHx86ND9X/rVFmEFQKTXCp6xgUK0NGUAGcgBlIjnJSbMYPGEk1xKSSlVcN2Aw==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-use-controllable-state": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz", + "integrity": "sha512-zv7CX/PgsRl46a52Tl45TwqwVJdmqnlQEQhaYMz/yBOD2sx2gCkCFSoF/z9mpnYWmS6DTLNTg5lIps3fV6EnXg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "0.1.0" + } + }, + "@radix-ui/react-use-escape-keydown": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.1.0.tgz", + "integrity": "sha512-tDLZbTGFmvXaazUXXv8kYbiCcbAE8yKgng9s95d8fCO+Eundv0Jngbn/hKPhDDs4jj9ChwRX5cDDnlaN+ugYYQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "0.1.0" + } + }, "@radix-ui/react-use-layout-effect": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz", @@ -15331,6 +15648,48 @@ "@babel/runtime": "^7.13.10" } }, + "@radix-ui/react-use-previous": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-0.1.0.tgz", + "integrity": "sha512-0fxNc33rYnCzDMPSiSnfS8YklnxQo8WqbAQXPAgIaaA1jRu2qFB916PL4qCIW+avcAAqFD38vWhqDqcVmBharA==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-use-rect": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz", + "integrity": "sha512-kHNNXAsP3/PeszEmM/nxBBS9Jbo93sO+xuMTcRfwzXsmxT5gDXQzAiKbZQ0EecCPtJIzqvr7dlaQi/aP1PKYqQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/rect": "0.1.1" + } + }, + "@radix-ui/react-use-size": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-0.1.0.tgz", + "integrity": "sha512-TcZAsR+BYI46w/RbaSFCRACl+Jh6mDqhu6GS2r0iuJpIVrj8atff7qtTjmMmfGtEDNEjhl7DxN3pr1nTS/oruQ==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-visually-hidden": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.3.tgz", + "integrity": "sha512-dPU6ZR2WQ/W9qv7E1Y8/I8ymqG+8sViU6dQQ6sfr2/8yGr0I4mmI7ywTnqXaE+YS9gHLEZHdQcEqTNESg6YfdQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "0.1.3" + } + }, + "@radix-ui/rect": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-0.1.1.tgz", + "integrity": "sha512-g3hnE/UcOg7REdewduRPAK88EPuLZtaq7sA9ouu8S+YEtnyFRI16jgv6GZYe3VMoQLL1T171ebmEPtDjyxWLzw==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, "@react-dnd/asap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", diff --git a/studio/package.json b/studio/package.json index 6cca8b3aa89..1414f0a89a1 100644 --- a/studio/package.json +++ b/studio/package.json @@ -15,6 +15,7 @@ "@monaco-editor/react": "^4.3.1", "@next/bundle-analyzer": "^12.0.4", "@radix-ui/react-portal": "^0.1.1", + "@radix-ui/react-tooltip": "^0.1.6", "@sentry/browser": "^6.15.0", "@sentry/nextjs": "^6.15.0", "@supabase/grid": "^2.3.9", diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss index c60a07ea991..f54ead1e38f 100644 --- a/studio/styles/ui.scss +++ b/studio/styles/ui.scss @@ -310,3 +310,9 @@ label:not(.sbui-formlayout__label):not(.sbui-checkbox__label-container__label):n cursor: row-resize; } } + +.radix-tooltip-arrow { + polygon { + @apply fill-[#eeeeee] dark:fill-[#1f1f1f]; + } +}