Added disabled prop to panel and fill to menu item

qoretechnologies · Apr 13, 2023 · 0a82bd5 · 0a82bd5
1 parent cd2fc49
commit 0a82bd5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.34.7",
+  "version": "0.34.8",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Menu/item.tsx b/src/components/Menu/item.tsx
@@ -91,7 +91,7 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
     }, [itemRef, scrollIntoView]);
 
     return (
-      <ReqoreControlGroup stack={!!onRightIconClick} fluid>
+      <ReqoreControlGroup stack={!!onRightIconClick} fluid fill>
         <ReqoreButton
           //@ts-ignore
           as={as}

diff --git a/src/components/Panel/index.tsx b/src/components/Panel/index.tsx
@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -24,7 +24,7 @@ import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreProperty } from '../../hooks/useReqoreContext';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
-import { ACTIVE_ICON_SCALE, INACTIVE_ICON_SCALE } from '../../styles';
+import { ACTIVE_ICON_SCALE, DisabledElement, INACTIVE_ICON_SCALE } from '../../styles';
 import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
@@ -85,6 +85,7 @@ export interface IReqorePanelProps
   collapsible?: boolean;
   isCollapsed?: boolean;
   collapseButtonProps?: IReqoreButtonProps;
+  disabled?: boolean;
 
   onClose?: () => void;
   closeButtonProps?: IReqoreButtonProps;
@@ -226,6 +227,8 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
           flex: 1;
         `
       : undefined}
+
+  ${({ disabled }) => disabled && DisabledElement}
 `;
 
 export const StyledPanelTitle = styled.div<IStyledPanel>`
@@ -334,6 +337,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       size: panelSize = 'normal',
       getContentRef,
       headerProps = {},
+      disabled,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -608,6 +612,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         effect={transformedContentEffect}
         opacity={opacity}
         fluid={fluid}
+        disabled={disabled}
       >
         {hasTitleBar && (
           <StyledPanelTitle

diff --git a/src/stories/Menu/Menu.stories.tsx b/src/stories/Menu/Menu.stories.tsx
@@ -101,6 +101,16 @@ const Template: Story<IReqoreMenuProps> = (args) => {
         Delete
       </ReqoreMenuItem>
 
+      <ReqoreMenuItem
+        icon='BluetoothConnectLine'
+        rightIcon='EditLine'
+        onRightIconClick={() => alert('Icon clicked')}
+        description='Button with right icon and description'
+        intent='info'
+      >
+        Some button
+      </ReqoreMenuItem>
+
       <ReqoreMenuItem icon='Lock2Fill' description='I also have a description'>
         This is a really long item that should wrap
       </ReqoreMenuItem>

diff --git a/src/stories/Panel/Panel.stories.tsx b/src/stories/Panel/Panel.stories.tsx
@@ -6,7 +6,7 @@ import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../compon
 import { ReqoreVerticalSpacer } from '../../components/Spacer';
 import ReqoreTag from '../../components/Tag';
 import { IReqoreIconName } from '../../types/icons';
-import { argManager, FlatArg, IconArg, IntentArg, SizeArg } from '../utils/args';
+import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -342,6 +342,11 @@ Minimal.args = {
   flat: true,
 };
 
+export const Disabled: Story<IReqorePanelProps> = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
 export const NonResponsiveActions: Story<IReqorePanelProps> = Template.bind({});
 NonResponsiveActions.args = {
   responsiveActions: false,