feat(ui-view): add overscroll-behavior to view and flex.item component

Closes: INSTUI-3873
instructure · Oct 2, 2023 · 411c44b · 411c44b
1 parent cd5e681
commit 411c44b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/packages/ui-view/src/View/__examples__/View.examples.ts b/packages/ui-view/src/View/__examples__/View.examples.ts
@@ -83,6 +83,18 @@ export default {
           props.textAlign !== 'center')) ||
       // Only generate a 1 variation for non-'0' borderWidth
       (props.borderWidth !== '0' &&
+        (props.background !== 'transparent' ||
+          props.borderRadius !== '0' ||
+          props.position !== 'static' ||
+          props.shadow !== 'none' ||
+          props.textAlign !== 'center')) ||
+      (props.overscrollBehavior === 'none' &&
+        (props.background !== 'transparent' ||
+          props.borderRadius !== '0' ||
+          props.position !== 'static' ||
+          props.shadow !== 'none' ||
+          props.textAlign !== 'center')) ||
+      (props.overscrollBehavior === 'auto' &&
         (props.background !== 'transparent' ||
           props.borderRadius !== '0' ||
           props.position !== 'static' ||

diff --git a/packages/ui-view/src/View/index.tsx b/packages/ui-view/src/View/index.tsx
@@ -64,7 +64,8 @@ class View extends Component<ViewProps> {
     position: 'static',
     focusPosition: 'offset',
     focusColor: 'info',
-    shouldAnimateFocus: true
+    shouldAnimateFocus: true,
+    overscrollBehavior: 'auto'
   } as const
 
   // TODO: Remove this code once all components are using passthroughProps in place
@@ -204,6 +205,7 @@ class View extends Component<ViewProps> {
       shouldAnimateFocus,
       borderColor,
       className,
+      overscrollBehavior,
       styles,
       makeStyles,
       ...props

diff --git a/packages/ui-view/src/View/props.ts b/packages/ui-view/src/View/props.ts
@@ -190,6 +190,11 @@ type ViewOwnProps = {
    * Specify a mouse cursor to use when hovering over the `<View />`
    */
   cursor?: Cursor
+  /**
+   * Sets what a browser does when reaching the boundary of a scrolling area.
+   * Valid values are `auto`, `contain`, `none`.
+   */
+  overscrollBehavior?: 'auto' | 'contain' | 'none'
 }
 
 type PropKeys = keyof ViewOwnProps
@@ -271,7 +276,8 @@ const propTypes: PropValidators<PropKeys> = {
   focusColor: PropTypes.oneOf(['info', 'inverse', 'success', 'danger']),
   shouldAnimateFocus: PropTypes.bool,
   withVisualDebug: PropTypes.bool,
-  dir: PropTypes.oneOf(Object.values(textDirectionContextConsumer.DIRECTION))
+  dir: PropTypes.oneOf(Object.values(textDirectionContextConsumer.DIRECTION)),
+  overscrollBehavior: PropTypes.oneOf(['auto', 'contain', 'none'])
 }
 
 // This variable will be attached as static property on the `View` component
@@ -302,6 +308,7 @@ const allowedProps: AllowedPropKeys = [
   'minWidth',
   'overflowX',
   'overflowY',
+  'overscrollBehavior',
   'padding',
   'position',
   'shadow',

diff --git a/packages/ui-view/src/View/styles.ts b/packages/ui-view/src/View/styles.ts
@@ -395,6 +395,7 @@ const generateStyle = (
     shadow,
     overflowY,
     overflowX,
+    overscrollBehavior,
     insetBlockEnd,
     insetBlockStart,
     insetInlineEnd,
@@ -586,6 +587,7 @@ const generateStyle = (
       overflowX: overflowX && overflowX !== 'visible' ? overflowX : '',
       overflowY: overflowY && overflowY !== 'visible' ? overflowY : '',
       position: position !== 'static' ? position : '',
+      overscrollBehavior: overscrollBehavior ? overscrollBehavior : 'auto',
       ...(withVisualDebug
         ? {
             outline: `0.0625rem dashed ${componentTheme.debugOutlineColor}`