fix(PageLayout): update Pane to warn instead of error (#3160)

* fix(PageLayout): update Pane to warn instead of error * chore: add changeset * chore: remove invariant * chore: address eslint violations --------- Co-authored-by: Josh Black <[email protected]>
primer · Apr 20, 2023 · b65da55 · b65da55
1 parent dbb3950
commit b65da55
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/.changeset/strange-yaks-wink.md b/.changeset/strange-yaks-wink.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update PageLayout.Pane to provide a warning instead of an error when overflow is detected and no label has been provided
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
@@ -8,8 +8,8 @@ import {useSlots} from '../hooks/useSlots'
 import {BetterSystemStyleObject, merge, SxProp} from '../sx'
 import {Theme} from '../ThemeProvider'
 import {canUseDOM} from '../utils/environment'
-import {invariant} from '../utils/invariant'
 import {useOverflow} from '../utils/useOverflow'
+import {warning} from '../utils/warning'
 import VisuallyHidden from '../_VisuallyHidden'
 import {useStickyPaneHeight} from './useStickyPaneHeight'
 
@@ -652,13 +652,19 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
 
     const paneId = useId(id)
 
-    let labelProp = undefined
+    const labelProp: {'aria-labelledby'?: string; 'aria-label'?: string} = {}
     if (hasOverflow) {
-      invariant(label !== undefined || labelledBy !== undefined)
+      warning(
+        label === undefined && labelledBy === undefined,
+        'The <PageLayout.Pane> has overflow and `aria-label` or `aria-labelledby` has not been set. ' +
+          'Please provide `aria-label` or `aria-labelledby` to <PageLayout.Pane> in order to label this ' +
+          'region.',
+      )
+
       if (labelledBy) {
-        labelProp = {'aria-labelledby': labelledBy}
-      } else {
-        labelProp = {'aria-label': label}
+        labelProp['aria-labelledby'] = labelledBy
+      } else if (label) {
+        labelProp['aria-label'] = label
       }
     }