Create attached button element

[kyleturco]

We want to be able to use a Button element attached a div. Currently, when set as a Button it doesn't adopt the styling of the attached div. See PR #45

[levithomason]

Looks like the issue here is that the attached class does not work on a <button> element. We can detect if the component is using the attached style, and if so, render it as a div instead:

Semantic Attached Docs:

<div class="ui top attached button" tabindex="0">Top</div>
<div class="ui attached segment">
  <p></p>
</div>
<div class="ui bottom attached button" tabindex="0">Bottom</div>

The element will need to be a <button> when the type is submit. This is to preserve "submit on enter" functionality when the button is used in a form. Since it is a button, I propose we default to a <button> element

• Add extensible logic for switching between button and div
• Test that the element is a button when type is submit
• Test that the element is a div when the attached class is present.

We can extend this list once the PR is started against this issue.

[levithomason]

Linking #295

[jhchill666]

So that I understand this correctly:

<Button />
<button class='ui button'></button>

<Button attached='top' />
<div class='ui top attached button'></div>

<Button type='submit' attached='top' />
<button class='ui top attached button'></button>

Should the presence of type=submit overrule the !!attached=div ?

[levithomason]

attached='top' should add tabIndex={0} as well so that the button is still tabbable.

Should the presence of type=submit overrule the !!attached=div ?

Let's make these mutuallyExclusive instead (example here). Attached buttons just plain will not work with <button /> elements.

[levithomason]

To further clarify, the attached prop should always result in a div element.

[jhchill666]

Sorry, yes I've added the tabIndex for all instances of the attached prop, was just clarifying the tag type behaviour.

[CoryDuncan]

@levithomason Is there any reason to continue rendering a Button as a <div> when the attached prop is used (vs always rendering a <button>? I cannot reproduce the issue from #46 (comment)