@qoretechnologies/reqore 0.29.3 → 0.29.5

package/src/components/Tag/group.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { StyledTag } from '.';
 import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
@@ -11,19 +10,14 @@ export interface IReqoreTagGroup
   children: any;
   gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-  hasBottomMargin?: boolean;
+  wrap?: boolean;
 }
 
 const StyledTagGroup = styled.div`
   flex-shrink: 0;
-
-  ${StyledTag} {
-    &:not(:last-child) {
-      margin-right: ${({ gapSize }: IReqoreTagGroup) => `${GAP_FROM_SIZE[gapSize]}px`};
-    }
-
-    margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? '5px' : '0px')};
-  }
+  display: flex;
+  flex-wrap: ${({ wrap }: IReqoreTagGroup) => (wrap ? 'wrap' : 'nowrap')};
+  gap: ${({ gapSize }: IReqoreTagGroup) => GAP_FROM_SIZE[gapSize]}px;
 `;
 
 const ReqoreTagGroup = ({
@@ -33,13 +27,13 @@ const ReqoreTagGroup = ({
   minimal,
   className,
   columns,
-  hasBottomMargin = true,
+  wrap = true,
   ...rest
 }: IReqoreTagGroup) => (
   <StyledTagGroup
     {...rest}
     gapSize={gapSize}
-    hasBottomMargin={hasBottomMargin}
+    wrap={wrap}
     className={`${className || ''} reqore-tag-group`}
   >
     {React.Children.map(children, (child) =>

package/src/components/Tag/index.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
+import { ActiveIconScale, InactiveIconScale } from '../../styles';
 import {
   IReqoreDisabled,
   IReqoreIntent,
@@ -50,6 +51,9 @@ export interface IReqoreTagProps
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
+  iconColor?: TReqoreEffectColor;
+  leftIconColor?: TReqoreEffectColor;
+  rightIconColor?: TReqoreEffectColor;
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
@@ -81,6 +85,8 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
+  ${InactiveIconScale};
+
   ${({ wrap, hasWidth }) =>
     wrap || hasWidth
       ? css`
@@ -106,16 +112,24 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 
   ${({ theme, color, interactive, minimal, effect }) =>
-    interactive && !effect?.gradient
+    interactive
       ? css`
           cursor: pointer;
           &:hover {
-            background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
-            color: ${minimal
-              ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
-              : color
-              ? getReadableColorFrom(color)
-              : getReadableColor(theme, undefined, undefined)};
+            .reqore-tag-content,
+            .reqore-tag-key-content {
+              ${ActiveIconScale}
+            }
+
+            ${!effect?.gradient &&
+            css`
+              background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
+              color: ${minimal
+                ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
+                : color
+                ? getReadableColorFrom(color)
+                : getReadableColor(theme, undefined, undefined)};
+            `}
           }
         `
       : undefined}
@@ -130,8 +144,6 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 `;
 
-const StyledTagRightIcon = styled(ReqoreIcon)``;
-
 const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
@@ -227,6 +239,9 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       minimal,
       wrap = false,
       width,
+      leftIconColor,
+      rightIconColor,
+      iconColor,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -276,7 +291,14 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             hasWidth={!!width}
             hasKey={!!labelKey}
           >
-            {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
+            {icon && (
+              <ReqoreIcon
+                icon={icon}
+                size={size}
+                margin={label ? 'left' : 'both'}
+                color={leftIconColor || iconColor}
+              />
+            )}
             {labelKey && (
               <StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
                 {labelKey}
@@ -299,10 +321,11 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               </StyledTagContent>
             ) : null}
             {rightIcon && (
-              <StyledTagRightIcon
+              <ReqoreIcon
                 icon={rightIcon}
                 size={size}
                 margin={label || icon ? 'right' : 'both'}
+                color={rightIconColor || iconColor}
               />
             )}
           </StyledTagContentWrapper>
@@ -324,7 +347,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                       ? { tooltip: action.tooltip }
                       : action.tooltip
                     : {})}
-                  noWrapper
+                  isReqoreComponent
                 >
                   <ReqoreIcon icon={action.icon} size={size} />
                 </ReqorePopover>
@@ -341,7 +364,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               onClick: onRemoveClick,
               effect: rest.effect,
             }}
-            noWrapper
+            isReqoreComponent
             content='Remove'
           >
             <ReqoreIcon icon='CloseLine' size={size} />

package/src/hooks/usePopover.tsx

@@ -44,6 +44,7 @@ export interface IPopover
   show?: boolean;
   openOnMount?: boolean;
   noArrow?: boolean;
+  noWrapper?: boolean;
   useTargetWidth?: boolean;
   closeOnOutsideClick?: boolean;
   closeOnAnyClick?: boolean;

package/src/mock/collectionData.tsx

@@ -32,6 +32,8 @@ export default [
     tooltip: 'This is a test item',
     headerSize: 2,
     contentSize: 'huge',
+    selected: true,
+    icon: 'Hashtag',
     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',
     tags: [
@@ -58,6 +60,13 @@ export default [
     minimal: false,
     badge: 0,
   },
+  {
+    icon: 'ZcoolLine',
+    label: 'Item without fade',
+    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 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 Hello I am a test item content and I am very long so 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',
+    showContentFade: false,
+  },
   {
     icon: 'FolderWarningFill',
     label: 'Expandable item',
@@ -82,6 +91,7 @@ export default [
   {
     label: 'Item with custom content when expanded',
     tooltip: 'Expandable item with custom content',
+    selected: true,
     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',
     expandable: true,

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

@@ -20,7 +20,7 @@ export default {
 const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   return (
     <>
-      <ReqoreControlGroup size={buttonProps.size}>
+      <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
         <ReqoreButton {...buttonProps} />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
@@ -41,14 +41,21 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup size={buttonProps.size}>
+      <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
           Active Not Flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} flat={false}>
           Not Flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal flat={false}>
+        <ReqoreButton
+          {...buttonProps}
+          minimal
+          flat={false}
+          iconColor='#38fdb2'
+          leftIconColor='#33023c:lighten:3'
+          rightIconColor='#0a487b:lighten:3'
+        >
           Minimal not flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
@@ -59,16 +66,17 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup fluid>
+      <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid>
           Fluid button
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
           description='This is a very interesting description for a button, I like it very much'
+          iconColor='#38fdb2'
         >
           With Default Description
         </ReqoreButton>
@@ -109,7 +117,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
         </ReqoreButton>

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox, ReqoreControlGroup } from '../../index';
+import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
 
 export default {
   title: 'Components/Checkbox',
@@ -10,7 +10,7 @@ export default {
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
     <ReqoreControlGroup vertical>
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreCheckbox {...args} />
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
         <ReqoreCheckbox {...args} checked tooltip='I am checked' />
@@ -18,7 +18,8 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
         <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
       </ReqoreControlGroup>
-      <ReqoreControlGroup>
+      <ReqoreVerticalSpacer height={10} />
+      <ReqoreControlGroup wrap>
         <ReqoreCheckbox {...args} intent='info' checked />
         <ReqoreCheckbox
           {...args}

package/src/stories/Collection/Collection.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import items from '../../mock/collectionData';
-import { argManager, IntentArg, SizeArg } from '../utils/args';
+import { IntentArg, SizeArg, argManager } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -45,7 +45,7 @@ export default {
       description: 'If true, the collection will be rounded when stacked',
     }),
     ...createArg('height', {
-      defaultValue: '600px',
+      defaultValue: undefined,
       type: 'string',
       name: 'Height',
       description: 'Height of the collection',
@@ -72,6 +72,8 @@ const Template: Story<IReqoreCollectionProps> = (args) => {
   return (
     <ReqoreCollection
       {...args}
+      badge={10}
+      selectedIcon='CheckLine'
       actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
     />
   );
@@ -83,6 +85,13 @@ Basic.args = {
   items,
 };
 
+export const WithHeight = Template.bind({});
+WithHeight.args = {
+  label: 'Collection of items',
+  height: '600px',
+  items,
+};
+
 export const Stacked = Template.bind({});
 Stacked.args = {
   label: 'Collection of items',
@@ -96,3 +105,10 @@ Fill.args = {
   fill: true,
   items,
 };
+
+export const SelectedFirst = Template.bind({});
+SelectedFirst.args = {
+  label: 'Collection of items',
+  items,
+  showSelectedFirst: true,
+};

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

@@ -1,7 +1,13 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import ReqoreInput from '../../components/Input';
-import { ReqoreButton, ReqoreCheckbox, ReqoreControlGroup, ReqoreTag } from '../../index';
+import {
+  ReqoreButton,
+  ReqoreCheckbox,
+  ReqoreControlGroup,
+  ReqoreTag,
+  ReqoreVerticalSpacer,
+} from '../../index';
 import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
@@ -35,37 +41,60 @@ export default {
 
 const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
   return (
-    <ReqoreControlGroup {...args}>
-      <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-      <ReqoreButton
-        icon='PictureInPictureLine'
-        flat={false}
-        effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
-      >
-        Non flat Button
-      </ReqoreButton>
-      <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-      <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-      <ReqoreCheckbox
-        asSwitch
-        label='Switchy switch'
-        margin='both'
-        intent='warning'
-        checkedIcon='CheckFill'
-        checked
-        uncheckedIcon='CheckboxBlankLine'
-      />
-      <ReqoreInput icon='4KFill' value='Hello' />
-      <ReqoreButton disabled fixed>
-        Disabled & Fixed
-      </ReqoreButton>
-      <ReqoreCheckbox checked margin='both'>
-        Checkbox
-      </ReqoreCheckbox>
+    <>
+      <ReqoreControlGroup {...args}>
+        <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+        <ReqoreButton
+          icon='PictureInPictureLine'
+          flat={false}
+          effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
+        >
+          Non flat Button
+        </ReqoreButton>
+        <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+        <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+        <ReqoreCheckbox
+          asSwitch
+          label='Switchy switch'
+          margin='both'
+          intent='warning'
+          checkedIcon='CheckFill'
+          checked
+          uncheckedIcon='CheckboxBlankLine'
+        />
+        <ReqoreInput icon='4KFill' value='Hello' />
+        <ReqoreButton disabled fixed>
+          Disabled & Fixed
+        </ReqoreButton>
+        <ReqoreCheckbox checked margin='both'>
+          Checkbox
+        </ReqoreCheckbox>
 
-      <ReqoreButton minimal>Minimal</ReqoreButton>
-      <ReqoreTag label='smol tag' size='small' />
-    </ReqoreControlGroup>
+        <ReqoreButton minimal>Minimal</ReqoreButton>
+        <ReqoreTag label='smol tag' size='small' />
+      </ReqoreControlGroup>
+      <ReqoreVerticalSpacer height={15} />
+      <ReqoreControlGroup {...args} className='root-group'>
+        <ReqoreControlGroup intent='info' className='group-1'>
+          <ReqoreButton icon='PictureInPictureLine'>Group 1</ReqoreButton>
+          <ReqoreTag icon='PictureInPictureLine' label='Group 1' />
+        </ReqoreControlGroup>
+        <ReqoreButton icon='PictureInPictureLine'>Root group</ReqoreButton>
+        <ReqoreControlGroup intent='success' className='group-2'>
+          <ReqoreButton icon='PictureInPictureLine'>Group 2</ReqoreButton>
+          <ReqoreControlGroup intent='danger' className='group-3'>
+            <ReqoreButton icon='PictureInPictureLine'>Group 3</ReqoreButton>
+            <ReqoreButton icon='PictureInPictureLine'>Group 3</ReqoreButton>
+          </ReqoreControlGroup>
+          <ReqoreCheckbox label='Group 2' margin='both' />
+        </ReqoreControlGroup>
+        <ReqoreButton icon='PictureInPictureLine'>Root group</ReqoreButton>
+        <ReqoreControlGroup intent='warning' className='group-4'>
+          <ReqoreButton icon='PictureInPictureLine'>Group 4</ReqoreButton>
+          <ReqoreInput icon='PictureInPictureLine' value='Group 4' />
+        </ReqoreControlGroup>
+      </ReqoreControlGroup>
+    </>
   );
 };
 
@@ -85,6 +114,13 @@ Vertical.args = {
   vertical: true,
 };
 
+export const VerticalStacked = Template.bind({});
+VerticalStacked.args = {
+  vertical: true,
+  stack: true,
+  fluid: true,
+};
+
 export const Stacked = Template.bind({});
 Stacked.args = {
   stack: true,
@@ -94,3 +130,8 @@ export const BigGapSize = Template.bind({});
 BigGapSize.args = {
   gapSize: 'big',
 };
+
+export const Wrap = Template.bind({});
+Wrap.args = {
+  wrap: true,
+};

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -159,11 +159,21 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
 
   return (
     <>
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreDropdown label='Default Dropdown' {...args} />
         <ReqoreDropdown label='Disabled if empty' {...args} items={[]} />
-        <ReqoreDropdown icon='SunCloudyLine' label='Custom icon' {...args} />
-        <ReqoreDropdown rightIcon='SunCloudyLine' caretPosition='right' {...args}>
+        <ReqoreDropdown
+          icon='SunCloudyLine'
+          label='Custom icon'
+          {...args}
+          leftIconColor='warning:lighten:2'
+        />
+        <ReqoreDropdown
+          rightIcon='SunCloudyLine'
+          caretPosition='right'
+          {...args}
+          iconColor='success:lighten:2'
+        >
           Custom icon with caret on right
         </ReqoreDropdown>
         <ReqoreDropdown

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

@@ -26,7 +26,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
 
   return (
     <>
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreInput {...args} placeholder='Reqore Input' onChange={handleValueChange} />
         <ReqoreInput {...args} placeholder='Minimal Input' minimal onChange={handleValueChange} />
         <ReqoreInput
@@ -38,6 +38,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
         <ReqoreInput
           {...args}
+          iconColor='pending:lighten:2'
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           onChange={handleValueChange}
@@ -51,7 +52,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreInput
           {...args}
           placeholder='Reqore Input'

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

@@ -118,6 +118,7 @@ const Template: Story<IReqoreMenuProps> = (args) => {
           {
             icon: 'EmotionUnhappyLine',
             rightIcon: 'Scissors2Fill',
+            leftIconColor: 'danger:lighten',
             wrap: args.wrapText,
             flat: args.flat,
           } as IReqoreMenuItemProps
@@ -148,6 +149,7 @@ const Template: Story<IReqoreMenuProps> = (args) => {
           </ReqoreMenu>
         }
         isReqoreComponent
+        noWrapper
         handler='click'
         placement='right'
       >

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

@@ -52,6 +52,13 @@ Minimal.args = {
   intent: 'danger',
 };
 
+export const WithIconColor: Story<IReqoreMessageProps> = Template.bind({});
+WithIconColor.args = {
+  minimal: true,
+  intent: 'success',
+  iconColor: '#00fd9f',
+};
+
 export const Opaque: Story<IReqoreMessageProps> = Template.bind({});
 Opaque.args = {
   opaque: true,

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

@@ -175,6 +175,7 @@ Minimal.args = {
 
 export const WithEffect: Story<IReqorePanelProps> = Template.bind({});
 WithEffect.args = {
+  iconColor: 'info:lighten:2',
   minimal: true,
   contentEffect: {
     gradient: {