diff --git a/package.json b/package.json index 1403070d..37a3ffa1 100644 --- 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 index b3d28dfb..499b92af 100644 --- 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 index 3736ca11..d74b31b1 100644 --- 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( leftIconColor, rightIconColor, iconColor, + labelKeyAlign = 'left', + labelAlign = 'left', labelEffect, labelKeyEffect, leftIconProps, @@ -367,6 +379,7 @@ const ReqoreTag = forwardRef( wrap={wrap} hasWidth={!!width} size={size} + labelAlign={labelKeyAlign} effect={ { weight: 'thick', @@ -394,6 +407,7 @@ const ReqoreTag = forwardRef( 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 index 703e6d9a..c12d2def 100644 --- 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,