Merge pull request #478 from eduzz/feat/simple-animations

feat: remove animations
eduzz · Jun 30, 2023 · b6ae5b6 · b6ae5b6
2 parents 05fb16b + 3cde74d
commit b6ae5b6
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 113 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1 +1 @@
-*       @danieloprado @ffernandomoraes @miguelaugl
+*       @danieloprado @ffernandomoraes @JonathasRodrigues
diff --git a/src/dev/src/App.tsx b/src/dev/src/App.tsx
@@ -2,7 +2,10 @@ import * as React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 import { MessageOutlined, BellOutlined, BulbOutlined, BulbFilled } from '@ant-design/icons';
-import { Avatar, message } from 'antd';
+import { Avatar, App as AntdApp } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 
 import NotificationOutline from '@eduzz/houston-icons/NotificationOutline';
 import Layout from '@eduzz/houston-ui/Layout';
@@ -12,6 +15,10 @@ import createTheme from '@eduzz/houston-ui/ThemeProvider/createTheme';
 import houston from './assets/houston.png';
 import ComponentDev from './components';
 
+export let message: MessageInstance;
+export let notification: NotificationInstance;
+export let modal: Omit<ModalStaticFunctions, 'warn'>;
+
 const theme = createTheme('eduzz');
 const { Sidebar, Topbar, Content } = Layout;
 const { Item, Group } = Sidebar;
@@ -24,8 +31,6 @@ const LogoWrapper = ({ children, className }: { children: React.ReactNode; class
   );
 };
 
