@qoretechnologies/reqore 0.26.1 → 0.27.0

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, memo, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import {
   PADDING_FROM_SIZE,
@@ -10,6 +10,7 @@ import {
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import ReqoreContext from '../../context/ReqoreContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
@@ -28,8 +29,10 @@ import {
   TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
+import { ReqoreSpacer } from '../Spacer';
+import ReqoreTag, { IReqoreTagProps } from '../Tag';
 
 export interface IReqoreButtonProps
   extends React.HTMLAttributes<HTMLButtonElement>,
@@ -48,6 +51,10 @@ export interface IReqoreButtonProps
   rightIcon?: IReqoreIconName;
   customTheme?: IReqoreCustomTheme;
   wrap?: boolean;
+  badge?: string | number | IReqoreTagProps;
+  description?: string | number;
+  maxWidth?: string;
+  textAlign?: 'left' | 'center' | 'right';
 }
 
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
@@ -67,6 +74,7 @@ export const StyledAnimatedTextWrapper = styled.span`
   overflow: hidden;
   position: relative;
   padding: 4px 0;
+  text-align: left;
 `;
 
 export const StyledActiveContent = styled.span`
@@ -77,7 +85,7 @@ export const StyledActiveContent = styled.span`
   filter: blur(10px);
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       overflow: hidden;
       text-overflow: ellipsis;
@@ -92,7 +100,7 @@ export const StyledInActiveContent = styled.span`
   transition: all 0.2s ease-out;
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       overflow: hidden;
       text-overflow: ellipsis;
@@ -107,7 +115,7 @@ export const StyledInvisibleContent = styled.span`
   overflow: hidden;
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       white-space: nowrap;
     `}
@@ -115,8 +123,9 @@ export const StyledInvisibleContent = styled.span`
 
 export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   display: flex;
-  text-align: left;
+  flex-flow: column;
   align-items: center;
+  justify-content: center;
   margin: 0;
   font-weight: 600;
   position: relative;
@@ -129,13 +138,8 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   min-height: ${({ size }) => SIZE_TO_PX[size]}px;
 
-  ${({ wrap }) =>
-    wrap &&
-    css`
-      max-height: ${({ size }) => SIZE_TO_PX[size]}px;
-    `}
-
   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')};
 
@@ -233,82 +237,149 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
     border-color: ${({ minimal, theme, color }) =>
       minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.4)};
   }
+
+  ${StyledTextEffect} {
+    padding-bottom: ${({ size }) => PADDING_FROM_SIZE[getOneLessSize(size)]}px;
+  }
 `;
 
-const ReqoreButton = forwardRef(
-  (
-    {
-      icon,
-      size = 'normal',
-      minimal,
-      children,
-      tooltip,
-      className,
-      fluid,
-      fixed,
-      intent,
-      active,
-      flat,
-      rightIcon,
-      customTheme,
-      wrap = true,
-      readOnly,
-      ...rest
-    }: IReqoreButtonProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-    const { animations } = useContext(ReqoreContext);
-    const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
-
-    /* A custom hook that is used to add a tooltip to the button. */
-    useTooltip(targetRef.current, tooltip);
-
-    // If color or intent was specified, set the color
-    const customColor = theme.main;
-    const _flat = minimal ? flat : flat !== false;
-
-    return (
-      <StyledButton
-        {...rest}
-        as='button'
-        theme={theme}
-        ref={targetRef}
-        fluid={fluid}
-        fixed={fixed}
-        minimal={minimal}
-        size={size}
-        color={customColor}
-        animate={animations.buttons}
-        flat={_flat}
-        active={active}
-        readOnly={readOnly}
-        className={`${className || ''} reqore-control reqore-button`}
-      >
-        {icon && (
-          <ReqoreIcon
-            icon={icon}
-            margin={children || rightIcon ? 'right' : undefined}
-            size={`${TEXT_FROM_SIZE[size]}px`}
-          />
-        )}
-        {children && (
-          <StyledAnimatedTextWrapper>
-            <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
-            <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
-            <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
-          </StyledAnimatedTextWrapper>
-        )}
-        {rightIcon && (
-          <ReqoreIcon
-            icon={rightIcon}
-            margin={children ? 'left' : undefined}
-            size={`${TEXT_FROM_SIZE[size]}px`}
+export const StyledButtonContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  flex-shrink: 0;
+  min-height: ${({ size }) => SIZE_TO_PX[size]}px;
+  ${({ wrap, description }) =>
+    !wrap && !description
+      ? css`
+          max-height: ${({ size }) => SIZE_TO_PX[size]}px;
+        `
+      : null}
+`;
+
+const ReqoreButton = memo(
+  forwardRef(
+    (
+      {
+        icon,
+        size = 'normal',
+        minimal,
+        children,
+        tooltip,
+        className,
+        fluid,
+        fixed,
+        intent,
+        active,
+        flat,
+        rightIcon,
+        customTheme,
+        wrap,
+        readOnly,
+        badge,
+        description,
+        maxWidth,
+        textAlign = 'left',
+        ...rest
+      }: IReqoreButtonProps,
+      ref
+    ) => {
+      const { targetRef } = useCombinedRefs(ref);
+      const { animations } = useContext(ReqoreContext);
+      const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
+
+      /* A custom hook that is used to add a tooltip to the button. */
+      useTooltip(targetRef.current, tooltip);
+
+      // If color or intent was specified, set the color
+      const customColor = theme.main;
+      const _flat = minimal ? flat : flat !== false;
+      const color = customColor
+        ? minimal
+          ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
+          : 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)}
           />
-        )}
-      </StyledButton>
-    );
-  }
+        </>
+      );
+
+      return (
+        <StyledButton
+          {...rest}
+          as='button'
+          theme={theme}
+          ref={targetRef}
+          fluid={fluid}
+          fixed={fixed}
+          maxWidth={maxWidth}
+          minimal={minimal}
+          size={size}
+          color={customColor}
+          animate={animations.buttons}
+          flat={_flat}
+          active={active}
+          readOnly={readOnly}
+          wrap={wrap}
+          description={description}
+          className={`${className || ''} reqore-control reqore-button`}
+        >
+          <StyledButtonContent size={size} wrap={wrap} description={description}>
+            {icon && (
+              <>
+                <ReqoreIcon icon={icon} size={`${TEXT_FROM_SIZE[size]}px`} />
+                {children || badge || rightIcon ? (
+                  <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+                ) : null}
+              </>
+            )}
+            {children && (
+              <StyledAnimatedTextWrapper textAlign={textAlign}>
+                <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
+                <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
+                <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
+                {badge && wrap ? renderBadge() : null}
+              </StyledAnimatedTextWrapper>
+            )}
+            {badge && !wrap ? renderBadge() : null}
+            {rightIcon && (
+              <>
+                {children || badge ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
+                <ReqoreIcon
+                  icon={rightIcon}
+                  size={`${TEXT_FROM_SIZE[size]}px`}
+                  style={{ marginLeft: 'auto' }}
+                />
+              </>
+            )}
+          </StyledButtonContent>
+
+          {description && (
+            <ReqoreTextEffect
+              effect={{
+                textSize: getOneLessSize(size),
+                weight: 'light',
+                color: `${color}90`,
+                textAlign,
+              }}
+            >
+              {description}
+            </ReqoreTextEffect>
+          )}
+        </StyledButton>
+      );
+    }
+  )
 );
 
 export default ReqoreButton;

package/src/components/Drawer/index.tsx

@@ -1,10 +1,11 @@
 import { animated, useTransition } from '@react-spring/web';
 import { rgba } from 'polished';
 import { Resizable } from 're-resizable';
