fix(tile): hide maximize action in fullscreen, reset opacity in drag state

Author: mtsvyatkova

src/components/tile-manager/tile-manager.spec.ts

@@ -628,6 +628,22 @@ describe('Tile Manager component', () => {
       expect(btnFullscreen.name).equals('fullscreen');
     });
 
+    it('should hide maximize action when a tile is in fullscreen mode', async () => {
+      const btnMaximize = getActionButtons(tile)[0];
+      const btnFullscreen = getActionButtons(tile)[1];
+
+      expect(getActionButtons(tile)).lengthOf(2);
+      expect(btnMaximize.name).equals('expand_content');
+      expect(btnFullscreen.name).equals('fullscreen');
+
+      simulateClick(btnFullscreen);
+      await elementUpdated(tileManager);
+
+      expect(tile.fullscreen).is.true;
+      expect(getActionButtons(tile)).lengthOf(1);
+      expect(getActionButtons(tile)[0].name).equals('fullscreen_exit');
+    });
+
     it('should correctly fire `igcTileMaximize` event on clicking Maximize button', async () => {
       const eventSpy = spy(tile, 'emitEvent');
       const btnMaximize = getActionButtons(tile)[0];

src/components/tile-manager/tile.ts

@@ -371,7 +371,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   private _setDragState(state = true) {
     this._isDragging = state;
-    this._tileContent.style.opacity = state ? '0' : '1';
+    this._tileContent.style.opacity = state ? '0' : '';
     this.style.pointerEvents = state ? 'none' : '';
     this.part.toggle('dragging', state);
   }
@@ -588,7 +588,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
           <slot name="title"></slot>
         </header>
         <section id="tile-actions" part="actions">
-          ${!this.disableMaximize
+          ${!this.disableMaximize && !this.fullscreen
             ? html`<slot name="maximize-action"
                 >${this._renderDefaultAction('maximize')}</slot
               >`

stories/tile-manager.stories.ts

@@ -150,7 +150,6 @@ const tiles = Array.from(
     (i) => html`
       <igc-tile .disableResize=${i === 0}>
         <h3 slot="title">Tile ${i + 1} Title</h3>
-        <igc-icon name="home" slot="actions"></igc-icon>
 
         <p>Text in Tile ${i + 1}</p>
         <div class="picture">