@atlaskit/inline-message
Version:
An inline message lets users know when important information is available or when an action is required.
128 lines (126 loc) • 3.88 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import Button from '@atlaskit/button';
import InlineDialog from '@atlaskit/inline-dialog';
import { Inline, Text } from '@atlaskit/primitives';
import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
import MessageIcon from '../message-icon';
const rootStyles = css({
display: 'inline-block',
maxWidth: '100%',
'&:focus': {
outline: '1px solid'
},
'&:hover': {
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'[data-ds--inline-message--icon]': {
// Legacy style
color: 'var(--icon-accent-color)'
},
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'[data-ds--inline-message--button]': {
textDecoration: 'underline'
}
}
});
const iconColor = appearance => {
switch (appearance) {
case 'connectivity':
return `var(--ds-icon-brand, ${B300})`;
case 'confirmation':
return `var(--ds-icon-success, ${G200})`;
case 'info':
return `var(--ds-icon-discovery, ${P200})`;
case 'warning':
return `var(--ds-icon-warning, ${Y200})`;
case 'error':
return `var(--ds-icon-danger, ${R300})`;
}
};
/**
* __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>
* );
* ```
*/
const InlineMessage = ({
placement = 'bottom-start',
secondaryText = '',
title = '',
type = 'connectivity',
appearance,
children,
testId,
iconLabel
}) => {
const [isOpen, setIsOpen] = useState(false);
const toggleDialog = useCallback(() => {
setIsOpen(oldState => !oldState);
}, [setIsOpen]);
const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
if (!appearance) {
appearance = type;
}
return jsx("div", {
css: rootStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: {
'--icon-accent-color': iconColor(appearance)
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
},
"data-testid": testId
}, jsx(InlineDialog, {
onClose: onCloseDialog,
content: children,
isOpen: isOpen,
placement: placement,
testId: testId && `${testId}--inline-dialog`
}, jsx(Button, {
"data-ds--inline-message--button": true,
appearance: "subtle-link",
onClick: toggleDialog,
spacing: "none",
testId: testId && `${testId}--button`,
"aria-expanded": isOpen
}, jsx(Inline, {
space: "space.050",
alignBlock: "center"
}, jsx(MessageIcon, {
isOpen: isOpen,
appearance: appearance,
label: iconLabel
}), jsx(Inline, {
space: "space.100"
}, title && jsx(Text, {
weight: "medium",
testId: testId && `${testId}--title`
}, title), secondaryText && jsx(Text, {
weight: "medium",
color: "color.text.subtlest",
maxLines: 1,
testId: testId && `${testId}--text`
}, secondaryText))))));
};
export default InlineMessage;