@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
73 lines • 2.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef } from 'react';
import Button from '@atlaskit/button/custom-theme-button';
import Tooltip from '@atlaskit/tooltip';
import { useTheme } from '../../theme';
import { getIconButtonTheme } from './styles';
/**
* __Icon button__
*
* An icon button is used to create navigation items such as Help, Settings
* and Notifications. You can use this component to create your own items to
* pass into `AtlassianNavigation`'s render props, but where possible you should
* rely on the defaults.
*
* @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
export const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
const {
icon,
label,
testId,
tooltip,
component,
href,
id,
isDisabled,
isSelected,
onBlur,
onClick,
onFocus,
onMouseDown,
onMouseEnter,
onMouseLeave,
onMouseUp,
target,
theme,
isTooltipAnnouncementDisabled = false,
...rest
} = props;
const themeFromContext = useTheme();
const button = /*#__PURE__*/React.createElement(Button, _extends({
appearance: "primary",
"aria-label": label,
component: component,
href: href,
iconBefore: icon,
id: id,
isDisabled: isDisabled,
isSelected: isSelected,
onBlur: onBlur,
onClick: onClick,
onFocus: onFocus,
onMouseDown: onMouseDown,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onMouseUp: onMouseUp,
ref: ref,
target: target,
testId: testId
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
,
theme: theme || getIconButtonTheme(themeFromContext)
// These are all explicit, leaving it in just in case
}, rest));
if (tooltip) {
return /*#__PURE__*/React.createElement(Tooltip, {
content: tooltip,
hideTooltipOnClick: true,
isScreenReaderAnnouncementDisabled: isTooltipAnnouncementDisabled
}, button);
}
return button;
});