BugReport

Organism

The BugReport Modal is a variant of the main Modal component, used to report issues, errors, or unexpected behavior within the product. Its purpose is to provide users with a simple and structured way to submit bug reports directly from the interface.

This component inherits all the base structure and behavior of the Modal component (such as layout, overlay, and close interactions). The shared elements and guidelines for modals are documented on the Modal page.

This section focuses only on the specific elements and behaviors unique to the BugReport Modal, such as its dedicated input fields, form layout, and submission flow.

Playground

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

const openModal = defineModel<boolean>('openModal', {
  required: true,
  default: false
});

Properties

export type UserData = Record<'mail' | 'name', string>;

export interface BugReportProps extends ModalProps, TooltipProps, Partial<FileUploadProps> {
  getUserData?: boolean | (keyof UserData)[];
  showTooltip?: boolean;
  withFileUpload?: boolean;
  textAreaProps?: TextAreaProps;
  apiSubmitCallback: (bugReportDescription: string, userData?: UserData,
    attachmentFiles?: InputFile[]) => Promise<any>;
}

Dev Notes

This component uses Modal under the hood. Therefore its slots are also available for BugReport. Additionally, we introduced a formElements slot.

Slots

Slot	PropBinds	Default	Type	Notes
title	-	Fehler melden	string	Slot for the title of the modal
default	-	Bitte beschreiben Sie das Problem so detailliert wie möglich.	string	Slot for the description of the modal
formElements	bugReport, userData	TextArea, TextInputs	string, { mail: string, name: string }	Slot for the form elements of the modal.
actions	submit, userData, bugReport, isLoading	AppButton	function (that emits submit), { mail: string, name: string }, string, boolean	Slot for the actions of the modal.

Example Usage

<script setup lang="ts">
const pg: BugReportProps = reactive({
  modelValue: false,
  title: 'Modal title',
  closeOnClick: true,
  teleportTo: '#the-app-wrapper',
  getUserData: true
});

const handleClick = ({ bugReport, userData }:
  { bugReport: string, userData: { mail: string, name: string }}) => {

  // Some API Call logic

  pg.modelValue = false;
};
</script>

<template>
  <BugReport
    v-bind="pg" v-model="pg.modelValue" @submit="(bugReport, userData)
      => handleClick({bugReport, userData})">
      <template #title>
        <Heading :level="3">{{ someDynamicTitle }}</Heading>
      </template>
      <template #actions="{ bugReport, userData, submit }">
        <AppButton :text="'Send'" @click="submit" />
        <AppButton :text="'Cancel'" secondary @click="pg.modelValue = false" />
      </template>
    </BugReport>
  </template>

In this example, the title slot is used to set the title of the modal, and the actions slot is used to set the actions of the modal. The submit function is passed to the actions slot, which can be used to submit the form data. You can also use the bugReport and userData slot props from the actions slot to pass those directly to the event handler of your defined action (i.e. @click="eventHandler(bugReport, userData)" of AppButton)

Tokens

SCSS Variable

Value

$bugReport-color-elements--disabled

--color-lila-70

$bugReport-color-text--disabled

--color-grey-70

Anatomy

1. Instruction Text – Provides brief guidance on how to describe the issue and optionally attach a screenshot.
2. Text Area – Field for entering the bug description. Required and supports multiline input.
3. File Upload – Allows users to add screenshots or files (JPG/PNG, max 5 MB) via drag-and-drop or file selection.

States

Empty, Filled, Sending, Error, Feedback Success and Feedback Error.

Variants

Basic, + User Data, + File Upload, Full, Feedback