azure-devops-ui
Version:
React components for building web UI in Azure DevOps
38 lines (37 loc) • 2.24 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./FabricIcons.css";
import "./FluentIcons.css";
import * as React from "react";
import { Tooltip } from '../../TooltipEx';
import { css, getSafeId } from '../../Util';
export function Icon(props) {
var _a;
if (props.render) {
return props.render(props.className);
}
const iconWrapperProps = {
id: getSafeId(props.id),
onClick: props.onClick,
onMouseDown: props.onMouseDown,
onKeyDown: props.onKeyDown,
role: props.role ? props.role : props.ariaLabel || props.ariaLabelledBy ? "img" : undefined,
style: props.style,
tabIndex: props.tabIndex,
title: props.title
};
const iconClassName = css(props.className, "flex-noshrink", props.iconName && "fabric-icon", props.iconName && `ms-Icon--${props.iconName}`, props.size);
const ariaHidden = props.ariaHidden == "removed" ? undefined : props.ariaHidden !== undefined ? props.ariaHidden : "true";
const hasTooltipText = props.tooltipProps && props.tooltipProps.text && props.tooltipProps.text.length > 0;
// Set tabIndex to 0 if tooltip text is provided to make icon focusable for screen readers
if (hasTooltipText && props.tabIndex === undefined) {
iconWrapperProps.tabIndex = 0;
}
let icon = props.ariaLabel || props.ariaLabelledBy || props.ariaExpanded || hasTooltipText !== undefined ? (React.createElement("span", Object.assign({ "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel || ((_a = props.tooltipProps) === null || _a === void 0 ? void 0 : _a.text) || undefined, "aria-labelledby": getSafeId(props.ariaLabelledBy), className: css("fluent-icons-enabled", props.wrapperClass) }, iconWrapperProps),
React.createElement("span", { "aria-hidden": ariaHidden, className: iconClassName }))) : (React.createElement("span", { className: "fluent-icons-enabled" },
React.createElement("span", Object.assign({ "aria-hidden": ariaHidden, className: iconClassName }, iconWrapperProps))));
if (props.tooltipProps) {
icon = React.createElement(Tooltip, Object.assign({}, props.tooltipProps), icon);
}
return icon;
}