From 898df27014fa4de58c327526a1056ab7b77a4772 Mon Sep 17 00:00:00 2001
From: Adam Bottega <adambottega@gmail.com>
Date: Wed, 15 Jan 2025 16:51:58 +1100
Subject: [PATCH] ActionsMenu update and tags UI bug fixes (#348)

* Updating ActionsMenu component and fixing Tags UI bug

* 3.2.47

* Fixed a few more tags bugs
---
 .../ActionsMenu/ActionsMenu.animations.js     | 121 +++++++++++++
 .../ActionsMenu/ActionsMenu.stories.js        |   2 +-
 lib/components/ActionsMenu/index.js           | 160 +++++++++++-------
 lib/components/Select/index.js                |   1 +
 lib/components/Tag/Tag.stories.js             |  11 +-
 lib/components/Tag/index.js                   |  32 ++--
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 8 files changed, 246 insertions(+), 87 deletions(-)
 create mode 100644 lib/components/ActionsMenu/ActionsMenu.animations.js

diff --git a/lib/components/ActionsMenu/ActionsMenu.animations.js b/lib/components/ActionsMenu/ActionsMenu.animations.js
new file mode 100644
index 00000000..7f62a8e3
--- /dev/null
+++ b/lib/components/ActionsMenu/ActionsMenu.animations.js
@@ -0,0 +1,121 @@
+import { keyframes } from "styled-components";
+
+export const crossFadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+export const beforeDotCollapsing = keyframes`
+  0% {
+    transform: translate(0, -6px);
+  }
+  50% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+`;
+
+export const beforeDotExpanding = keyframes`
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, -6px);
+  }
+`;
+
+export const afterDotCollapsing = keyframes`
+  0% {
+    transform: translate(0, 6px);
+  }
+  50% {
+   transform: translate(0, 0);
+  }
+  100% {
+   transform: translate(0, 0);
+  }
+`;
+
+export const afterDotExpanding = keyframes`
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, 6px);
+  }
+`;
+
+export const beforeCrossExpanding = keyframes`
+  0% {
+    height: 4px;
+    transform: rotate(-45deg);
+  }
+  50% {
+    height: 4px;
+    transform: rotate(-45deg);
+  }
+  100% {
+    height: 18px;
+    transform: translate(0, -7px) rotate(-45deg);
+  }
+`;
+
+export const beforeCrossCollapsing = keyframes`
+  0% {
+    height: 18px;
+    transform: translate(0, -7px) rotate(-45deg);
+  }
+  50% {
+    height: 4px;
+    transform: rotate(-45deg);
+  }
+  100% {
+    height: 4px;
+    transform: rotate(-45deg);
+  }
+`;
+
+export const afterCrossExpanding = keyframes`
+  0% {
+    height: 4px;
+    transform: rotate(45deg);
+  }
+  50% {
+    height: 4px;
+    transform: rotate(45deg);
+  }
+  100% {
+    height: 18px;
+    transform: translate(0, -7px) rotate(45deg);
+  }
+`;
+
+export const afterCrossCollapsing = keyframes`
+  0% {
+    height: 18px;
+    transform: translate(0, -7px) rotate(45deg);
+  }
+  50% {
+    height: 4px;
+    transform: rotate(45deg);
+  }
+  100% {
+    height: 4px;
+    transform: rotate(45deg);
+  }
+`;
diff --git a/lib/components/ActionsMenu/ActionsMenu.stories.js b/lib/components/ActionsMenu/ActionsMenu.stories.js
index b2760dd8..c5d2bce3 100644
--- a/lib/components/ActionsMenu/ActionsMenu.stories.js
+++ b/lib/components/ActionsMenu/ActionsMenu.stories.js
@@ -102,6 +102,7 @@ const MenuItems = React.forwardRef(({ closeMenu, reasons }, ref) => {
                 <ActionsMenuItem
                   key={id}
                   type="button"
+                  id="other"
                   selected={selectedReason === id}
                   onClick={clickOther}
                 >
@@ -128,7 +129,6 @@ const MenuItems = React.forwardRef(({ closeMenu, reasons }, ref) => {
       {showOther && (
         <Box id="editableContent" p="s">
           <TextArea
-            inverted
             id="TextArea01"
             label="Reason for rejection"
             cols="35"
diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
index 200f53c1..38011245 100644
--- a/lib/components/ActionsMenu/index.js
+++ b/lib/components/ActionsMenu/index.js
@@ -7,12 +7,23 @@ import React, {
   useId,
   useLayoutEffect
 } from "react";
-import styled, { css, keyframes, ThemeProvider } from "styled-components";
+import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import { commonKeys } from "../../hooks/keypress";
 import useActionMenu from "./useActionMenu";
+import {
+  crossFadeIn,
+  beforeDotCollapsing,
+  beforeDotExpanding,
+  afterDotCollapsing,
+  afterDotExpanding,
+  beforeCrossExpanding,
+  beforeCrossCollapsing,
+  afterCrossExpanding,
+  afterCrossCollapsing
+} from "./ActionsMenu.animations";
 import {
   FloatingFocusManager,
   FloatingPortal,
@@ -25,44 +36,6 @@ import {
 
 const ActionMenuContext = createContext({});
 
-const crossTransform1 = keyframes`
-    0% {
-      transform: translate(0, -6px);
-      border-radius: 2px;
-    }
-    50% {
-      transform: translate(0, 0);
-      border-radius: 2px;
-    }
-    75% {
-      transform: rotate(-45deg) translate(0, 0);
-      border-radius: 2px;
-    }
-    100% {
-      transform: rotate(-45deg) translate(0, 0) scaleX(4);
-      border-radius: 0;
-    }
-  `;
-
-const crossTransform2 = keyframes`
-    0% {
-      transform: translate(0, 6px);
-      border-radius: 2px;
-    }
-    50% {
-      transform: translate(0, 0);
-      border-radius: 2px;
-    }
-    75% {
-      transform: rotate(45deg) translate(0, 0);
-      border-radius: 2px;
-    }
-    100% {
-      transform: rotate(45deg) translate(0, 0) scaleX(4);
-      border-radius: 0;
-    }
-  `;
-
 const StyledActionsMenuContainer = styled.div`
   pointer-events: none;
   opacity: 0;
@@ -98,8 +71,8 @@ const Wrapper = styled.div`
 
 const Control = styled.button`
   position: relative;
-  background-color: ${(props) => themeGet("colors.greyLighter")(props)};
-  border: none;
+  background-color: ${(props) => themeGet("colors.white")(props)};
+  border: solid 1px ${(props) => themeGet("colors.greyLight")(props)};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -117,20 +90,52 @@ const Control = styled.button`
   &:hover,
   &:focus {
     outline: 0;
-    background-color: ${(props) => themeGet("colors.greyLight")(props)};
+    border-color: ${(props) => themeGet("colors.primary")(props)};
   }
 
-  &[data-state="open"] .action-menu-icon {
+  &[data-state="open"] .actionsMenu__dots {
     &:before {
-      animation: 400ms ${crossTransform1} ease-in-out forwards;
+      animation: 500ms ${beforeDotCollapsing}
+        cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
     }
     &:after {
-      animation: 400ms ${crossTransform2} ease-in-out forwards;
+      animation: 500ms ${afterDotCollapsing} cubic-bezier(0.68, -0.6, 0.32, 1.6)
+        forwards;
+    }
+  }
+  &[data-state="open"] .actionsMenu__cross {
+    &:before {
+      animation: 500ms ${beforeCrossExpanding}
+        cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
+    }
+    &:after {
+      animation: 500ms ${afterCrossExpanding}
+        cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
+    }
+  }
+  &[data-state="closed"] .actionsMenu__dots {
+    &:before {
+      animation: 500ms ${beforeDotExpanding} cubic-bezier(0.68, -0.6, 0.32, 1.6)
+        forwards;
+    }
+    &:after {
+      animation: 500ms ${afterDotExpanding} cubic-bezier(0.68, -0.6, 0.32, 1.6)
+        forwards;
+    }
+  }
+  &[data-state="closed"] .actionsMenu__cross {
+    &:before {
+      animation: 500ms ${beforeCrossCollapsing}
+        cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
+    }
+    &:after {
+      animation: 500ms ${afterCrossCollapsing}
+        cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
     }
   }
 `;
 
-const Icon = styled.div`
+const Dots = styled.div`
   border-radius: 2px;
   height: 4px;
   width: 4px;
@@ -144,14 +149,36 @@ const Icon = styled.div`
     height: 4px;
     width: 4px;
     background-color: ${(props) => themeGet("colors.greyDarker")(props)};
-    transition: ${(props) => themeGet("transition.transitionDefault")(props)};
-    transform-origin: 50% 50%;
   }
   &:before {
-    transform: translate(0, -6px) scaleX(1);
+    transform: translate(0, -6px);
+  }
+  &:after {
+    transform: translate(0, 6px);
+  }
+`;
+
+const Cross = styled.div`
+  animation: 1500ms ${crossFadeIn} ease-in-out forwards;
+  opacity: 0;
+  position: absolute;
+  left: calc(50% - 2px);
+  top: calc(50% - 2px);
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    border-radius: 2px;
+    height: 4px;
+    width: 4px;
+    background-color: ${(props) => themeGet("colors.greyDarker")(props)};
+  }
+  &:before {
+    transform: rotate(-45deg);
   }
   &:after {
-    transform: translate(0, 6px) scaleX(1);
+    transform: rotate(45deg);
   }
 `;
 
@@ -159,7 +186,9 @@ const Menu = styled.div`
   display: block;
   width: ${(props) => (props.menuWidth ? props.menuWidth : "auto")};
   z-index: 5;
-  background-color: ${(props) => themeGet("colors.greyDarker")(props)};
+  background-color: ${themeGet("colors.white")};
+  border: 1px solid ${themeGet("colors.greyLight")};
+  box-shadow: ${themeGet("shadows.boxDefault")};
   border-radius: ${(props) => themeGet("radii.2")(props)};
 `;
 
@@ -189,12 +218,12 @@ export const ActionsMenuHeading = styled((props) => {
   tabIndex: "0",
   role: "button"
 })`
-  color: ${(props) => themeGet("colors.white")(props)};
+  color: ${(props) => themeGet("colors.greyDark")(props)};
   padding: 8px;
   width: 100%;
-  font-size: ${(props) => themeGet("fontSizes.1")(props)};
+  font-size: ${(props) => themeGet("fontSizes.0")(props)};
   font-weight: ${(props) => themeGet("fontWeights.1")(props)};
-  border-bottom: solid 1px ${(props) => themeGet("colors.greyDarkest")(props)};
+  border-bottom: solid 1px ${(props) => themeGet("colors.greyLighter")(props)};
   white-space: nowrap;
   cursor: ${(props) => (props.canClick ? "pointer" : "default")};
 `;
@@ -251,25 +280,22 @@ export const ActionsMenuItem = styled((props) => {
           appearance: none;
           background-color: ${(props) =>
             props.selected
-              ? themeGet("colors.successDark")(props)
+              ? themeGet("colors.success20")(props)
               : "transparent"};
           border: none;
-          border-bottom: solid 1px
-            ${(props) => themeGet("colors.greyDarkest")(props)};
+          border-bottom: solid 1px ${(props) => themeGet("colors.white")(props)};
           border-radius: 0;
-          color: ${(props) => themeGet("colors.white")(props)};
-          font-size: ${(props) => themeGet("fontSizes.1")(props)};
-          line-height: ${(props) => themeGet("fontSizes.1")(props)};
+          color: ${(props) => themeGet("colors.greyDarkest")(props)};
+          font-size: ${(props) => themeGet("fontSizes.0")(props)};
+          line-height: ${(props) => themeGet("fontSizes.0")(props)};
           font-family: ${(props) => themeGet("fonts.main")(props)};
           font-weight: ${(props) => themeGet("fontWeights.2")(props)};
           text-decoration: none;
           transition: ${(props) =>
             themeGet("transition.transitionDefault")(props)};
-          &:hover,
-          &:focus {
-            outline: 0;
+          &:hover {
             background-color: ${(props) =>
-              themeGet("colors.primaryDark")(props)};
+              themeGet("colors.primaryLightest")(props)};
           }
           &:first-child {
             border-radius: ${(props) => themeGet("radii.2")(props)}
@@ -283,6 +309,9 @@ export const ActionsMenuItem = styled((props) => {
           &:only-child {
             border-radius: ${(props) => themeGet("radii.2")(props)};
           }
+          &#other {
+            padding: 6px 8px;
+          }
         `}
 `;
 
@@ -347,7 +376,8 @@ export const ActionsMenuBody = ({
 
   let triggerComponent = (
     <Control {...triggerProps}>
-      <Icon className="action-menu-icon" />
+      <Dots className="actionsMenu__dots" />
+      <Cross className="actionsMenu__cross" />
     </Control>
   );
 
diff --git a/lib/components/Select/index.js b/lib/components/Select/index.js
index 27dd66b0..81e52c59 100644
--- a/lib/components/Select/index.js
+++ b/lib/components/Select/index.js
@@ -258,6 +258,7 @@ const Select = forwardRef((props, ref) => {
         padding: "6.5px 6px 6.5px 5px",
         display: state.data.isFixed ? "none" : provided.display,
         cursor: "pointer",
+        alignSelf: "stretch",
         borderRadius: "0 15px 15px 0",
         transition: themeGet("transition.transitionDefault")({ theme }),
         "&:hover": {
diff --git a/lib/components/Tag/Tag.stories.js b/lib/components/Tag/Tag.stories.js
index 53d7363c..bbc5f804 100644
--- a/lib/components/Tag/Tag.stories.js
+++ b/lib/components/Tag/Tag.stories.js
@@ -160,9 +160,14 @@ export const withTagType = () => (
 );
 
 export const smallVariant = () => (
-  <Tag selected tagType="specialist" small>
-    Agile Coach
-  </Tag>
+  <Spacer m="2px">
+    <Tag selected tagType="specialist" small>
+      Agile Coach
+    </Tag>
+    <Tag selected showRemove showEdit tagType="Project" small>
+      Infracore 2.0
+    </Tag>
+  </Spacer>
 );
 
 export const highlightedVariant = () => (
diff --git a/lib/components/Tag/index.js b/lib/components/Tag/index.js
index 290f721b..d592e534 100644
--- a/lib/components/Tag/index.js
+++ b/lib/components/Tag/index.js
@@ -125,7 +125,7 @@ const TagValue = styled.button.attrs((props) => ({
 const TagValueText = styled.div`
   text-decoration: ${(props) =>
     props.showStrikeThrough ? "line-through" : "none"};
-  text-overflow: ellipsis;
+  // text-overflow: ellipsis;
   white-space: normal;
   text-align: left;
   line-height: ${(props) =>
@@ -182,7 +182,7 @@ const TagActionIconWrapper = styled(TagValue)`
 
 const TagRemoveIconWrapper = styled(TagValue)`
   border-radius: 0 15px 15px 0;
-  padding: ${(props) => (props.small ? "0 8px 3px 7px" : "0 10px 3px 9px")};
+  padding: ${(props) => (props.small ? "2px 8px 2px 7px" : "2px 10px 2px 9px")};
   &:focus {
     z-index: 2;
   }
@@ -216,7 +216,7 @@ const TagType = styled.div`
   padding: ${(props) =>
     props.small ? themeGet("space.2")(props) : themeGet("space.2")(props)};
   line-height: 1;
-  white-space: normal;
+  white-space: nowrap;
   text-align: left;
   flex: 1 1 auto;
   border-radius: ${(props) => themeGet("radii.1")(props)};
@@ -301,6 +301,7 @@ export default function Tag({
   showStrikeThrough,
   children,
   isPending,
+  ariaLabel,
   small,
   highlighted,
   personEntity,
@@ -317,8 +318,7 @@ export default function Tag({
         showRemove={showRemove}
         onClick={onSelect}
         small={small}
-        aria-label="Navigate to tag"
-        title="Navigate to tag"
+        aria-label={ariaLabel}
       >
         {personEntity && (
           <TagAvatar
@@ -355,10 +355,10 @@ export default function Tag({
           showRemove={showRemove}
           onClick={onEdit}
           small={small}
-          aria-label="Edit tag"
-          title="Edit tag"
+          aria-label="Edit"
+          title="Edit"
         >
-          <Icon icon={["fas", "pen"]} size="xs" />
+          <Icon icon={["fas", "pen"]} size="sm" />
         </TagActionIconWrapper>
       )}
       {showInfo && (
@@ -369,10 +369,10 @@ export default function Tag({
           onClick={onInfo}
           showInfo={showInfo}
           small={small}
-          aria-label="View tag details"
-          title="View tag details"
+          aria-label="View details"
+          title="View details"
         >
-          <Icon icon={["fas", "info"]} size="xs" />
+          <Icon icon={["fas", "info"]} size="sm" />
         </TagActionIconWrapper>
       )}
       {showRemove && (
@@ -382,10 +382,10 @@ export default function Tag({
           disabled={disabled}
           onClick={onRemove}
           small={small}
-          aria-label="Remove tag"
-          title="Remove tag"
+          aria-label="Remove"
+          title="Remove"
         >
-          <Icon icon={["fas", "times"]} size="xs" />
+          <Icon icon={["fas", "times"]} size="sm" />
         </TagRemoveIconWrapper>
       )}
     </TagWrapper>
@@ -436,7 +436,9 @@ Tag.propTypes = {
   /** Applies a highlighted style and colour to the tag */
   highlighted: PropTypes.bool,
   /** Allows you to set a person avatar image or initials */
-  personEntity: PropTypes.object
+  personEntity: PropTypes.object,
+  /** Add ariaLabel text describing to screen readers what this tag button does when pressed. e.g. Apply filter or Navigate to tag.  */
+  ariaLabel: PropTypes.string.isRequired
 };
 
 Tag.defaultProps = {
diff --git a/package-lock.json b/package-lock.json
index fd7c950e..dc61dabc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.46",
+  "version": "3.2.47",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orcs-design-system",
-      "version": "3.2.46",
+      "version": "3.2.47",
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
diff --git a/package.json b/package.json
index 54ac88ff..5d62a8bd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.46",
+  "version": "3.2.47",
   "engines": {
     "node": "20.12.2"
   },