POC restrict clickable area

Author: jperals

pages/app-layout/split-panel-with-custom-header.page.tsx

@@ -19,15 +19,13 @@ import { splitPaneli18nStrings } from './utils/strings';
 import * as toolsContent from './utils/tools-content';
 
 type SplitPanelHeaderContentType = 'text' | 'react-node';
-type SplitPanelHeaderLength = 'short' | 'long' | 'very-long';
 
 type SplitPanelDemoContext = React.Context<
   AppContextType<{
     renderBadge: boolean;
     renderActions: boolean;
     splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];
     splitPanelHeaderContentType: SplitPanelHeaderContentType;
-    splitPanelHeaderLength: SplitPanelHeaderLength;
   }>
 >;
 
@@ -84,28 +82,20 @@ const DEMO_CONTENT = (
   </div>
 );
 
-const baseHeaderText = 'Split panel header';
-const headerTextWithLongWord = baseHeaderText + ' withlongwordthatshouldbesplitinsteadofmakingthepanelscroll';
-
 export default function () {
   const { urlParams, setUrlParams } = useContext(AppContext as SplitPanelDemoContext);
 
-  const headerText =
-    urlParams.splitPanelHeaderLength === 'short'
-      ? baseHeaderText
-      : urlParams.splitPanelHeaderLength === 'long'
-        ? headerTextWithLongWord
-        : new Array(20).fill(baseHeaderText);
-
   const header =
     urlParams.splitPanelHeaderContentType === 'text' ? (
-      headerText
+      'This split panel can be opened by clicking anywhere on it'
     ) : (
       <div style={{ display: 'flex', justifyContent: 'space-between', inlineSize: '100%' }}>
         <SpaceBetween direction="horizontal" size="xs" alignItems="center">
           {urlParams.renderBadge && <Badge>Badge</Badge>}
           <Box variant="h3" tagOverride="h2" margin={{ vertical: 'n' }} padding={{ vertical: 'n' }}>
-            <span style={{ letterSpacing: 'normal' }}>{headerText}</span>
+            <span style={{ letterSpacing: 'normal' }}>
+              This split panel can be opened only by clicking on the caret icon
+            </span>
           </Box>
         </SpaceBetween>
         {urlParams.renderActions && (
@@ -144,22 +134,6 @@ export default function () {
               </Header>
             </div>
             <SpaceBetween size="l">
-              <FormField label="Split panel header text length">
-                <Tiles
-                  value={urlParams.splitPanelHeaderLength}
-                  items={[
-                    { label: 'Short', value: 'short' },
-                    { label: 'Long', value: 'long' },
-                    { label: 'Very long', value: 'very-long' },
-                  ]}
-                  onChange={({ detail }) =>
-                    setUrlParams({
-                      ...urlParams,
-                      splitPanelHeaderLength: detail.value as SplitPanelHeaderLength,
-                    })
-                  }
-                />
-              </FormField>
               <FormField label="Split panel header content type">
                 <Tiles
                   value={urlParams.splitPanelHeaderContentType}

src/split-panel/bottom.tsx

@@ -79,8 +79,9 @@ export function SplitPanelContentBottom({
         [styles.refresh]: isRefresh,
         [styles['with-toolbar']]: isToolbar,
         [styles.hidden]: closeBehavior === 'hide' && !isOpen,
+        [styles.clickable]: !!onToggle,
       })}
-      onClick={() => !isOpen && onToggle()}
+      onClick={() => !isOpen && onToggle && onToggle()}
       style={{
         insetBlockEnd: bottomOffset,
         insetInlineStart: leftOffset,

src/split-panel/implementation.tsx

@@ -95,6 +95,8 @@ export function SplitPanelImplementation({
     id: panelHeaderId,
   };
 
+  const restrictClickableArea = typeof header !== 'string' && position === 'bottom';
+
   const wrappedHeader = (
     <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>
       {typeof header === 'string' ? (
@@ -139,6 +141,7 @@ export function SplitPanelImplementation({
             ariaLabel={i18nStrings.openButtonAriaLabel}
             ref={refs.toggle}
             ariaExpanded={isOpen}
+            onClick={restrictClickableArea ? onToggle : undefined}
           />
         )}
       </div>
@@ -232,7 +235,7 @@ export function SplitPanelImplementation({
           isOpen={isOpen}
           splitPanelRef={mergedRef}
           cappedSize={size}
-          onToggle={onToggle}
+          onToggle={!restrictClickableArea ? onToggle : undefined}
           header={wrappedHeader}
           panelHeaderId={panelHeaderId}
           appLayoutMaxWidth={appLayoutMaxWidth}

src/split-panel/interfaces.ts

@@ -62,5 +62,5 @@ export interface SplitPanelContentProps {
   resizeHandle: React.ReactNode;
   header: React.ReactNode;
   children: React.ReactNode;
-  onToggle: () => void;
+  onToggle?: () => void;
 }

src/split-panel/side.tsx

@@ -62,7 +62,7 @@ export function SplitPanelContentSide({
           top: topOffset,
           bottom: bottomOffset,
         }}
-        onClick={() => !isOpen && onToggle()}
+        onClick={() => !isOpen && onToggle && onToggle()}
         aria-labelledby={panelHeaderId}
         role="region"
       >

src/split-panel/styles.scss

@@ -71,7 +71,7 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   &.drawer-closed {
     overflow: hidden;
   }
-  &.drawer-closed:hover {
+  &.drawer-closed.clickable:hover {
     background: awsui.$color-background-layout-panel-hover;
   }
   & > .drawer-content-bottom > [aria-hidden='true'] {