-console.log({ theme });
-
 function App() {
   const [themeMode, setThemeMode] = React.useState<'dark' | 'light'>('light');
 
@@ -41,6 +46,7 @@ function App() {
   return (
     <BrowserRouter>
       <ThemeProvider theme={theme} mode={themeMode}>
+        <AppBinder />
         <Layout>
           <Topbar
             currentApplication='orbita'
@@ -113,3 +119,11 @@ function App() {
 }
 
 export default App;
+
+function AppBinder() {
+  const staticFunction = AntdApp.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  return <div id='portal-modal' />;
+}
diff --git a/src/pages/ui-components/Layout/Sidebar/index.tsx b/src/pages/ui-components/Layout/Sidebar/index.tsx
@@ -73,14 +73,13 @@ const SidebarStyled = styled(Sidebar, { label: 'hst-sidebar' })`
       display: inline-flex;
       flex-direction: column;
       width: ${MENU_WIDTH}px;
-      transition: 0.2s ease-out, top 0s, background-color 0.3s;
+      transition: background-color 0.3s;
       z-index: 104;
       flex-grow: 1;
       position: fixed;
       bottom: 0;
       left: 0;
       top: 0;
-      animation-delay: 0.3s;
 
       a {
         text-decoration: none;

diff --git a/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx b/src/pages/ui-components/Layout/Topbar/Apps/Dropdown/index.tsx
@@ -7,7 +7,7 @@ import useBoolean from '@eduzz/houston-hooks/useBoolean';
 
 import { TopbarApplication } from '..';
 import IconClose from '../../../../Icons/Close';
-import styled, { css, StyledProp, cx, keyframes } from '../../../../styled';
+import styled, { css, StyledProp, cx } from '../../../../styled';
 import { TOPBAR_DROPDOWN_WIDTH } from '../../../context';
 
 export type AppsDropdownProps = StyledProp &
@@ -90,11 +90,6 @@ const AppsDropdown = React.memo<AppsDropdownProps>(
   }
 );
 
-const descriptionAnimation = keyframes`
-  0% { text-indent: -1000px; }
-  100% {  text-indent: 0px; }
-`;
-
 export default styled(AppsDropdown, { label: 'hst-topbar-apps-dropdown' })(
   ({ theme }) => css`
     width: ${theme.pxToRem(TOPBAR_DROPDOWN_WIDTH)}rem;
@@ -105,13 +100,10 @@ export default styled(AppsDropdown, { label: 'hst-topbar-apps-dropdown' })(
     left: 0.5rem;
     border-radius: 0 0 0.5rem 0.5rem;
     z-index: 105;
-    transition: 0.15s ease-in-out;
     opacity: 0;
     visibility: hidden;
     user-select: none;
     box-sizing: border-box;
-    transform: scale(0.1);
-    transform-origin: top left;
     max-height: calc(100vh - ${theme.pxToRem(theme.components.topBarHeight)}rem);
     overflow-y: auto;
 
@@ -122,7 +114,6 @@ export default styled(AppsDropdown, { label: 'hst-topbar-apps-dropdown' })(
 
     &.hst-topbar-apps-dropdown-opened {
       opacity: 1;
-      transform: scale(1);
       visibility: visible;
       user-select: initial;
     }
@@ -157,7 +148,6 @@ export default styled(AppsDropdown, { label: 'hst-topbar-apps-dropdown' })(
       .hst-topbar-apps-dropdown-item {
         width: 100%;
         text-align: center;
-        transition: 0.15s ease-out;
         border-radius: 0.25rem;
         cursor: pointer;
         text-decoration: none;
@@ -177,12 +167,6 @@ export default styled(AppsDropdown, { label: 'hst-topbar-apps-dropdown' })(
           font-size: 16px;
           color: ${theme.antd.colorTextDescription};
           margin-top: 2px;
-
-          ${theme.mediaQuery.up('md')} {
-            text-indent: -1000px;
-            animation: ${descriptionAnimation} 0.2s ease-in-out forwards;
-            animation-delay: 0s;
-          }
         }
 
         &.hst-topbar-apps-dropdown-current {
@@ -211,6 +195,10 @@ export default styled(AppsDropdown, { label: 'hst-topbar-apps-dropdown' })(
         padding: 0.5rem 2rem;
         border-bottom: 1px solid ${theme.hexToRgba('#000000', 0.12)};
 
+        h5 {
+          margin-bottom: 0;
+        }
+
         button {
           display: flex;
           justify-content: center;

diff --git a/src/pages/ui-components/Layout/Topbar/User/index.tsx b/src/pages/ui-components/Layout/Topbar/User/index.tsx
@@ -74,17 +74,13 @@ export default styled(User, { label: 'hst-topbar-user' })(
       pointer-events: all;
     }
 
-    & .hst-topbar-user-menu-arrow {
-      transition: 0.15s ease-out;
-    }
-
     &.hst-topbar-user-active {
       & .hst-topbar-user-button {
         background-color: rgba(0, 0, 0, 0.05);
       }
 
       & .hst-topbar-user-menu-arrow {
-        transform: rotate(-180deg);
+        transform: rotateX(-180deg);
         margin-bottom: 0;
         margin-top: -5px;
       }

diff --git a/src/pages/ui-components/Layout/Topbar/UserMenu/index.tsx b/src/pages/ui-components/Layout/Topbar/UserMenu/index.tsx
@@ -46,15 +46,12 @@ export default styled(UserMenu, { label: 'hst-topbar-user-menu' })(
     right: 0.5rem;
     box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16);
     padding: 0.5rem;
-    transition: 0.15s ease-out;
-    transform: scale(0.1);
-    transform-origin: top right;
     box-sizing: border-box;
     visibility: hidden;
     opacity: 0;
     user-select: none;
     background: ${theme.antd.colorBgElevated};
-    border-radius: 0.5rem;
+    border-radius: 0 0 0.5rem 0.5rem;
 
     &::-webkit-scrollbar {
       width: 3px;

diff --git a/src/pages/ui-components/ThemeProvider/createTheme/antd.ts b/src/pages/ui-components/ThemeProvider/createTheme/antd.ts
@@ -7,6 +7,7 @@ export default function antdTheme(brancColor: BrandColor, mode: 'dark' | 'light'
   return {
     algorithm: mode == 'dark' ? [theme.darkAlgorithm] : [],
     token: removeUndef({
+      motion: false,
       colorPrimary: brancColor.primary,
       colorBgLayout: mode === 'light' ? '#fcfcfc' : undefined,
       colorBgTextHover: mode === 'light' ? 'rgba(0, 0, 0, 0.03)' : undefined,

diff --git a/src/pages/ui-components/ThemeProvider/css/custom.tsx b/src/pages/ui-components/ThemeProvider/css/custom.tsx
@@ -87,11 +87,28 @@ const CustomCss = () => {
         }
 
         /* add blur to modal */
-        .ant-modal-mask {
+        .ant-modal-mask,
+        .ant-image-preview-mask {
           backdrop-filter: blur(0.5rem);
           -webkit-backdrop-filter: blur(0.5rem);
         }
 
+        .ant-modal {
+          transform: none !important;
+        }
+
+        .ant-modal-mask.ant-fade-leave {
+          pointer-events: none;
+
+          + .ant-modal-wrap {
+            pointer-events: none;
+          }
+        }
+
+        .ant-wave {
+          display: none;
+        }
+
         /* fix avatar inside of a button  */
         .ant-btn > .ant-avatar {
           vertical-align: text-bottom;

diff --git a/src/pages/ui-components/package.json b/src/pages/ui-components/package.json
@@ -19,7 +19,7 @@
     "check-update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.0.1",
+    "@ant-design/icons": "^5.1.4",
     "@eduzz/houston-forms": "1.9.8",
     "@eduzz/houston-hooks": "1.9.8",
     "@eduzz/houston-icons": "1.9.8",
@@ -29,7 +29,7 @@
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@popperjs/core": "^2.11.7",
-    "antd": "^5.4.6",
+    "antd": "^5.5.2",
     "date-fns": "^2",
     "lodash-es": "^4",
     "rc-upload": "^4.3.4",