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(QuickStarts): decouple content from quickstart drawer #344

Merged
merged 3 commits into from
Nov 22, 2024

Conversation

kmcfaul
Copy link
Contributor

@kmcfaul kmcfaul commented Nov 13, 2024

Closes #135.

  • Refactors and exports the drawer content into a new QuickStartDrawerContent component that may be used with a custom drawer. This acts as a replacement for a typical DrawerContent in a Drawer. QuickStartDrawerContent is also used internally for the current managed drawer implementation.
  • Exports QuickStartsCloseModal to be used with custom drawers (though this could be done manually with a custom modal too, LMK if we want to let this be exported or not).
  • Adds isManagedDrawer prop to QuickStartContainer, defaulting to true
  • Adds an example to both the dev server and pf docs
  • Also breaks QuickStartContainer and QuickStartDrawer into their own component files (both were exported in a single file)

To use a custom drawer, you would use the same initial QuickStartContainer and context setup, and now pass isManagedDrawer={false}. Then within the container, use a directly managed Drawer with the new QuickStartDrawerContent as a child. Optionally, you may include a QuickStartCloseModal that triggers on QuickStartDrawerContent's handleDrawerClose callback to handle in-progress close confirmation.

Copy link

netlify bot commented Nov 13, 2024

Deploy Preview for quickstarts ready!

Name Link
🔨 Latest commit 8b6aa3b
🔍 Latest deploy log https://app.netlify.com/sites/quickstarts/deploys/6740e02a2ec2b40008b10fcc
😎 Deploy Preview https://deploy-preview-344--quickstarts.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@kmcfaul
Copy link
Contributor Author

kmcfaul commented Nov 13, 2024

The information for quickstarts is largely passed around by the QuickStartContainer's context - LMK if we want to try to further break down the coupling of QS components and try to pass more things via props instead. For a first pass I wanted to minimize the impact of the refactor while still allowing for a user managed drawer.

@nicolethoen
Copy link
Contributor

I really like how this is looking. Would it be possible to add an extra control to the demo somewhere on the page that populates the drawer with something beside a quickstart (even if it's just some plain text)? just to hammer the use case home and make it clear?

@kmcfaul
Copy link
Contributor Author

kmcfaul commented Nov 20, 2024

@Hyperkid123 Does this PR solve your use case / is it going in the right direction?

@Hyperkid123
Copy link
Contributor

@kmcfaul Yes, this is exactly what we are looking for!

@nicolethoen nicolethoen merged commit fa41d42 into patternfly:main Nov 22, 2024
9 checks passed
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.

Using quickstarts without the drawer.
4 participants