From e05bf104d12c39335a5068417cc1387ee8551eb3 Mon Sep 17 00:00:00 2001
From: shaharzil <shaharzi@monday.com>
Date: Sun, 30 Jun 2024 16:45:33 +0300
Subject: [PATCH 1/4] remove old label animation

---
 packages/core/docs/vibe-3-changelog.md        |  1 +
 .../Dropdown/__stories__/Dropdown.stories.js  |  2 +-
 packages/core/src/components/Label/Label.tsx  |  6 +-----
 .../Label/__stories__/Label.stories.tsx       |  2 +-
 .../Label/__tests__/Label.snapshot.test.tsx   |  2 +-
 .../Table/Table/__stories__/Table.mdx         |  2 --
 .../Table/Table/__stories__/Table.stories.js  | 20 ++++++++-----------
 .../descriptions/table-description.tsx        |  1 -
 8 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
index f5c9253292..d5da041ab0 100644
--- a/packages/core/docs/vibe-3-changelog.md
+++ b/packages/core/docs/vibe-3-changelog.md
@@ -70,6 +70,7 @@
 ### Label
 
 - `wrapperClassName` -> `className` [codemod]
+- Removed old animation
 
 ### EditableHeading
 
diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
index 35b9739f00..c9cc662139 100644
--- 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.tsx b/packages/core/src/components/Label/Label.tsx
index a1b7b616a6..02c280db40 100644
--- 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
index 5a71f0937b..c47090ac6e 100644
--- 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
index e08d47f8be..212f555387 100644
--- 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/Table/Table/__stories__/Table.mdx b/packages/core/src/components/Table/Table/__stories__/Table.mdx
index f41f94f4f7..3fa66b7e37 100644
--- 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
index ef76e47ca4..279dfd0071 100644
--- 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
index bac4b19530..2456a670c2 100644
--- 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>

From a7aaac3510c2db38abf24d27d99974a220976e6f Mon Sep 17 00:00:00 2001
From: shaharzil <shaharzi@monday.com>
Date: Wed, 3 Jul 2024 13:22:36 +0300
Subject: [PATCH 2/4] fixed snapshots and removed non used css

---
 packages/core/docs/vibe-3-changelog.md        |  2 +-
 .../src/components/Label/Label.module.scss    |  9 --------
 .../Label.snapshot.test.tsx.snap              | 22 +++++++++----------
 .../MenuItem.snapshot.test.js.snap            |  2 +-
 packages/core/src/styles/_keyframes.scss      |  1 -
 .../keyframes/spin/_spin-in-emphasized.scss   | 12 ----------
 6 files changed, 13 insertions(+), 35 deletions(-)
 delete mode 100644 packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss

diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
index d5da041ab0..a5fb9a77fd 100644
--- a/packages/core/docs/vibe-3-changelog.md
+++ b/packages/core/docs/vibe-3-changelog.md
@@ -70,7 +70,7 @@
 ### Label
 
 - `wrapperClassName` -> `className` [codemod]
-- Removed old animation
+- Spin in animation removed due to UX decision, including `isAnimationDisabled` prop which is not needed anymore
 
 ### EditableHeading
 
diff --git a/packages/core/src/components/Label/Label.module.scss b/packages/core/src/components/Label/Label.module.scss
index 51f9d76dee..c4104357d6 100644
--- 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/__tests__/__snapshots__/Label.snapshot.test.tsx.snap b/packages/core/src/components/Label/__tests__/__snapshots__/Label.snapshot.test.tsx.snap
index d364498b82..502913c2e0 100644
--- 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/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.js.snap b/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.js.snap
index 94b4de3859..2844600181 100644
--- a/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.js.snap
+++ b/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.js.snap
@@ -96,7 +96,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/styles/_keyframes.scss b/packages/core/src/styles/_keyframes.scss
index a82e8f160d..bebf0ae066 100644
--- a/packages/core/src/styles/_keyframes.scss
+++ b/packages/core/src/styles/_keyframes.scss
@@ -8,7 +8,6 @@
 @import "keyframes/pop/pop-in-elastic";
 @import "keyframes/pop/pop-in-elastic-bold";
 @import "keyframes/pop/pop-out-from-trigger";
-@import "keyframes/spin/spin-in-emphasized";
 @import "keyframes/slide/slide-in";
 @import "keyframes/slide/slide-in-elastic";
 @import "keyframes/slide/slide-out";
diff --git a/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss b/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss
deleted file mode 100644
index 3dcb87b47a..0000000000
--- a/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@mixin spin-in-emphasized($rotate: 25deg) {
-  0% {
-    transform: rotate($rotate);
-    opacity: 0;
-  }
-  70% {
-    opacity: 1;
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}

From 3ff9dd23a3ceee636b3608fea06d8e7c1a4f6fdb Mon Sep 17 00:00:00 2001
From: shaharzil <shaharzi@monday.com>
Date: Sun, 7 Jul 2024 20:03:02 +0300
Subject: [PATCH 3/4] revered style changes

---
 packages/core/src/styles/_keyframes.scss            |  1 +
 .../styles/keyframes/spin/_spin-in-emphasized.scss  | 13 +++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss

diff --git a/packages/core/src/styles/_keyframes.scss b/packages/core/src/styles/_keyframes.scss
index bebf0ae066..a82e8f160d 100644
--- a/packages/core/src/styles/_keyframes.scss
+++ b/packages/core/src/styles/_keyframes.scss
@@ -8,6 +8,7 @@
 @import "keyframes/pop/pop-in-elastic";
 @import "keyframes/pop/pop-in-elastic-bold";
 @import "keyframes/pop/pop-out-from-trigger";
+@import "keyframes/spin/spin-in-emphasized";
 @import "keyframes/slide/slide-in";
 @import "keyframes/slide/slide-in-elastic";
 @import "keyframes/slide/slide-out";
diff --git a/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss b/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss
new file mode 100644
index 0000000000..d22b8792f7
--- /dev/null
+++ b/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss
@@ -0,0 +1,13 @@
+@mixin spin-in-emphasized($rotate: 25deg) {
+    0% {
+      transform: rotate($rotate);
+      opacity: 0;
+    }
+    70% {
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+  
\ No newline at end of file

From 98bfa194f9e3cf934a7d763a03d2c82014dd3328 Mon Sep 17 00:00:00 2001
From: shaharzil <shaharzi@monday.com>
Date: Sun, 7 Jul 2024 20:06:07 +0300
Subject: [PATCH 4/4] six alignment

---
 .../keyframes/spin/_spin-in-emphasized.scss   | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss b/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss
index d22b8792f7..3dcb87b47a 100644
--- a/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss
+++ b/packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss
@@ -1,13 +1,12 @@
 @mixin spin-in-emphasized($rotate: 25deg) {
-    0% {
-      transform: rotate($rotate);
-      opacity: 0;
-    }
-    70% {
-      opacity: 1;
-    }
-    100% {
-      transform: rotate(0deg);
-    }
+  0% {
+    transform: rotate($rotate);
+    opacity: 0;
   }
-  
\ No newline at end of file
+  70% {
+    opacity: 1;
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}