@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
60 lines (58 loc) • 2.11 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';
const skeletonCreateButtonStyles = css({
height: 32,
padding: `0 ${"var(--ds-space-150, 12px)"}`,
alignSelf: 'center',
border: 0,
borderRadius: "var(--ds-radius-small, 3px)",
font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
fontWeight: "var(--ds-font-weight-medium, 500)",
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, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&&': {
marginInlineStart: "var(--ds-space-150, 12px)"
}
});
const buttonWrapperStyles = css({
display: 'flex',
margin: 0
});
/**
* __Skeleton create 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 the Create button.
*
* - [Examples](https://atlassian.design/components/atlassian-navigation/examples#skeleton-button)
* - [Code](https://atlassian.design/components/atlassian-navigation/code)
*/
export const SkeletonCreateButton = ({
text,
testId
}) => {
const 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.create.default,
css: skeletonCreateButtonStyles,
"data-testid": testId,
type: "button"
}, text));
};