@qoretechnologies/reqore 0.29.4 → 0.29.6

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>

package/src/components/Textarea/index.tsx

@@ -143,8 +143,6 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
 
     useTooltip(targetRef?.current, tooltip);
 
-    console.log(fluid);
-
     return (
       <StyledTextareaWrapper
         className={`${className || ''} reqore-control-wrapper`}

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: [
@@ -89,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

@@ -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',
@@ -73,6 +73,7 @@ const Template: Story<IReqoreCollectionProps> = (args) => {
     <ReqoreCollection
       {...args}
       badge={10}
+      selectedIcon='CheckLine'
       actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
     />
   );
@@ -84,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',
@@ -97,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,
+  ReqoreInput,
+  ReqoreTag,
+  ReqoreVerticalSpacer,
+} from '../../index';
 import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
@@ -30,42 +36,113 @@ export default {
       description: 'Whether the control group should be fluid',
       control: 'boolean',
     }),
+    ...createArg('wrap', {
+      name: 'wrap',
+      defaultValue: true,
+      description: 'Whether the control group should wrap',
+      control: 'boolean',
+    }),
   },
 } as Meta<IReqoreControlGroupProps>;
 
 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>
+        <ReqoreControlGroup stack>
+          <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+          <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+        </ReqoreControlGroup>
+        <ReqoreCheckbox
+          asSwitch
+          label='Switchy switch'
+          margin='both'
+          intent='warning'
+          checkedIcon='CheckFill'
+          checked
+          uncheckedIcon='CheckboxBlankLine'
+        />
+        <ReqoreInput icon='4KFill' value='Hello' />
+        <ReqoreControlGroup stack>
+          <ReqoreControlGroup>
+            <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
+            <ReqoreControlGroup>
+              <ReqoreButton disabled fixed id='test'>
+                Level 3 deep
+              </ReqoreButton>
+            </ReqoreControlGroup>
+          </ReqoreControlGroup>
+          <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
+          <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
+        </ReqoreControlGroup>
 
-      <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' id='root-group'>
+        <ReqoreControlGroup intent='info' className='group-1' id='group-1-wrapper'>
+          <ReqoreControlGroup intent='info' className='group-1' id='group-1'>
+            <ReqoreButton icon='PictureInPictureLine' id='group-1-button'>
+              Group 1
+            </ReqoreButton>
+            <ReqoreTag icon='PictureInPictureLine' label='Group 1' id='group-1-tag' />
+          </ReqoreControlGroup>
+          <ReqoreControlGroup intent='pending' className='group-1-1' id='group-1-1'>
+            <ReqoreButton icon='PictureInPictureLine' id='group-1-1-button'>
+              Group 1-1
+            </ReqoreButton>
+            <ReqoreTag icon='PictureInPictureLine' label='Group 1-1' id='group-1-1-tag' />
+          </ReqoreControlGroup>
+        </ReqoreControlGroup>
+        <ReqoreButton icon='PictureInPictureLine' id='group-root-button'>
+          Root group
+        </ReqoreButton>
+        <ReqoreControlGroup intent='success' className='group-2' id='group-2'>
+          <ReqoreButton icon='PictureInPictureLine' id='group-2-button' fixed>
+            Group 2
+          </ReqoreButton>
+          <ReqoreControlGroup intent='danger' className='group-3' id='group-3'>
+            <ReqoreButton icon='PictureInPictureLine' id='group-3-button-1'>
+              Group 3
+            </ReqoreButton>
+            <ReqoreButton icon='PictureInPictureLine' id='group-3-button-2'>
+              Group 3
+            </ReqoreButton>
+          </ReqoreControlGroup>
+          <ReqoreCheckbox label='Group 2' margin='both' id='group-2-checkbox' />
+        </ReqoreControlGroup>
+        <ReqoreButton icon='PictureInPictureLine' id='group-root-button-2'>
+          Root group
+        </ReqoreButton>
+        <ReqoreControlGroup intent='warning' className='group-4' id='group-4'>
+          <ReqoreControlGroup id='group-4-1' fluid={false}>
+            <ReqoreTag icon='PictureInPictureLine' label='Group 4' id='group-4-1-tag' />
+            <ReqoreInput icon='PictureInPictureLine' value='Group 4' id='group-4-1-input' />
+          </ReqoreControlGroup>
+          <ReqoreControlGroup id='group-4-3'>
+            <ReqoreTag icon='PictureInPictureLine' label='Group 4' id='group-4-3-tag' />
+            <ReqoreInput icon='PictureInPictureLine' value='Group 4' id='group-4-3-input' />
+            <ReqoreControlGroup id='group-5' intent='muted' fluid={false}>
+              <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-1-tag' />
+              <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-2-tag' />
+              <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-3-tag' />
+              <ReqoreControlGroup id='group 6' intent='success'>
+                <ReqoreButton fixed>Group 6</ReqoreButton>
+              </ReqoreControlGroup>
+            </ReqoreControlGroup>
+          </ReqoreControlGroup>
+        </ReqoreControlGroup>
+      </ReqoreControlGroup>
+    </>
   );
 };
 
@@ -85,6 +162,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,
@@ -95,7 +179,7 @@ BigGapSize.args = {
   gapSize: 'big',
 };
 
-export const Wrap = Template.bind({});
-Wrap.args = {
-  wrap: true,
+export const NoWrap = Template.bind({});
+NoWrap.args = {
+  wrap: false,
 };

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

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: {

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 = [
   {
@@ -30,6 +30,7 @@ const tabs = [
     id: 3,
     icon: 'FileSettingsLine',
     tooltip: 'Click to go to page 3!',
+    iconColor: 'info:lighten:3',
   },
   {
     id: 'tab4',

package/src/stories/Tag/Tag.stories.tsx

@@ -77,6 +77,12 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
         label={2}
       />
       <ReqoreTag label='With Icon' icon='AlarmWarningLine' {...args} />
+      <ReqoreTag
+        label='With Icon Colors'
+        icon='AlarmWarningLine'
+        {...args}
+        iconColor='warning:lighten:2'
+      />
       <ReqoreTag labelKey='Tag with' label='Label Key' icon='AlarmWarningLine' {...args} />
       <ReqoreTag labelKey='Key' label='value' {...args} />
       <ReqoreTag icon='QuestionAnswerLine' {...args} />
@@ -169,6 +175,8 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
         label='Wrapped tag with some long text and NO width specified, AND wrap specified'
         icon='ShareForward2Fill'
         rightIcon={args.rightIcon}
+        leftIconColor='#00fafd'
+        rightIconColor='#eb0e8c'
         wrap
         onRemoveClick={null}
         actions={[

package/src/stories/TextArea/TextArea.stories.tsx

@@ -55,7 +55,7 @@ const Template: Story<IReqoreTextareaProps> = (args) => {
 
   return (
     <>
-      <ReqoreControlGroup fluid>
+      <ReqoreControlGroup wrap>
         <ReqoreTextarea
           {...args}
           onChange={handleValueChange}

package/src/styles.ts

@@ -31,6 +31,12 @@ export const ActiveIconScale = css`
   }
 `;
 
+export const ChildActiveIconScale = css`
+  > ${StyledIconWrapper} {
+    transform: scale(${ACTIVE_ICON_SCALE});
+  }
+`;
+
 export const ScaleIconOnHover = css`
   &:hover,
   &:focus {