Popup: button class applied to Popup

[brianespinosa]

Steps

When creating a popup from a button with as an action prop from an Input, the .button class is being passed to the Popup which is giving it the text-align and hover styles of a button.

Expected Result

There should be no .button class on the .ui.popup that is being rendered.

Actual Result

A .button class is present on the rendered .ui.popup

Version

0.68.3

Testcase

http://codepen.io/anon/pen/BRbpWw

[brianespinosa]

Don't worry about the positioning of the Popup in that codepen. I just used the open prop to set it as open by default so you can see the hover style that is being applied too.

[levithomason]

Adding more context here, all input actions require the button className. We currently set this as a default prop when creating the action:

Input.js

const actionElement = Button.create(action, { defaultProps: { className: 'button' } })

The intent here was to ensure that all actions had the required button class and therefore correctly rendered as a Button. However, we should remove the automatic button className in favor of requiring users to explicitly define their actions as buttons:

<Input action={<Button />} />
<Input action={<Dropdown button />} />

This would allow the Popup to render without a button className while the triggers would explicitly define themselves as valid actions (i.e. buttons).

Breaking Change

This would be a breaking change in that we'd now require Dropdown actions to explicitly define the button prop:

Before

<Input action={<Dropdown />} />

After

<Input action={<Dropdown button />} />

[tungurlakachakcak]

@levithomason As I understood the author suggests that the popup should not inherit the "button" class? Therefore is the solution above able to fix this? The change seems too big.

[levithomason]

Yes, the solution will fix the the bug. It is a minimal change and inline with the direction of library, that is, less magic and more explicit props.

Note that the breaking change will only affect cases where the action shorthand value is an element (e.g. <Dropdown />). When passing a string, number, or props object a standard button will still be created with the proper classes.