fix(app-shell): small fix to works fine the resizable (#2163)

Teradata · May 22, 2024 · ae0f78a · ae0f78a
1 parent a3fd091
commit ae0f78a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss
@@ -144,16 +144,16 @@
     }
 
     &:hover::after,
-    &.resizing::after {
+    &.helpResizable::after {
       opacity: 1;
     }
   }
 
-  :host([resizing]) .resize-handle {
+  :host([helpResizable]) .resize-handle {
     display: block;
   }
 
-  :host(:not([resizing])) .resize-handle {
+  :host(:not([helpResizable])) .resize-handle {
     display: none;
   }
 

diff --git a/libs/components/src/app-shell/app-shell.stories.js b/libs/components/src/app-shell/app-shell.stories.js
@@ -22,7 +22,7 @@ export default {
   args: {
     contained: true,
     fullWidth: false,
-    resizing: true,
+    helpResizable: true,
   },
   argTypes: {
     navClick: { action: 'clicked' },
@@ -54,7 +54,7 @@ const Template = ({
   forcedOpen = false,
   contained = true,
   fullWidth = false,
-  resizing = true,
+  helpResizable = true,
 }) => {
   document.addEventListener(
     'DOMContentLoaded',
@@ -104,7 +104,7 @@ const Template = ({
     ${forcedOpen ? `forcedOpen open` : ''}
     ${contained ? `contained` : ''}
     ${fullWidth ? `fullWidth` : ''}
-    ${resizing ? `resizing` : ''}
+    ${helpResizable ? `helpResizable` : ''}
     
     >
 
@@ -317,7 +317,7 @@ fullWidth.args = {
   fullWidth: true,
 };
 
-export const resizing = Template.bind({});
-resizing.args = {
-  resizing: true,
+export const helpResizable = Template.bind({});
+helpResizable.args = {
+  helpResizable: true,
 };
diff --git a/libs/components/src/app-shell/app-shell.ts b/libs/components/src/app-shell/app-shell.ts
@@ -156,7 +156,7 @@ export class CovalentAppShell extends DrawerBase {
       this._startWidth = this.helpWidth;
       document.addEventListener('mousemove', this._resize);
       document.addEventListener('mouseup', this._stopResize);
-      (event.target as HTMLElement).classList.add('resizing');
+      (event.target as HTMLElement).classList.add('helpResizable');
     }
 
     resizeHandle?.addEventListener('dblclick', () => {
@@ -191,7 +191,7 @@ export class CovalentAppShell extends DrawerBase {
     document.removeEventListener('mouseup', this._stopResize);
     const resizeHandle = this.shadowRoot?.querySelector('.resize-handle');
     if (resizeHandle) {
-      resizeHandle.classList.remove('resizing');
+      resizeHandle.classList.remove('helpResizable');
     }
   }