@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
108 lines (106 loc) • 3.72 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import ChevronRight from '@atlaskit/icon/core/chevron-right';
import { easeOut } from '@atlaskit/motion/curves';
import { durations } from '@atlaskit/motion/durations';
import { UNSAFE_media } from '@atlaskit/primitives/responsive';
import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
const hitAreaSpanStyles = css({
position: 'absolute',
insetBlockEnd: `${"var(--ds-space-negative-300, -24px)"}`,
insetBlockStart: `${"var(--ds-space-negative-300, -24px)"}`,
insetInlineEnd: `${"var(--ds-space-negative-150, -12px)"}`,
insetInlineStart: `${"var(--ds-space-negative-100, -8px)"}`
});
const mobileStyles = css({
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles -- Ignored via go/DSP-18766
[UNSAFE_media.below.sm]: {
opacity: 1
}
});
const resizeIconButtonStyles = css({
width: 24,
height: 24,
padding: "var(--ds-space-0, 0px)",
position: 'absolute',
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
border: 0,
borderRadius: "var(--ds-radius-full, 50%)",
boxShadow: `0 0 0 1px ${'rgba(9, 30, 66, 0.08)'}, 0 2px 4px 1px ${'rgba(9, 30, 66, 0.08)'}`,
color: "var(--ds-text-subtle, #505258)",
cursor: 'pointer',
insetBlockStart: "var(--ds-space-400, 32px)",
insetInlineStart: 0,
/**
* The fallback value of 0 ensures that the button is hidden by default,
* unless some parent (or the button itself) overrides it.
*/
opacity: `var(--ds--resize-button--opacity,0)`,
outline: 0,
transform: 'translateX(-50%)',
transition: `
background-color ${durations.small}ms linear,
color ${durations.small}ms linear,
opacity ${durations.medium}ms ${easeOut}
`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':hover': {
backgroundColor: "var(--ds-background-selected-bold, #1868DB)",
color: "var(--ds-text-inverse, #FFFFFF)",
opacity: 1
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':active, :focus': {
backgroundColor: "var(--ds-background-selected-bold-hovered, #1558BC)",
color: "var(--ds-text-inverse, #FFFFFF)",
opacity: 1
}
});
const resizeIconButtonExpandedStyles = css({
transform: 'rotate(180deg)',
transformOrigin: 7
});
const preventDefault = event => event.preventDefault();
const cssSelector = {
[RESIZE_BUTTON_SELECTOR]: true
};
const ResizeButton = ({
isLeftSidebarCollapsed,
label,
onClick,
testId,
...props
}) => {
// Extract css from props if it exists to avoid conflicts
const {
css: _ignoredCss,
...restProps
} = props;
return jsx("button", _extends({}, cssSelector, {
// DO NOT remove. used as a CSS selector.
"aria-expanded": !isLeftSidebarCollapsed,
"aria-label": label,
type: "button",
css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
"data-testid": testId
// Prevents focus staying attached to the button when pressed
,
onMouseDown: preventDefault,
onClick: onClick
}, restProps), jsx(ChevronRight, {
label: "",
color: "currentColor",
size: "small"
}), jsx("span", {
css: hitAreaSpanStyles
}));
};
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default ResizeButton;