diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx index 67b8a65..061808c 100644 --- a/src/app/atoms/button/IconButton.jsx +++ b/src/app/atoms/button/IconButton.jsx @@ -9,7 +9,8 @@ import Text from '../text/Text'; const IconButton = React.forwardRef(({ variant, size, type, - tooltip, tooltipPlacement, src, onClick, tabIndex, + tooltip, tooltipPlacement, src, + onClick, tabIndex, disabled, }, ref) => { const btn = ( @@ -43,6 +45,7 @@ IconButton.defaultProps = { tooltipPlacement: 'top', onClick: null, tabIndex: 0, + disabled: false, }; IconButton.propTypes = { @@ -54,6 +57,7 @@ IconButton.propTypes = { src: PropTypes.string.isRequired, onClick: PropTypes.func, tabIndex: PropTypes.number, + disabled: PropTypes.bool, }; export default IconButton; diff --git a/src/app/atoms/context-menu/ContextMenu.jsx b/src/app/atoms/context-menu/ContextMenu.jsx index 3c914c3..99dd9e6 100644 --- a/src/app/atoms/context-menu/ContextMenu.jsx +++ b/src/app/atoms/context-menu/ContextMenu.jsx @@ -71,7 +71,8 @@ MenuHeader.propTypes = { }; function MenuItem({ - variant, iconSrc, type, onClick, children, + variant, iconSrc, type, + onClick, children, disabled, }) { return (
@@ -80,6 +81,7 @@ function MenuItem({ iconSrc={iconSrc} type={type} onClick={onClick} + disabled={disabled} > { children } @@ -91,6 +93,7 @@ MenuItem.defaultProps = { variant: 'surface', iconSrc: 'none', type: 'button', + disabled: false, }; MenuItem.propTypes = { @@ -98,7 +101,8 @@ MenuItem.propTypes = { iconSrc: PropTypes.string, type: PropTypes.oneOf(['button', 'submit']), onClick: PropTypes.func.isRequired, - children: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, + disabled: PropTypes.bool, }; function MenuBorder() { diff --git a/src/app/atoms/context-menu/ContextMenu.scss b/src/app/atoms/context-menu/ContextMenu.scss index 50e3d91..2df9f0a 100644 --- a/src/app/atoms/context-menu/ContextMenu.scss +++ b/src/app/atoms/context-menu/ContextMenu.scss @@ -1,3 +1,4 @@ +@use '../../partials/flex'; @use '../../partials/text'; @use '../../partials/dir'; @@ -25,7 +26,7 @@ .context-menu__header { height: 34px; - padding: 0 var(--sp-tight); + padding: 0 var(--sp-normal); margin-bottom: var(--sp-ultra-tight); display: flex; align-items: center; @@ -37,30 +38,40 @@ } &:not(:first-child) { - margin-top: var(--sp-normal); + margin-top: var(--sp-extra-tight); border-top: 1px solid var(--bg-surface-border); } } .context-menu__item { + display: flex; button[class^="btn"] { - width: 100%; + @extend .cp-fx__item-one; justify-content: flex-start; border-radius: 0; box-shadow: none; 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 { @include dir.side( margin, - calc(var(--ic-small) + var(--sp-ultra-tight)), - var(--sp-extra-tight) + calc(var(--ic-small) + var(--sp-tight)), + 0 ); } } .btn-surface:focus { background-color: var(--bg-surface-hover); } + .btn-positive:focus { + background-color: var(--bg-positive-hover); + } .btn-caution:focus { background-color: var(--bg-caution-hover); }