@qoretechnologies/reqore 0.27.5 → 0.28.0

package/src/components/Tag/group.tsx

@@ -7,21 +7,38 @@ export interface IReqoreTagGroup extends React.HTMLAttributes<HTMLDivElement> {
   children: any;
   size?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+  hasBottomMargin?: boolean;
 }
 
 const StyledTagGroup = styled.div`
+  flex-shrink: 0;
+
   ${StyledTag} {
-    margin-right: 5px;
-    margin-bottom: 5px;
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+
+    margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? '5px' : '0px')};
   }
 `;
 
-const ReqoreTagGroup = ({ children, size, className, columns, ...rest }: IReqoreTagGroup) => (
-  <StyledTagGroup {...rest} className={`${className || ''} reqore-tag-group`}>
+const ReqoreTagGroup = ({
+  children,
+  size,
+  className,
+  columns,
+  hasBottomMargin = true,
+  ...rest
+}: IReqoreTagGroup) => (
+  <StyledTagGroup
+    {...rest}
+    hasBottomMargin={hasBottomMargin}
+    className={`${className || ''} reqore-tag-group`}
+  >
     {React.Children.map(children, (child) =>
       child
         ? React.cloneElement(child, {
-            size,
+            size: child.props?.size || size,
             width: columns ? `calc(${100 / columns}% - 5px)` : child.props.width,
           })
         : null

package/src/components/Tag/index.tsx

@@ -198,21 +198,19 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       >
         {icon || labelKey ? (
           <StyledTagContentWrapper size={size} className='reqore-tag-content' onClick={onClick}>
-            {icon && (
-              <ReqoreIcon
-                icon={icon}
-                size={`${TEXT_FROM_SIZE[size]}px`}
-                margin={label ? 'left' : 'both'}
-              />
-            )}
+            {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
             {labelKey && <StyledTagContentKey size={size}>{labelKey}</StyledTagContentKey>}
           </StyledTagContentWrapper>
         ) : null}
-        {label && <StyledTagContent size={size}>{label}</StyledTagContent>}
+        {label && (
+          <StyledTagContent size={size} onClick={onClick}>
+            {label}
+          </StyledTagContent>
+        )}
         {rightIcon && (
           <StyledTagRightIcon
             icon={rightIcon}
-            size={`${TEXT_FROM_SIZE[size]}px`}
+            size={size}
             margin={label || icon ? 'right' : 'both'}
           />
         )}
@@ -234,7 +232,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                     : {})}
                   noWrapper
                 >
-                  <ReqoreIcon icon={action.icon} size={`${TEXT_FROM_SIZE[size]}px`} />
+                  <ReqoreIcon icon={action.icon} size={size} />
                 </ReqorePopover>
               </>
             ))
@@ -251,7 +249,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             noWrapper
             content='Remove'
           >
-            <ReqoreIcon icon='CloseLine' size={`${TEXT_FROM_SIZE[size]}px`} />
+            <ReqoreIcon icon='CloseLine' size={size} />
           </ReqorePopover>
         ) : null}
       </StyledTag>

package/src/constants/sizes.ts

@@ -1,6 +1,8 @@
 export type TSizes = 'tiny' | 'small' | 'normal' | 'big' | 'huge';
 export type TWeights = 'soft' | 'normal' | 'heavy';
 
