Skip to content
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.

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

feat(ui-view): add overscroll-behavior to view component #1302

Merged
merged 1 commit into from
Oct 3, 2023

Conversation

joyenjoyer
Copy link
Contributor

@joyenjoyer joyenjoyer commented Sep 29, 2023

Closes: INSTUI-3873

Test plan

Either you use these examples or come up with your own. Observe how the scrolling behavior changes as you change the value for overscrollBehavior and make sure it works as intended.

<View
  as="div"
  margin="small"
  padding="large"
  textAlign="center"
  background="primary"
  height='100px'
  overflowY="scroll"
  overscrollBehavior="contain"
>
  {lorem.paragraphs(10)}
</View>
<Flex height="400px" width="300px" as="div" direction="column" withVisualDebug>

  <Flex.Item padding="small" as="header" textAlign="center">
    <Heading level="h3">App</Heading>
  </Flex.Item>

  <Flex.Item shouldGrow shouldShrink padding="small" as="main" overscrollBehavior="contain">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Flex.Item>

  <Flex.Item padding="small" as="footer">

    <Flex withVisualDebug justifyItems="space-between">
      <Flex.Item>
        <IconButton
          renderIcon={IconEmailLine}
          withBackground={false}
          withBorder={false}
          screenReaderLabel="Some app function"
        />
      </Flex.Item>
      <Flex.Item>
        <IconButton
          renderIcon={IconPrinterLine}
          withBackground={false}
          withBorder={false}
          screenReaderLabel="Some app function"
        />
      </Flex.Item>
      <Flex.Item>
        <IconButton
          renderIcon={IconCalendarDayLine}
          withBackground={false}
          withBorder={false}
          screenReaderLabel="Some app function"
        />
      </Flex.Item>
      <Flex.Item>
        <IconButton
          renderIcon={IconSettingsLine}
          withBackground={false}
          withBorder={false}
          screenReaderLabel="Some app function"
        />
      </Flex.Item>
    </Flex>

  </Flex.Item>
</Flex>

@joyenjoyer joyenjoyer self-assigned this Sep 29, 2023
@github-actions
Copy link

Preview URL: https://1302--preview-instui.netlify.app

@joyenjoyer joyenjoyer requested review from matyasf and balzss October 2, 2023 11:15
@joyenjoyer joyenjoyer force-pushed the INSTUI-3873_overscroll-behavior branch from bdec501 to 411c44b Compare October 2, 2023 11:17
@joyenjoyer joyenjoyer marked this pull request as ready for review October 2, 2023 11:17
@joyenjoyer joyenjoyer merged commit 6dc990f into master Oct 3, 2023
4 checks passed
@joyenjoyer joyenjoyer deleted the INSTUI-3873_overscroll-behavior branch October 3, 2023 10:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants