microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.55k stars 2.74k forks source link

Problems with dismissing Panels #1867

Closed JeremyGrieshop closed 7 years ago

JeremyGrieshop commented 7 years ago

Bug Report

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: Normal

Products/sites affected: N/A

Describe the issue:

I'm very, very new to React and Fabric. I've used create-react-app and yarn to add office-ui-fabric-react just to get started.

I've had a lot of success with the components so far, but can't get past a problem with Panels. Even if I use the example provided, I can get a Panel to come up, but there is no icon to dismiss/close the Panel. When I hover over where that icon should be and click it, nothing happens. I can even create a button to cause the state 'isShow' property to turn to 'false', and it still won't dismiss itself.

Actual behavior:

The actual behavior is that the Panel won't go away.

Expected behavior:

The Panel goes away when I dismiss it by setting the isShow state to 'false'.

If applicable, please provide a codepen repro:

JeremyGrieshop commented 7 years ago

Wow, so I solved it on my own and should have reviewed the Getting Started instructions more carefully.

I simply left out the stylesheet include from :

This caused icons not to show up, and even disabled functionality of closing the Panel.