@atlaskit/inline-message
Version:
An inline message lets users know when important information is available or when an action is required.
77 lines (76 loc) • 2.75 kB
TypeScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { type FC, type ReactNode } from 'react';
import type { IconAppearance, InlineDialogPlacement } from '../../types';
interface InlineMessageProps {
/**
* The elements to be displayed by the inline dialog.
*/
children?: ReactNode;
/**
* The placement to be passed to the inline dialog. Determines where around
* the text the dialog is displayed.
*/
placement?: InlineDialogPlacement;
/**
* Text to display second.
*/
secondaryText?: ReactNode;
/**
* Text to display first, bolded for emphasis.
*/
title?: ReactNode;
/**
* Set the icon to be used before the title. Options are: connectivity,
* confirmation, info, warning, and error.
*/
appearance?: IconAppearance;
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-162 Internal documentation for deprecation (no external access)} Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-5207 for more information.
* Instead use the 'appearance' prop.
* Set the icon to be used before the title.
*/
type?: IconAppearance;
/**
* A unique string that appears as a data attribute, `data-testid`,
* in the rendered code. It is provided to serve as a hook for automated tests.
*
* The value of `testId` is attached to the different sub-components in Inline Message:
* - `testId`: the top-level inline message component
* - `testId--inline-dialog`: the content of the message
* - `testId--button`: the button element that opens the dialog on press
* - `testId--title`: the title of the message
* - `testId--text`: the text of the message
*/
testId?: string;
/**
* Text to be used as the label for the button icon. You must use this to provide information for people who use assistive technology when there is no title and/or secondaryText.
*/
iconLabel?: string;
}
/**
* __Inline message__
*
* An inline message lets users know when important information is available or when an action is required.
*
* - [Examples](https://atlassian.design/components/inline-message/examples)
* - [Code](https://atlassian.design/components/inline-message/code)
* - [Usage](https://atlassian.design/components/inline-message/usage)
*
* @example
*
* ```jsx
* const Component = () => (
* <InlineMessage
* title="Inline Message Title Example"
* secondaryText="Secondary Text"
* >
* <p>Some text that would be inside the open dialog and otherwise hidden.</p>
* </InlineMessage>
* );
* ```
*/
declare const InlineMessage: FC<InlineMessageProps>;
export default InlineMessage;