@wix/design-system
Version:
@wix/design-system
37 lines • 1.95 kB
JavaScript
import React, { forwardRef, useImperativeHandle } from 'react';
import { ICON_CHILD_SIZE } from './IconButton.constants';
import { generateDataAttr } from '../utils/generateDataAttr';
import { st, classes } from './IconButton.st.css.js';
import { WixStyleReactDefaultsOverrideContext } from '../WixStyleReactDefaultsOverrideProvider';
import deprecationLog from '../utils/deprecationLog';
import ButtonCore from '../Button/ButtonCore';
export const IconButton = forwardRef((props, ref) => {
if (props.skin === 'inverted') {
deprecationLog('<IconButton/> - skin="inverted" is deprecated and will be removed in next major version, please use skin="standard" and priority="secondary" instead');
}
const defaultOverrides = React.useContext(WixStyleReactDefaultsOverrideContext);
const buttonRef = React.useRef(null);
useImperativeHandle(ref, () => {
return {
focus() {
buttonRef.current && buttonRef.current.focus();
},
};
}, [buttonRef]);
const { button: buttonPropsDefaults } = defaultOverrides;
const { skin = 'standard', className, priority = 'primary', size = buttonPropsDefaults.size, children, disabled = false, dataHook, ariaLabel, ariaLabelledBy, ...rest } = props;
const childSize = ICON_CHILD_SIZE[size];
return (React.createElement(ButtonCore, { ...rest, disabled: disabled, ref: buttonRef, className: st(classes.root, { skin, priority, size }, className), ...generateDataAttr({
...props,
size,
}, ['skin', 'size', 'priority']), "data-hook": dataHook, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, children &&
React.cloneElement(children, {
size: childSize,
width: childSize,
height: childSize,
'aria-hidden': true,
})));
});
IconButton.displayName = 'IconButton';
export default IconButton;
//# sourceMappingURL=IconButton.js.map