remove old label animation (#2196)

mondaycom · Jul 9, 2024 · 3ade518 · 3ade518
1 parent ed53613
commit 3ade518
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 44 deletions.
diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
@@ -70,6 +70,7 @@
 ### Label
 
 - `wrapperClassName` -> `className` [codemod]
+- Spin in animation removed due to UX decision, including `isAnimationDisabled` prop which is not needed anymore
 
 ### EditableHeading
 

diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
@@ -627,7 +627,7 @@ export const SearchableDropdown = {
 export const DropdownWithLabels = {
   render: () => {
     const labelRenderer = useCallback(({ label, color }) => {
-      return <Label text={label} color={color} isAnimationDisabled />;
+      return <Label text={label} color={color} />;
     }, []);
 
     const options = useMemo(

diff --git a/packages/core/src/components/Label/Label.module.scss b/packages/core/src/components/Label/Label.module.scss
@@ -38,11 +38,6 @@
   display: inline-flex;
 }
 
-.withAnimation {
-  animation: label-spin-in-emphasized var(--motion-expressive-short) var(--motion-timing-emphasize);
-  transform-origin: bottom left;
-}
-
 .kindFill {
   &.colorPrimary {
     background-color: var(--primary-color);
@@ -157,7 +152,3 @@
     line-height: 14px;
   }
 }
-
-@include keyframe(label-spin-in-emphasized) {
-  @include spin-in-emphasized();
-}
diff --git a/packages/core/src/components/Label/Label.tsx b/packages/core/src/components/Label/Label.tsx
@@ -21,7 +21,6 @@ export interface LabelProps extends VibeComponentProps {
   kind?: LabelKind;
   color?: LabelColor;
   text?: string;
-  isAnimationDisabled?: boolean;
   isLegIncluded?: boolean;
   onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
   celebrationAnimation?: boolean;
@@ -39,7 +38,6 @@ const Label: VibeComponent<LabelProps> & {
       kind = LabelKind.FILL,
       color = LabelColor.PRIMARY,
       text = "",
-      isAnimationDisabled = false,
       isLegIncluded = false,
       id,
       "data-testid": dataTestId,
@@ -62,15 +60,13 @@ const Label: VibeComponent<LabelProps> & {
           getStyle(styles, camelCase("kind" + "-" + kind)),
           getStyle(styles, camelCase("color" + "-" + color)),
           {
-            // When celebrationAnimation is active it wins over the default animation
-            [styles.withAnimation]: !isAnimationDisabled && !isCelebrationAnimation,
             [styles.withLeg]: isLegIncluded,
             [styles.clickable]: isClickable,
             [styles.small]: size === "small"
           },
           labelClassName
         ),
-      [kind, color, isAnimationDisabled, isLegIncluded, labelClassName, isCelebrationAnimation, isClickable, size]
+      [kind, color, isLegIncluded, labelClassName, isClickable, size]
     );
 
     const onClickCallback = useCallback(

diff --git a/packages/core/src/components/Label/__stories__/Label.stories.tsx b/packages/core/src/components/Label/__stories__/Label.stories.tsx
@@ -173,7 +173,7 @@ export const Celebration = {
 
     return (
       <>
-        <Label text="New" kind={Label.kinds.LINE} celebrationAnimation={animate} isAnimationDisabled />
+        <Label text="New" kind={Label.kinds.LINE} celebrationAnimation={animate} />
         <Button size={Button.sizes.SMALL} kind={Button.kinds.TERTIARY} onClick={() => setAnimate(true)}>
           Click to celebrate
         </Button>

diff --git a/packages/core/src/components/Label/__tests__/Label.snapshot.test.tsx b/packages/core/src/components/Label/__tests__/Label.snapshot.test.tsx
@@ -60,7 +60,7 @@ describe("Label renders correctly", () => {
     });
 
     it("without animation", () => {
-      const tree = renderer.create(<Label text="Test" isAnimationDisabled />).toJSON();
+      const tree = renderer.create(<Label text="Test" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 

diff --git a/packages/core/src/components/Label/__tests__/__snapshots__/Label.snapshot.test.tsx.snap b/packages/core/src/components/Label/__tests__/__snapshots__/Label.snapshot.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Label renders correctly fill dark 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorDark withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorDark"
     data-testid="text"
   >
     <span
@@ -28,7 +28,7 @@ exports[`Label renders correctly fill negative 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorNegative withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorNegative"
     data-testid="text"
   >
     <span
@@ -50,7 +50,7 @@ exports[`Label renders correctly fill positive 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPositive withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPositive"
     data-testid="text"
   >
     <span
@@ -72,7 +72,7 @@ exports[`Label renders correctly fill primary 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPrimary withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPrimary"
     data-testid="text"
   >
     <span
@@ -94,7 +94,7 @@ exports[`Label renders correctly line dark 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorDark withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorDark"
     data-testid="text"
   >
     <span
@@ -116,7 +116,7 @@ exports[`Label renders correctly line negative 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorNegative withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorNegative"
     data-testid="text"
   >
     <span
@@ -138,7 +138,7 @@ exports[`Label renders correctly line positive 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorPositive withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorPositive"
     data-testid="text"
   >
     <span
@@ -160,7 +160,7 @@ exports[`Label renders correctly line primary 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorPrimary withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorPrimary"
     data-testid="text"
   >
     <span
@@ -182,7 +182,7 @@ exports[`Label renders correctly line with className 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPrimary withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPrimary"
     data-testid="text"
   >
     <span
@@ -204,7 +204,7 @@ exports[`Label renders correctly line with leg 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPrimary withAnimation withLeg"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPrimary withLeg"
     data-testid="text"
   >
     <span
@@ -261,7 +261,7 @@ exports[`Label renders correctly with empty props 1`] = `
   data-testid="label"
 >
   <span
-    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPrimary withAnimation"
+    className="typography onInverted start singleLineEllipsis text text2Normal label kindFill colorPrimary"
     data-testid="text"
   >
     <span

diff --git a/.../core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.js.snap b/.../core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.js.snap
@@ -76,7 +76,7 @@ exports[`Snapshots renders correctly with a label 1`] = `
     data-testid="label"
   >
     <span
-      className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorPrimary withAnimation"
+      className="typography onInverted start singleLineEllipsis text text2Normal label kindLine colorPrimary"
       data-testid="text"
     >
       <span

diff --git a/packages/core/src/components/Table/Table/__stories__/Table.mdx b/packages/core/src/components/Table/Table/__stories__/Table.mdx
@@ -118,7 +118,6 @@ A highlighted row allows adding additional information for the entire row, using
                       <Label
                         text={rowItem.status}
                         color={statusColumnToLabelColor[rowItem.status]}
-                        isAnimationDisabled
                       />
                     </TableCell>
                   </TableRow>
@@ -151,7 +150,6 @@ A highlighted row allows adding additional information for the entire row, using
                       <Label
                         text={rowItem.status}
                         color={statusColumnToLabelColor[rowItem.status]}
-                        isAnimationDisabled
                       />
                     </TableCell>
                   </TableRow>

diff --git a/packages/core/src/components/Table/Table/__stories__/Table.stories.js b/packages/core/src/components/Table/Table/__stories__/Table.stories.js
@@ -167,7 +167,7 @@ export const Overview = {
               <TableAvatar text={rowItem.sentBy} />
             </TableCell>
             <TableCell>
-              <Label text={rowItem.status} color="positive" isAnimationDisabled />
+              <Label text={rowItem.status} color="positive" />
             </TableCell>
             <TableCell>{rowItem.emailsSent}</TableCell>
           </TableRow>
@@ -357,7 +357,7 @@ export const Borders = {
                   <TableAvatar text={rowItem.sentBy} />
                 </TableCell>
                 <TableCell>
-                  <Label text={rowItem.status} color="positive" isAnimationDisabled />
+                  <Label text={rowItem.status} color="positive" />
                 </TableCell>
                 <TableCell>{rowItem.emailsSent}</TableCell>
               </TableRow>
@@ -379,7 +379,7 @@ export const Borders = {
                   <TableAvatar text={rowItem.sentBy} />
                 </TableCell>
                 <TableCell>
-                  <Label text={rowItem.status} color="positive" isAnimationDisabled />
+                  <Label text={rowItem.status} color="positive" />
                 </TableCell>
                 <TableCell>{rowItem.emailsSent}</TableCell>
               </TableRow>
@@ -435,7 +435,7 @@ export const TableHeaderFunctionality = {
                 <TableAvatar text={rowItem.sentBy} />
               </TableCell>
               <TableCell>
-                <Label text={rowItem.status} isAnimationDisabled color="positive" />
+                <Label text={rowItem.status} color="positive" />
               </TableCell>
               <TableCell>{rowItem.emailsSent}</TableCell>
             </TableRow>
@@ -472,7 +472,7 @@ export const Loading = {
               <TableAvatar text={rowItem.sentBy} />
             </TableCell>
             <TableCell>
-              <Label text={rowItem.status} color="positive" isAnimationDisabled />
+              <Label text={rowItem.status} color="positive" />
             </TableCell>
             <TableCell>{rowItem.emailsSent}</TableCell>
           </TableRow>
@@ -503,18 +503,14 @@ export const Scroll = {
             <TableRow key={rowItem.id}>
               <TableCell>{rowItem.sentOn}</TableCell>
               <TableCell>
-                <Label
-                  text={rowItem.priority}
-                  color={priorityColumnToLabelColor[rowItem.priority]}
-                  isAnimationDisabled
-                />
+                <Label text={rowItem.priority} color={priorityColumnToLabelColor[rowItem.priority]} />
               </TableCell>
               <TableCell>{rowItem.subject}</TableCell>
               <TableCell>
                 <TableAvatar text={rowItem.sentBy} />
               </TableCell>
               <TableCell>
-                <Label text={rowItem.status} color={statusColumnToLabelColor[rowItem.status]} isAnimationDisabled />
+                <Label text={rowItem.status} color={statusColumnToLabelColor[rowItem.status]} />
               </TableCell>
               <TableCell>{rowItem.emailsSent}</TableCell>
             </TableRow>
@@ -582,7 +578,7 @@ export const HighlightedRow = {
                 <TableAvatar text={rowItem.sentBy} />
               </TableCell>
               <TableCell>
-                <Label text={rowItem.status} isAnimationDisabled color="positive" />
+                <Label text={rowItem.status} color="positive" />
               </TableCell>
               <TableCell>{rowItem.emailsSent}</TableCell>
             </TableRow>

diff --git a/packages/core/src/storybook/components/related-components/descriptions/table-description.tsx b/packages/core/src/storybook/components/related-components/descriptions/table-description.tsx
@@ -71,7 +71,6 @@ export const TableDescription = () => {
                   <Label
                     text={rowItem.status}
                     color={statusColumnToLabelColor[rowItem.status as keyof typeof statusColumnToLabelColor]}
-                    isAnimationDisabled
                   />
                 </TableCell>
               </TableRow>