@qoretechnologies/reqore 0.37.7 → 0.37.9

package/src/components/Icon/index.tsx

@@ -27,15 +27,16 @@ export interface IReqoreIconProps
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
+  rotation?: number;
   animation?: 'spin' | 'heartbeat';
 }
 
 const SpinKeyframes = keyframes`
   0% {
-    transform: rotate(0deg);
+    rotate: 0deg;
   }
   100% {
-    transform: rotate(360deg);
+    rotate: 360deg;
   }
 `;
 
@@ -49,6 +50,7 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
   overflow: hidden;
 
   border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
+  rotate: ${({ rotation }) => (rotation ? `${rotation}deg` : undefined)};
 
   ${({ margin, size }) =>
     margin &&

package/src/components/Message/index.tsx

@@ -21,7 +21,7 @@ import {
 import { IReqoreIconName } from '../../types/icons';
 import { TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
 import {
   StyledIconWrapper,
   StyledNotificationContent,
@@ -46,6 +46,7 @@ export interface IReqoreMessageProps
   children: any;
   icon?: IReqoreIconName;
   iconColor?: TReqoreEffectColor;
+  iconProps?: IReqoreIconProps;
   onClose?: () => any;
   onClick?: () => any;
   duration?: number;
@@ -81,6 +82,7 @@ const ReqoreMessage = memo(
         tooltip,
         fixed,
         fluid,
+        iconProps,
         ...rest
       },
       ref
@@ -159,6 +161,7 @@ const ReqoreMessage = memo(
                     iconColor={iconColor}
                     type={5}
                     iconMargin={flat && minimal ? 'right' : 'both'}
+                    iconProps={iconProps}
                   />
                 ) : (
                   <ReqoreIcon
@@ -166,6 +169,7 @@ const ReqoreMessage = memo(
                     margin={flat && minimal ? 'right' : 'both'}
                     size={size}
                     color={iconColor}
+                    {...iconProps}
                   />
                 )}
               </StyledIconWrapper>

package/src/components/Panel/index.tsx

@@ -667,7 +667,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                     padded={false}
                     margin='none'
                     flat
-                    responsive={false}
+                    responsive
                   />
                 ) : icon || iconImage || label ? (
                   <StyledPanelTitleHeaderContent

package/src/components/Spinner/index.tsx

@@ -5,6 +5,7 @@ import { TReqoreIntent } from '../../constants/theme';
 import { IWithReqoreEffect } from '../../types/global';
 import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
 import { IReqoreEffect, TReqoreEffectColor } from '../Effect';
+import { IReqoreIconProps } from '../Icon';
 
 export interface IReqoreSpinnerProps
   extends Omit<IReqoreControlGroupProps, 'children' | 'size'>,
@@ -17,6 +18,7 @@ export interface IReqoreSpinnerProps
   labelEffect?: IReqoreEffect;
   iconMargin?: 'right' | 'left' | 'both';
   centered?: boolean;
+  iconProps?: IReqoreIconProps;
 }
 
 export const ReqoreSpinner = ({
@@ -29,6 +31,7 @@ export const ReqoreSpinner = ({
   effect,
   iconMargin,
   centered,
+  iconProps,
   ...rest
 }: IReqoreSpinnerProps) => {
   const renderContent = useCallback(() => {
@@ -41,6 +44,7 @@ export const ReqoreSpinner = ({
         animation='spin'
         className='reqore-spinner'
         margin={iconMargin || (children ? 'right' : undefined)}
+        {...iconProps}
       />
     );
   }, [size, intent, type, children, iconColor]);

package/src/components/Tabs/index.tsx

@@ -9,10 +9,10 @@ import { TReqoreTabsContentPadding } from './content';
 import ReqoreTabsList from './list';
 
 export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
-  label: string | number;
+  label?: string | number;
   as?: any;
   id: string | number;
-  props?: React.HTMLAttributes<any>;
+  props?: Record<string, any>;
   onClick?: (event: any) => any;
   onCloseClick?: (id: string | number) => any;
   activeIntent?: TReqoreIntent;

package/src/components/Tabs/list.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../helpers/colors';
 import { calculateStringSizeInPixels, getOneLessSize } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreBreadcrumbItem } from '../Breadcrumbs';
 import { IReqoreButtonProps } from '../Button';
 import { TReqoreHexColor } from '../Effect';
 import ReqoreMenu from '../Menu';
@@ -104,8 +105,8 @@ const getBadgeLength = (badge: IReqoreButtonProps['badge'], tabsSize: TSizes = '
   );
 };
 
-const getLabelLength = (
-  item: IReqoreTabsListItem | IReqoreTabsListItem[] | IReqoreTagProps,
+export const getLabelLength = (
+  item: IReqoreBreadcrumbItem | IReqoreTabsListItem | IReqoreTabsListItem[] | IReqoreTagProps,
   activeTab?: string | number,
   tabsSize: TSizes = 'normal'
 ) => {
@@ -128,14 +129,21 @@ const getLabelLength = (
   const badgeLength = isArray(item)
     ? 0
     : getBadgeLength((item as IReqoreTabsListItem).badge, tabsSize);
+  const descriptionLength = isArray(item)
+    ? 0
+    : calculateStringSizeInPixels(
+        (item as IReqoreBreadcrumbItem | IReqoreTabsListItem)?.description?.toString(),
+        TEXT_FROM_SIZE[getOneLessSize(tabsSize)]
+      );
 
-  return (
+  const topLabelLength =
     calculateStringSizeInPixels(label?.toString(), TEXT_FROM_SIZE[tabsSize]) +
     icon +
+    rightIcon +
     closeIconSize +
-    badgeLength +
-    rightIcon
-  );
+    badgeLength;
+
+  return Math.max(topLabelLength, descriptionLength);
 };
 
 /**

package/src/components/Tag/index.tsx

@@ -38,7 +38,7 @@ import {
   TReqoreEffectColor,
   TReqoreHexColor,
 } from '../Effect';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
@@ -61,10 +61,12 @@ export interface IReqoreTagProps
   onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
+  leftIconProps?: IReqoreIconProps;
   rightIcon?: IReqoreIconName;
   iconColor?: TReqoreEffectColor;
   leftIconColor?: TReqoreEffectColor;
   rightIconColor?: TReqoreEffectColor;
+  rightIconProps?: IReqoreIconProps;
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
@@ -261,6 +263,8 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       iconColor,
       labelEffect,
       labelKeyEffect,
+      leftIconProps,
+      rightIconProps,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -323,6 +327,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 size={size}
                 margin={label || labelKey ? 'left' : 'both'}
                 color={leftIconColor || iconColor}
+                {...leftIconProps}
               />
             )}
             {labelKey && (
@@ -370,6 +375,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 size={size}
                 margin={label || (icon && !labelKey) ? 'right' : 'both'}
                 color={rightIconColor || iconColor}
+                {...rightIconProps}
               />
             )}
           </StyledTagContentWrapper>

package/src/mock/breadcrumbs.ts

@@ -33,7 +33,7 @@ export default [
   {
     label: 'Jobs',
     icon: Icons.Jobs,
-    customTheme: '#a9a9a9',
+    customTheme: { main: '#a9a9a9' },
     badge: 10,
     description: 'Some item description',
     intent: 'warning',
@@ -42,9 +42,9 @@ export default [
   {
     tooltip: 'Connections',
     icon: Icons.Connections,
-    customTheme: '#a9a9a9',
+    customTheme: { main: 'danger:darken' },
   },
-] as IReqoreBreadcrumbItem[];
+] satisfies IReqoreBreadcrumbItem[];
 
 export const breadcrumbsTabs = {
   withTabs: {

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

@@ -139,6 +139,8 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
       <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
+          leftIconProps={{ rotation: 180 }}
+          rightIconProps={{ rotation: 270 }}
           description='This is a very interesting description for a button, I like it very much'
           iconColor='#38fdb2'
         >

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

@@ -63,6 +63,13 @@ export const Basic: Story = {
             effect={{ opacity: 0.5 }}
             margin='both'
           />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#8d2a5c'
+            rotation={90}
+            margin='both'
+          />
         </ReqorePanel>
         <br />
         <ReqorePanel label='Image' flat minimal>
@@ -119,6 +126,12 @@ export const Basic: Story = {
             effect={{ saturate: 150 }}
             margin='both'
           />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
+            rotation={180}
+            margin='both'
+          />
         </ReqorePanel>
         <br />
         <ReqorePanel label='Margined' flat minimal>

package/src/stories/Tabs/Tabs.stories.tsx

@@ -98,7 +98,7 @@ const tabs = [
       textSize: 'small',
     },
   },
-] as IReqoreTabsProps['tabs'];
+] satisfies IReqoreTabsProps['tabs'];
 
 const { createArg } = argManager<IReqoreTabsProps>();