do not add GrayedOutOverlay if there is no children (#3329)

Summary:
Do not add `GrayedOutOverlay` to the `ToggledSection` component if there is no children.

Current approach was causing UI issue in the Settings Modal in dark mode.

## Changelog

* do not add `GrayedOutOverlay` to the `ToggledSection` if there is no children

Pull Request resolved: https://github.com/facebook/flipper/pull/3329

Test Plan:
The change has been testes by running the desktop Flipper app locally from source.

## Preview (before & after)

<img width="390" alt="Screenshot 2022-01-23 at 15 32 29" align="left" src="https://user-images.githubusercontent.com/719641/150683689-d70f2af9-d835-4139-a8bb-a638aca9b8d3.png">
<img width="390" alt="Screenshot 2022-01-23 at 15 32 12" src="https://user-images.githubusercontent.com/719641/150683692-86da3fba-5740-426e-96c7-6838632f42f0.png">

Reviewed By: aigoncharov

Differential Revision: D33738627

Pulled By: lblasa

fbshipit-source-id: 12b028e3c7986a4fa196bac6f32a9efc19f1883d
This commit is contained in:
Simek
2022-01-24 05:41:26 -08:00
committed by Facebook GitHub Bot
parent 9aff968938
commit f1b83a96fd

View File

@@ -45,7 +45,9 @@ export default function ToggledSection(props: {
</FlexRow>
<IndentedSection>
{props.children}
{props.toggled || props.frozen ? null : <GrayedOutOverlay />}
{props.toggled || props.frozen
? null
: props.children && <GrayedOutOverlay />}
</IndentedSection>
</FlexColumn>
);