Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ActionMenu.Overlay should accept false and null as children #2067

Closed
jdrush89 opened this issue May 11, 2022 · 1 comment · Fixed by #2168 or #2188
Closed

ActionMenu.Overlay should accept false and null as children #2067

jdrush89 opened this issue May 11, 2022 · 1 comment · Fixed by #2168 or #2188
Assignees

Comments

@jdrush89
Copy link
Contributor

jdrush89 commented May 11, 2022

Describe the bug
ActionMenu.Overlay does not accept false or null as child values which makes it cumbersome to have conditional children rendering within it.

Note: As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private Design Systems repo and link to it here.

To Reproduce
Steps to reproduce the behavior:

  1. Take the following example:
    function testComponent(showSearch: boolean) {
    return (
    <ActionMenu>
    <ActionMenu.Button>Menu</ActionMenu.Button>

    <ActionMenu.Overlay>
    {showSearch && <TextInput />}

    <ActionList.Item>Copy link</ActionList.Item>
    <ActionList.Item>Edit file</ActionList.Item>

    </ActionMenu.Overlay>
    </ActionMenu>
    )
    }

  2. See the following error
    Type 'false | Element' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | (string & ReactElement<any, string | JSXElementConstructor<any>>)'. Type 'boolean' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | (string & ReactElement<any, string | JSXElementConstructor<any>>)'.ts(2322)

Expected behavior
The Overlay should support a way of rendering conditional elements that doesn't involve rendering an empty React fragment.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: iOS
  • Browser chrome
  • Version 97.0.4692.71

Additional context
null should be supported in addition to false.

@lesliecdubs
Copy link
Member

@jdrush89 hi! Sid put up a PR for this here: #2188. Could you help with testing this out in Memex before we move forward?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants