fix: [cannot set the modal value] in [Dialog component]

[YuecongLou]

🐛 Bug Report

Cannot set the modal to be false by:
modal="false" or modal={false} or ?modal="false" or any other way that i can come up with..

💻 Repro or Code Sample

        class="settings-dialog"
        modal="false"
        @dismiss=${...}
        ${ref("dialogRef")}
        >
        <div class="settings-dialog-header">
                .....
        </div>
    </fluent-dialog>

🤔 Expected Behavior

the modal should be set as false and there should be no overlay element.

😯 Current Behavior

the modal seems still remains true and the overlay element still exists

💁 Possible Solution

🔦 Context

i was hoping to get rid of the overlay element since I was trying to implement a hover to open feature and the overlay would affect the mouseleave function

please ping me @YuecongLou at teams

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]

[EisenbergEffect]

I think the modal attribute is a boolean attribute so you either add the attribute or you don't based on whether you want it modal or not. However, I think there may be a bug in the component because if the value is set to true by default, that probably breaks the boolean property. /cc @chrisdholt

[janechu]

Unfortunately @microsoft/fast-components has been deprecated for some time.