feat: added animations and base styling is reverted to previous

gravity-ui · Jan 30, 2024 · 783432b · 783432b
1 parent ba5eec1
commit 783432b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js
@@ -39,7 +39,7 @@ class GridItem extends React.PureComponent {
     static contextType = DashKitContext;
 
     overlayRef = React.createRef(null);
-    controlsRef = React.createRef();
+    controlsRef = React.createRef(null);
 
     renderOverlay() {
         const {overlayControls} = this.props;
@@ -68,10 +68,11 @@ class GridItem extends React.PureComponent {
                     unmountOnExit
                 >
                     <OverlayControls
+                        ref={this.controlsRef}
                         configItem={item}
                         items={controls}
                         overlayControls={overlayControls}
-                        forwardRef={this.controlsRef}
+                        className={b('controls')}
                     />
                 </CSSTransition>
             </>

diff --git a/src/components/GridItem/GridItem.scss b/src/components/GridItem/GridItem.scss
@@ -8,22 +8,22 @@
         left: 0;
         right: 0;
         border-radius: 3px;
-        background-color: var(--g-color-base-float);
+        background-color: var(--g-color-base-generic);
         border: solid 1px rgba(0, 0, 0, 0.1);
-        opacity: 0.5;
+        // opacity: 0.5;
 
         &-enter {
             opacity: 0;
             will-change: opacity;
 
             &-active {
-                opacity: 0.5;
+                opacity: 1;
                 transition: opacity 300ms ease-in-out;
             }
         }
 
         &-exit {
-            opacity: 0.5;
+            opacity: 1;
             will-change: opacity;
 
             &-active {
@@ -64,6 +64,7 @@
         border-radius: 3px;
 
         &_editMode {
+            opacity: 0.5;
             border-color: transparent;
             pointer-events: none;
         }

diff --git a/src/components/OverlayControls/OverlayControls.tsx b/src/components/OverlayControls/OverlayControls.tsx
@@ -65,6 +65,7 @@ interface OverlayControlsProps extends OverlayControlsDefaultProps {
     items?: OverlayControlItem[];
     overlayControls?: Record<string, OverlayControlItem[]>;
     forwardRef?: React.ForwardedRef<HTMLDivElement>;
+    className?: string;
 }
 
 type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults' | 'namespace'> & {
@@ -97,17 +98,17 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
         size: 'm',
     };
     context!: React.ContextType<DashKitCtx>;
-    ref = null;
+
     render() {
-        const {items = [], position} = this.props;
+        const {items = [], position, className} = this.props;
         const hasCustomControlsWithWidgets = items.length > 0;
 
         const controls = hasCustomControlsWithWidgets
             ? this.getCustomControlsWithWidgets()
             : this.renderControls();
 
         return (
-            <div ref={this.ref || this.props.forwardRef} className={b({position})}>
+            <div ref={this.props.forwardRef} className={b({position}, className)}>
                 {controls}
             </div>
         );