@octopusdeploy/design-system-components
Version:
The design systems component library.
75 lines (74 loc) • 3.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tag = Tag;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const useObserveElementSize_1 = require("../../hooks/useObserveElementSize");
const utils_1 = require("../../utils");
const Tooltip_1 = require("../Tooltip/Tooltip");
function Tag({ label, prefix, onDismiss }) {
const [tagElement, setTagElement] = (0, react_1.useState)(null);
const labelRef = (0, react_1.useRef)(null);
const [enableTooltip, setEnableTooltip] = (0, react_1.useState)(false);
(0, useObserveElementSize_1.useObserveElementSize)(tagElement, () => {
if (!labelRef.current)
return;
const { clientWidth, scrollWidth } = labelRef.current;
setEnableTooltip(clientWidth < scrollWidth);
});
const dismissButton = onDismiss ? ((0, jsx_runtime_1.jsx)("button", { className: styles.dismissButton, onClick: onDismiss, "aria-label": `Remove ${label}`, children: (0, jsx_runtime_1.jsx)(design_system_icons_1.XmarkIcon, { size: 20 }) })) : undefined;
const tag = ((0, jsx_runtime_1.jsxs)("div", { ref: setTagElement, className: styles.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles.labelContainer, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("span", { ref: labelRef, className: styles.label, children: label })] }), dismissButton] }));
return enableTooltip ? (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: label, children: tag }) : tag;
}
const styles = {
root: (0, css_1.css)({
boxSizing: "border-box",
display: "inline-flex",
maxWidth: 180,
borderRadius: design_system_tokens_1.borderRadius.small,
background: design_system_tokens_1.themeTokens.color.tag.background.default,
overflow: "clip",
}),
labelContainer: (0, css_1.css)({
display: "inline-flex",
minWidth: 0,
alignItems: "center",
gap: design_system_tokens_1.space[6],
padding: `${design_system_tokens_1.space[4]} ${design_system_tokens_1.space[6]}`,
}),
prefix: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.icon.primary,
}),
label: (0, css_1.css)({
flex: 1,
minWidth: 0,
color: design_system_tokens_1.themeTokens.color.text.primary,
overflow: "clip",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
font: design_system_tokens_1.text.body.regular.medium,
}),
dismissButton: (0, css_1.css)({
...utils_1.resetStyles.button,
padding: `${design_system_tokens_1.space[4]} ${design_system_tokens_1.space[6]}`,
color: design_system_tokens_1.themeTokens.color.icon.link.default,
transitionTimingFunction: "ease-in-out",
transitionProperty: "background-color, color",
transitionDuration: "0.2s",
":hover": {
backgroundColor: design_system_tokens_1.themeTokens.color.tag.background.hover,
color: design_system_tokens_1.themeTokens.color.icon.link.hover,
},
":active": {
backgroundColor: design_system_tokens_1.themeTokens.color.tag.background.hover,
color: design_system_tokens_1.themeTokens.color.icon.link.hover,
},
":focus-visible": {
outline: `${design_system_tokens_1.borderWidth[2]} solid ${design_system_tokens_1.themeTokens.color.border.selected}`,
outlineOffset: `-${design_system_tokens_1.borderWidth[2]}`,
},
}),
};