Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ActionsMenu update and tags UI bug fixes #348

Merged
merged 3 commits into from
Jan 15, 2025
Merged

ActionsMenu update and tags UI bug fixes #348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5992f9
Updating ActionsMenu component and fixing Tags UI bug
abottega Jan 15, 2025
f8d868f
3.2.47
abottega Jan 15, 2025
fc60b57
Fixed a few more tags bugs
abottega Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 121 additions & 0 deletions lib/components/ActionsMenu/ActionsMenu.animations.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading