@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
258 lines (257 loc) • 9.78 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 { fg } from '@atlaskit/platform-feature-flags/fg';
var gridSize = 8;
var HAS_DISABLED_BACKGROUND = ['default', 'primary', 'danger', 'warning'];
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 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)",
color: "var(--ds-text, #292A2E)",
textDecoration: 'none'
},
'&:active': {
background: "var(--ds-background-neutral-pressed, #080F214A)",
color: "var(--ds-text, #292A2E)",
textDecoration: 'none'
},
'&[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)"
},
textDecoration: 'none'
};
var primaryStyles = {
background: "var(--ds-background-brand-bold, #1868DB)",
color: "var(--ds-text-inverse, #FFFFFF)",
'&:hover': {
background: "var(--ds-background-brand-bold-hovered, #1558BC)",
color: "var(--ds-text-inverse, #FFFFFF)",
textDecoration: 'none'
},
'&:active': {
background: "var(--ds-background-brand-bold-pressed, #144794)",
color: "var(--ds-text-inverse, #FFFFFF)",
textDecoration: 'none'
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: "var(--ds-background-brand-bold, #1868DB)"
},
textDecoration: 'none'
};
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'
},
textDecoration: 'none'
};
var subtleStyles = {
background: 'transparent',
color: "var(--ds-text-subtle, #505258)",
'&:hover': {
background: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
color: "var(--ds-text-subtle, #505258)",
textDecoration: 'none'
},
'&:active': {
background: "var(--ds-background-neutral-subtle-pressed, #0B120E24)",
color: "var(--ds-text-subtle, #505258)",
textDecoration: 'none'
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: 'transparent'
},
textDecoration: 'none'
};
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'
},
textDecoration: 'none'
};
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)",
color: "var(--ds-text-warning-inverse, #292A2E)",
textDecoration: 'none'
},
'&:active': {
background: "var(--ds-background-warning-bold-pressed, #F68909)",
color: "var(--ds-text-warning-inverse, #292A2E)",
textDecoration: 'none'
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: "var(--ds-background-warning-bold, #FBC828)"
},
textDecoration: 'none'
};
var dangerStyles = {
background: "var(--ds-background-danger-bold, #C9372C)",
color: "var(--ds-text-inverse, #FFFFFF)",
'&:hover': {
background: "var(--ds-background-danger-bold-hovered, #AE2E24)",
color: "var(--ds-text-inverse, #FFFFFF)",
textDecoration: 'none'
},
'&:active': {
background: "var(--ds-background-danger-bold-pressed, #872821)",
color: "var(--ds-text-inverse, #FFFFFF)",
textDecoration: 'none'
},
'&[data-has-overlay="true"]:not([disabled]):hover': {
background: "var(--ds-background-danger-bold, #C9372C)"
},
textDecoration: 'none'
};
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;
var baseAppearanceStyles = _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);
var appearanceStyles = appearance === 'default' && fg('platform-dst-tokens-finesse') ? _objectSpread(_objectSpread({}, baseAppearanceStyles), {}, {
'&:hover': _objectSpread(_objectSpread({}, baseAppearanceStyles['&:hover']), {}, {
background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
}),
'&:active': _objectSpread(_objectSpread({}, baseAppearanceStyles['&:active']), {}, {
background: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
})
}) : baseAppearanceStyles;
var activeStyles = appearanceStyles['&:active'];
return _objectSpread(_objectSpread({
// 0px margin added to css-reset
alignItems: 'baseline',
borderWidth: 0,
borderRadius: "var(--ds-radius-medium, 6px)",
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: "var(--ds-button-hovered, background-color border-color 150ms cubic-bezier(0.4, 1, 0.6, 1))".concat(", 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({}, appearanceStyles), activeStyles && {
'&:active': _objectSpread(_objectSpread({}, activeStyles), {}, {
transition: "var(--ds-button-pressed, background-color border-color 150ms cubic-bezier(0.4, 1, 0.6, 1))"
})
}), {}, {
'&[disabled]': {
color: "var(--ds-text-disabled, #080F214A)",
backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #0515240F)" : 'transparent',
cursor: 'not-allowed',
textDecoration: 'none',
'&:hovered': {
backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #0515240F)" : 'transparent'
},
'&:active': {
backgroundColor: HAS_DISABLED_BACKGROUND.includes(appearance) ? "var(--ds-background-disabled, #0515240F)" : 'transparent'
}
}
}, hasOverlayStyles)), {}, {
'&::-moz-focus-inner': {
border: 0,
margin: 0,
padding: 0
}
});
}