diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index 23d212ddbe..476a068c56 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -563,12 +563,12 @@ exports[`test-utils selectors 1`] = ` "awsui_root_1612d", ], "split-panel": [ - "awsui_close-button_rjqu5", - "awsui_header-text_rjqu5", + "awsui_close-button_htbjz", + "awsui_header-text_htbjz", "awsui_open-button_rjqu5", "awsui_open-position-bottom_rjqu5", "awsui_open-position-side_rjqu5", - "awsui_preferences-button_rjqu5", + "awsui_preferences-button_htbjz", "awsui_root_rjqu5", "awsui_slider_rjqu5", ], diff --git a/src/split-panel/header/index.tsx b/src/split-panel/header/index.tsx new file mode 100644 index 0000000000..cb76c2a021 --- /dev/null +++ b/src/split-panel/header/index.tsx @@ -0,0 +1,95 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import clsx from 'clsx'; + +import { Focusable } from '../../app-layout/utils/use-focus-control'; +import InternalButton from '../../button/internal'; +import { SplitPanelProps } from '../interfaces'; + +import panelTestUtilStyles from '../test-classes/styles.css.js'; +import styles from './styles.css.js'; +import testUtilStyles from './test-classes/styles.css.js'; + +interface SplitPanelHeaderProps extends Pick { + text: string; + position: 'side' | 'bottom'; + isOpen?: boolean; + onToggle: () => void; + setPreferencesOpen: (open: boolean) => void; + panelHeaderId: string; + hidePreferencesButton: boolean; + i18nStrings: Pick; + isRefresh: boolean; + isToolbar?: boolean; + appLayoutMaxWidth?: React.CSSProperties; + refs: { + preferences: React.RefObject; + toggle: React.RefObject; + }; +} + +export default function SplitPanelHeader({ + text, + position, + isOpen, + onToggle, + setPreferencesOpen, + closeBehavior, + panelHeaderId, + hidePreferencesButton, + i18nStrings, + isRefresh, + isToolbar, + appLayoutMaxWidth, + refs, +}: SplitPanelHeaderProps) { + return ( +
+

+ {text} +

+
+ {!hidePreferencesButton && isOpen && ( + <> + setPreferencesOpen(true)} + formAction="none" + ariaLabel={i18nStrings.preferencesTitle} + ref={refs.preferences} + /> + + + )} + + {isOpen ? ( + + ) : position === 'side' || closeBehavior === 'hide' ? null : ( + + )} +
+
+ ); +} diff --git a/src/split-panel/header/styles.scss b/src/split-panel/header/styles.scss new file mode 100644 index 0000000000..927ff17d53 --- /dev/null +++ b/src/split-panel/header/styles.scss @@ -0,0 +1,45 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../../internal/styles' as styles; +@use '../../internal/styles/tokens' as awsui; +@use '../../app-layout/constants' as constants; + +.header { + display: flex; + flex: auto; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + inline-size: 100%; + margin-block: awsui.$size-vertical-panel-icon-offset; + margin-inline: 0; + &.with-toolbar { + margin-block: constants.$toolbar-vertical-panel-icon-offset; + } + + &-text { + @include styles.font-panel-header; + padding-block: 0; + padding-inline: 0; + margin-block: 0; + margin-inline: 0; + margin-block-start: calc(#{awsui.$space-scaled-xxs} + 1px); + } + + &-buttons { + display: flex; + flex-direction: row; + justify-content: space-between; + flex: 0 0 auto; + margin-inline-start: awsui.$space-xs; + } +} + +.divider { + border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default; + margin-block: awsui.$space-scaled-xxs; + margin-inline: awsui.$space-scaled-xs; +} diff --git a/src/split-panel/header/test-classes/styles.scss b/src/split-panel/header/test-classes/styles.scss new file mode 100644 index 0000000000..597371f475 --- /dev/null +++ b/src/split-panel/header/test-classes/styles.scss @@ -0,0 +1,10 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +.header-text, +.close-button, +.preferences-button { + /* used in test-utils */ +} diff --git a/src/split-panel/implementation.tsx b/src/split-panel/implementation.tsx index 5723f35afc..1fae77ac58 100644 --- a/src/split-panel/implementation.tsx +++ b/src/split-panel/implementation.tsx @@ -1,7 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; -import clsx from 'clsx'; import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal'; @@ -9,7 +8,6 @@ import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-fl import { SizeControlProps } from '../app-layout/utils/interfaces'; import { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events'; import { usePointerEvents } from '../app-layout/utils/use-pointer-events'; -import { InternalButton } from '../button/internal'; import { getBaseProps } from '../internal/base-component'; import PanelResizeHandle from '../internal/components/panel-resize-handle'; import { useSplitPanelContext } from '../internal/context/split-panel-context'; @@ -19,11 +17,11 @@ import globalVars from '../internal/styles/global-vars'; import { SomeRequired } from '../internal/types'; import { createWidgetizedComponent } from '../internal/widgets'; import { SplitPanelContentBottom } from './bottom'; +import SplitPanelHeader from './header'; import { SplitPanelProps } from './interfaces'; import PreferencesModal from './preferences-modal'; import { SplitPanelContentSide } from './side'; -import styles from './styles.css.js'; import testUtilStyles from './test-classes/styles.css.js'; export type SplitPanelImplementationProps = SomeRequired & @@ -91,51 +89,21 @@ export function SplitPanelImplementation({ const panelHeaderId = useUniqueId('split-panel-header'); const wrappedHeader = ( -
-

- {header} -

-
- {!hidePreferencesButton && isOpen && ( - <> - setPreferencesOpen(true)} - formAction="none" - ariaLabel={i18nStrings.preferencesTitle} - ref={refs.preferences} - /> - - - )} - - {isOpen ? ( - - ) : position === 'side' || closeBehavior === 'hide' ? null : ( - - )} -
-
+ ); const resizeHandle = ( diff --git a/src/split-panel/styles.scss b/src/split-panel/styles.scss index 1fd95cb935..060320b0b1 100644 --- a/src/split-panel/styles.scss +++ b/src/split-panel/styles.scss @@ -5,7 +5,6 @@ @use '../internal/styles' as styles; @use '../internal/styles/tokens' as awsui; -@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible; @use '../app-layout/constants' as constants; $slider-width: 16px; @@ -225,40 +224,3 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw margin-block-start: 0px; } } - -.header { - display: flex; - flex: auto; - flex-direction: row; - align-items: flex-start; - justify-content: space-between; - inline-size: 100%; - margin-block: awsui.$size-vertical-panel-icon-offset; - margin-inline: 0; - &.with-toolbar { - margin-block: constants.$toolbar-vertical-panel-icon-offset; - } - - &-text { - @include styles.font-panel-header; - padding-block: 0; - padding-inline: 0; - margin-block: 0; - margin-inline: 0; - margin-block-start: calc(#{awsui.$space-scaled-xxs} + 1px); - } -} - -.header-actions { - display: flex; - flex-direction: row; - justify-content: space-between; - flex: 0 0 auto; - margin-inline-start: awsui.$space-xs; -} - -.divider { - border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default; - margin-block: awsui.$space-scaled-xxs; - margin-inline: awsui.$space-scaled-xs; -} diff --git a/src/split-panel/test-classes/styles.scss b/src/split-panel/test-classes/styles.scss index d977bcc68e..6607fd9f03 100644 --- a/src/split-panel/test-classes/styles.scss +++ b/src/split-panel/test-classes/styles.scss @@ -4,10 +4,7 @@ */ .root, -.header-text, .open-button, -.close-button, -.preferences-button, .slider, .open-position-bottom, .open-position-side { diff --git a/src/test-utils/dom/split-panel/index.ts b/src/test-utils/dom/split-panel/index.ts index b7a329f368..0ea37d252b 100644 --- a/src/test-utils/dom/split-panel/index.ts +++ b/src/test-utils/dom/split-panel/index.ts @@ -4,21 +4,22 @@ import { ComponentWrapper, createWrapper, ElementWrapper } from '@cloudscape-des import ButtonWrapper from '../button'; +import headerTestUtilStyles from '../../../split-panel/header/test-classes/styles.selectors.js'; import testUtilStyles from '../../../split-panel/test-classes/styles.selectors.js'; export default class SplitPanelWrapper extends ComponentWrapper { static rootSelector: string = testUtilStyles.root; findHeader(): ElementWrapper { - return this.find(`.${testUtilStyles['header-text']}`)!; + return this.find(`.${headerTestUtilStyles['header-text']}`)!; } findPreferencesButton(): ButtonWrapper | null { - return this.findComponent(`.${testUtilStyles['preferences-button']}`, ButtonWrapper); + return this.findComponent(`.${headerTestUtilStyles['preferences-button']}`, ButtonWrapper); } findCloseButton(): ButtonWrapper | null { - return this.findComponent(`.${testUtilStyles['close-button']}`, ButtonWrapper); + return this.findComponent(`.${headerTestUtilStyles['close-button']}`, ButtonWrapper); } findOpenButton(): ButtonWrapper | null {