Merge pull request #385 from qoretechnologies/bugfix/tag-justify-cont…

…ent-center Allow positioning of the label and label key on the reqore tag, badge position is center by default.
qoretechnologies · May 29, 2024 · 48ccf2c · 48ccf2c
2 parents 6100c4f + 572caed
commit 48ccf2c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "source": "source ~/.profile",
+    "start": "yarn storybook",
     "test": "./node_modules/.bin/jest",
     "test:watch": "./node_modules/.bin/jest --watch",
     "test:ci": "./node_modules/.bin/jest --silent --json --outputFile=tests.json",

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -315,6 +315,7 @@ export const ButtonBadge = memo(({ wrapGroup, compact, ...props }: IReqoreButton
         color={color}
         customTheme={theme}
         className='reqore-button-badge'
+        labelAlign='center'
         minimal={!(content as IReqoreTagProps)?.effect?.gradient}
         {...(typeof content === 'string' || typeof content === 'number'
           ? { label: content }

diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
@@ -77,7 +77,9 @@ export interface IReqoreCustomTagProps
   asBadge?: boolean;
   intent?: TReqoreIntent;
   wrap?: boolean;
+  labelAlign?: 'left' | 'right' | 'center';
   labelEffect?: IReqoreEffect;
+  labelKeyAlign?: 'left' | 'right' | 'center';
   labelKeyEffect?: IReqoreEffect;
   as?: string | React.ElementType;
 }
@@ -217,6 +219,14 @@ const StyledTagContent = styled(StyledTextEffect)<{ size: TSizes }>`
   align-items: center;
   flex: 1;
 
+  ${({ labelAlign }) => css`
+    justify-content: ${labelAlign === 'left'
+      ? 'flex-start'
+      : labelAlign === 'right'
+      ? 'flex-end'
+      : 'center'};
+  `}
+
   ${({ wrap, hasWidth }) =>
     !wrap && !hasWidth
       ? css`
@@ -289,6 +299,8 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       leftIconColor,
       rightIconColor,
       iconColor,
+      labelKeyAlign = 'left',
+      labelAlign = 'left',
       labelEffect,
       labelKeyEffect,
       leftIconProps,
@@ -367,6 +379,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 wrap={wrap}
                 hasWidth={!!width}
                 size={size}
+                labelAlign={labelKeyAlign}
                 effect={
                   {
                     weight: 'thick',
@@ -394,6 +407,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 size={size}
                 wrap={wrap}
                 hasWidth={!!width}
+                labelAlign={labelAlign}
                 effect={{
                   ...labelEffect,
                 }}

diff --git a/src/stories/Tag/Tag.stories.tsx b/src/stories/Tag/Tag.stories.tsx
@@ -362,6 +362,11 @@ export const Wrap: Story = {
   args: { wrap: true },
 };
 
+export const WithTextAligns: Story = {
+  render: Template,
+  args: { labelAlign: 'right', labelKeyAlign: 'center' },
+};
+
 export const Effect = {
   render: Template,