fomantic / fomantic-ui Goto Github PK
View Code? Open in Web Editor NEWFomantic-UI is the official community fork of Semantic-UI
Home Page: https://fomantic-ui.com
License: MIT License
Fomantic-UI is the official community fork of Semantic-UI
Home Page: https://fomantic-ui.com
License: MIT License
Checklist for testing
Key:
โ๏ธ = Blocked
๐ = Upcoming
โก๏ธ = Started
โ๏ธ = Complete
Add an inverted variation of Label
Same as colored variation but use light colors instead https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/site.variables#L239 like inverted buttons https://fomantic-ui.com/elements/button.html#inverted
Add file upload input styles as mentioned here Semantic-Org/Semantic-UI#403, would also be cool to implement as a module and have drag & drop functionality.
Add an inverted variation of the modal
Merge this PR to update to gulp4 Semantic-Org/Semantic-UI#6566
That's a popular request for SUI. Maybe we can consider importing @mdehoog's calendar into FUI ?
The naming logic of inverted form elements is not consistent.
This could be considered a feature instead of a Bug but currently it's an inconsistent behaviour, which somehow breaks the "inverted" logic for Form Elements:
has two inverted variants:
has only one variant:
ui inverted checkbox
The matching "inverted transparent" variant according to input logic is completely missing for checkbox.
also has only one variant, But this time "inverted" is completely black without adding "transparent". This breaks the logic acording to input and checkbox
does not have any inverted variant at all ๐
This does not feel consistent and makes clearly inverted forms using the default framework nearly impossible.
I suggest implementing the following class additions :
ui inverted transparent checkout
Suggested Example:
ui inverted transparent dropdown
(which behaves as it currently is without "transparent")
ui inverted dropdown
(that will be a breaking change)
ui inverted textarea
ui inverted transparent textarea
What do you guys think?
As discussed here: Semantic-Org/Semantic-UI#3535
It would be great to have a Color Picker Component with the following options:
1. Ability to have Palletes (Swatches) or full color picker photoshop style 2. Ability to have full screen modal for mobile devices: See fullscreen Example: http://www.bamdaa.com/demo/color-picker/ 3. Ability to have color names "baby blue"
All the bells and whistles of other components such as call backs and api.
THANKS!!!!
Statistics
seems to be behaving similarly to row
, and each statistic
is like a column
. Overflowing statistics go to a new row, a number of statistics can be explicitly declared, etc. But does it have anything like stackable
or doubling
?
Because without those, this
Turns into this on mobile:
It could be solved by putting each statistic
into a separate column in a grid, but why utilize a completely different container, if statistics
is already there. I would also mean one less layer of nesting (statistics->statistic
vs grid->column->statistic
)
Add in support for the following keys on Ranges;
increase
decrease
Create helper classes for padding, margin and may be responsive breakpoints.
Original Issue: Semantic-Org/Semantic-UI#6195
Examples:
large top margin
small left padding
only show on mobile
only show on computer
dont show on tablet
only show on tablet and mobile
etc.
Original issue: Semantic-Org/Semantic-UI#6587
Steps
1. Create a fullscreen modal in html 2. Call the modal function on it and show
Expected Result
Modal should be centered
Actual Result
Modal is stuck to left edge of page
Version
2.4.0
Testcase
https://jsfiddle.net/Ljcyd5ek/
It can be fixed by adding the following css into the page to override it:
.ui.fullscreen.modal { left: 2.5% !important; }
Merge Semantic UI 2.4.1 release
I propose only to merge following changes:
Will be fixed with #172:
Dropdown - clearable dropdown now works with dropdown that arent on:click, like hover or manual triggers.
Already fixed with #135:
Modal - Fixed fullscreen modal having incorrect left offset with flex modals
Build system update to gulp 4 is almost finished. Additionally we have less 3.5.0 support since #97
Original issue: Semantic-Org/Semantic-UI#6590
Steps
1. open https://react.semantic-ui.com/collections/message/#variations-floating 2. edit `floating` and add a `color`
import React from 'react' import { Message } from 'semantic-ui-react' const MessageExampleFloating = () => <Message floating color="orange">Way to go!</Message> export default MessageExampleFloating
Expected Result
Something like this, which I created by removing some styles via the inspector:
Actual Result
Without the color the element looks correct:
### Versionv0.82.5 (2018-09-12) i guess?
Snap to Position
When sliding the range slider thingy left to right, allow the option to snap to the points/steps - so if there are 5 points along the the range, the first position would snap at 20% across, then 40%, 60%, 80% and 100%
https://codepen.io/andreruffert/pen/yyEVrE (no need for the numbers underneath)
Create a flyout
component which is an alternative to modals. They are off canvas menus which can contain anything but overflow over the page content and you can have multiple over one another.
Add color variants to the loader
.ui.blue.loader
.ui.pink.loader
.ui.primary.loader
.ui.inverted.green.loader
.ui.inverted.orange.loader
...
They must also support the inverted color variations.
Good Day,
I noticed something strange in the docs when I was looking under buttons. The above image shows the labelled basic button is completely coloured except when hovering over it. I have not seen it personally in any of my buttons but can it be fixed in the docs?
P.S. I am really glad someone took up the torch of continuing the development. The two upcoming ui elements being integrated where ones I have been waiting for awhile.
EDIT: I was looking at semantic docs not Fomantic Ui docs. Apolgoies!
Create a PR to add Fomantic to CDNJS https://github.com/cdnjs/cdnjs
Need to rewrite the issue templates and contributing guide to make it more adequate for Fomantic and easier to understand for new users and contributors.
Upper and lower points
Have upper and lower points so one can define a range across a scale. For example, if searching for a product - I may want all products between $20 and $50, rather than everything up to $50 (where the upper bound could be $100).
Redesign how the transparent inputs display errors as discussed here #91
Update to FA 5.4
Performance when using dropdowns with many items is poor.
Add many items to a dropdown
Fast dropdown initialization
Slow dropdown initialization
2.4.0
Run the jsfiddle testcase and see the alert message on init
Only on manual check should the 'before[Un]Checked' fire
It fires on init too
2.5.0 (2.4.4 was okay)
Started after the new release with the new gulp 4 PR.
Should install correctly
Install process crashes with following error
Did you forget to signal async completion?
2.6.1
set selected
behavior to add at least two selected valuesonChange
is fired once
onChange
is fired multiple times
https://jsfiddle.net/kqbfpwm6/1/
The meta data or button should appear under the card
The meta data or button is forced to the right
This is caused because of flex-direction: row
when setting flex-wrap: wrap
buttons then flow under the card but meta data will force the content to go under the image. If the content is too long it will also wrap to the next row.
https://jsfiddle.net/Lwxau2yn/
2.6.2
https://jsfiddle.net/Korinu/gapkb8o0/
2.6.2
Semantic-Org/Semantic-UI#6617 / Semantic-Org/Semantic-UI#6594
Trying to update from one version 2.3.2 to newer 2.4.2 with no success
Semantic folder in project sould updates automaticaly after npm update
.
Gives output saying Current version of Semantic UI already installed
.
2.4.4
File: https://github.com/hammy2899/Fomantic-UI/blob/master/tasks/config/project/release.js#L35
I was investigating problem and find out that installer is checking version of semantic-ui package. After changing it to fomantic-ui. Update process works as expected.
Alternative stepping modes/positions
Allow the setting up of the steps as a percentile (eg. between 0% and 5% return 0, between 5% and 20% use 1, etc), or, allow an alternative way of picking a step mode/stepping position. When using low values the positions where the value changes looks a little odd to the eye.
With the current setup, with range set up with a minimum of 1 and maximum of 5, and step size as 1, you would get the below results:
First 12.5% of the range returns the value of 1
Value of 2 appears until about 37.5% along (so +25%)
Value of 3 appears until about 62.5% along (so +25%)
Value of 4 appears until about 87.5% along (so +25%)
Value of 5 appears for the remaining 12.5%
An alternative of making the steps equal should be provided, so you'd get the below:
First 20% of the range returns the value of 1
Value of 2 appears until about 40% along (so +20%)
Value of 3 appears until about 60% along (so +20%)
Value of 4 appears until about 80% along (so +20%)
Value of 5 appears for the remaining 20%
If implementing #149 then the snapping point should be located in the middle of these steps (ie. at 10%, 30%, etc)
is it possible to make the Clearable dropdown that was added affect multiple dropdowns?
I think it would be cool to have the option to have a singular clear button, rather than multiple.
gulp build-docs
../docs/out/
Exists script with an error complaining about fs.writeFile not having a callback
TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
at maybeCallback (fs.js:159:9)
at Object.fs.writeFile (fs.js:1278:14)
at Stream.<anonymous> (C:\Users\HamiS\Documents\fomantic\Fomantic-UI\tasks\docs\build.js:83:10)
at Stream.emit (events.js:182:13)
at end (C:\Users\HamiS\Documents\fomantic\Fomantic-UI\node_modules\map-stream\index.js:116:39)
at Stream.stream.end (C:\Users\HamiS\Documents\fomantic\Fomantic-UI\node_modules\map-stream\index.js:122:5)
at DestroyableTransform.onend (C:\Users\HamiS\Documents\fomantic\Fomantic-UI\node_modules\vinyl-fs\node_modules\readable-stream\
โ Enhancements
I'm currently using Semantic UI with VueJS for a webapp and I would need a slider.
Example: https://seiyria.com/bootstrap-slider/
EDIT: I found this Semantic UI inspired slider: https://codepen.io/tyleryasaka/pen/KVqPbo
A slider would allow a user to select a value between X and Y with ease.
By the way, I'm glad someone forked SemanticUI, I love it as it's appealing and aesthetically pleasing but the development was stopped/slowed. Thanks!
Top-attached headers lose top-border when there is other content before them, due to this CSS rule:
.ui.top.attached.header:not(:first-child) {
border-top: none;
}
https://jsfiddle.net/n5qb9srL/
2.6.2
Currently the button.less has over 4600 lines of code, most of the code is need for the different colors which differ only in the used variables.
This could be simplified by using mixins and more less functionality. Something similar to the message commit: 6fe1954
Clicking the dropdown arrow icon should open dropdown.
Dropdown is not opening.
https://jsfiddle.net/ibelar/eokn6yv8/
2.6.2
Just create a group icon with a corner icon that contain a direction (eg. right arrow
...)
For a bottom left corner right arrow icon
https://jsfiddle.net/qhk32v79/
2.6.2
Original issue: Semantic-Org/Semantic-UI#6597
Steps
Fullscreen modal in IE11 are rendered half off-screen.
Expected Result
Modal rendered full in the center of the screen.
Actual Result
Modal rendered half off screen
Version
2.4.0
Testcase
See fiddle in difference browser. On my system, firefox displays correctly, but chromium incorrectly.
Horizontal divider since before/expected.
Display problem in chromium 69.0.3497.92 (and maybe other browsers with same engine).
2.6.0
If Fomantic is to dash ahead with accepting some new features the one possible downfall would be the stability and introduced inconsistency. I propose that several "acceptance criteria" are introduced for new features and are maintained by contributors at all times:
This is just an example, feel free to tweak. Following a criteria and keeping new feature quality in-check as well avoiding breaking changes is very important.
Original issue: Semantic-Org/Semantic-UI#4404 Semantic-Org/Semantic-UI#6595
Steps
<div class="ui comments threaded"> <h3 class="ui dividing header">Comments</h3> <div class="comment"> <a class="avatar"> <img src="https://semantic-ui.com/images/avatar/small/matt.jpg"> </a> <div class="content"> <a class="author">Matt</a> <div class="metadata"> <span class="date">Today at 5:42PM</span> </div> <div class="text"> How artistic! </div> <div class="actions"> <a class="reply">Reply</a> <a> <i class="thumbs up icon"></i> 5 </a> <!-- THE BUG IS HERE --> <a> <i class="comments icon"></i> 5 </a> <!-- THE BUG IS HERE --> </div> </div> </div> </div> </div>
Expected Result
To appear comments icon normally like any other icon in the comment actions
Actual Result
The comments icon appears on the top left corner of the comment component
Version
2.4.0
Testcase
SUI has had some new activity when the new release is out we need to merge it and push a release, maybe with the bug fix.
Good Day,
I normally check the releases page on github to check if a new version is out but I realized the 2.6.0 version was not published as a zip.
I also noticed the fomantic site does not have a link to the zip file like semantic usually does.
Regards,
Andrew
tertiary
buttonText and line colors should change
Text and line colors change as well as the background
https://jsfiddle.net/umk7xo5c/
button.variables line https://github.com/hammy2899/Fomantic-UI/blob/master/src/themes/default/elements/button.variables#L283
Add the option of allowing action text (like when sending/deleting an email in Gmail) to the toast prompt with a corresponding callback for when this part is specify clicked (eg. onActionClick)
An alternative could potentially allow action buttons like a MacOS notification, with primary/secondary button callbacks (eg. onButtonPrimary), however, on the other hand, buttons may not be quite suited for a toast
Action Text:
https://www.howtogeek.com/wp-content/uploads/2016/12/00_lead_image_undo_send.png
Action Button(s):
https://www.jamf.com/jamf-nation/discussions/26683/macos-notification-prompts
This bug affects all .scrolling legacy modals, for which the width is defined in percent:
While retrieving the modals width the scrollbar is not rendered, therefore it returns a larger width than it should - in this cases the modal is half the scrollbars width further to the left.
Modal rendered in the center
Modal rendered off center
https://s.codepen.io/ColinFrick/debug/RePVvo/ZoABaKpKOWxr
2.6.0
It should select the option and close
It selects the option and reopens the dropdown
https://jsfiddle.net/yc7pdzr6/
2.6.2
<h2 class="ui grey header">
<i class="newspaper outline padded icon"></i>
<div class="content">
<span class="s-title">Top 10 anime fights</span>
<div class="sub header s-author">By John Johnson</div>
</div>
</div>
Header is visible, like it was prior to me upgrading from SUI to FUI.
Header receives display: none
:
2.5
Add an inverted variation of item.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.