Skip to content
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

feat: create a reuseable dialog component #181

Merged

Conversation

Adelosoye-dev
Copy link
Collaborator

@Adelosoye-dev Adelosoye-dev commented Jul 20, 2024

Description

Add a Dialog Box component that includes a header with text and description, and a footer that accepts multiple buttons.

Closes #49

Changes Proposed

Create a Dialog Box component that includes a header with text and description, and a footer that accepts multiple buttons.

Requirements

The Dialog Box component should support the following props:

  • headerText: string - Required text to be displayed in the header.

  • description?: string - Optional description to be displayed under the header text.

  • buttons: React.ReactNode[] - An array of button components to be displayed in the footer.

What were you told to do?

[FEAT] - Component → Dialogbox

Create a Dialog Box component that includes a header with text and description, and a footer that accepts multiple buttons.

What did you do?

The Dialog component is a customizable alert dialog box built using the AlertDialog components from Shadcn and a Button component. It provides a way to display a modal dialog with a title, description, and footer actions.

Component Props

The AlertDialogDemo component accepts the following props:

DialogProperties

headerText (string): The text to display in the header of the dialog.
description (string, optional): The text to display as the description in the dialog.
footer (React.ReactNode[]): An array of React nodes to be displayed as actions in the footer of the dialog.
triggerText (string): The text to display on the button that triggers the dialog.
variants (Variants): The variant of the button triggering the dialog. Possible values are:
"default"
"destructive"
"outline"
"link"
"ghost"
"secondary"

Usage Example

Below is an example of how to use the Dialog component:

import Dialog from "~/components/Dialog";
import { Button } from "~/components/ui/button";

function MyComponent() {
  const footerActions = [
    <Button key="cancel">Cancel</Button>,
    <Button key="confirm">Confirm</Button>,
  ];

  return (
    <Dialog
        headerText="Confirm Action"
        description="Are you sure you want to proceed with this action?"
        footer={footerActions}
        triggerText="Open Dialog"
        variants="primary"
    />
  );
}

export default MyComponent;
  • Dialog Component Screenshot

Screenshot 2024-07-20 233433

  • Figma link

https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=2225-7657&t=XOIp4pqGzAyZNcxj-4

@Adelosoye-dev Adelosoye-dev requested a review from kelani34 July 20, 2024 01:01
@chumex412
Copy link
Contributor

You have conflicts

@chumex412
Copy link
Contributor

Resolve the conflicts

<header className="flex flex-col gap-2">
<h2 className="text-lg font-semibold text-primary">{headerText}</h2>
{description && (
<p className="font-normal text-sm leading-[1.05rem] text-muted-foreground text-pretty">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you creating your own dialog? Weren't you told to use ShadCN dialog component?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the issue requirements, I wasn't asked to use Shadcn-UI.

The Shadcn-UI Dialog component requires a close icon to close the dialog and a trigger button to display it, but these were not mentioned in the requirements and also not in the figma file.

I have attached the figma link for the component in the PR description for your reference.

Should I still go ahead and implement them anyway?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Meet @SirhmVFX on slack to install it. he's @fullstackmechanic on slack

@Adelosoye-dev Adelosoye-dev requested a review from chumex412 July 20, 2024 23:09
@shalomtaiwo shalomtaiwo requested review from shalomtaiwo and removed request for kelani34 and chumex412 July 21, 2024 20:23
Copy link
Contributor

@shalomtaiwo shalomtaiwo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still didn't fix what was requested. Use Shadcn

@Adelosoye-dev
Copy link
Collaborator Author

i have made the changes

@mrcoded mrcoded merged commit 667c933 into hngprojects:dev Jul 21, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEAT] - Components → DialogBox
4 participants