Skip to content

Commit

Permalink
ActionsMenu update and tags UI bug fixes (#348)
Browse files Browse the repository at this point in the history 
* Updating ActionsMenu component and fixing Tags UI bug

* 3.2.47

* Fixed a few more tags bugs
  • Loading branch information
@abottega
abottega authored Jan 15, 2025
1 parent f6b7246 commit 898df27
Show file tree
Hide file tree
Showing 8 changed files with 246 additions and 87 deletions.
121 changes: 121 additions & 0 deletions lib/components/ActionsMenu/ActionsMenu.animations.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
`;
2 changes: 1 addition & 1 deletion lib/components/ActionsMenu/ActionsMenu.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ const MenuItems = React.forwardRef(({ closeMenu, reasons }, ref) => {
<ActionsMenuItem
key={id}
type="button"
id="other"
selected={selectedReason === id}
onClick={clickOther}
>
Expand All @@ -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"
Expand Down
160 changes: 95 additions & 65 deletions lib/components/ActionsMenu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -144,22 +149,46 @@ 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);
}
`;

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)};
`;

Expand Down Expand Up @@ -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")};
`;
Expand Down Expand Up @@ -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)}
Expand All @@ -283,6 +309,9 @@ export const ActionsMenuItem = styled((props) => {
&:only-child {
border-radius: ${(props) => themeGet("radii.2")(props)};
}
&#other {
padding: 6px 8px;
}
`}
`;

Expand Down Expand Up @@ -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>
);

Expand Down
Loading

0 comments on commit 898df27

Please sign in to comment.