@qoretechnologies/reqore 0.27.6 → 0.28.0

package/src/components/Button/index.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, memo, useContext } from 'react';
+import React, { forwardRef, memo, useCallback, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import {
+  ICON_FROM_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
@@ -26,6 +27,7 @@ import {
   IReqoreIntent,
   IReqoreReadOnly,
   IWithReqoreEffect,
+  IWithReqoreSize,
   TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
@@ -33,6 +35,9 @@ import { ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 import { ReqoreSpacer } from '../Spacer';
 import ReqoreTag, { IReqoreTagProps } from '../Tag';
+import ReqoreTagGroup from '../Tag/group';
+
+export type TReqoreBadge = string | number | IReqoreTagProps;
 
 export interface IReqoreButtonProps
   extends React.HTMLAttributes<HTMLButtonElement>,
@@ -51,7 +56,7 @@ export interface IReqoreButtonProps
   rightIcon?: IReqoreIconName;
   customTheme?: IReqoreCustomTheme;
   wrap?: boolean;
-  badge?: string | number | IReqoreTagProps;
+  badge?: TReqoreBadge | TReqoreBadge[];
   description?: string | number;
   maxWidth?: string;
   textAlign?: 'left' | 'center' | 'right';
@@ -73,7 +78,6 @@ const getButtonMainColor = (theme: IReqoreTheme, color?: string) => {
 export const StyledAnimatedTextWrapper = styled.span`
   overflow: hidden;
   position: relative;
-  padding: 4px 0;
   text-align: left;
 `;
 
@@ -85,13 +89,16 @@ export const StyledActiveContent = styled.span`
   filter: blur(10px);
 
   ${({ wrap }) =>
-    !wrap &&
-    css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
-    `}
+    !wrap
+      ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 100%;
+        `
+      : css`
+          word-break: break-word;
+        `}
 `;
 
 export const StyledInActiveContent = styled.span`
@@ -100,13 +107,16 @@ export const StyledInActiveContent = styled.span`
   transition: all 0.2s ease-out;
 
   ${({ wrap }) =>
-    !wrap &&
-    css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
-    `}
+    !wrap
+      ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 100%;
+        `
+      : css`
+          word-break: break-word;
+        `}
 `;
 
 export const StyledInvisibleContent = styled.span`
@@ -115,10 +125,13 @@ export const StyledInvisibleContent = styled.span`
   overflow: hidden;
 
   ${({ wrap }) =>
-    !wrap &&
-    css`
-      white-space: nowrap;
-    `}
+    !wrap
+      ? css`
+          white-space: nowrap;
+        `
+      : css`
+          word-break: break-word;
+        `}
 `;
 
 export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
@@ -139,7 +152,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
   max-width: ${({ maxWidth }) => maxWidth || undefined};
 
-  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
 
   border-radius: ${({ size }) => RADIUS_FROM_SIZE[size]}px;
 
@@ -179,8 +192,8 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
                 changeLightness(getButtonMainColor(theme, color), 0.05)};
               color: ${({ theme, color }) =>
                 getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
-              border-color: ${({ minimal, theme, color }) =>
-                minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
+              border-color: ${({ flat, theme, color }) =>
+                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
 
               ${animate &&
               css`
@@ -203,14 +216,12 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
           ${ReadOnlyElement};
         `}
 
-  ${({ active, minimal, theme, color }: IReqoreButtonStyle) =>
+  ${({ active, flat, theme, color }: IReqoreButtonStyle) =>
     active &&
     css`
-      background-color: ${changeLightness(getButtonMainColor(theme, color), 0.16)};
+      background-color: ${changeLightness(getButtonMainColor(theme, color), 0.1)};
       color: ${getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
-      border-color: ${minimal
-        ? undefined
-        : changeLightness(getButtonMainColor(theme, color), 0.075)};
+      border-color: ${flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.175)};
 
       ${ActiveIconScale}
     `}
@@ -239,8 +250,10 @@ export const StyledButtonContent = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
+  min-width: ${({ size }) => ICON_FROM_SIZE[size]}px;
   flex: 1;
   flex-shrink: 0;
+  padding: 4px 0;
   min-height: ${({ size, flat }) => (flat ? SIZE_TO_PX[size] : SIZE_TO_PX[size] - 2)}px;
   ${({ wrap, description }) =>
     !wrap && !description
@@ -250,6 +263,47 @@ export const StyledButtonContent = styled.div`
       : null}
 `;
 
+export interface IReqoreButtonBadgeProps extends IWithReqoreSize {
+  color?: string;
+  content?: TReqoreBadge | TReqoreBadge[];
+}
+
+export const ButtonBadge = memo((props: IReqoreButtonBadgeProps) => {
+  const renderTag = useCallback(
+    ({ size, color, content, key }: IReqoreButtonBadgeProps & { key: number }) => (
+      <ReqoreTag
+        key={key}
+        size={getOneLessSize(size)}
+        badge
+        color={color ? `${color}70` : undefined}
+        {...(typeof content === 'string' || typeof content === 'number'
+          ? { label: content }
+          : content)}
+      />
+    ),
+    [props]
+  );
+
+  // If the content is a list
+  if (Array.isArray(props.content)) {
+    return (
+      <>
+        <ReqoreSpacer width={PADDING_FROM_SIZE[props.size]} />
+        <ReqoreTagGroup hasBottomMargin={false}>
+          {props.content.map((badge, index) => renderTag({ ...props, content: badge, key: index }))}
+        </ReqoreTagGroup>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ReqoreSpacer width={PADDING_FROM_SIZE[props.size]} />
+      {renderTag({ ...props, key: 0 })}
+    </>
+  );
+});
+
 const ReqoreButton = memo(
   forwardRef<HTMLButtonElement, IReqoreButtonProps>(
     (
@@ -286,7 +340,7 @@ const ReqoreButton = memo(
       useTooltip(targetRef.current, tooltip);
 
       // If color or intent was specified, set the color
-      const customColor = theme.main;
+      const customColor = intent ? theme.main : changeLightness(theme.main, 0.07);
       const _flat = minimal ? flat : flat !== false;
       const color = customColor
         ? minimal
@@ -294,18 +348,6 @@ const ReqoreButton = memo(
           : getReadableColorFrom(customColor, true)
         : getReadableColor(theme, undefined, undefined, true);
 
-      const renderBadge = () => (
-        <>
-          <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
-          <ReqoreTag
-            size={getOneLessSize(size)}
-            badge
-            color={`${color}70`}
-            {...(typeof badge === 'string' || typeof badge === 'number' ? { label: badge } : badge)}
-          />
-        </>
-      );
-
       return (
         <StyledButton
           {...rest}
@@ -333,7 +375,7 @@ const ReqoreButton = memo(
           <StyledButtonContent size={size} wrap={wrap} description={description} flat={_flat}>
             {icon && (
               <>
-                <ReqoreIcon icon={icon} size={`${TEXT_FROM_SIZE[size]}px`} />
+                <ReqoreIcon icon={icon} size={size} />
                 {children || badge || rightIcon ? (
                   <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
                 ) : null}
@@ -344,18 +386,14 @@ const ReqoreButton = memo(
                 <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
                 <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
                 <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
-                {badge && wrap ? renderBadge() : null}
+                {badge && wrap ? <ButtonBadge content={badge} size={size} color={color} /> : null}
               </StyledAnimatedTextWrapper>
             )}
-            {badge && !wrap ? renderBadge() : null}
+            {badge && !wrap ? <ButtonBadge content={badge} size={size} color={color} /> : null}
             {rightIcon && (
               <>
                 {children || badge ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
-                <ReqoreIcon
-                  icon={rightIcon}
-                  size={`${TEXT_FROM_SIZE[size]}px`}
-                  style={{ marginLeft: 'auto' }}
-                />
+                <ReqoreIcon icon={rightIcon} size={size} style={{ marginLeft: 'auto' }} />
               </>
             )}
           </StyledButtonContent>

package/src/components/Checkbox/index.tsx

@@ -151,7 +151,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
           <StyledSwitch size={size} labelPosition={labelPosition} checked={checked} />
         ) : (
           <ReqoreIcon
-            size={`${TEXT_FROM_SIZE[size]}px`}
+            size={size}
             icon={checked ? checkedIcon : uncheckedIcon}
             margin={labelPosition}
           />

package/src/components/Header/index.tsx

@@ -1,7 +1,9 @@
 import { memo, useMemo } from 'react';
 import styled from 'styled-components';
+import { HEADER_SIZE_TO_NUMBER, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
+import { isStringSize } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IWithReqoreEffect } from '../../types/global';
 import { StyledTextEffect } from '../Effect';
@@ -10,7 +12,7 @@ export interface IReqoreHeadingProps
   extends IWithReqoreEffect,
     React.HTMLAttributes<HTMLHeadingElement> {
   intent?: TReqoreIntent;
-  size?: 1 | 2 | 3 | 4 | 5 | 6;
+  size?: 1 | 2 | 3 | 4 | 5 | 6 | TSizes;
   customTheme?: Partial<IReqoreTheme>;
 }
 
@@ -28,9 +30,10 @@ export const StyledHeader = styled(StyledTextEffect)`
 export const ReqoreHeading = memo(
   ({ size, children, customTheme, intent, ...props }: IReqoreHeadingProps) => {
     const theme = useReqoreTheme('main', customTheme, intent);
+    const _size: number = isStringSize(size) ? HEADER_SIZE_TO_NUMBER[size] : size;
     const HTMLheaderElement = useMemo(() => {
-      return `h${size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    }, [size]);
+      return `h${_size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }, [_size]);
 
     return (
       <StyledHeader as={HTMLheaderElement} theme={theme} intent={intent} {...props}>

package/src/components/Icon/index.tsx

@@ -4,13 +4,15 @@ import { IconBaseProps, IconType } from 'react-icons/lib';
 import * as RemixIcons from 'react-icons/ri';
 import styled, { css } from 'styled-components';
 import { ReqoreThemeContext } from '../..';
+import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
+import { isStringSize } from '../../helpers/utils';
 import { IReqoreIconName } from '../../types/icons';
 
 export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement> {
   icon: IReqoreIconName;
   color?: string;
-  size?: string;
+  size?: TSizes | string;
   iconProps?: IconBaseProps;
   intent?: TReqoreIntent;
   margin?: 'right' | 'left' | 'both';
@@ -22,18 +24,26 @@ export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both'
   vertical-align: text-bottom;
   transition: all 0.2s ease-out;
 
-  ${({ margin }) =>
+  ${({ margin, size }) =>
     margin &&
     css`
-      margin-left: ${(margin === 'left' || margin === 'both') && '10px'};
-      margin-right: ${(margin === 'right' || margin === 'both') && '10px'};
+      margin-left: ${margin === 'left' || margin === 'both'
+        ? isStringSize(size)
+          ? `${PADDING_FROM_SIZE[size]}px`
+          : '10px'
+        : undefined};
+      margin-right: ${margin === 'right' || margin === 'both'
+        ? isStringSize(size)
+          ? `${PADDING_FROM_SIZE[size]}px`
+          : '10px'
+        : undefined};
     `}
 `;
 
 const ReqoreIcon = memo(
   ({
     icon,
-    size = '17px',
+    size = 'normal',
     className,
     color,
     margin,
@@ -45,14 +55,16 @@ const ReqoreIcon = memo(
     const theme = useContext(ReqoreThemeContext);
     const Icon: IconType = RemixIcons[`Ri${icon}`];
     const finalColor: string | undefined = intent ? theme.intents[intent] : color;
+    const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
 
     if (!Icon) {
       return (
         <StyledIconWrapper
           {...rest}
+          size={size}
           margin={margin}
           className={`${className || ''} reqore-icon`}
-          style={{ ...style, width: size, height: size }}
+          style={{ ...style, width: finalSize, height: finalSize }}
         />
       );
     }
@@ -61,13 +73,14 @@ const ReqoreIcon = memo(
       <StyledIconWrapper
         {...rest}
         margin={margin}
-        style={{ ...style, width: size, height: size }}
+        size={size}
+        style={{ ...style, width: finalSize, height: finalSize }}
         className={`${className || ''} reqore-icon`}
       >
         <IconContext.Provider
           value={{
             color: finalColor || 'inherit',
-            size,
+            size: finalSize,
             style: {
               verticalAlign: 'super',
             },

package/src/components/Input/index.tsx

@@ -176,7 +176,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       >
         {icon && (
           <StyledIconWrapper _size={size}>
-            <ReqoreIcon size={`${TEXT_FROM_SIZE[size]}px`} icon={icon} />
+            <ReqoreIcon size={size} icon={icon} />
           </StyledIconWrapper>
         )}
         <StyledInput

package/src/components/Menu/index.tsx

@@ -67,18 +67,18 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
     return (
       <ReqoreThemeProvider theme={theme}>
         <StyledReqoreMenu {...rest} position={position} ref={ref} theme={theme}>
-          {React.Children.map(children, (child) =>
-            child
+          {React.Children.map(children, (child) => {
+            return child
               ? // @ts-ignore
                 React.cloneElement(child, {
                   _insidePopover,
                   _popoverId,
-                  customTheme: theme,
+                  customTheme: child?.props.customTheme || theme,
                   wrap: wrapText,
-                  flat,
+                  flat: child?.props.flat || flat,
                 })
-              : null
-          )}
+              : null;
+          })}
         </StyledReqoreMenu>
       </ReqoreThemeProvider>
     );

package/src/components/Message/index.tsx

@@ -1,7 +1,6 @@
 import { animated } from '@react-spring/web';
 import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
-import { TEXT_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -9,15 +8,16 @@ import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
   IWithReqoreEffect,
+  IWithReqoreMinimal,
   IWithReqoreSize,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
 import {
   StyledIconWrapper,
   StyledNotificationContent,
   StyledNotificationContentWrapper,
-  StyledNotificationTitle,
   StyledReqoreNotification,
   typeToIcon,
 } from '../Notifications/notification';
@@ -27,6 +27,7 @@ export interface IReqoreMessageProps
     IWithReqoreEffect,
     IWithReqoreSize,
     IReqoreIntent,
+    IWithReqoreMinimal,
     React.HTMLAttributes<HTMLDivElement> {
   title?: string;
   children: any;
@@ -36,7 +37,6 @@ export interface IReqoreMessageProps
   duration?: number;
   onFinish?: () => any;
   flat?: boolean;
-  inverted?: boolean;
 }
 
 export interface IReqoreNotificationStyle extends IReqoreMessageProps {
@@ -57,7 +57,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
       duration,
       onFinish,
       flat,
-      inverted,
+      minimal,
       size = 'normal',
       customTheme,
       ...rest
@@ -114,7 +114,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
           clickable={!!onClick}
           onClick={onClick}
           flat={flat}
-          inverted={inverted}
+          minimal={minimal}
           asMessage
           fluid
           className={`${rest?.className || ''} reqore-message`}
@@ -124,16 +124,23 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
         >
           {leftIcon ? (
             <StyledIconWrapper intent={intent} size={size} theme={theme}>
-              <ReqoreIcon
-                icon={leftIcon}
-                margin={flat && inverted ? undefined : 'left'}
-                size={`${TEXT_FROM_SIZE[size]}px`}
-              />
+              <ReqoreIcon icon={leftIcon} margin={flat && minimal ? 'right' : 'both'} size={size} />
             </StyledIconWrapper>
           ) : null}
           <StyledNotificationContentWrapper size={size} theme={theme}>
-            {title && <StyledNotificationTitle theme={theme}>{title}</StyledNotificationTitle>}
-            <StyledNotificationContent theme={theme}>{children}</StyledNotificationContent>
+            {title && (
+              <ReqoreHeading
+                size={size}
+                customTheme={
+                  rest.effect?.color ? { text: { color: rest.effect.color } } : undefined
+                }
+              >
+                {title}
+              </ReqoreHeading>
+            )}
+            <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
+              {children}
+            </StyledNotificationContent>
           </StyledNotificationContentWrapper>
           {onClose && (
             <StyledIconWrapper
@@ -147,7 +154,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
                 onClose && onClose();
               }}
             >
-              <ReqoreIcon icon='CloseFill' margin='both' size={`${TEXT_FROM_SIZE[size]}px`} />
+              <ReqoreIcon icon='CloseFill' margin='both' size={size} />
             </StyledIconWrapper>
           )}
         </StyledReqoreNotification>