diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx index 761987a8c25..5afb784c452 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx @@ -1543,8 +1543,18 @@ describe('AnalyticalTable', () => { cy.mount(); 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(); 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(); cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('not.exist'); cy.mount(); @@ -1895,8 +1905,22 @@ describe('AnalyticalTable', () => { }); it('overlay', (done) => { + cy.mount(); + 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(); - 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); }); diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css index d6e7cd76999..5568c688d84 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css +++ b/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)); diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index 158a5d6b24e..a89e60eaca7 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -756,12 +756,8 @@ const AnalyticalTable = forwardRef - {/*todo: This is necessary; otherwise, the overlay bg color will not be applied. https://github.com/SAP/ui5-webcomponents/issues/9723 */} - - + /> )} - {/*todo: use global CSS once --sapBlockLayer_Opacity is available*/} {showOverlay && ( <>