+export const SIZES = ['tiny', 'small', 'normal', 'big', 'huge'] as const;
+
 export const SIZE_TO_NUMBER = {
   tiny: 1,
   small: 2,
@@ -17,6 +19,14 @@ export const NUMBER_TO_SIZE = {
   5: 'huge',
 };
 
+export const HEADER_SIZE_TO_NUMBER = {
+  tiny: 5,
+  small: 4,
+  normal: 3,
+  big: 2,
+  huge: 1,
+};
+
 export const SIZE_TO_PX = {
   tiny: 10,
   small: 20,
@@ -27,8 +37,8 @@ export const SIZE_TO_PX = {
 
 export const BADGE_SIZE_TO_PX = {
   tiny: 10,
-  small: 17,
-  normal: 23,
+  small: 18,
+  normal: 24,
   big: 30,
   huge: 36,
 };
@@ -73,12 +83,20 @@ export const TEXT_FROM_SIZE = {
   huge: 21,
 };
 
+export const ICON_FROM_SIZE = {
+  tiny: 11,
+  small: 14,
+  normal: 17,
+  big: 20,
+  huge: 23,
+};
+
 export const PADDING_FROM_SIZE = {
-  tiny: 2,
-  small: 5,
-  normal: 8,
-  big: 11,
-  huge: 14,
+  tiny: 5,
+  small: 8,
+  normal: 11,
+  big: 14,
+  huge: 17,
 };
 
 export const RADIUS_FROM_SIZE = {
@@ -90,12 +108,20 @@ export const RADIUS_FROM_SIZE = {
 };
 
 export const ICON_FROM_HEADER_SIZE = {
-  1: 21,
-  2: 18,
-  3: 15,
-  4: 12,
-  5: 9,
-  6: 6,
+  1: 23,
+  2: 20,
+  3: 17,
+  4: 14,
+  5: 11,
+  6: 8,
+};
+
+export const ICON_WRAPPER_FROM_HEADER_SIZE = {
+  huge: 34,
+  big: 26,
+  normal: 19,
+  small: 17,
+  tiny: 15,
 };
 
 export const WEIGHT_TO_NUMBER = {

package/src/containers/ReqoreProvider.tsx

@@ -25,7 +25,7 @@ export interface IReqoreNotificationData {
   type?: IReqoreNotificationType;
   intent?: TReqoreIntent;
   flat?: boolean;
-  inverted?: boolean;
+  minimal?: boolean;
   size?: TSizes;
 }
 

package/src/containers/UIProvider.tsx

@@ -27,6 +27,9 @@ export interface IReqoreUIProviderProps {
 
 const StyledPortal = styled.div`
   z-index: 9999;
+  * {
+    box-sizing: border-box;
+  }
 `;
 
 const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, options }) => {

package/src/helpers/colors.ts

@@ -108,7 +108,7 @@ export const buildTheme = (theme: IReqoreTheme): IReqoreTheme => {
   }
 
   if (!newTheme.notifications?.muted) {
-    newTheme.notifications.muted = newTheme.intents.muted || DEFAULT_INTENTS.muted;
+    newTheme.notifications.muted = `${newTheme.intents.muted || DEFAULT_INTENTS.muted}30`;
   }
 
   return newTheme;
@@ -122,9 +122,13 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
   }
 
   if (element === 'main' && customTheme) {
-    merge(clonedTheme, { main: customTheme.main, originalMain: clonedTheme.main });
+    merge(clonedTheme, {
+      main: customTheme.main,
+      originalMain: clonedTheme.main,
+      text: customTheme.text,
+    });
   } else {
-    merge(clonedTheme, { [element]: customTheme || {} });
+    merge(clonedTheme, { [element]: customTheme || {}, text: customTheme.text });
   }
 
   return clonedTheme;
@@ -135,7 +139,7 @@ export const getNotificationIntent = (theme: IReqoreTheme, intent?: TReqoreInten
     return theme.notifications[intent];
   }
 
-  return theme.main;
+  return changeLightness(theme.main, 0.1);
 };
 
 export const getMainBackgroundColor = (theme: IReqoreTheme): string =>

package/src/helpers/utils.ts

@@ -8,7 +8,7 @@ import {
   isString,
   isUndefined,
 } from 'lodash';
-import { NUMBER_TO_SIZE, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
+import { NUMBER_TO_SIZE, SIZES, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
 
 export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
 
@@ -71,10 +71,15 @@ export const calculateStringSizeInPixels = (value: string = '', fontSize: number
 
   /* It's calculating the width of a string in pixels. */
   return (
-    Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) * fontSize
+    Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) *
+    (fontSize * 1.15)
   );
 };
 
+export const isStringSize = (value: TSizes | string | number) => {
+  return SIZES.includes(value as TSizes);
+};
+
 export const getOneLessSize = (size: TSizes): TSizes => {
   // Get the initial sizes number
   const initialSizeNumber: number = SIZE_TO_NUMBER[size];

package/src/mock/collectionData.tsx

@@ -50,18 +50,22 @@ export default [
     ],
   },
   {
+    icon: 'TextWrap',
     label: 'Item that is not minimal',
     tooltip: 'This is a test item',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     minimal: false,
+    badge: 25,
   },
   {
+    icon: 'FolderWarningFill',
     label: 'Expandable item',
     tooltip: 'This is a test item',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     expandable: true,
+    badge: 10,
     tags: [
       {
         label: 23,

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

@@ -44,23 +44,6 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} readOnly onClick={alert}>
           Read only
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
-          With Badge
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          badge={{
-            effect: {
-              gradient: { colors: { 0: '#00fafd', 100: '#eb0e8c' }, direction: 'to right bottom' },
-            },
-            labelKey: 'Cool',
-            label: 1234,
-            actions: [{ icon: 'ShuffleLine', onClick: noop }],
-          }}
-          onClick={alert}
-        >
-          With modified Badge
-        </ReqoreButton>
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>
@@ -112,6 +95,49 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           wrap
         />
       </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup>
+        <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
+          With Badge
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} minimal badge={20} onClick={alert}>
+          With Badge
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          badge={[
+            20,
+            {
+              effect: {
+                gradient: {
+                  colors: { 0: '#00fafd', 100: '#eb0e8c' },
+                  direction: 'to right bottom',
+                },
+              },
+              labelKey: 'Cool',
+              label: 1234,
+              actions: [{ icon: 'ShuffleLine', onClick: noop }],
+            },
+          ]}
+          onClick={alert}
+        >
+          With multiple badges
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          badge={{
+            effect: {
+              gradient: { colors: { 0: '#00fafd', 100: '#eb0e8c' }, direction: 'to right bottom' },
+            },
+            labelKey: 'Cool',
+            label: 1234,
+            actions: [{ icon: 'ShuffleLine', onClick: noop }],
+          }}
+          onClick={alert}
+        >
+          With modified Badge
+        </ReqoreButton>
+      </ReqoreControlGroup>
     </>
   );
 };

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import ReqoreInput from '../../components/Input';
 import { ReqoreButton, ReqoreControlGroup } from '../../index';
-import { argManager, MinimalArg, SizeArg } from '../utils/args';
+import { MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -38,7 +38,7 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
       <ReqoreButton>Button</ReqoreButton>
       <ReqoreInput icon='4KFill' value='Hello' />
       <ReqoreButton disabled fixed>
-        Disabled
+        Disabled & Fixed
       </ReqoreButton>
       <ReqoreButton minimal>Minimal</ReqoreButton>
     </ReqoreControlGroup>

package/src/stories/Message/Message.stories.tsx

@@ -17,10 +17,10 @@ export default {
       type: 'string',
       description: 'The title of the message',
     }),
-    ...createArg('inverted', {
+    ...createArg('minimal', {
       defaultValue: false,
-      name: 'Inverted',
-      description: 'Inverts the message colors',
+      name: 'Minimal',
+      description: 'If the message should be minimal',
       type: 'boolean',
     }),
   },
@@ -46,9 +46,9 @@ Flat.args = {
   flat: true,
   intent: 'success',
 };
-export const Inverted: Story<IReqoreMessageProps> = Template.bind({});
-Inverted.args = {
-  inverted: true,
+export const Minimal: Story<IReqoreMessageProps> = Template.bind({});
+Minimal.args = {
+  minimal: true,
   intent: 'danger',
 };
 

package/src/stories/Notifications/Notification.stories.tsx

@@ -58,7 +58,7 @@ const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
       onClick={noop}
       onClose={noop}
     />
-    <h4> Flat and inverted </h4>
+    <h4> Flat and minimal </h4>
     <ReqoreNotification
       {...args}
       type='danger'
@@ -67,7 +67,7 @@ const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
       onClick={noop}
       onClose={noop}
       flat
-      inverted
+      minimal
     />
     <ReqoreNotification
       {...args}
@@ -75,7 +75,8 @@ const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
       content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
       onClick={noop}
       onClose={noop}
-      inverted
+      intent='pending'
+      minimal
     />
     <ReqoreNotification
       {...args}

package/src/stories/Panel/Panel.stories.tsx

@@ -67,11 +67,27 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
   return (
     <ReqorePanel
       {...args}
+      badge={[
+        10,
+        {
+          effect: {
+            gradient: {
+              colors: { 0: '#f98304', 100: '#ffc20c' },
+              direction: 'to right bottom',
+            },
+            spaced: 2,
+            uppercase: true,
+          },
+          labelKey: 'Cool',
+          label: 1234,
+          actions: [{ icon: 'ShuffleLine', onClick: noop }],
+        },
+      ]}
       actions={[
         { label: 'Test', icon: '24HoursFill', intent: 'info' },
         [
           { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
-          { label: 'Stacked Action 2', icon: 'CopperCoinFill', intent: 'danger' },
+          { icon: 'CopperCoinFill', intent: 'danger' },
         ],
         {
           as: ReqoreInput,

package/src/stories/Tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreTabsProps } from '../../components/Tabs';
 import { ReqoreTabs, ReqoreTabsContent } from '../../index';
-import { argManager, IntentArg, SizeArg } from '../utils/args';
+import { IntentArg, SizeArg, argManager } from '../utils/args';
 
 const tabs = [
   {
@@ -9,6 +9,7 @@ const tabs = [
     id: 'tab1',
     icon: 'Home3Line',
     tooltip: 'Hooooooome!',
+    badge: 5,
   },
   {
     label: 'Tab 2',
@@ -18,6 +19,11 @@ const tabs = [
     props: {
       href: 'https://google.com',
     },
+    badge: {
+      rightIcon: 'ExternalLinkLine',
+      label: 'Link',
+      intent: 'info',
+    },
   },
   {
     label: 'Really long tab name with tooltip',
@@ -56,6 +62,9 @@ const tabs = [
     onCloseClick: (id) => {
       alert(`${id} close click`);
     },
+    customTheme: {
+      main: '#00e3e8',
+    },
   },
   {
     label: 'Tab 8',
@@ -204,6 +213,16 @@ Fill.args = {
   fill: true,
 };
 
+export const CustomActiveIntent = Template.bind({});
+CustomActiveIntent.args = {
+  activeTabIntent: 'warning',
+};
+
+export const NotFlat = Template.bind({});
+NotFlat.args = {
+  flat: false,
+};
+
 export const Vertical = Template.bind({});
 Vertical.args = {
   vertical: true,
@@ -217,13 +236,6 @@ VerticalWithWrapping.args = {
   wrapTabNames: true,
 };
 
-export const VerticalFill = Template.bind({});
-VerticalFill.args = {
-  vertical: true,
-  fill: true,
-  fillParent: true,
-};
-
 export const VerticalCustomWidth = Template.bind({});
 VerticalCustomWidth.args = {
   vertical: true,
@@ -231,8 +243,3 @@ VerticalCustomWidth.args = {
   fillParent: true,
   width: '300px',
 };
-
-export const NotFlat = Template.bind({});
-NotFlat.args = {
-  flat: false,
-};

package/src/styles.ts

@@ -2,6 +2,9 @@ import { css } from 'styled-components';
 import { StyledActiveContent, StyledInActiveContent } from './components/Button';
 import { StyledIconWrapper } from './components/Icon';
 
+export const INACTIVE_ICON_SCALE = 0.85;
+export const ACTIVE_ICON_SCALE = 1;
+
 export const AnimatedTextElement = css`
   ${StyledActiveContent} {
     transform: translateY(0px);
@@ -18,13 +21,13 @@ export const AnimatedTextElement = css`
 
 export const InactiveIconScale = css`
   ${StyledIconWrapper} {
-    transform: scale(0.85);
+    transform: scale(${INACTIVE_ICON_SCALE});
   }
 `;
 
 export const ActiveIconScale = css`
   ${StyledIconWrapper} {
-    transform: scale(1);
+    transform: scale(${ACTIVE_ICON_SCALE});
   }
 `;
 

package/src/types/global.ts

@@ -126,6 +126,20 @@ export interface IWithReqoreFlat {
   flat?: boolean;
 }
 
+export interface IWithReqoreMinimal {
+  /**
+   * If true, the component will be minimal
+   * @default false
+   * @type boolean
+   * @example
+   * <ReqoreButton minimal />
+   * <ReqoreButton minimal={true} />
+   * <ReqoreButton minimal={false} />
+   *
+   */
+  minimal?: boolean;
+}
+
 export interface IWithReqoreEffect {
   /**
    * If true, the component will have an effect