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(input): file input variant #2145

Merged
merged 3 commits into from
Nov 2, 2021
Merged

Conversation

lubber-de
Copy link
Member

@lubber-de lubber-de commented Oct 29, 2021

Description

This PR styles the file input field so it has the same look as normal input fields by adding a file variant to the input element.
It also supports using action inputs for file inputs, if one needs additional features like icons.
If not using an action input i also added color variants to support colors for the native file input trigger button.

It also adds an invisible file input, in case one does not need the filepath being shown and only needs a button.
See examples in the jsfiddle

Screenshot

image
image

Testcase

Before

https://jsfiddle.net/lubber/xv0zLadf/3/

After

https://jsfiddle.net/lubber/xv0zLadf/12/

Closes

#105
Semantic-Org/Semantic-UI#403

@lubber-de lubber-de added type/feat Any feature requests or improvements 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 labels Oct 29, 2021
@lubber-de lubber-de added this to the 2.9.0 milestone Oct 29, 2021
@lubber-de lubber-de added tag/sui-issue Taken from an existing Issue/PR of SUI hacktoberfest-accepted labels Oct 29, 2021
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.

LGTM 👍

This is awesome, 8-year-long-awaited feature Semantic-Org/Semantic-UI#403

@lubber-de lubber-de changed the title [Input] file input variant feat(input): file input variant Nov 2, 2021
@lubber-de lubber-de merged commit f14cf4b into fomantic:develop Nov 2, 2021
@lubber-de lubber-de deleted the fileInput branch November 2, 2021 07:52
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Nov 2, 2021
@lubber-de
Copy link
Member Author

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

@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 Jul 18, 2022
lubber-de added a commit to fomantic/Fomantic-UI-Docs that referenced this pull request Jul 19, 2022
Added file input examples as of fomantic/Fomantic-UI#2145
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
hacktoberfest-accepted 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 tag/sui-issue Taken from an existing Issue/PR of SUI type/feat Any feature requests or improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants