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

[COR-481][Bpk-Drawer] Drawer mobile modal animation #3669

Open
wants to merge 21 commits into
base: main
Choose a base branch
from

Conversation

TristanGrayCC
Copy link
Contributor

@TristanGrayCC TristanGrayCC commented Nov 14, 2024

Updates the BpkDrawer component to allow a prop to be passed down to enable the Drawer to behave like BpkModal in mobile view

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@TristanGrayCC TristanGrayCC added the minor Non breaking change label Nov 14, 2024
@TristanGrayCC TristanGrayCC marked this pull request as ready for review November 15, 2024 14:06
onClose,
padded = true,
renderTarget = null,
title,
}: Props) => {

const [isDrawerShown, setIsDrawerShown] = useState(true);
useEffect(() => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This replaces the deprecated UNSAFE_componentWillReceiveProps method from the .js implementation, without which isOpen and isDrawerShown fall out of sync and prevent the drawer being re-opened

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Non breaking change
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants