-
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 (#1331
) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Jessica Kuelz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Connor Lanigan <[email protected]> Co-authored-by: Rúben Carvalho <[email protected]> Co-authored-by: Abdallah AlHalees <[email protected]> Co-authored-by: Timo <[email protected]> Co-authored-by: Gethin Webster <[email protected]> Co-authored-by: Avinash Dwarapu <[email protected]> Co-authored-by: Andrei Zhaleznichenka <[email protected]> Co-authored-by: Boris Serdiuk <[email protected]> Co-authored-by: Johannes Weber <[email protected]>
- Loading branch information
12 people
authored
Jul 28, 2023
1 parent
c203e09
commit 254fbb1
Showing
9 changed files
with
227 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,106 @@ | ||
| // 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('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.