@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
291 lines (288 loc) • 10.9 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css } from '@emotion/react';
import { fg } from '@atlaskit/platform-feature-flags';
var gridSize = 8;
var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
// ## Button layout
//
// /------------------------------------------------------------------------------------------------------------------\
// | → | ← | | → | ← | | → | ← | | → | ← |
// | 10px → | ← 2px | icon | 2px → | ← 2px | | 2px → | ← 2px | icon | 2px → | ← 10px |
// | padding | margin | before | margin | margin | content | margin | margin | after | margin | padding |
// | (12px total) | | (4px total) | | (4px total) | | (12px total) |
// | → | ← | | → | ← | | → | ← | | → | ← |
// \------------------------------------------------------------------------------------------------------------------/
// ↑ ↑
// Margins don't collapse with inline-flex
//
var heights = {
default: "".concat(32 / 14, "em"),
// 32px
compact: "".concat(24 / 14, "em"),
none: 'auto'
};
var lineHeights = {
default: heights.default,
compact: heights.compact,
none: 'inherit'
};
var padding = {
// 10px gutter
default: "0 ".concat(gridSize + gridSize / 4, "px"),
compact: "0 ".concat(gridSize + gridSize / 4, "px"),
none: '0'
};
var singleIconPadding = {
// 2px gutter
compact: "0 ".concat(gridSize / 4, "px"),
default: "0 ".concat(gridSize / 4, "px"),
none: '0'
};
var verticalAlign = {
default: 'middle',
compact: 'middle',
none: 'baseline'
};
var innerMargin = {
content: "0 ".concat(gridSize / 4, "px"),
icon: "0 ".concat(gridSize / 4, "px")
};
var defaultAfterStyles = {
borderRadius: 'inherit',
inset: "var(--ds-space-0, 0px)",
borderStyle: 'solid',
borderWidth: "var(--ds-border-width, 1px)",
pointerEvents: 'none',
position: 'absolute'
};
var defaultStyles = {
background: "var(--ds-background-neutral-subtle, #00000000)",
color: "var(--ds-text, #292A2E)",
'&::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
content: '""',
borderColor: "var(--ds-border, #0B120E24)"
}),
'&:hover': {
background: "var(--ds-background-neutral-hovered, #0B120E24)"
},
'&:active': {
background: "var(--ds-background-neutral-pressed, #080F214A)"
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: "var(--ds-background-neutral-subtle, #00000000)"
},
'&:disabled[disabled]': {
background: "var(--ds-background-neutral-subtle, #00000000)"
},
'&:disabled[disabled]:hover': {
background: "var(--ds-background-neutral-subtle, #00000000)"
},
'&:disabled[disabled]:active': {
background: "var(--ds-background-neutral-subtle, #00000000)"
}
};
var primaryStyles = {
background: "var(--ds-background-brand-bold, #1868DB)",
color: "var(--ds-text-inverse, #FFFFFF)",
'&:hover': {
background: "var(--ds-background-brand-bold-hovered, #1558BC)"
},
'&:active': {
background: "var(--ds-background-brand-bold-pressed, #144794)"
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: "var(--ds-background-brand-bold, #1868DB)"
}
};
var linkStyles = {
background: 'transparent',
color: "var(--ds-link, #1868DB)",
'&:hover': {
color: "var(--ds-link, #1868DB)",
textDecoration: 'underline'
},
'&:active': {
color: "var(--ds-link-pressed, #1558BC)",
textDecoration: 'underline'
}
};
var subtleStyles = {
background: 'transparent',
color: "var(--ds-text-subtle, #505258)",
'&:hover': {
background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
},
'&:active': {
background: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: 'transparent'
}
};
var subtleLinkStyles = {
background: 'transparent',
color: "var(--ds-text-subtle, #505258)",
'&:hover': {
background: 'transparent',
color: "var(--ds-text-subtle, #505258)",
textDecoration: 'underline'
},
'&:active': {
background: 'transparent',
color: "var(--ds-text, #292A2E)",
textDecoration: 'underline'
}
};
var warningStyles = {
background: "var(--ds-background-warning-bold, #FBC828)",
color: "var(--ds-text-warning-inverse, #292A2E)",
'&:hover': {
background: "var(--ds-background-warning-bold-hovered, #FCA700)"
},
'&:active': {
background: "var(--ds-background-warning-bold-pressed, #F68909)"
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: "var(--ds-background-warning-bold, #FBC828)"
}
};
var dangerStyles = {
background: "var(--ds-background-danger-bold, #C9372C)",
color: "var(--ds-text-inverse, #FFFFFF)",
'&:hover': {
background: "var(--ds-background-danger-bold-hovered, #AE2E24)"
},
'&:active': {
background: "var(--ds-background-danger-bold-pressed, #872821)"
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: "var(--ds-background-danger-bold, #C9372C)"
}
};
var selectedStyles = {
background: "var(--ds-background-selected, #E9F2FE)",
color: "var(--ds-text-selected, #1868DB)",
'&:not([disabled])::after': _objectSpread(_objectSpread({}, defaultAfterStyles), {}, {
content: '""',
borderColor: "var(--ds-border-selected, #1868DB)"
})
};
var hasOverlayStyles = {
'&[data-has-overlay="true"]': {
cursor: 'default',
textDecoration: 'none'
}
};
export function getCss(_ref) {
var appearance = _ref.appearance,
spacing = _ref.spacing,
isSelected = _ref.isSelected,
shouldFitContainer = _ref.shouldFitContainer,
isOnlySingleIcon = _ref.isOnlySingleIcon;
return _objectSpread(_objectSpread({
// 0px margin added to css-reset
alignItems: 'baseline',
borderWidth: 0,
borderRadius: fg('platform-dst-shape-theme-default') ? "var(--ds-radius-medium, 6px)" : "var(--ds-radius-small, 3px)",
boxSizing: 'border-box',
display: 'inline-flex',
fontSize: 'inherit',
fontStyle: 'normal',
// Chrome recently changed button so that they use 'arial' as the font family
fontFamily: 'inherit',
fontWeight: "var(--ds-font-weight-medium, 500)",
// margin for button has been applied to css reset
maxWidth: '100%',
// Needed to position overlay
position: 'relative',
textAlign: 'center',
textDecoration: 'none',
transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
whiteSpace: 'nowrap',
cursor: 'pointer',
height: heights[spacing],
lineHeight: lineHeights[spacing],
padding: isOnlySingleIcon ? singleIconPadding[spacing] : padding[spacing],
verticalAlign: verticalAlign[spacing],
width: shouldFitContainer ? '100%' : 'auto',
// justifyContent required for shouldFitContainer buttons with an icon inside
justifyContent: 'center'
}, isSelected ? selectedStyles : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultStyles), appearance === 'primary' && primaryStyles), appearance === 'link' && linkStyles), appearance === 'subtle' && subtleStyles), appearance === 'subtle-link' && subtleLinkStyles), appearance === 'warning' && warningStyles), appearance === 'danger' && dangerStyles), {}, {
'&[disabled]': {
color: "var(--ds-text-disabled, #080F214A)",
backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #17171708)" : 'transparent',
cursor: 'not-allowed',
textDecoration: 'none',
'&:hovered': {
backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #17171708)" : 'transparent'
},
'&:active': {
backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #17171708)" : 'transparent'
}
}
}, hasOverlayStyles)), {}, {
'&::-moz-focus-inner': {
border: 0,
margin: 0,
padding: 0
}
});
}
// inline-flex child
export function getIconStyle(_ref2) {
var spacing = _ref2.spacing;
return css({
display: 'flex',
// icon size cannot grow and shrink
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
margin: spacing === 'none' ? 0 : innerMargin.icon,
flexGrow: 0,
flexShrink: 0,
alignSelf: 'center',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 0,
userSelect: 'none'
});
}
// inline-flex child
export function getContentStyle(_ref3) {
var spacing = _ref3.spacing;
return css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
margin: spacing === 'none' ? 0 : innerMargin.content,
// content can grow and shrink
flexGrow: 1,
flexShrink: 1,
// ellipsis for overflow text
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
});
}
export function getFadingCss(_ref4) {
var hasOverlay = _ref4.hasOverlay;
return css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
opacity: hasOverlay ? 0 : 1,
transition: 'opacity 0.3s'
});
}
export var overlayCss = {
// stretching to full width / height of button
// this is important as we need it to still block
// event if clicking in the button's own padding
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
// Putting all children in the center
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};