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);
}