From 66c44ed1243065e39b546c05a51707c808cb8a92 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Tue, 10 Oct 2023 07:08:13 +1100 Subject: [PATCH 1/3] Remove flex gap shim --- packages/@react-spectrum/layout/src/Flex.tsx | 58 -------------------- 1 file changed, 58 deletions(-) diff --git a/packages/@react-spectrum/layout/src/Flex.tsx b/packages/@react-spectrum/layout/src/Flex.tsx index eb8a3096cf6..b17d5fb1769 100644 --- a/packages/@react-spectrum/layout/src/Flex.tsx +++ b/packages/@react-spectrum/layout/src/Flex.tsx @@ -36,32 +36,7 @@ function Flex(props: FlexProps, ref: DOMRef) { 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 ( -
-
- {children} -
-
- ); - } - - // If no gaps, or native support exists, then we only need to render a single div. let style = { ...styleProps.style, ...flexStyle.style @@ -113,39 +88,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. From 2a11208401cee23d6393b9efa76f008d2cb6d513 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Tue, 10 Oct 2023 20:53:16 +1100 Subject: [PATCH 2/3] fix lint --- packages/@react-spectrum/layout/src/Flex.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/@react-spectrum/layout/src/Flex.tsx b/packages/@react-spectrum/layout/src/Flex.tsx index b17d5fb1769..aa6c05c223c 100644 --- a/packages/@react-spectrum/layout/src/Flex.tsx +++ b/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], From 172e6d4820ef29365605c4142e53805fe04e218f Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 11 Oct 2023 11:22:51 +1100 Subject: [PATCH 3/3] Remove references to shim in docs --- packages/@react-spectrum/layout/docs/Flex.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/@react-spectrum/layout/docs/Flex.mdx b/packages/@react-spectrum/layout/docs/Flex.mdx index a5fbdcded2a..8a3329289fa 100644 --- a/packages/@react-spectrum/layout/docs/Flex.mdx +++ b/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.