@qoretechnologies/reqore 0.29.8 → 0.29.9

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -25,6 +25,7 @@ import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
   IWithReqoreFlat,
+  IWithReqoreFluid,
   IWithReqoreSize,
   IWithReqoreTooltip,
 } from '../../types/global';
@@ -62,6 +63,7 @@ export interface IReqorePanelProps
     IWithReqoreFlat,
     IReqoreIntent,
     IWithReqoreTooltip,
+    IWithReqoreFluid,
     React.HTMLAttributes<HTMLDivElement> {
   as?: any;
   children?: any;
@@ -99,12 +101,12 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)};
   border-radius: ${({ rounded }) => (rounded ? RADIUS_FROM_SIZE.normal : 0)}px;
-  border: ${({ theme, flat, opacity = 1, intent }) =>
+  border: ${({ theme, flat, intent }) =>
     flat && !intent
       ? undefined
-      : `1px solid ${rgba(
-          changeLightness(intent ? theme.intents[intent] : getMainBackgroundColor(theme), 0.2),
-          opacity
+      : `1px solid ${changeLightness(
+          intent ? theme.intents[intent] : getMainBackgroundColor(theme),
+          0.2
         )}`};
   color: ${({ theme }) => getReadableColor(theme, undefined, undefined, true)};
   overflow: hidden;
@@ -113,7 +115,8 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
   position: relative;
   backdrop-filter: ${({ blur, opacity }) => (blur && opacity < 1 ? `blur(${blur}px)` : undefined)};
   transition: 0.2s ease-in-out;
-  flex: auto;
+  width: ${({ fluid }) => (fluid ? '100%' : undefined)};
+  flex: ${({ fluid }) => (fluid ? '1 auto' : '0 0 auto')};
 
   ${({ interactive, theme, opacity = 1, flat, intent }) =>
     interactive
@@ -125,35 +128,37 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
               transform: scale(${ACTIVE_ICON_SCALE});
             }
 
-            background-color: ${rgba(
-              darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)),
-              opacity === 0 ? 0.2 : opacity
-            )};
+            background-color: ${opacity === 0 && flat
+              ? undefined
+              : rgba(
+                  darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)),
+                  opacity
+                )};
 
             border-color: ${flat && !intent
               ? undefined
-              : `${rgba(
-                  changeLightness(
-                    intent ? theme.intents[intent] : getMainBackgroundColor(theme),
-                    0.25
-                  ),
-                  opacity
+              : `${changeLightness(
+                  intent ? theme.intents[intent] : getMainBackgroundColor(theme),
+                  0.25
                 )}`};
 
-            ${StyledCollectionItemContent}:after {
-              background: linear-gradient(
-                to top,
-                ${rgba(
-                    darken(
-                      0.025,
-                      rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)
-                    ),
-                    opacity === 0 ? 0.2 : opacity
-                  )}
-                  0%,
-                transparent 100%
-              );
-            }
+            ${opacity !== 0 &&
+            css`
+              ${StyledCollectionItemContent}:after {
+                background: linear-gradient(
+                  to top,
+                  ${rgba(
+                      darken(
+                        0.025,
+                        rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)
+                      ),
+                      opacity
+                    )}
+                    0%,
+                  transparent 100%
+                );
+              }
+            `}
           }
         `
       : undefined}
@@ -215,7 +220,7 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 `;
 
 export const StyledPanelContent = styled.div<IStyledPanel>`
-  display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
+  display: ${({ isCollapsed }) => (isCollapsed ? 'none !important' : undefined)};
   padding: ${({ padded, contentSize, noHorizontalPadding }) =>
     !padded
       ? undefined
@@ -224,9 +229,10 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
       : `${TEXT_FROM_SIZE[contentSize]}px`};
   // The padding is not needed when the panel is minimal and has title, since
   // the title already has padding and is transparent
-  padding-top: ${({ minimal, hasLabel, padded }) =>
-    minimal && hasLabel && padded ? '0px' : undefined};
-  padding-bottom: ${({ minimal, padded }) => (minimal && padded ? '10px' : undefined)};
+  padding-top: ${({ minimal, hasLabel, padded, contentSize }) =>
+    minimal && hasLabel && padded ? `${TEXT_FROM_SIZE[contentSize] / 2}px` : undefined};
+  padding-bottom: ${({ minimal, padded, contentSize }) =>
+    minimal && padded ? `${TEXT_FROM_SIZE[contentSize]}px` : undefined};
   flex: 1;
   overflow: auto;
   font-size: ${({ contentSize }) => TEXT_FROM_SIZE[contentSize]}px;
@@ -268,6 +274,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       tooltip,
       badge,
       iconColor,
+      fluid,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -423,6 +430,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     }, [intent, theme, contentEffect, interactive]);
 
     const opacity = rest.transparent ? 0 : rest.opacity;
+    const noHorizontalPadding = opacity === 0 && flat && !intent;
 
     return (
       <StyledPanel
@@ -438,6 +446,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         theme={theme}
         effect={transformedContentEffect}
         opacity={opacity}
+        fluid={fluid}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -449,7 +458,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             theme={theme}
             contentSize={contentSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             <StyledPanelTitleHeader>
               {icon && (
@@ -518,7 +527,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             minimal={minimal}
             contentSize={contentSize}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             {children}
           </StyledPanelContent>
@@ -529,7 +538,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             className='reqore-panel-bottom-actions'
             theme={theme}
             opacity={opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             <ReqoreControlGroup>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
             <ReqoreControlGroup>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>

package/src/components/Tabs/content.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
+export type TReqoreTabsContentPadding = 'horizontal' | 'vertical' | 'none' | 'both' | true | false;
+
 export interface IReqoreTabsContent extends React.HTMLAttributes<HTMLDivElement> {
   children?: any;
   tabId: string | number;
+  padded?: TReqoreTabsContentPadding;
 }
 
 const StyledTabsContent = styled.div`
@@ -11,11 +14,16 @@ const StyledTabsContent = styled.div`
   flex-flow: column;
   overflow: hidden;
   flex: 1;
-  padding: 10px;
+  padding: ${({ padded }: IReqoreTabsContent) =>
+    padded === 'none' || padded === false
+      ? undefined
+      : `${padded === 'both' || padded === true || padded === 'vertical' ? 10 : 0}px ${
+          padded === 'both' || padded === true || padded === 'horizontal' ? 10 : 0
+        }px}`};
 `;
 
