fix(AnalyticalTable): update loading indicator and overlay styles (#7447)

> Please note that the default visualisation for controls is Disabled
control and BusyIndicator on top.

Therefore we don't need to apply a different overlay bg color or similar
and setting `--sapContent_DisabledOpacity` is sufficient.

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -1534,8 +1534,18 @@ describe('AnalyticalTable', () => {
     cy.mount(<AnalyticalTable data={[]} columns={columns} loading loadingDelay={0} />);
     cy.get('[data-component-name="AnalyticalTableLoadingPlaceholder"]').should('be.visible');
     cy.get('.ui5-busy-indicator-busy-area').should('not.exist');
+    cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class*="busyIndicator"])').should(
+      'not.have.css',
+      'opacity',
+      '0.4',
+    );
     cy.mount(<AnalyticalTable data={data} columns={columns} loading />);
     cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('be.visible');
+    cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class*="busyIndicator"])').should(
+      'have.css',
+      'opacity',
+      '0.4',
+    );
     cy.mount(<AnalyticalTable data={data} columns={columns} loading loadingDelay={50000} />);
     cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('not.exist');
     cy.mount(<AnalyticalTable data={[]} columns={columns} />);
@@ -1886,8 +1896,22 @@ describe('AnalyticalTable', () => {
   });
 
   it('overlay', (done) => {
+    cy.mount(<AnalyticalTable data={data} columns={columns} />);
+    cy.findByRole('region').should('not.exist');
+    cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class^="overlay"])').should(
+      'not.have.css',
+      'opacity',
+      '0.4',
+    );
+    cy.findByText('A').click();
+
     cy.mount(<AnalyticalTable data={data} columns={columns} showOverlay />);
-    cy.findByRole('region').should('be.visible').should('have.css', 'opacity', '0.8');
+    cy.findByRole('region').should('be.visible');
+    cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class^="overlay"])').should(
+      'have.css',
+      'opacity',
+      '0.4',
+    );
     cy.findByText('A').shouldNotBeClickable(done);
   });
 

packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

@@ -12,6 +12,22 @@
   }
 }
 
+.tableContainerWithScrollBar {
+  position: relative;
+
+  &:has(> .overlay) {
+    > :not(.overlay) {
+      opacity: var(--sapContent_DisabledOpacity);
+    }
+  }
+
+  &:has(> .busyIndicator) {
+    > :not(.busyIndicator) {
+      opacity: var(--sapContent_DisabledOpacity);
+    }
+  }
+}
+
 .table {
   position: relative;
   width: 100%;
@@ -37,10 +53,6 @@
   }
 }
 
-.tableContainerWithScrollBar {
-  position: relative;
-}
-
 .busyIndicator {
   position: absolute;
   z-index: 1;
@@ -52,8 +64,6 @@
   position: absolute;
   z-index: 1;
   inset: 0;
-  background: var(--sapGroup_ContentBackground);
-  opacity: 0.8;
 
   &:focus {
     outline-offset: calc(-1 * var(--sapContent_FocusWidth));

packages/main/src/components/AnalyticalTable/index.tsx

@@ -755,12 +755,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               active={true}
               delay={loadingDelay}
               data-component-name="AnalyticalTableBusyIndicator"
-            >
-              {/*todo: This is necessary; otherwise, the overlay bg color will not be applied. https://github.com/SAP/ui5-webcomponents/issues/9723 */}
-              <span />
-            </BusyIndicator>
+            />
           )}
-          {/*todo: use global CSS once --sapBlockLayer_Opacity is available*/}
           {showOverlay && (
             <>
               <span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden="true">