binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1878] ui: implementing popover component in a UI package (#5063)

Browse source 
* ui: impleented popover commponent

* chore: implemente component in project-states

* chore: added default styling for popover menu panel

* chore: removed propsWithChildren in popover component type
This commit is contained in:
guru_sainath 2024-07-08 15:03:22 +05:30 • committed by GitHub
parent 6dcbea6d14
commit fc2585bf64
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 258 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx
View file

@ -56,7 +56,7 @@ const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props) => {
<div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
<ProjectSettingsSidebar />
</div>
<div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
<div className="w-full pl-10 sm:pl-10 md:pl-3 lg:pl-3 overflow-y-scroll vertical-scrollbar scrollbar-md">
{children}
</div>
</div>

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx
View file

@ -18,7 +18,7 @@ const StatesSettingsPage = observer(() => {
return (
<>
<PageHead title={pageTitle} />
<div className="w-full gap-10 overflow-y-auto py-8 pr-9">
<div className="py-8 pr-9">
<div className="flex items-center border-b border-custom-border-100 py-3.5">
<h3 className="text-xl font-medium">States</h3>
</div>

39
web/core/components/project-states/create-update/form.tsx
View file

@ -1,10 +1,9 @@
"use client";
import { FormEvent, FC, useEffect, useState, Fragment } from "react";
import { FormEvent, FC, useEffect, useState, useMemo } from "react";
import { TwitterPicker } from "react-color";
import { Popover, Transition } from "@headlessui/react";
import { IState } from "@plane/types";
import { Button, Input } from "@plane/ui";
import { Button, Popover, Input } from "@plane/ui";
type TStateForm = {
data: Partial<IState>;
@ -47,30 +46,24 @@ export const StateForm: FC<TStateForm> = (props) => {
}
};
const PopoverButton = useMemo(
() => (
<div
className="group inline-flex items-center text-base font-medium focus:outline-none h-5 w-5 rounded transition-all"
style={{
backgroundColor: formData?.color ?? "black",
}}
/>
),
[formData?.color]
);
return (
<form onSubmit={formSubmit} className="relative flex items-center gap-2">
{/* color */}
<div className="flex-shrink-0">
<Popover className="relative flex h-full w-full items-center justify-center">
<Popover.Button
className="group inline-flex items-center text-base font-medium focus:outline-none h-5 w-5 rounded transition-all"
style={{
backgroundColor: formData?.color ?? "black",
}}
/>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
<TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
</Popover.Panel>
</Transition>
<Popover button={PopoverButton} panelClassName="mt-4 -ml-3">
<TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
</Popover>
</div>