Merge pull request #414 from qoretechnologies/feature/enhance-badge-s…

…ize-paddings Bump version to 0.48.13, update tag icon sizes, and enhance button story with additional actions
qoretechnologies · Nov 28, 2024 · ba873aa · ba873aa
2 parents a8866e1 + 8376330
commit ba873aa
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.12",
+  "version": "0.48.13",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Panel/index.tsx b/src/components/Panel/index.tsx
@@ -281,7 +281,7 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
 
   align-items: center;
   border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
-    !isCollapsed && !flat
+    !isCollapsed && !flat && opacity
       ? `1px solid ${rgba(changeLightness(getMainBackgroundColor(theme), 0.2), opacity)}`
       : null};
   transition: background-color 0.2s ease-out;

diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
@@ -8,6 +8,7 @@ import {
   BADGE_SIZE_TO_PX,
   CONTROL_TEXT_FROM_SIZE,
   PADDING_FROM_SIZE,
+  TAG_ICON_FROM_SIZE,
   TAG_RADIUS_FROM_SIZE,
   TAG_SIZE_TO_PX,
   TAG_TEXT_FROM_SIZE,
@@ -224,6 +225,7 @@ const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   flex: ${({ hasKey, fixed }) => (hasKey ? (fixed === 'key' ? '0 0 auto' : 1) : undefined)};
   flex-shrink: 0;
   min-height: 100%;
+  padding-left: ${({ size, hasIcon }) => hasIcon && `${PADDING_FROM_SIZE[size]}px`};
 `;
 
 const StyledTagContentWrapper = styled.span<{ size: TSizes }>`
@@ -394,12 +396,13 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
+            hasIcon={!!leftIcon}
             fixed={rest.fixed}
           >
             {leftIcon && (
               <ReqoreIcon
-                size={size}
-                margin={label || labelKey ? 'left' : 'both'}
+                size={`${TAG_ICON_FROM_SIZE[size]}px`}
+                //margin={label || labelKey ? 'left' : 'both'}
                 color={leftIconColor || iconColor}
                 compact={compact}
                 {...leftIconProps}
@@ -453,8 +456,8 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             {rightIcon && (
               <ReqoreIcon
                 icon={rightIcon}
-                size={size}
-                margin={label || (icon && !labelKey) ? 'right' : 'both'}
+                size={`${TAG_ICON_FROM_SIZE[size]}px`}
+                margin={label || (!icon && !labelKey) ? 'right' : 'both'}
                 color={rightIconColor || iconColor}
                 compact={compact}
                 {...rightIconProps}
@@ -487,7 +490,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                       : {})}
                     isReqoreComponent
                   >
-                    <ReqoreIcon icon={icon} size={size} />
+                    <ReqoreIcon icon={icon} size={`${TAG_ICON_FROM_SIZE[size]}px`} />
                   </ReqorePopover>
                 </React.Fragment>
               ))

diff --git a/src/constants/sizes.ts b/src/constants/sizes.ts
@@ -126,11 +126,19 @@ export const CONTROL_TEXT_FROM_SIZE = {
 };
 
 export const TAG_TEXT_FROM_SIZE = {
-  tiny: 8,
-  small: 11,
-  normal: 14,
-  big: 17,
-  huge: 20,
+  tiny: 6,
+  small: 9,
+  normal: 12,
+  big: 15,
+  huge: 18,
+};
+
+export const TAG_ICON_FROM_SIZE = {
+  tiny: 10,
+  small: 13,
+  normal: 16,
+  big: 19,
+  huge: 22,
 };
 
 export const ICON_FROM_SIZE = {
@@ -150,8 +158,8 @@ export const HALF_PADDING_FROM_SIZE = {
 };
 
 export const PADDING_FROM_SIZE = {
-  tiny: 2,
-  small: 5,
+  tiny: 4,
+  small: 6,
   normal: 8,
   big: 11,
   huge: 14,

diff --git a/src/stories/Button/Button.stories.tsx b/src/stories/Button/Button.stories.tsx
@@ -296,9 +296,13 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
                   direction: 'to right bottom',
                 },
               },
+              icon: 'BluetoothLine',
               labelKey: 'Cool',
               label: 1234,
-              actions: [{ icon: 'ShuffleLine', onClick: noop }],
+              actions: [
+                { icon: 'Repeat2Line', onClick: noop },
+                { icon: 'ShuffleLine', onClick: noop },
+              ],
             },
           ]}
           onClick={alert}