Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropdown): Dropdown formatted with label like input labeled #1669

Merged
merged 1 commit into from
Sep 11, 2020

Conversation

ko2in
Copy link
Member

@ko2in ko2in commented Sep 9, 2020

Description

Sometimes, we will need to create a stack of dropdown and the label together as described in this issue.

This PR intends to support the dropdown to be formatted with the label at left or right position same as input element stacks with the label and the action button.

Note

This implementation is not standalone and 100% semantic because, the class name dropdown is already used by dropdown module.

At the moment, it only works when the theme has enabled the labeled input variation @variationInputLabeled and the dropdown module needs to be the child of labeled input element. If we could find any suitable alias for this module, I'll update this PR and implement as standalone extension without depending on the input element.

Test Case

https://jsfiddle.net/ko2in/ucsyf3nb/

Screenshot

DropdownLabeled

Closes

#1667

Supports the dropdown to be formatted with the label at left or
right position same as `labeled input` and `action input`.

This feature depends on the labeled input and only works when the
theme has enabled the labeled input variation.
@lubber-de lubber-de added this to the 2.8.8 milestone Sep 9, 2020
@lubber-de lubber-de added lang/css Anything involving CSS state/awaiting-reviews Pull requests which are waiting for reviews state/awaiting-docs Pull requests which need doc changes/additions type/feat Any feature requests or improvements labels Sep 9, 2020
Copy link
Member

@lubber-de lubber-de left a comment

Choose a reason for hiding this comment

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

LGTM 👍

Copy link
Contributor

@exoego exoego left a comment

Choose a reason for hiding this comment

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

Very nice feature:+1:

@lubber-de lubber-de merged commit 65fe7e5 into fomantic:develop Sep 11, 2020
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Sep 11, 2020
@ko2in ko2in deleted the feat-labeled-dropdown branch September 11, 2020 13:26
@lubber-de
Copy link
Member

@ko2in Do you have time to prepare an example PR for the docs repo? 🙂

@lubber-de lubber-de added state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo and removed state/awaiting-docs Pull requests which need doc changes/additions labels Jun 6, 2021
@lubber-de
Copy link
Member

Docs added by fomantic/Fomantic-UI-Docs#282

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang/css Anything involving CSS state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo type/feat Any feature requests or improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants