@itwin/itwinui-react
Version:
A react component library for iTwinUI
70 lines (69 loc) • 2.01 kB
JavaScript
import cx from 'classnames';
import * as React from 'react';
import { Box, ButtonBase, useWarningLogger } from '../../utils/index.js';
import { Tooltip } from '../Tooltip/Tooltip.js';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
import { PopoverOpenContext } from '../Popover/Popover.js';
export const IconButton = React.forwardRef((props, ref) => {
let {
isActive,
children,
styleType = 'default',
size,
className,
title,
label = title,
iconProps,
labelProps,
...rest
} = props;
let buttonGroupOrientation = React.useContext(ButtonGroupContext);
let hasPopoverOpen = React.useContext(PopoverOpenContext);
let logWarning = useWarningLogger();
if (
'development' === process.env.NODE_ENV &&
!label &&
!props['aria-label'] &&
!props['aria-labelledby']
)
logWarning('IconButton is missing the `label` prop.');
let button = React.createElement(
ButtonBase,
{
ref: ref,
className: cx('iui-button', 'iui-field', className),
'data-iui-variant': 'default' !== styleType ? styleType : void 0,
'data-iui-size': size,
'data-iui-active': isActive,
'data-iui-has-popover': hasPopoverOpen ? 'open' : void 0,
'aria-pressed': isActive,
...rest,
},
React.createElement(
Box,
{
as: 'span',
'aria-hidden': true,
...iconProps,
className: cx('iui-button-icon', iconProps?.className),
},
children,
),
label ? React.createElement(VisuallyHidden, null, label) : null,
);
return label
? React.createElement(
Tooltip,
{
placement: 'vertical' === buttonGroupOrientation ? 'right' : 'top',
...labelProps,
content: label,
ariaStrategy: 'none',
},
button,
)
: button;
});
if ('development' === process.env.NODE_ENV)
IconButton.displayName = 'IconButton';