-const ReqoreTabsContent = ({ children, className, ...rest }: IReqoreTabsContent) => (
-  <StyledTabsContent {...rest} className={`${className || ''} reqore-tabs-content`}>
+const ReqoreTabsContent = ({ children, className, padded = true, ...rest }: IReqoreTabsContent) => (
+  <StyledTabsContent {...rest} padded={padded} className={`${className || ''} reqore-tabs-content`}>
     {children}
   </StyledTabsContent>
 );

package/src/components/Tabs/index.tsx

@@ -4,6 +4,7 @@ import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreButtonProps } from '../Button';
+import { TReqoreTabsContentPadding } from './content';
 import ReqoreTabsList from './list';
 
 export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
@@ -26,6 +27,8 @@ export interface IReqoreTabsProps extends React.HTMLAttributes<HTMLDivElement> {
   fillParent?: boolean;
   vertical?: boolean;
   activeTabIntent?: TReqoreIntent;
+  padded?: boolean;
+  tabsPadding?: TReqoreTabsContentPadding;
   wrapTabNames?: boolean;
   flat?: boolean;
   size?: TSizes;
@@ -61,6 +64,8 @@ const ReqoreTabs = ({
   wrapTabNames,
   customTheme,
   intent,
+  padded,
+  tabsPadding,
   ...rest
 }: IReqoreTabsProps) => {
   const [_activeTab, setActiveTab] = useState<string | number>(activeTab || tabs[0].id);
@@ -84,6 +89,7 @@ const ReqoreTabs = ({
     >
       <ReqoreTabsList
         tabs={tabs}
+        padded={padded}
         flat={flat}
         fill={fill}
         size={size}
@@ -104,7 +110,11 @@ const ReqoreTabs = ({
         }}
       />
       {React.Children.map(children, (child) =>
-        child && child.props?.tabId === _activeTab ? child : null
+        child && child.props?.tabId === _activeTab
+          ? React.cloneElement(child, {
+              padded: child.props?.padded || tabsPadding,
+            })
+          : null
       )}
     </StyledTabs>
   );

package/src/components/Tabs/item.tsx

@@ -18,6 +18,7 @@ export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqor
   wrapTabNames?: boolean;
   fill?: boolean;
   className?: string;
+  padded?: boolean;
 }
 
 export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
@@ -27,7 +28,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ disabled, vertical, size, fill }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, size, fill, padded }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -48,6 +49,16 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
               border-top-right-radius: 0 !important;
               border-bottom-right-radius: 0 !important;
             }
