npm package: @highlight-ui/dialog
Description: This is Dialog component used in Personio
Author: Personio GmbH & Co. KG
Latest version: 9.4.2

[![npm](https://img.shields.io/npm/v/@highlight-ui/dialog)](https://www.npmjs.com/package/@highlight-ui/dialog)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/954aa0-dialog/b/54f508)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-dialog--default-dialog)

# @highlight-ui/dialog

## Installation

Using npm:

```bash
npm install @highlight-ui/dialog
```

Using yarn:

```bash
yarn add @highlight-ui/dialog
```

Using pnpm:

```bash
pnpm install @highlight-ui/dialog
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/dialog');
```

Once the package is installed, you can import the library:

```ts
import { Dialog } from '@highlight-ui/dialog';
```

## Usage

```tsx
import React, { useState } from 'react';
import { Dialog, Modal } from '@highlight-ui/dialog';

export default function DialogExample() {
  return (
    <div>
      <Button
        variant="emphasized"
        onClick={() => {
          setIsDialogOpen(true);
        }}
      >
        Show dialog
      </Button>

      <Dialog
        title={title}
        open={isDialogOpen}
        size="small"
        variant="default"
        primaryButton={{
          buttonLabel: 'Confirm',
          buttonState: 'default',
        }}
        secondaryButtons={[
          {
            buttonLabel: 'Cancel',
            buttonState: 'default',
          },
        ]}
      />
    </div>
  );
}
```

## Props 📜

### Dialog

> Dialog props extend the Modal props below

| Prop               | Type                                                                                                                                                                 | Required | Default   | Description                                                                                             |
| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :-------- | :------------------------------------------------------------------------------------------------------ |
| `title`            | `string`                                                                                                                                                             | Yes      |           | Sets the title of the dialog                                                                            |
| `labelledBy`       | `string`                                                                                                                                                             | No       |           | Sets the reference to the `aria-labelledby` attribute. It'll add a default value if not present.        |
| `describedBy`      | `string`                                                                                                                                                             | No       |           | Sets the reference to the `aria-describedby` attribute                                                  |
| `variant`          | `'default', 'destructive'`                                                                                                                                           | No       | `default` | `default` is used for regular interactions and `destructive` is usually for destructing (e.g. deletion) |
| `size`             | `'small', 'medium', 'large'`                                                                                                                                         | No       | `small`   | Sets the width of the dialog                                                                            |
| `primaryButton`    | [`DialogActionButtonProps`](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/dialog/src/Dialog.tsx?ref_type=heads#L20)   | No       |           | Configures the label/icon and behaviour of the primary action button                                    |
| `secondaryButtons` | [`DialogActionButtonProps[]`](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/dialog/src/Dialog.tsx?ref_type=heads#L20) | No       |           | Configures the label/icon and behaviour of the secondary action buttons                                 |

### Modal

| Prop                  | Type          | Required | Default | Description                                             |
| :-------------------- | :------------ | :------- | :------ | :------------------------------------------------------ |
| `open`                | `boolean`     | Yes      | `false` | Specifies whether the `Dialog` is mounted and displayed |
| `className`           | `string`      | No       |         | Allows providing a custom class name                    |
| `initialFocusElement` | `HTMLElement` | No       |         | Specifies an initial focused HTML element               |
| `onRequestToClose`    | `() => void`  | No       |         | Gets called when the close or cancel button is pressed  |
| `onClose`             | `() => void`  | No       |         | Gets called after the `Dialog` is closed                |
| `onOpen`              | `() => void`  | No       |         | Gets called after the `Dialog` is opened                |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/954aa0-dialog/b/54f508) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).