@grafana/ui
Version:
Grafana Components Library
59 lines (54 loc) • 1.98 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');
"use strict";
const InlineLabel = ({
children,
className,
tooltip,
width,
transparent,
interactive,
as: Component = "label",
...rest
}) => {
const styles = ThemeContext.useStyles2(getInlineLabelStyles, transparent, width);
return /* @__PURE__ */ jsxRuntime.jsxs(Component, { className: css.cx(styles.label, className), ...rest, children: [
children,
tooltip && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { interactive, placement: "top", content: tooltip, theme: "info", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { tabIndex: 0, name: "info-circle", size: "sm", className: styles.icon }) })
] });
};
const getInlineLabelStyles = (theme, transparent = false, width) => {
return {
label: css.css({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexShrink: 0,
padding: theme.spacing(0, 1),
fontWeight: theme.typography.fontWeightMedium,
fontSize: theme.typography.size.sm,
backgroundColor: transparent ? "transparent" : theme.colors.background.secondary,
height: theme.spacing(theme.components.height.md),
lineHeight: theme.spacing(theme.components.height.md),
marginRight: theme.spacing(0.5),
borderRadius: theme.shape.radius.default,
border: "none",
width: width ? width !== "auto" ? `${8 * width}px` : width : "100%",
color: theme.colors.text.primary
}),
icon: css.css({
color: theme.colors.text.secondary,
marginLeft: "10px",
":hover": {
color: theme.colors.text.primary
}
})
};
};
exports.InlineLabel = InlineLabel;
//# sourceMappingURL=InlineLabel.cjs.map