diff --git a/package.json b/package.json index ddcb4d46..87e3ad36 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@qoretechnologies/reqore", - "version": "0.40.11", + "version": "0.40.12", "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/Button/index.tsx b/src/components/Button/index.tsx index cb094aee..0fd43947 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -26,6 +26,7 @@ import { ReadOnlyElement, ScaleIconOnHover, StyledActiveContent, + StyledContent, StyledInActiveContent, StyledInvisibleContent, } from '../../styles'; @@ -66,6 +67,7 @@ export interface IReqoreButtonProps fixed?: boolean; active?: boolean; flat?: boolean; + animated?: boolean; compact?: boolean; verticalPadding?: TSizes; @@ -403,6 +405,7 @@ const ReqoreButton = memo( label, compact, as, + animated, ...rest }: IReqoreButtonProps, ref @@ -440,6 +443,8 @@ const ReqoreButton = memo( return typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right'; }, [badge]); + const animate = animated === true || (animations.buttons && animated !== false); + return ( - - {_children} - - - {_children} - - - {_children} - + {!animate && ( + + {_children} + + )} + {animate && ( + + {_children} + + )} + {animate && ( + + {_children} + + )} + {animate && ( + + {_children} + + )} {(badge || badge === 0) && wrap ? ( ) : null} diff --git a/src/styles.ts b/src/styles.ts index 35f4a74a..8144c716 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -5,6 +5,22 @@ import { StyledIconWrapper } from './components/Icon'; export const INACTIVE_ICON_SCALE = 0.85; export const ACTIVE_ICON_SCALE = 1; +export const StyledContent = styled(StyledTextEffect)` + position: relative; + + ${({ wrap }) => + !wrap + ? css` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + ` + : css` + word-break: break-word; + `} +`; + export const StyledActiveContent = styled(StyledTextEffect)` position: absolute; transform: translateY(-150%);