Add disable prop in IconButton and MenuItem

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-24 15:05:56 +05:30
parent 7750366654
commit 246f6caf20
3 changed files with 27 additions and 8 deletions

View file

@ -9,7 +9,8 @@ import Text from '../text/Text';
const IconButton = React.forwardRef(({ const IconButton = React.forwardRef(({
variant, size, type, variant, size, type,
tooltip, tooltipPlacement, src, onClick, tabIndex, tooltip, tooltipPlacement, src,
onClick, tabIndex, disabled,
}, ref) => { }, ref) => {
const btn = ( const btn = (
<button <button
@ -20,6 +21,7 @@ const IconButton = React.forwardRef(({
// eslint-disable-next-line react/button-has-type // eslint-disable-next-line react/button-has-type
type={type} type={type}
tabIndex={tabIndex} tabIndex={tabIndex}
disabled={disabled}
> >
<RawIcon size={size} src={src} /> <RawIcon size={size} src={src} />
</button> </button>
@ -43,6 +45,7 @@ IconButton.defaultProps = {
tooltipPlacement: 'top', tooltipPlacement: 'top',
onClick: null, onClick: null,
tabIndex: 0, tabIndex: 0,
disabled: false,
}; };
IconButton.propTypes = { IconButton.propTypes = {
@ -54,6 +57,7 @@ IconButton.propTypes = {
src: PropTypes.string.isRequired, src: PropTypes.string.isRequired,
onClick: PropTypes.func, onClick: PropTypes.func,
tabIndex: PropTypes.number, tabIndex: PropTypes.number,
disabled: PropTypes.bool,
}; };
export default IconButton; export default IconButton;

View file

@ -71,7 +71,8 @@ MenuHeader.propTypes = {
}; };
function MenuItem({ function MenuItem({
variant, iconSrc, type, onClick, children, variant, iconSrc, type,
onClick, children, disabled,
}) { }) {
return ( return (
<div className="context-menu__item"> <div className="context-menu__item">
@ -80,6 +81,7 @@ function MenuItem({
iconSrc={iconSrc} iconSrc={iconSrc}
type={type} type={type}
onClick={onClick} onClick={onClick}
disabled={disabled}
> >
{ children } { children }
</Button> </Button>
@ -91,6 +93,7 @@ MenuItem.defaultProps = {
variant: 'surface', variant: 'surface',
iconSrc: 'none', iconSrc: 'none',
type: 'button', type: 'button',
disabled: false,
}; };
MenuItem.propTypes = { MenuItem.propTypes = {
@ -98,7 +101,8 @@ MenuItem.propTypes = {
iconSrc: PropTypes.string, iconSrc: PropTypes.string,
type: PropTypes.oneOf(['button', 'submit']), type: PropTypes.oneOf(['button', 'submit']),
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
children: PropTypes.string.isRequired, children: PropTypes.node.isRequired,
disabled: PropTypes.bool,
}; };
function MenuBorder() { function MenuBorder() {

View file

@ -1,3 +1,4 @@
@use '../../partials/flex';
@use '../../partials/text'; @use '../../partials/text';
@use '../../partials/dir'; @use '../../partials/dir';
@ -25,7 +26,7 @@
.context-menu__header { .context-menu__header {
height: 34px; height: 34px;
padding: 0 var(--sp-tight); padding: 0 var(--sp-normal);
margin-bottom: var(--sp-ultra-tight); margin-bottom: var(--sp-ultra-tight);
display: flex; display: flex;
align-items: center; align-items: center;
@ -37,30 +38,40 @@
} }
&:not(:first-child) { &:not(:first-child) {
margin-top: var(--sp-normal); margin-top: var(--sp-extra-tight);
border-top: 1px solid var(--bg-surface-border); border-top: 1px solid var(--bg-surface-border);
} }
} }
.context-menu__item { .context-menu__item {
display: flex;
button[class^="btn"] { button[class^="btn"] {
width: 100%; @extend .cp-fx__item-one;
justify-content: flex-start; justify-content: flex-start;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
white-space: nowrap; white-space: nowrap;
padding: var(--sp-extra-tight) var(--sp-normal);
& > .ic-raw {
@include dir.side(margin, 0, var(--sp-tight));
}
// if item doesn't have icon
.text:first-child { .text:first-child {
@include dir.side( @include dir.side(
margin, margin,
calc(var(--ic-small) + var(--sp-ultra-tight)), calc(var(--ic-small) + var(--sp-tight)),
var(--sp-extra-tight) 0
); );
} }
} }
.btn-surface:focus { .btn-surface:focus {
background-color: var(--bg-surface-hover); background-color: var(--bg-surface-hover);
} }
.btn-positive:focus {
background-color: var(--bg-positive-hover);
}
.btn-caution:focus { .btn-caution:focus {
background-color: var(--bg-caution-hover); background-color: var(--bg-caution-hover);
} }