Dropdown is not working

[matheusgrieger]

I've followed the docs on implementing a Dropdown, but it is not appearing when I click the trigger. Below is the code I'm using for that:

<Column>
  <Dropdown isAlign="right" isPulled="right">
    <DropdownTrigger>
      <Button isColor="primary">
        <span>Button label</span>
        <span className="icon">
          <FontAwesomeIcon icon={['fal', 'chevron-circle-down']} />
        </span>
      </Button>
    </DropdownTrigger>
    <DropdownMenu>
      <DropdownContent>
        <DropdownItem tag="a">
          Menu item
        </DropdownItem>
      </DropdownContent>
    </DropdownMenu>
  </Dropdown>
</Column>

Do I need to implement the opening and closing on click by myself?

Versions

react@16.8.6
react-dom@16.8.6
bloomer@0.6.5

[juhana]

The example in the documentation has a custom implementation for opening and closing so I assume that's what you have to do.

bloomer/docs/src/Scenes/Documentation/Components/Scenes/Dropdown.tsx

Line 41 in b9af827

<Dropdown isActive={isDropdownOpen}>

The documentation strongly implies that isActive is needed only if you want the dropdown to be permanently open, so maybe the wording should be tweaked there if that's not really the case.

[matheusgrieger]

Yeah, that's where my doubt originated from. I have a custom implementation, though. Thanks!

[AlgusDark]

I will rewrite Bloomer to make it lighter than it is now and it will be easier to implement new Bulma.

At first wanted to create it with styled components but it was so hard to keep track to changes on Bulma :/

[matheusgrieger]

Wouldn't styled components break theming capabilities with Bulma variables?

[matheusgrieger]

By the way, if there's any support I can provide, be it in dev or test, I'm up for it!

[AlgusDark]

Wouldn't styled components break theming capabilities with Bulma variables?

My idea was to transform all sass logic into styled components css and use theming based on that. Too crazy to maintain but was very interesting doing it. Better is to wait for Bulma to use css variables.

By the way, if there's any support I can provide, be it in dev or test, I'm up for it!

Of course. If you have knowledge with lerna, would be interesting doing this a mono repo with Bloomer and Bloomer page. I will start doing all the tooling for Babel and eslint+TS.