@sap-ux/ui-components
Version:
SAP UI Components Library
87 lines • 3.05 kB
JavaScript
import React from 'react';
import { ActionButton } from '@fluentui/react';
import { UIContextualMenu } from '../UIContextualMenu/index.js';
import { BASE_STYLES } from './UIDefaultButton.js';
/**
* UIActionButton component
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
*
* @exports
* @class UIActionButton
* @extends {React.Component<IButtonProps, {}>}
*/
export class UIActionButton extends React.Component {
/**
* Initializes component properties.
*
* @param {IButtonProps} props
*/
constructor(props) {
super(props);
this.setStyle = () => {
return {
root: {
minWidth: 'initial',
minHeight: BASE_STYLES.height,
height: BASE_STYLES.height,
fontSize: '13px',
fontWeight: 400,
color: 'var(--vscode-foreground)',
borderRadius: 0,
whiteSpace: 'nowrap',
backgroundColor: 'transparent',
textDecoration: 'underline',
selectors: {
'&:active': {
textDecoration: 'none'
},
// Focus through tab navigation
'.ms-Fabric--isFocusVisible &:focus:after': {
outline: '1px solid var(--vscode-focusBorder)'
}
}
},
label: {
marginLeft: 0,
marginRight: 0,
fontSize: '13px',
fontWeight: 400
},
rootDisabled: {
backgroundColor: 'transparent',
color: 'var(--vscode-foreground)',
opacity: '0.4',
pointerEvents: 'none'
},
rootHovered: {
color: 'var(--vscode-foreground)',
backgroundColor: 'var(--vscode-menubar-selectionBackground)',
outline: '1px solid var(--vscode-contrastActiveBorder)',
borderRadius: 'var(--vscode-cornerRadius-small, 4px)',
textDecoration: 'none',
selectors: {
color: 'var(--vscode-foreground)'
}
},
icon: {
height: 16,
lineHeight: 16,
marginLeft: 0,
position: 'relative',
top: 1
},
menuIcon: {
position: 'relative',
top: 1
}
};
};
}
/**
* @returns {JSX.Element}
*/
render() {
return React.createElement(ActionButton, { ...this.props, styles: this.setStyle(), menuAs: UIContextualMenu });
}
}
//# sourceMappingURL=UIActionButton.js.map