Remove gap shim (#5229)

* Remove flex gap shim

Author: snowystinger

packages/@react-spectrum/layout/docs/Flex.mdx

@@ -39,11 +39,9 @@ The `Flex` component can be used to layout its children in one dimension with
 Any React Spectrum component can be used as a child, and `Flex` components can be nested to create
 more complex layouts.
 
-In addition to the properties widely supported by CSS, React Spectrum also shims the `gap` property, along
-with `rowGap` and `columnGap`. These properties make it much easier to build layouts
-with consistent space between each item. The gap can be defined with [Spectrum dimension variables](styling.html#dimension-values)
+The `gap`, `rowGap` and `columnGap` can be defined with [Spectrum dimension variables](styling.html#dimension-values)
 to ensure consistency across applications, and allow the layout to adapt to different devices automatically.
-In addition, these values can be autocompleted in many IDEs for convenience.
+These values can be autocompleted in many IDEs for convenience.
 
 All `Flex` props also support object syntax to define responsive layouts that change at certain breakpoints.
 See the [layout docs](layout.html#responsive-layout) for more details.

packages/@react-spectrum/layout/src/Flex.tsx

@@ -16,7 +16,6 @@ import {filterDOMProps} from '@react-aria/utils';
 import {FlexProps} from '@react-types/layout';
 import React, {forwardRef} from 'react';
 import styles from './flex-gap.css';
-import {useIsSSR} from '@react-aria/ssr';
 
 const flexStyleProps: StyleHandlers = {
   direction: ['flexDirection', passthroughStyle],
@@ -36,32 +35,7 @@ function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
   let {styleProps} = useStyleProps(otherProps);
   let {styleProps: flexStyle} = useStyleProps(otherProps, flexStyleProps);
   let domRef = useDOMRef(ref);
-  let isSSR = useIsSSR();
 
-  // If a gap property is specified, and there is no native support or we're in SSR, use a shim.
-  // Two divs are required for this: the outer one contains most style properties, and the inner
-  // one is the flex container. Each item inside the flex container gets a margin around it based
-  // on the gap, and the flex container has a negative margin to counteract this. The outer container
-  // is necessary to allow nesting of flex containers with gaps, so that the inner CSS variable doesn't
-  // override the outer one.
-  if ((props.gap || props.rowGap || props.columnGap) && (isSSR || !isFlexGapSupported())) {
-    let style = {
-      ...flexStyle.style,
-      '--column-gap': props.columnGap != null ? responsiveDimensionValue(props.columnGap, matchedBreakpoints) : undefined,
-      '--row-gap': props.rowGap != null ? responsiveDimensionValue(props.rowGap, matchedBreakpoints) : undefined,
-      '--gap': props.gap != null ? responsiveDimensionValue(props.gap, matchedBreakpoints) : undefined
-    };
-
-    return (
-      <div {...filterDOMProps(otherProps)} {...styleProps} className={classNames(styles, 'flex-container', styleProps.className)} ref={domRef}>
-        <div className={classNames(styles, 'flex', 'flex-gap')} style={style}>
-          {children}
-        </div>
-      </div>
-    );
-  }
-
-  // If no gaps, or native support exists, then we only need to render a single div.
   let style = {
     ...styleProps.style,
     ...flexStyle.style
@@ -113,39 +87,6 @@ function flexWrapValue(value) {
   return value;
 }
 
-
-// Original licensing for the following method can be found in the
-// NOTICE file in the root directory of this source tree.
-// See https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
-
-let _isFlexGapSupported = null;
-function isFlexGapSupported() {
-  if (_isFlexGapSupported != null) {
-    return _isFlexGapSupported;
-  }
-
-  if (typeof document === 'undefined') {
-    return false;
-  }
-
-  // create flex container with row-gap set
-  var flex = document.createElement('div');
-  flex.style.display = 'flex';
-  flex.style.flexDirection = 'column';
-  flex.style.rowGap = '1px';
-
-  // create two, elements inside it
-  flex.appendChild(document.createElement('div'));
-  flex.appendChild(document.createElement('div'));
-
-  // append to the DOM (needed to obtain scrollHeight)
-  document.body.appendChild(flex);
-  _isFlexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
-  flex.parentNode.removeChild(flex);
-
-  return _isFlexGapSupported;
-}
-
 /**
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
  * property to define consistent spacing between items.