@gitlab/ui/dist/components/base/modal/modal.documentation.js

GitLab UI Components

import examples from './examples';

var description = "> Note: For this component to align with the design system specs, it will soon drop\n> the `GlDeprecatedButton` in favor of `GlButton`.\n> [#20229](https://gitlab.com/gitlab-org/gitlab/issues/202209) tracks this effort.\n\n# Modal\n\n<!-- STORY -->\n## Usage\nModals are used to reveal critical information, show information without losing context, or when the system requires a user response. Modals can also fragment a complex workflow into simpler steps and should serve a single purpose dedicated to completing the user’s task.\n\n## Deprecation Warning\nWe are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the `modal-footer` slot content is populated. This is in order to align this component with the design system.\n\nThe `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and `action-cancel`. These props allow you to handle how a primary, secondary and cancel button will behave in the modals footer. The props receive an object as such:\n~~~js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'info' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n~~~\n";

var modal_documentation = {
  description: description,
  examples: examples,
  slots: [{
    name: 'modal-header',
    description: 'Entire modal header container contents (including the close button on the top right corner)'
  }, {
    name: 'modal-title',
    description: 'Modal title. If modal-header slot is used, this slot will not be shown.'
  }, {
    name: 'modal-header-close',
    description: 'Content of Modal header close button. If modal-header slot is used, this slot will not be shown.'
  }, {
    name: 'modal-footer',
    description: 'Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary.'
  }],
  events: [{
    event: '@primary',
    description: 'Emitted when clicked on modal-action-primary'
  }, {
    event: '@secondary',
    description: 'Emitted when clicked on modal-action-secondary'
  }, {
    event: '@canceled',
    description: 'Emitted when clicked on modal-action-cancel'
  }]
};

export default modal_documentation;