change dropdown markup

[sureshHARDIYA]

Fixes #465

[stipsan]

Storybook Hub is building storybooks for every commit in this PR.

Latest Storybook: https://90273f4f-bd6d-4b4d-86e5-46ecbc55171f.sbook.io/
_{( Visit here for more info )}

This comment is automatically added by Storybook Hub

[stipsan]

Instead of duplicating and complicating logic this should be made a lot easier to use.

It shouldn't be harder to use than:

const MyTarget = (props) => <a {...props} className={cx('my-awesome-target', props.className)}>My Target</a>

const MyDropdown = (props) => <div {...props}>My content</div>

const App = () => (
  <Dropdown>
    <MyTarget />
    <MyDropdown />
  </Dropdown>
)

It should also be possible to do this:

const App = () => (
  <Dropdown>
    {({open, onClick}) => (
      <div onClick={onClick}>
         <a className={cx({'uk-open': open})}>Target</a>
          <div className={cx('uk-navbar-dropdown', {'uk-open': open})}>
            Dropdown content here
          </div>
      </div>
    )}
  </Dropdown>
)

[stipsan]

The default classname here .uk-dropdown .uk-dropdown-bottom-left must be made configurable using a prop.

[stipsan]

This should not be hardcoded

[stipsan]

I can't see this prop used anywhere?

[sureshHARDIYA]

dropdownIcon, a remainder that we need this props. Could be added once we have SVG issues done.

[stipsan]

I understand, but we shouldn't add anything that isn't used regardless.

[stipsan]

I don't understand the logic here, why is mode passed as children?

[sureshHARDIYA]

This is the label for button.

So, if user does not define the dropdownLabel, it will just use mode text. The button will say hover or click on the label.

[stipsan]

The core component shouldn't have default props or behaviour that is only useful in a demo/story.

[stipsan]

it is not optimal to duplicate event handlers on each of the child components.

[sureshHARDIYA]

const MyTarget = (props) => <a {...props} className={cx('my-awesome-target', props.className)}>My Target</a>

const MyDropdown = (props) => <div {...props}>My content</div>

const App = () => (
  <Dropdown>
    <MyTarget />
    <MyDropdown />
  </Dropdown>
)

Not sure, how logic for mouseEnter and mouseEnter will be passed to MyTarget and MyDropdown, commits would nice.

[stipsan]

Same way you pass props to the target in the Modal component