[docs][Backdrop] Improvements to docs

[alirezahekmati]

this is the js file that I added from the MUI doc example and here are two things that we solve:

1. changing color: '#fff'(line41) to background: "#333333e6" since setting color won't do anything in the backdrop but setting background color will actually change backdrop color.

2. handleToggle(line33) doesn't need to be a toggle since it's not togglable! when the backdrop opens there is no access by clicking it so it basically can only open the dialog in this case it's better to write it this way:

handleOpen = () => {
setOpen(true)
};

at the same time even if we don't change the function it still has some problems you shouldn't change the state value directly so it has the be like this :

 const handleToggle = () => {
    setOpen(value => !value);
  };

Signed-off-by: alireza 94165013+alirezahekmati@users.noreply.github.com

• I have followed (at least) the PR section of the contributing guide.

[alirezahekmati]

please read the comment first the changes in the repo are here only to help you to see the example from the doc since it's not shown here.

[mui-bot]

Netlify deploy preview

• docs/data/material/components/backdrop/backdrop.md

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 5b16f07

[siriwatknp]

changing color: '#fff'(line41) to background: "#333333e6" since setting color won't do anything in the backdrop but setting background color will actually change backdrop color.

I believe that the color is to show the circular progress:

Sounds good to me if you want to add background to the demo since it is a pretty common customization.

handleToggle(line33) doesn't need to be a toggle since it's not togglable! when the backdrop opens there is no access by clicking it so it basically can only open the dialog in this case it's better to write it this way:

I am good with your proposal. This is a simple demo, setOpen(true) is enough.

[siriwatknp]

Please change the demo file (.tsx, .js) instead of the markdown.

[mapache-salvaje]

@siriwatknp I moved the new demo code to where it belongs, and took the opportunity to do some light copy editing on the page as well. I think it's ready to go now!

[ZeeshanTamboli]

@samuelsycamore I pushed the following two commits:

1. You removed the code snippet from markdown but the demo code was not updated as proposed by the author - faf1235
2. Changed text to CircularProgress component - 5b16f07

Looks good now!

Addressed

[mapache-salvaje]

This was correct before—see Style conventions for components from the Handbook Style Guide. The backtick style is an old convention being phased out.

[ZeeshanTamboli]

Okay. I was not aware of it. Reverting it in #36837.