Change logic for restrict scroll

[britt6612]

What does this PR do?

This changes the logic of when to restrictScroll

Where should the reviewer start?

LayerContainer.js

What testing has been done on this PR?

Storybook

How should this be manually tested?

import React from 'react';
import { Box, Grommet, Button, Layer, Header, Heading } from 'grommet';
import { hpe } from 'grommet-theme-hpe';

export const TargetLayer = () => {
  const [open, setOpen] = React.useState();
  const ref = React.useRef();
  const onOpen = () => setOpen(true);

  return (
    // Uncomment <Grommet> lines when using outside of storybook
    <Grommet theme={hpe}>
      <Box height="xxlarge">
        <Box
          ref={ref}
          height={{ min: 'small' }}
          gap="medium"
          width="medium"
          background="brand"
        >
          <Button label="Open" onClick={onOpen} />
          {open && (
            <Layer position="center" target={ref.current}>
              <Box
                gap="medium"
                pad="medium"
                width={{ min: 'medium' }}
                flex="grow"
              >
                <Header
                  flex={false}
                  align="start"
                  gap="small"
                  justify="between"
                >
                  <Box>
                    <Heading
                      id="layer-title"
                      level={2}
                      margin="none"
                      size="small"
                    >
                      test
                    </Heading>
                  </Box>
                </Header>
              </Box>
            </Layer>
          )}
        </Box>
      </Box>
    </Grommet>
  );
};

TargetLayer.storyName = 'Target';

TargetLayer.args = {
  full: 'min',
};

export default {
  title: 'Layout/Layer/Target',
};

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• userEvent is used in place of fireEvent.
• asFragment() is used for snapshot testing.

Any background context you want to provide?

When hitResponsiveBreakpoint is small this line
!layerTarget || hitResponsiveBreakpoint ? true : undefined turns true however when we have a layerTarget this should not be true so instead of OR this should be AND

What are the relevant issues?

Scroll issue in DS site
Closes grommet/hpe-design-system#3111

Screenshots (if appropriate)

Do the grommet docs need to be updated?

no

Should this PR be mentioned in the release notes?

yes

Is this change backwards compatible or is it a breaking change?

It does change the logic however I dont beleive it should of been OR to begin with.

[jcfilben]

Looks good!

[taysea]

Thanks for fixing this logic.