+
+            ${padded === false &&
+            css`
+              &:first-child {
+                padding-top: 0;
+              }
+              &:last-child {
+                padding-bottom: 0;
+              }
+            `}
           `
         : css`
             ${StyledButton} {
@@ -59,6 +70,16 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
             ${StyledButton}:last-child {
               border-bottom-right-radius: 0 !important;
             }
+
+            ${padded === false &&
+            css`
+              &:first-child {
+                padding-left: 0;
+              }
+              &:last-child {
+                padding-right: 0;
+              }
+            `}
           `}
 
       ${fill &&
@@ -109,6 +130,7 @@ const ReqoreTabsListItem = memo(
         flat = true,
         wrapTabNames,
         id,
+        padded,
         ...rest
       }: IReqoreTabListItemProps,
       ref
@@ -129,6 +151,7 @@ const ReqoreTabsListItem = memo(
           vertical={vertical}
           theme={theme}
           fill={fill}
+          padded={padded}
         >
           {label || icon ? (
             <ReqoreControlGroup stack size={size} fluid={fill || vertical}>

package/src/components/Tabs/list.tsx

@@ -162,6 +162,7 @@ const ReqoreTabsList = ({
   flat,
   size,
   intent,
+  padded,
   ...rest
 }: IReqoreTabsListProps) => {
   const [ref, { width }] = useMeasure();
@@ -211,6 +212,7 @@ const ReqoreTabsList = ({
                     vertical,
                     flat,
                     size,
+                    padded,
                     className: 'reqore-tabs-list-item-menu',
                   } as IReqoreTabListItemProps
                 }
@@ -279,6 +281,7 @@ const ReqoreTabsList = ({
                 fill={fill}
                 size={size}
                 flat={flat}
+                padded={padded}
                 activeIntent={activeTabIntent}
                 wrapTabNames={wrapTabNames}
                 {...item}

package/src/components/Tag/index.tsx

@@ -35,6 +35,7 @@ import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
+  show?: boolean;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -331,28 +332,30 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
           </StyledTagContentWrapper>
         ) : null}
         {_size(actions)
-          ? actions.map((action, index) => (
-              <React.Fragment key={index}>
-                <ReqorePopover
-                  component={StyledButtonWrapper}
-                  componentProps={{
-                    size,
-                    color: getCustomColor(action.intent),
-                    className: 'reqore-tag-action',
-                    onClick: action.onClick,
-                    effect: rest.effect,
-                  }}
-                  {...(action.tooltip
-                    ? typeof action.tooltip === 'string'
-                      ? { tooltip: action.tooltip }
-                      : action.tooltip
-                    : {})}
-                  isReqoreComponent
-                >
-                  <ReqoreIcon icon={action.icon} size={size} />
-                </ReqorePopover>
-              </React.Fragment>
-            ))
+          ? actions
+              .filter((action) => action.show !== false)
+              .map((action, index) => (
+                <React.Fragment key={index}>
+                  <ReqorePopover
+                    component={StyledButtonWrapper}
+                    componentProps={{
+                      size,
+                      color: getCustomColor(action.intent),
+                      className: 'reqore-tag-action',
+                      onClick: action.onClick,
+                      effect: rest.effect,
+                    }}
+                    {...(action.tooltip
+                      ? typeof action.tooltip === 'string'
+                        ? { tooltip: action.tooltip }
+                        : action.tooltip
+                      : {})}
+                    isReqoreComponent
+                  >
+                    <ReqoreIcon icon={action.icon} size={size} />
+                  </ReqorePopover>
+                </React.Fragment>
+              ))
           : null}
         {onRemoveClick && !rest.disabled ? (
           <ReqorePopover

package/src/constants/sizes.ts

@@ -37,19 +37,19 @@ export const HEADER_SIZE_TO_NUMBER = {
 };
 
 export const SIZE_TO_PX = {
-  tiny: 10,
-  small: 20,
+  tiny: 18,
+  small: 24,
   normal: 30,
   big: 40,
   huge: 50,
 };
 
 export const BADGE_SIZE_TO_PX = {
-  tiny: 10,
-  small: 18,
-  normal: 24,
-  big: 30,
-  huge: 36,
+  tiny: 14,
+  small: 20,
+  normal: 26,
+  big: 32,
+  huge: 38,
 };
 
 export const TABS_SIZE_TO_PX = {

package/src/containers/ReqoreProvider.tsx

@@ -122,6 +122,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           isMobileOrTablet,
           getAndIncreaseZIndex,
           animations: options.animations || { buttons: true, dialogs: true },
+          tooltips: options.tooltips || { delay: 0 },
           closePopoversOnEscPress:
             'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
         }}

package/src/containers/UIProvider.tsx

@@ -18,6 +18,13 @@ export interface IReqoreOptions {
     buttons?: boolean;
     dialogs?: boolean;
   };
+  tooltips?: {
+    /**
+     * Delay in ms before showing the tooltip
+     * @default 0
+     * */
+    delay?: number;
+  };
   closePopoversOnEscPress?: boolean;
 }
 export interface IReqoreUIProviderProps {

package/src/context/ReqoreContext.tsx

@@ -12,6 +12,7 @@ export interface IReqoreContext {
   readonly isMobileOrTablet?: boolean;
   readonly getAndIncreaseZIndex?: () => number;
   readonly animations?: IReqoreOptions['animations'];
+  readonly tooltips?: IReqoreOptions['tooltips'];
   readonly closePopoversOnEscPress?: boolean;
 }
 

package/src/hooks/usePopover.tsx

@@ -11,6 +11,7 @@ import {
   IWithReqoreMinimal,
 } from '../types/global';
 import { IReqoreIconName } from '../types/icons';
+import { useReqore } from './useReqore';
 
 const startEvents = {
   hover: 'mouseenter',
@@ -77,6 +78,7 @@ const usePopover = ({
 }: IPopoverOptions): IPopoverControls => {
   const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
     useContext(PopoverContext);
+  const { tooltips } = useReqore();
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 
@@ -112,10 +114,10 @@ const usePopover = ({
         _removePopover?.();
       }
     } else if (show) {
-      if (delay) {
+      if (delay || tooltips.delay) {
         timeout = setTimeout(() => {
           openPopover();
-        }, delay);
+        }, delay || tooltips.delay);
       } else {
         openPopover();
       }

package/src/mock/collectionData.tsx

@@ -104,6 +104,22 @@ export default [
       weight: 'thin',
       spaced: 2,
     },
+    expandedActions: [
+      {
+        label: 'Action 1',
+        id: 'action1',
+        icon: 'CapsuleFill',
+        onClick: () => alert('Action 1 clicked'),
+        position: 'left',
+      },
+      {
+        label: 'Action 2',
+        id: 'action2',
+        icon: 'CapsuleFill',
+        onClick: () => alert('Action 2 clicked'),
+        position: 'right',
+      },
+    ],
     expandedContent: (
       <>
         <ReqoreMessage intent='info'>Hello I am a custom content</ReqoreMessage>
@@ -191,6 +207,9 @@ export default [
   },
   {
     label: 'I have intent!',
+    transparent: true,
+    minimal: false,
+    flat: false,
     content: (
       <ReqoreP>
         'Well would you look at that. Lorem ipsum dolor{' '}
@@ -242,13 +261,14 @@ export default [
   {
     label: 'I have actions',
     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',
+      '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. 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. 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. 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. 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. 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',
     actions: [
       {
         label: 'Action 1',
         id: 'action1',
         icon: 'CapsuleFill',
         onClick: () => alert('Action 1 clicked'),
+        show: false,
       },
       {
         label: 'Action 2',

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

@@ -9,7 +9,7 @@ import {
   ReqoreTag,
   ReqoreVerticalSpacer,
 } from '../../index';
-import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
+import { argManager, GapSizeArg, MinimalArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -55,6 +55,7 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
           icon='PictureInPictureLine'
           flat={false}
           effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
+          description="With a description, it's a bit longer than the button itself"
         >
           Non flat Button
         </ReqoreButton>
@@ -218,3 +219,14 @@ export const NoWrap = Template.bind({});
 NoWrap.args = {
   wrap: false,
 };
+
+export const HorizontalAlign = Template.bind({});
+HorizontalAlign.args = {
+  vertical: true,
+  horizontalAlign: 'center',
+};
+
+export const VerticalAlign = Template.bind({});
+VerticalAlign.args = {
+  verticalAlign: 'flex-end',
+};

package/src/stories/Icon/Icon.stories.tsx

@@ -21,6 +21,7 @@ export const Icon: Story<IReqoreIconProps> = () => {
           color='#291133'
           effect={{ sepia: true }}
           margin='both'
+          tooltip={{ content: 'I have a tooltip', openOnMount: true }}
         />
         <ReqoreIcon
           icon='SignalTowerFill'

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

@@ -2,13 +2,14 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { ReqoreControlGroup } from '../../index';
-import { FlatArg, IconArg, MinimalArg } from '../utils/args';
+import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
 
 export default {
   title: 'Components/Input',
   argTypes: {
     ...MinimalArg,
     ...FlatArg,
+    ...SizeArg,
     ...IconArg('icon', 'Icon', 'SearchLine'),
   },
 } as Meta<IReqoreInputProps>;