Update package version and add animated property to ReqoreButton

qoretechnologies · Apr 15, 2024 · 8917c82 · 8917c82
1 parent b74aa41
commit 8917c82
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 11 deletions.
diff --git 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
@@ -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 (
         <StyledButton
           {...rest}
@@ -461,7 +466,7 @@ const ReqoreButton = memo(
           minimal={minimal}
           size={size}
           color={customColor}
-          animate={animations.buttons}
+          animate={animate}
           flat={_flat}
           active={active}
           readOnly={readOnly}
@@ -508,15 +513,42 @@ const ReqoreButton = memo(
                   textAlign === 'center' && iconsAlign !== 'center' ? { margin: 'auto' } : undefined
                 }
               >
-                <StyledActiveContent wrap={wrap} effect={labelEffect}>
-                  {_children}
-                </StyledActiveContent>
-                <StyledInActiveContent wrap={wrap} effect={labelEffect}>
-                  {_children}
-                </StyledInActiveContent>
-                <StyledInvisibleContent wrap={wrap} effect={labelEffect}>
-                  {_children}
-                </StyledInvisibleContent>
+                {!animate && (
+                  <StyledContent
+                    wrap={wrap}
+                    effect={labelEffect}
+                    className='reqore-button-text-content'
+                  >
+                    {_children}
+                  </StyledContent>
+                )}
+                {animate && (
+                  <StyledActiveContent
+                    wrap={wrap}
+                    effect={labelEffect}
+                    className='reqore-button-text-content reqore-animated'
+                  >
+                    {_children}
+                  </StyledActiveContent>
+                )}
+                {animate && (
+                  <StyledInActiveContent
+                    wrap={wrap}
+                    effect={labelEffect}
+                    className='reqore-button-text-content reqore-animated'
+                  >
+                    {_children}
+                  </StyledInActiveContent>
+                )}
+                {animate && (
+                  <StyledInvisibleContent
+                    wrap={wrap}
+                    effect={labelEffect}
+                    className='reqore-button-text-content reqore-animated'
+                  >
+                    {_children}
+                  </StyledInvisibleContent>
+                )}
                 {(badge || badge === 0) && wrap ? (
                   <ButtonBadge content={badge} size={size} theme={theme} wrap />
                 ) : null}

diff --git 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%);