-
Notifications
You must be signed in to change notification settings - Fork 155
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Render Visual Refresh background height in sync with content
This reverts commit 4773c00 and adds a fix for the commit that it had reverted.
- Loading branch information
Showing
9 changed files
with
234 additions
and
41 deletions.
There are no files selected for viewing
38 changes: 38 additions & 0 deletions
38
pages/app-layout/full-page-table-with-variable-header-height.page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import React from 'react'; | ||
| import AppLayout from '~components/app-layout'; | ||
| import labels from './utils/labels'; | ||
| import Table from '~components/table'; | ||
| import { generateItems, Instance } from '../table/generate-data'; | ||
| import { columnsConfig } from '../table/shared-configs'; | ||
| import ExpandableSection from '~components/expandable-section'; | ||
| import Header from '~components/header'; | ||
|
|
||
| const items = generateItems(20); | ||
|
|
||
| export default function () { | ||
| return ( | ||
| <AppLayout | ||
| ariaLabels={labels} | ||
| contentType="table" | ||
| navigationHide={true} | ||
| content={ | ||
| <Table<Instance> | ||
| header={ | ||
| <> | ||
| <Header variant="awsui-h1-sticky">Header that changes size when scrolling</Header> | ||
| <ExpandableSection headerText="Click to expand header area"> | ||
| <div style={{ height: '300px' }}>Content</div> | ||
| </ExpandableSection> | ||
| </> | ||
| } | ||
| stickyHeader={true} | ||
| variant="full-page" | ||
| columnDefinitions={columnsConfig} | ||
| items={items} | ||
| /> | ||
| } | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout'; | ||
| import { useDynamicOverlap } from '../../../lib/components/internal/hooks/use-dynamic-overlap'; | ||
| import { useAppLayoutInternals } from '../../../lib/components/app-layout/visual-refresh/context'; | ||
|
|
||
| jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({ | ||
| ...jest.requireActual('../../../lib/components/internal/hooks/use-visual-mode'), | ||
| useVisualRefresh: jest.fn().mockReturnValue(true), | ||
| })); | ||
|
|
||
| let positiveHeight = true; | ||
|
|
||
| jest.mock('../../../lib/components/internal/hooks/container-queries/utils', () => ({ | ||
| ...jest.requireActual('../../../lib/components/internal/hooks/container-queries/utils'), | ||
| convertResizeObserverEntry: () => ({ contentBoxHeight: positiveHeight ? 800 : 0 }), | ||
| })); | ||
|
|
||
| describe('Dynamic overlap', () => { | ||
| function ComponentWithDynamicOverlap() { | ||
| const ref = useDynamicOverlap(); | ||
| const { isDynamicOverlapSet, isDynamicOverlapDisabled } = useAppLayoutInternals(); | ||
| return ( | ||
| <> | ||
| <div ref={ref} /> | ||
| <div data-testid="is-dynamic-overlap-set">{isDynamicOverlapSet.toString()}</div> | ||
| <div data-testid="is-dynamic-overlap-disabled">{isDynamicOverlapDisabled.toString()}</div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function ComponentWithoutDynamicOverlap() { | ||
| const { isDynamicOverlapSet, isDynamicOverlapDisabled } = useAppLayoutInternals(); | ||
| return ( | ||
| <> | ||
| <div data-testid="is-dynamic-overlap-set">{isDynamicOverlapSet.toString()}</div> | ||
| <div data-testid="is-dynamic-overlap-disabled">{isDynamicOverlapDisabled.toString()}</div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function renderApp(appLayoutProps?: AppLayoutProps) { | ||
| const { rerender } = render(<AppLayout {...appLayoutProps} />); | ||
| return { | ||
| isDynamicOverlapSet: () => screen.getByTestId('is-dynamic-overlap-set').textContent, | ||
| isDynamicOverlapDisabled: () => screen.getByTestId('is-dynamic-overlap-disabled').textContent, | ||
| rerender: (appLayoutProps?: AppLayoutProps) => rerender(<AppLayout {...appLayoutProps} />), | ||
| }; | ||
| } | ||
|
|
||
| beforeEach(() => { | ||
| positiveHeight = true; | ||
| }); | ||
|
|
||
| test('sets dynamic overlap when content header is present', () => { | ||
| const { isDynamicOverlapSet, isDynamicOverlapDisabled } = renderApp({ | ||
| content: <ComponentWithDynamicOverlap />, | ||
| contentHeader: 'Content header', | ||
| }); | ||
| expect(isDynamicOverlapSet()).toBe('true'); | ||
| expect(isDynamicOverlapDisabled()).toBe('false'); | ||
| }); | ||
|
|
||
| test('sets dynamic overlap when height is higher than 0', () => { | ||
| const { isDynamicOverlapSet, isDynamicOverlapDisabled } = renderApp({ content: <ComponentWithDynamicOverlap /> }); | ||
| expect(isDynamicOverlapSet()).toBe('true'); | ||
| expect(isDynamicOverlapDisabled()).toBe('false'); | ||
| }); | ||
|
|
||
| test('does not set dynamic overlap when no content header is present and height is 0', () => { | ||
| positiveHeight = false; | ||
| const { isDynamicOverlapSet, isDynamicOverlapDisabled } = renderApp({ content: <ComponentWithDynamicOverlap /> }); | ||
| expect(isDynamicOverlapSet()).toBe('false'); | ||
| expect(isDynamicOverlapDisabled()).toBe('true'); | ||
| }); | ||
|
|
||
| test('does not set dynamic overlap when the useDynamicOverlap hook is not used', () => { | ||
| const { isDynamicOverlapSet, isDynamicOverlapDisabled } = renderApp({ | ||
| content: <ComponentWithoutDynamicOverlap />, | ||
| disableContentHeaderOverlap: true, | ||
| }); | ||
| expect(isDynamicOverlapSet()).toBe('false'); | ||
| expect(isDynamicOverlapDisabled()).toBe('true'); | ||
| }); | ||
|
|
||
| test('disables dynamic overlap when explicitly specified in the app layout props', () => { | ||
| const { isDynamicOverlapDisabled } = renderApp({ | ||
| content: <ComponentWithDynamicOverlap />, | ||
| disableContentHeaderOverlap: true, | ||
| }); | ||
| expect(isDynamicOverlapDisabled()).toBe('true'); | ||
| }); | ||
|
|
||
| test('does not disable dynamic overlap if useDynamicOverlap hook is not used but content header is present', () => { | ||
| const { isDynamicOverlapDisabled } = renderApp({ | ||
| content: <ComponentWithoutDynamicOverlap />, | ||
| contentHeader: 'Content header', | ||
| }); | ||
| expect(isDynamicOverlapDisabled()).toBe('false'); | ||
| }); | ||
|
|
||
| test('updates state accordingly when re-rendering', () => { | ||
| const { isDynamicOverlapSet, isDynamicOverlapDisabled, rerender } = renderApp({ | ||
| content: <ComponentWithDynamicOverlap />, | ||
| }); | ||
| expect(isDynamicOverlapSet()).toBe('true'); | ||
| expect(isDynamicOverlapDisabled()).toBe('false'); | ||
| rerender({ content: <ComponentWithoutDynamicOverlap /> }); | ||
| expect(isDynamicOverlapSet()).toBe('false'); | ||
| expect(isDynamicOverlapDisabled()).toBe('true'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import { ResizeObserverEntry } from '@juggle/resize-observer'; | ||
| import { ContainerQueryEntry } from '@cloudscape-design/component-toolkit'; | ||
|
|
||
| export function convertResizeObserverEntry(entry: ResizeObserverEntry): ContainerQueryEntry { | ||
| return { | ||
| target: entry.target, | ||
| contentBoxWidth: entry.contentBoxSize[0].inlineSize, | ||
| contentBoxHeight: entry.contentBoxSize[0].blockSize, | ||
| borderBoxWidth: entry.borderBoxSize[0].inlineSize, | ||
| borderBoxHeight: entry.borderBoxSize[0].blockSize, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.