Skip to content

Button & DropdownToggle updates#120

Merged
eddywashere merged 3 commits intomasterfrom
update-dropdown-toggle
Sep 6, 2016
Merged

Button & DropdownToggle updates#120
eddywashere merged 3 commits intomasterfrom
update-dropdown-toggle

Conversation

@eddywashere
Copy link
Copy Markdown
Member

This fixes some inconsistencies within button and dropdown components and removes some weird behavior found in #98.

  • Button color defaults to secondary (previously default style in bs3)
  • DropdownToggle: no longer clones each element in props.children when it’s an array, instead it renders props.children inside a single component (Button) with the onClick toggle context.

<Helmet title="Dropdowns" />
<h3>Dropdowns</h3>
<p>
The <code>Dropdown</code> component is used to pass the <code>isOpen</code> & <code>toggle</code> props via context to the following components: <code>DropdownToggle</code>, <code>DropdownMenu</code>. The <code>DropdownToggle</code> uses the <code>Button</code> component internally, meaning it also accepts all the props the <Link to="/components/buttons/">Button component</Link> accepts.
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also added Dropdown description and info around advanced positioning.

@coveralls
Copy link
Copy Markdown

Coverage Status

Coverage remained the same at 100.0% when pulling 778f82d on update-dropdown-toggle into bfa20a5 on master.

@eddywashere
Copy link
Copy Markdown
Member Author

Besides the Button color deafult, this affects users who pass an array of children to DropdownToggle.

Old example:

<DropdownToggle>
  <Button color="primary">Click Me</Button>
  <Button color="primary">Or me!!</Button>
</DropdownToggle>

Updated syntax:

<DropdownToggle color="primary">Click Me</DropdownToggle>
<DropdownToggle color="primary">Or me!!</DropdownToggle>

You could think of DropdownTogggle as an enhanced Button that has onClick set to use the toggle method passed to the parent Dropdown component (uses context).

@eddywashere
Copy link
Copy Markdown
Member Author

@arcanis thoughts?

The following will now work

<DropdownToggle>
    <i className={`fa fa-user`} />
</DropdownToggle>

this too:

<DropdownToggle tag="i" className={`fa fa-user`} />

@arcanis
Copy link
Copy Markdown

arcanis commented Sep 6, 2016

Looks much better 👍

@eddywashere eddywashere merged commit 5c56749 into master Sep 6, 2016
@eddywashere eddywashere deleted the update-dropdown-toggle branch September 6, 2016 14:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants