Skip to content

Remove gap shim #5229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
snowystinger merged 5 commits into from
Oct 12, 2023
Merged

Remove gap shim #5229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
66c44ed
Remove flex gap shim
snowystinger Oct 9, 2023
2a11208
fix lint
snowystinger Oct 10, 2023
172e6d4
Remove references to shim in docs
snowystinger Oct 11, 2023
ba89f7b
Merge branch 'main' into remove-gap-shim
snowystinger Oct 11, 2023
f945447
Merge branch 'main' into remove-gap-shim
snowystinger Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions packages/@react-spectrum/layout/docs/Flex.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
59 changes: 0 additions & 59 deletions packages/@react-spectrum/layout/src/Flex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -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
Expand Down Expand Up @@ -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.
Expand Down