-import { useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
-import { SPRING_CONFIG } from '../../constants/animations';
+import { ReqoreContext } from '../..';
+import { SPRING_CONFIG, SPRING_CONFIG_NO_ANIMATIONS } from '../../constants/animations';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { getMainBackgroundColor } from '../../helpers/colors';
@@ -171,6 +172,7 @@ export const ReqoreDrawer = ({
   height,
   ...rest
 }: IReqoreDrawerProps) => {
+  const { animations } = useContext(ReqoreContext);
   const theme = useReqoreTheme('main', customTheme, intent);
   const layout = useMemo(
     () =>
@@ -192,7 +194,7 @@ export const ReqoreDrawer = ({
 
   const transitions = useTransition(isOpen, {
     ...getSpringConfig(_isModal, position, floating),
-    config: SPRING_CONFIG,
+    config: animations.dialogs ? SPRING_CONFIG : SPRING_CONFIG_NO_ANIMATIONS,
   });
 
   const zIndex = useLatestZIndex();

package/src/components/Menu/index.tsx

@@ -15,6 +15,7 @@ export interface IReqoreMenuProps extends IReqoreComponent, React.HTMLAttributes
   customTheme?: IReqoreCustomTheme;
   intent?: TReqoreIntent;
   wrapText?: boolean;
+  flat?: boolean;
 }
 
 export interface IReqoreMenuStyle extends IReqoreMenuProps {
@@ -48,7 +49,17 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
 
 const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
   (
-    { children, position, _insidePopover, _popoverId, customTheme, intent, wrapText, ...rest },
+    {
+      children,
+      position,
+      _insidePopover,
+      _popoverId,
+      customTheme,
+      intent,
+      wrapText,
+      flat = true,
+      ...rest
+    },
     ref: any
   ) => {
     const theme = useReqoreTheme('main', customTheme, intent);
@@ -64,6 +75,7 @@ const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
                   _popoverId,
                   customTheme: theme,
                   wrap: wrapText,
+                  flat,
                 })
               : null
           )}

package/src/components/Menu/item.tsx

@@ -50,6 +50,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
       _popoverId,
       tooltip,
       intent,
+      flat = true,
       ...rest
     },
     ref: any
@@ -88,7 +89,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
           //@ts-ignore
           as={as}
           {...rest}
-          flat
+          flat={flat}
           className='reqore-menu-item'
           fluid
           onClick={handleClick}
@@ -103,7 +104,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
         {rightIcon && (
           <ReqoreButton
             icon={rightIcon}
-            flat
+            flat={flat}
             fixed
             minimal={!onRightIconClick}
             customTheme={rest.customTheme}

package/src/components/Spacer/index.tsx

@@ -4,4 +4,5 @@ export const ReqoreSpacer = styled.div`
   visibility: hidden;
   height: ${({ height }) => height || 1}px;
   width: ${({ width }) => width || 1}px;
+  flex-shrink: 0;
 `;

package/src/components/Tabs/index.tsx

@@ -59,7 +59,7 @@ const ReqoreTabs = ({
   _testWidth,
   vertical,
   activeTabIntent,
-  flat,
+  flat = true,
   size = 'normal',
   width,
   wrapTabNames,

package/src/components/Tabs/item.tsx

@@ -6,10 +6,11 @@ import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { IWithReqoreFlat } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
 
-export interface IReqoreTabListItemProps extends IReqoreTabsListItem {
+export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqoreFlat {
   active?: boolean;
   vertical?: boolean;
   onCloseClick?: any;
@@ -95,6 +96,8 @@ const ReqoreTabsListItem = memo(
         closeIcon,
         customTheme,
         className,
+        flat = true,
+        wrapTabNames,
       }: IReqoreTabListItemProps,
       ref
     ) => {
@@ -122,10 +125,11 @@ const ReqoreTabsListItem = memo(
           {label || icon ? (
             <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
               <ReqoreButton
-                flat={!active && !intent}
+                flat={active || intent ? false : flat}
                 fluid={fill || vertical}
                 icon={icon}
                 minimal
+                wrap={wrapTabNames}
                 intent={active ? activeIntent || intent : intent}
                 active={active}
                 disabled={disabled}
@@ -139,7 +143,7 @@ const ReqoreTabsListItem = memo(
               {onCloseClick && !disabled ? (
                 <ReqoreButton
                   fixed
-                  flat={!active && !intent}
+                  flat={active || intent ? false : flat}
                   icon={closeIcon || 'CloseLine'}
                   intent={active ? activeIntent || intent : intent}
                   minimal

package/src/components/Tabs/list.tsx

@@ -245,6 +245,7 @@ const ReqoreTabsList = ({
                 {...item}
                 fill={fill}
                 size={size}
+                flat={flat}
                 activeIntent={activeTabIntent}
                 customTheme={theme}
                 wrapTabNames={wrapTabNames}

package/src/components/Tag/index.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { ReqorePopover } from '../..';
 import {
+  BADGE_SIZE_TO_PX,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
@@ -65,9 +66,9 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   overflow: hidden;
   vertical-align: middle;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
-  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  border-radius: ${({ badge, size }) => (badge ? 20 : RADIUS_FROM_SIZE[size])}px;
+  border-radius: ${({ badge, size }) => (badge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 

package/src/constants/animations.ts

@@ -2,3 +2,8 @@ export const SPRING_CONFIG = {
   tension: 120,
   friction: 20,
 };
+
+export const SPRING_CONFIG_NO_ANIMATIONS = {
+  tension: 0,
+  friction: 0,
+};

package/src/constants/sizes.ts

@@ -1,6 +1,22 @@
 export type TSizes = 'tiny' | 'small' | 'normal' | 'big' | 'huge';
 export type TWeights = 'soft' | 'normal' | 'heavy';
 
+export const SIZE_TO_NUMBER = {
+  tiny: 1,
+  small: 2,
+  normal: 3,
+  big: 4,
+  huge: 5,
+};
+
+export const NUMBER_TO_SIZE = {
+  1: 'tiny',
+  2: 'small',
+  3: 'normal',
+  4: 'big',
+  5: 'huge',
+};
+
 export const SIZE_TO_PX = {
   tiny: 10,
   small: 20,
@@ -9,6 +25,14 @@ export const SIZE_TO_PX = {
   huge: 50,
 };
 
+export const BADGE_SIZE_TO_PX = {
+  tiny: 10,
+  small: 17,
+  normal: 23,
+  big: 30,
+  huge: 36,
+};
+
 export const TABS_SIZE_TO_PX = {
   tiny: 20,
   small: 30,

package/src/containers/ReqoreProvider.tsx

@@ -121,7 +121,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options }) =
           isTablet,
           isMobileOrTablet,
           getAndIncreaseZIndex,
-          animations: options?.animations || { buttons: true },
+          animations: options?.animations || { buttons: true, dialogs: true },
         }}
       >
         {size(notifications) > 0 ? (

package/src/containers/UIProvider.tsx

@@ -16,6 +16,7 @@ export interface IReqoreOptions {
   uiScale?: number;
   animations?: {
     buttons?: boolean;
+    dialogs?: boolean;
   };
 }
 export interface IReqoreUIProviderProps {

package/src/context/ReqoreContext.tsx

@@ -21,5 +21,6 @@ export default createContext<IReqoreContext>({
   removeNotification: null,
   animations: {
     buttons: true,
+    dialogs: true,
   },
 });

package/src/helpers/utils.ts

@@ -8,6 +8,7 @@ import {
   isString,
   isUndefined,
 } from 'lodash';
+import { NUMBER_TO_SIZE, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
 
 export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
 
@@ -73,3 +74,12 @@ export const calculateStringSizeInPixels = (value: string = '', fontSize: number
     Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) * fontSize
   );
 };
+
+export const getOneLessSize = (size: TSizes): TSizes => {
+  // Get the initial sizes number
+  const initialSizeNumber: number = SIZE_TO_NUMBER[size];
+  // Reduce the size number by one
+  const oneLessSizeNumber: number = initialSizeNumber - 1 === 0 ? 1 : initialSizeNumber - 1;
+  // Get the size name from the number
+  return NUMBER_TO_SIZE[oneLessSizeNumber];
+};