@atlaskit/icon
Version:
An icon is a symbol representing a command, device, directory, or common action.
182 lines (175 loc) • 6.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Icon = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
/**
* We are hiding this props from consumers as it's reserved
* for use by Icon Tile.
*/
var commonSVGStyles = (0, _react2.css)({
overflow: 'hidden',
pointerEvents: 'none',
/**
* Stop-color doesn't properly apply in chrome when the inherited/current color changes.
* We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
* rule) and then override it with currentColor for the color changes to be picked up.
*/
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
stop: {
stopColor: 'currentColor'
}
});
var svgStyles = (0, _react2.css)({
color: 'currentColor',
verticalAlign: 'bottom'
});
var iconStyles = (0, _react2.css)({
display: 'inline-block',
boxSizing: 'border-box',
flexShrink: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1,
paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
});
var utilityIconStyles = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "var(--ds-space-150, 12px)"
});
var scaleStyles = (0, _react2.css)({
width: 'inherit',
height: 'inherit'
});
/**
* For windows high contrast mode
*/
var baseHcmStyles = (0, _react2.css)({
'@media screen and (forced-colors: active)': {
color: 'CanvasText',
filter: 'grayscale(1)'
}
});
var scaleSize = (0, _react2.css)({
width: 'inherit',
height: 'inherit'
});
var sizeMap = {
core: {
none: (0, _react2.css)({
width: "var(--ds-space-200, 16px)",
height: "var(--ds-space-200, 16px)"
}),
spacious: (0, _react2.css)({
width: "var(--ds-space-300, 24px)",
height: "var(--ds-space-300, 24px)"
})
},
utility: {
none: (0, _react2.css)({
width: "var(--ds-space-150, 12px)",
height: "var(--ds-space-150, 12px)"
}),
compact: (0, _react2.css)({
width: "var(--ds-space-200, 16px)",
height: "var(--ds-space-200, 16px)"
}),
spacious: (0, _react2.css)({
width: "var(--ds-space-300, 24px)",
height: "var(--ds-space-300, 24px)"
})
}
};
var baseSizeMap = {
core: 16,
utility: 12
};
var paddingMap = {
core: {
none: 0,
spacious: 4
},
utility: {
none: 0,
compact: 2,
spacious: 6
}
};
/**
* __Icon__
*
* An icon is used as a visual representation of common actions and commands to provide context.
*
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
* - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
*/
var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
var _props$type, _props$spacing3, _props$spacing4;
var _ref = props,
_ref$color = _ref.color,
color = _ref$color === void 0 ? 'currentColor' : _ref$color,
testId = _ref.testId,
label = _ref.label,
LEGACY_primaryColor = _ref.LEGACY_primaryColor,
LEGACY_secondaryColor = _ref.LEGACY_secondaryColor,
LEGACY_size = _ref.LEGACY_size,
FallbackIcon = _ref.LEGACY_fallbackIcon,
dangerouslySetGlyph = _ref.dangerouslySetGlyph,
shouldScale = _ref.shouldScale,
LEGACY_margin = _ref.LEGACY_margin;
var dangerouslySetInnerHTML = dangerouslySetGlyph ? {
__html: dangerouslySetGlyph
} : undefined;
// Fall back to old icon
if (FallbackIcon && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
// parse out unnecessary props
return (0, _react2.jsx)(FallbackIcon, {
primaryColor: LEGACY_primaryColor !== null && LEGACY_primaryColor !== void 0 ? LEGACY_primaryColor : color,
secondaryColor: LEGACY_secondaryColor,
size: LEGACY_size,
label: label,
testId: testId
// @ts-ignore-next-line
,
UNSAFE_margin: LEGACY_margin
});
}
var baseSize = baseSizeMap[(_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'core'];
var viewBoxPadding;
if (props.type === 'utility') {
var _props$spacing;
viewBoxPadding = paddingMap[props.type][(_props$spacing = props.spacing) !== null && _props$spacing !== void 0 ? _props$spacing : 'none'];
} else {
var _props$spacing2;
viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
}
var viewBoxSize = baseSize + 2 * viewBoxPadding;
return (0, _react2.jsx)("span", {
"data-testid": testId,
role: label ? 'img' : undefined,
"aria-label": label ? label : undefined,
"aria-hidden": label ? undefined : true,
style: {
color: color
},
css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, props.type === 'utility' && utilityIconStyles]
}, (0, _react2.jsx)("svg", {
fill: "none"
// Adjusting the viewBox allows the icon padding to scale with the contents of the SVG, which
// we want for Icon Tile
,
viewBox: "".concat(0 - viewBoxPadding, " ").concat(0 - viewBoxPadding, " ").concat(viewBoxSize, " ").concat(viewBoxSize),
role: "presentation",
css: [commonSVGStyles, svgStyles, shouldScale ? scaleSize : props.type === 'utility' ? sizeMap[props.type][(_props$spacing3 = props.spacing) !== null && _props$spacing3 !== void 0 ? _props$spacing3 : 'none'] : sizeMap['core'][(_props$spacing4 = props.spacing) !== null && _props$spacing4 !== void 0 ? _props$spacing4 : 'none']],
dangerouslySetInnerHTML: dangerouslySetInnerHTML
}));
});
var _default = exports.default = Icon;