@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
314 lines (312 loc) • 13.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getCss = getCss;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
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) { (0, _defineProperty2.default)(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
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)"
},
'&: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)"
})
};
/**
* Anchor-text-color variants applied when the legacy `Button` is rendered as
* an `<a>` (via `href`). Each `<variant>WithAnchorTextColorStyles` is a
* self-contained appearance object that adds explicit `color` /
* `text-decoration` on the base, `:hover`, and `:active` states, preventing
* browser default or ambient anchor styles from overriding the button's
* intended text color or adding an unwanted underline.
*
* Gated by `platform-dst-legacy-button-anchor-text-color` and used *instead*
* of the base `<variant>Styles`. When cleaning up the gate: delete the base
* `<variant>Styles` and rename the `WithAnchorTextColor` variant to replace
* it.
*
* Link-like variants (`link`, `subtle-link`) keep their intentional underline
* on `:hover` / `:active`.
*/
var defaultWithAnchorTextColorStyles = _objectSpread(_objectSpread({}, defaultStyles), {}, {
textDecoration: 'none',
'&:hover': _objectSpread(_objectSpread({}, defaultStyles['&:hover']), {}, {
color: "var(--ds-text, #292A2E)",
textDecoration: 'none'
}),
'&:active': _objectSpread(_objectSpread({}, defaultStyles['&:active']), {}, {
color: "var(--ds-text, #292A2E)",
textDecoration: 'none'
})
});
var primaryWithAnchorTextColorStyles = _objectSpread(_objectSpread({}, primaryStyles), {}, {
textDecoration: 'none',
'&:hover': _objectSpread(_objectSpread({}, primaryStyles['&:hover']), {}, {
color: "var(--ds-text-inverse, #FFFFFF)",
textDecoration: 'none'
}),
'&:active': _objectSpread(_objectSpread({}, primaryStyles['&:active']), {}, {
color: "var(--ds-text-inverse, #FFFFFF)",
textDecoration: 'none'
})
});
var linkWithAnchorTextColorStyles = _objectSpread(_objectSpread({}, linkStyles), {}, {
textDecoration: 'none'
});
var subtleWithAnchorTextColorStyles = _objectSpread(_objectSpread({}, subtleStyles), {}, {
textDecoration: 'none',
'&:hover': _objectSpread(_objectSpread({}, subtleStyles['&:hover']), {}, {
color: "var(--ds-text-subtle, #505258)",
textDecoration: 'none'
}),
'&:active': _objectSpread(_objectSpread({}, subtleStyles['&:active']), {}, {
color: "var(--ds-text-subtle, #505258)",
textDecoration: 'none'
})
});
var subtleLinkWithAnchorTextColorStyles = _objectSpread(_objectSpread({}, subtleLinkStyles), {}, {
textDecoration: 'none'
});
var warningWithAnchorTextColorStyles = _objectSpread(_objectSpread({}, warningStyles), {}, {
textDecoration: 'none',
'&:hover': _objectSpread(_objectSpread({}, warningStyles['&:hover']), {}, {
color: "var(--ds-text-warning-inverse, #292A2E)",
textDecoration: 'none'
}),
'&:active': _objectSpread(_objectSpread({}, warningStyles['&:active']), {}, {
color: "var(--ds-text-warning-inverse, #292A2E)",
textDecoration: 'none'
})
});
var dangerWithAnchorTextColorStyles = _objectSpread(_objectSpread({}, dangerStyles), {}, {
textDecoration: 'none',
'&:hover': _objectSpread(_objectSpread({}, dangerStyles['&:hover']), {}, {
color: "var(--ds-text-inverse, #FFFFFF)",
textDecoration: 'none'
}),
'&:active': _objectSpread(_objectSpread({}, dangerStyles['&:active']), {}, {
color: "var(--ds-text-inverse, #FFFFFF)",
textDecoration: 'none'
})
});
var hasOverlayStyles = {
'&[data-has-overlay="true"]': {
cursor: 'default',
textDecoration: 'none'
}
};
function getCss(_ref) {
var appearance = _ref.appearance,
spacing = _ref.spacing,
isSelected = _ref.isSelected,
shouldFitContainer = _ref.shouldFitContainer,
isOnlySingleIcon = _ref.isOnlySingleIcon;
var baseAppearanceStyles = (0, _fg.fg)('platform-dst-legacy-button-anchor-text-color') ? _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, appearance === 'default' && defaultWithAnchorTextColorStyles), appearance === 'primary' && primaryWithAnchorTextColorStyles), appearance === 'link' && linkWithAnchorTextColorStyles), appearance === 'subtle' && subtleWithAnchorTextColorStyles), appearance === 'subtle-link' && subtleLinkWithAnchorTextColorStyles), appearance === 'warning' && warningWithAnchorTextColorStyles), appearance === 'danger' && dangerWithAnchorTextColorStyles) : _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' && (0, _fg.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: (0, _fg.fg)('platform-dst-motion-uplift-button') ? "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)") : '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({}, appearanceStyles), activeStyles && (0, _fg.fg)('platform-dst-motion-uplift-button') && {
'&: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
}
});
}