@qoretechnologies/reqore 0.40.1 → 0.40.3

package/src/components/Menu/index.tsx

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import { changeDarkness, changeLightness, getMainBackgroundColor } from '../../helpers/colors';
+import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
 import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreComponent, IWithReqoreMinimal, IWithReqoreTransparent } from '../../types/global';
@@ -43,14 +43,11 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
     transparent ? 'transparent' : changeDarkness(getMainBackgroundColor(theme), 0.03)};
   border-radius: ${({ rounded }) => (rounded ? `${RADIUS_FROM_SIZE['normal']}px` : `0`)};
 
-  ${({ theme, position }) =>
+  ${({ theme, position, padded }) =>
     position &&
     css`
-    border-${position === 'left' ? 'right' : 'left'}: 1px solid ${changeLightness(
-      theme.main,
-      0.05
-    )};
-    padding-${position === 'left' ? 'right' : 'left'}: 10px;
+    border-${position === 'left' ? 'right' : 'left'}: 1px solid ${changeDarkness(theme.main, 0.04)};
+    padding-${position === 'left' ? 'right' : 'left'}: ${padded ? '10px' : undefined};
   `}
 `;
 

package/src/constants/colors.ts

@@ -9,5 +9,5 @@ export const Colors: Record<string, TReqoreHexColor> = {
   YELLOW: '#d1a036',
   ORANGE: '#A66321',
   RED: '#A82A2A',
-  GRAY: '#444444',
+  GRAY: '#44444450',
 };

package/src/constants/sizes.ts

@@ -173,3 +173,5 @@ export const WEIGHT_TO_NUMBER = {
   bold: 550,
   thick: 700,
 };
+
+export const PILL_RADIUS_MODIFIER = 2.5;

package/src/hooks/useAutoFocus.ts

@@ -10,6 +10,7 @@ export interface IReqoreAutoFocusRules {
   viewportMargin?: string;
   shortcut?: 'letters' | 'numbers' | string | ('letters' | 'numbers' | string)[];
   clearOnFocus?: boolean;
+  doNotInsertShortcut?: boolean;
 }
 
 export const useAutoFocus = (
@@ -96,9 +97,10 @@ export const useAutoFocus = (
 
   useEffect(() => {
     if (element && rules && rules.type === 'keypress') {
-      window.addEventListener('keydown', handleKeyDown);
+      window.addEventListener(rules.doNotInsertShortcut ? 'keyup' : 'keydown', handleKeyDown);
     }
 
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    return () =>
+      window.removeEventListener(rules?.doNotInsertShortcut ? 'keyup' : 'keydown', handleKeyDown);
   }, [element, rules]);
 };

package/src/stories/Button/Button.stories.tsx

@@ -88,6 +88,28 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
           Disabled not flat
         </ReqoreButton>
       </ReqoreControlGroup>
+      <ReqoreControlGroup fluid wrap>
+        <ReqoreButton {...buttonProps} verticalPadding='tiny'>
+          Vertical padding tiny
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} verticalPadding='small'>
+          Vertical padding small
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} verticalPadding='normal'>
+          Vertical padding normal
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} verticalPadding='big'>
+          Vertical padding big
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          verticalPadding='huge'
+          badge={10}
+          description='This is a description'
+        >
+          Vertical padding huge
+        </ReqoreButton>
+      </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid>
           Fluid button
@@ -347,3 +369,11 @@ export const GlobalEffect: Story = {
     },
   },
 };
+
+export const Pill: Story = {
+  render: Template,
+
+  args: {
+    pill: true,
+  },
+};

package/src/stories/Input/Input.stories.tsx

@@ -57,6 +57,7 @@ const Template: StoryFn<typeof ReqoreInput> = (args: IReqoreInputProps) => {
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           onChange={handleValueChange}
+          leftIconProps={{ size: 'tiny' }}
         />
         <ReqoreInput
           {...args}
@@ -66,6 +67,7 @@ const Template: StoryFn<typeof ReqoreInput> = (args: IReqoreInputProps) => {
           onChange={handleValueChange}
           rightIcon='EraserFill'
           rightIconColor='#8727b7'
+          focusRules={{ type: 'keypress', shortcut: '.', doNotInsertShortcut: true }}
         />
         <ReqoreInput {...args} placeholder='Disabled Input' disabled onChange={handleValueChange} />
         <ReqoreInput
@@ -208,3 +210,11 @@ export const Effect: Story = {
     },
   },
 };
+
+export const Pill: Story = {
+  render: Template,
+
+  args: {
+    pill: true,
+  },
+};

package/src/stories/Menu/Menu.stories.tsx

@@ -298,6 +298,16 @@ export const Transparent: Story = {
   },
 };
 
+export const Positioned: Story = {
+  render: Template,
+
+  args: {
+    position: 'left',
+    padded: false,
+    rounded: false,
+  },
+};
+
 export const BigGapSize: Story = {
   render: Template,