Emma Bostian
Spotify
Check out a free preview of the full Design Systems with React & Storybook course
The "Modal Documentation Solution" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:
Emma live codes the solution to the modal documentation exercise.
Preview
CloseTranscript from the "Modal Documentation Solution" Lesson
[00:00:00]
>> For the Modal exercise, all I did was create a new file called Modals.stories.mdx inside of components and I just copy and pasted over all of the code for my button stories. So it's very similar and has the same exact structure, all I did was instantiate the SignupModal.
[00:00:16]
And then, all we need to do to get this working with the show and hide modal is just to create a showModal attribute here passing in our state. It's a boolean, and we're going to initialize it to true. So if we come in here to our norms we can see now we've got our Show Modal.
[00:00:33]
And if I uncheck this, it fades out and if I check, it fades in. I believe it's not transitioning just because the CSS like it doesn't know where to go. So, at least, it's showing and it's not showing that it's good enough for me.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops