@atlaskit/flag
Version:
A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.
81 lines (80 loc) • 4.49 kB
JavaScript
/* flag-actions.tsx generated by @compiled/babel-plugin v3.0.2 */
/* eslint-disable @atlaskit/design-system/no-nested-styles */
import "./flag-actions.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import Button from '@atlaskit/button/custom-theme-button/custom-theme-button';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Inline } from '@atlaskit/primitives/compiled';
import { actionTextColor } from './action-text-color';
import { DEFAULT_APPEARANCE } from './constants';
import { actionBackgroundColor } from './theme';
const buttonStylesOld = null;
const buttonStyles = null;
const fontStyles = null;
const appearanceNormalButtonStyles = null;
const appearanceBoldButtonStyles = null;
const appearanceNormalActionsContainerStyles = null;
const FlagActions = props => {
const {
appearance = DEFAULT_APPEARANCE,
actions = [],
linkComponent,
testId
} = props;
if (!actions.length) {
return null;
}
const isBold = appearance !== DEFAULT_APPEARANCE;
return /*#__PURE__*/React.createElement("span", {
className: ax([!isBold && "_1g4l107e _y8dn107e", "_11c8fhey"])
}, /*#__PURE__*/React.createElement(Inline, {
space: "space.100",
shouldWrap: true,
alignBlock: "center",
separator: isBold ? undefined : '·',
testId: testId && `${testId}-actions`
}, actions.map((action, index) => fg('platform_dst_flag_action_padding_fix') ? /*#__PURE__*/React.createElement(Button, {
onClick: action.onClick,
href: action.href,
target: action.target,
appearance: isBold ? 'default' : 'link',
component: linkComponent,
spacing: "compact",
testId: action.testId,
key: index,
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
'--color': actionTextColor[appearance],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
'--bg-color': actionBackgroundColor[appearance].default,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
'--bg-color-hover': actionBackgroundColor[appearance].pressed,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
'--bg-color-active': actionBackgroundColor[appearance].active
},
className: ax(["_nup91zz4 _u4iq1zz4 _1w901pkf _qkwg1pkf _12r21wq8 _il101wq8 _ow071r31 _1p6b1r31 _8dbm1r31 _77mc1r31 _17rj8stv _1p6m8stv _5kwq8stv _1pd88stv _1iqunqa1 _1ejunqa1 _b6ztnqa1 _1rsgnqa1 _u1mb14jz _10fu17w4", isBold ? "_1dltgrf3 _h03xgrf3 _w8sq1a66 _1iys1a66 _fjwrgrf3 _cwkngrf3 _1yxx1a66 _z7cd1a66" : "_1dltgrf3 _h03xgrf3 _w8sqgrf3 _1iysgrf3 _fjwrgrf3 _cwkngrf3 _1yxxgrf3 _z7cdgrf3"])
}, action.content) : /*#__PURE__*/React.createElement(Button, {
onClick: action.onClick,
href: action.href,
target: action.target,
appearance: isBold ? 'default' : 'link',
component: linkComponent,
spacing: "compact",
testId: action.testId,
key: index,
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
'--color': actionTextColor[appearance],
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
'--bg-color': actionBackgroundColor[appearance].default,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
'--bg-color-hover': actionBackgroundColor[appearance].pressed,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
'--bg-color-active': actionBackgroundColor[appearance].active
},
className: ax(["_nup91zz4 _u4iq1zz4 _1w901pkf _qkwg1pkf _12r21wq8 _il101wq8 _1ku2grf3 _1v8mgrf3 _gbuigrf3 _1dwvgrf3 _1bk61a66 _1wy61a66 _b3g31a66 _eqps1a66 _ow071r31 _1p6b1r31 _8dbm1r31 _77mc1r31 _17rj8stv _1p6m8stv _5kwq8stv _1pd88stv _1iqunqa1 _1ejunqa1 _b6ztnqa1 _1rsgnqa1 _u1mb14jz _10fu17w4", !isBold && "_1dltgrf3 _h03xgrf3 _w8sqgrf3 _1iysgrf3 _fjwrgrf3 _cwkngrf3 _1yxxgrf3 _z7cdgrf3"])
}, action.content))));
};
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default FlagActions;