Add disable prop in IconButton and MenuItem

Signed-off-by: Ajay Bura <ajbura@gmail.com>

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 = (
     <button
@@ -20,6 +21,7 @@ const IconButton = React.forwardRef(({
       // eslint-disable-next-line react/button-has-type
       type={type}
       tabIndex={tabIndex}
+      disabled={disabled}
     >
       <RawIcon size={size} src={src} />
     </button>
@@ -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;

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 (
     <div className="context-menu__item">
@@ -80,6 +81,7 @@ function MenuItem({
         iconSrc={iconSrc}
         type={type}
         onClick={onClick}
+        disabled={disabled}
       >
         { children }
       </Button>
@@ -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() {

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)),
+        calc(var(--ic-small) + var(--sp-tight)),
-        var(--sp-extra-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);
   }