@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
67 lines (65 loc) • 2.38 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { useTheme } from '../../theme';
var skeletonIconButtonStyles = css({
margin: 0,
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
border: 0,
borderRadius: "var(--ds-radius-full, 100%)",
pointerEvents: 'none',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':focus, :active, :hover': {
appearance: 'none',
border: 0,
outline: 0
},
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > span': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 'normal'
},
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > img': {
width: 24,
height: 24,
borderRadius: "var(--ds-radius-full, 100%)",
verticalAlign: 'middle'
}
});
var buttonWrapperStyles = css({
marginInlineEnd: "var(--ds-space-050, 4px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&:only-of-type': {
marginInlineEnd: 0
}
});
/**
* __Skeleton icon button__
*
* Skeleton buttons are lightweight HTML button elements with CSS that represent
* their heavier interactive counterparts, for use when elements of the
* navigation are loaded dynamically. This one represents a generic icon button.
*
* - [Examples](https://atlassian.design/components/atlassian-navigation/examples#skeleton-button)
* - [Code](https://atlassian.design/components/atlassian-navigation/code)
*/
export var SkeletonIconButton = function SkeletonIconButton(_ref) {
var children = _ref.children,
testId = _ref.testId;
var theme = useTheme();
return jsx("div", {
role: "listitem",
css: buttonWrapperStyles
}, jsx("button", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: theme.mode.iconButton.default,
"data-testid": testId,
css: skeletonIconButtonStyles,
type: "button"
}, children));
};