fomantic/fomantic-ui

Fomantic-UI is the official community fork of Semantic-UI

Fomantic-UI

The official community fork of the popular Semantic-UI framework.

---

NOTE: Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. For more info please read the following issues Semantic-Org/Semantic-UI#6109 Semantic-Org/Semantic-UI#6413

EDIT: Lots has changed since we started this project and we are now starting the development of FUI v3. You can read more about the v3 proposals here.

To be clear merging back into SUI is still our intention, read this comment for more info

---

Fomantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Fomantic is responsively designed allowing your website to scale on multiple devices.

📡 Installation

$ npm install fomantic-ui

Living on the edge? Try our nightly build and test new features and bug fixes early!

$ npm install fomantic-ui@nightly

Fomantic includes an interactive installer to help setup your project.

• For more details on setup visit our getting started guide.
• To learn more about theming please read our theming guide

💻 Browser Support

• Last 2 Versions of Firefox, Chrome, Safari Mac, Edge
• Last 4 Versions of Android, Chrome for Android, iOS Safari¹
• IE 11²
• Microsoft Edge 12-44²

---

📦 Other packages

Environment	Install Command	Repository	Third-Party
CSS Only	npm install fomantic-ui-css	Fomantic-UI-CSS
LESS	npm install fomantic-ui-less	Fomantic-UI-LESS
SASS	gem 'fomantic-ui-sass'	Fomantic-UI-SASS	✅

---

💬 Community

💡 Getting Help

If you're looking for help with an issue we offer multiple ways for you to get support. You can post usage questions here on GitHub or you can ask in our community Discord server.

🐛 Submitting Bugs and Enhancements

GitHub Issues is for suggesting enhancements and reporting bugs. Before submitting a bug make sure you do the following:

• Check to see if the issue has already been raised.
• Fork this boilerplate JSFiddle to create a reproducible example of the bug. If a bug is apparent in the docs you can simply link to the docs example, just make it clear exactly how to reproduce the issue. Only bugs that include a test case can be triaged.
• If submitting an enhancement try and create it in the JSFiddle if not it's fine but explain clearly what you want.

📝 Pull Requests

Before creating a pull request be sure to read the Contributing Guide and our Code of Conduct, this is where we explain everything you need to know about contributing to Fomantic.

Sponsors

Cross-browser testing provided by BrowserStack

IDE's provided by JetBrains

---

Footnotes

1. Fomantic-UI should basically still work in iOS Safari 9+, Android 6+, but, starting from v2.9.0, we won't support them anymore if anything works different than in recent versions. ↩

2. Fomantic-UI should basically still work in IE11 / old Edge, but, starting from v2.9.0, we won't support them anymore in terms of dedicated bugfixes. ↩ ↩²

fomantic-ui's Issues

[Form/Input/Checkbox/Dropdown] Inconsistent inverted logic

Problem

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:

Input

has two inverted variants:

ui inverted input

ui inverted transparent input

Checkbox

has only one variant:
ui inverted checkbox

The matching "inverted transparent" variant according to input logic is completely missing for checkbox.

Dropdown

also has only one variant, But this time "inverted" is completely black without adding "transparent". This breaks the logic acording to input and checkbox

Textarea

does not have any inverted variant at all 😞

This does not feel consistent and makes clearly inverted forms using the default framework nearly impossible.

Solution

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

Poll

What do you guys think?

[Accordion][Header] Header with content has display:none when in an accordion element

Steps

1. Create an accordion
2. In the visible part, add a header with content inside

<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>

Expected Result

Header is visible, like it was prior to me upgrading from SUI to FUI.

Actual Result

Header receives display: none:

Version

2.5

Testcase

https://jsfiddle.net/29onq46h/

[Site] Helper classes

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.

[Modal] add inverted variation

Add an inverted variation of the modal

[Form] file input styles

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.

[Item] add inverted variation

Add an inverted variation of item.

Testing

Checklist for testing

Key:
⛔️ = Blocked
🌀 = Upcoming
⚡️ = Started
✔️ = Complete

• Create pages for all components containing all variations 🌀
• Setup Nightwatch with custom CSS style checks (as discussed in discord) 🌀
• Setup mocha to test JS (will probably need to change a lot of JS to make this work therefore may happen at later stage)
• Request Open Source access to BrowserStack (Accepted as OS project and now have full access to BrowserStack) ✔️
• Set up linter (eslint) ✔️
• Setup Travis-CI to run the tests 🌀
• Setup Travis-CI to build and deploy ⚡️
• Setup coveralls to show coverage (only when JS is done)

[Modal] Scrolling fullscreen modals are not centered correctly in IE11

Bug Report

This bug affects all .scrolling legacy modals, for which the width is defined in percent:

• fullscreen modals
• mobile (screen width < 768px)
• tablet (screen width < 992px)

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.

Steps to reproduce

1. Open modal in IE11
2. Resize browser

Expected result

Modal rendered in the center

Actual result

Modal rendered off center

Testcase

https://s.codepen.io/ColinFrick/debug/RePVvo/ZoABaKpKOWxr

Screenshot (when possible)

Version

2.6.0

[Modal] Fullscreen modal stuck to left edge of page

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;
}

[Component] Slider

✔ 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.

• Min vlaue
• Max value
• Step
• Option to show a tooltip with current value

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!

[Range] Add keypresses to move sliders.

Add in support for the following keys on Ranges;

• increase

  • up arrow (depending on orientation)
  • right arrow (depending on orientation)
  • page up

• decrease

  • down arrow (depending on orientation)
  • left arrow (depending on orientation)
  • page down

Semantic-Org/Semantic-UI@8bce752

[Checkbox] since 2.5.0 'before[Un]Checked' fires already on init

Steps

Run the jsfiddle testcase and see the alert message on init

Expected Result

Only on manual check should the 'before[Un]Checked' fire

Actual Result

It fires on init too

Version

2.5.0 (2.4.4 was okay)

Testcase

https://jsfiddle.net/jwm1x4b5/

[Divider] Display problem in chromium 69.0.3497.92 (and maybe other browsers with same engine)

Steps

See fiddle in difference browser. On my system, firefox displays correctly, but chromium incorrectly.

Expected Result

Horizontal divider since before/expected.

Actual Result

Display problem in chromium 69.0.3497.92 (and maybe other browsers with same engine).

Version

2.6.0

Testcase

https://jsfiddle.net/z04yw8r5/

[Button] tertiary buttons have @basicDownBackground when :active

Steps

• Create tertiary button
• Click and hold (activate :active state)

Expected Result

Text and line colors should change

Actual Result

Text and line colors change as well as the background

Testcase

https://jsfiddle.net/umk7xo5c/

button.variables line https://github.com/hammy2899/Fomantic-UI/blob/master/src/themes/default/elements/button.variables#L283

[Modal] Fullscreen modals are not working in IE11

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

https://semantic-ui.com/modules/modal.html#full-screen

[Form] transparent input errors

Redesign how the transparent inputs display errors as discussed here #91

[Loader] Add color variants

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.

No link to 2.6.0 zip

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

[Build Process] gulp install not running

Bug Report

Started after the new release with the new gulp 4 PR.

Steps to reproduce

1. npm install fomantic-ui
2. select all components when prompt

Expected result

Should install correctly

Actual result

Install process crashes with following error

Did you forget to signal async completion?

Version

2.6.1

Improving on PR review process

Feature Request

Description

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:

• A process for reviewing new PRs to be documented
• Reviewer (who is not author of PR) is selected who is familiar with the process
• PR can only be accepted if Reviewer have approved it

Example Review criteria:

• Minor features must amend the documentation where required
• Major new modules must add a new documentation page
• New usage cases should be included on the UI testing page
• Test suite should snapshot new features or modifications
• New modules must have at least one test-case added to the "what's new" page.
• Major feature change can only have a mention on the release
• Any changes imported from SUI must reference original release note/PR
• Code/Docs/Examples must be stylistically consistent with the rest
• Modules with incomplete/unfinished API should be marked as "beta"

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.

[Dropdown] `set selected` trigger multiple times `onChange` callback when selecting multiple values

Bug Report

Steps to reproduce

1. Create a multiple selection dropdown
2. Use the set selected behavior to add at least two selected values
3. !?

Expected result

onChange is fired once

Actual result

onChange is fired multiple times

Testcase

https://jsfiddle.net/kqbfpwm6/1/

Related SUI issues

Semantic-Org/Semantic-UI#4913
Semantic-Org/Semantic-UI#4691

[Flyout] add flyout as an alternative to modals

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.

[Icon] Comments icon inside "comment" component is not well aligned

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

https://jsfiddle.net/ca0rovs3/1177/

[Label] add inverted variation

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

[Dropdown] searchable dropdown reopens when option is selected

Bug Report

Steps to reproduce

1. create a searchable dropdown
2. search for an option
3. select an option, use ENTER don't click

Expected result

It should select the option and close

Actual result

It selects the option and reopens the dropdown

Testcase

https://jsfiddle.net/yc7pdzr6/

Version

2.6.2

[SUI] Merge 2.4.1

Feature Request

Description

Merge Semantic UI 2.4.1 release

I propose only to merge following changes:

• Embed - Embed will now correctly remove DOM metadata on destroy Semantic-Org/Semantic-UI@620cb3f
• Grid - Fix issue with very relaxed vertically divided grid having wrong margins on dividers https://github.com/Semantic-Org/Semantic-UI/blob/1724b3eff4d33ac90592ec85685ea6ef97022371/src/definitions/collections/grid.less#L1118-L1119

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

[Card] horizontal cards meta & actions are forced to the right

Bug Report

Steps to reproduce

1. create a horizontal card
2. add some meta data or a button

Expected result

The meta data or button should appear under the card

Actual result

The meta data or button is forced to the right

Description

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.

Testcase

https://jsfiddle.net/Lwxau2yn/

Screenshot

Version

2.6.2

[Dropdown] Issues with `clearable`

Bug Report

Steps to reproduce

1. Add a 'clearable' dropdowns Fixed with #155
2. Add a dropdown with 'clearable' settings
3. Add a dropdown to a form

Expected result

• Clear icon is added to input Fixed with #155
• Clicking on the clear icon clears the input
• Clicking on the dropdown caret icon does nothing

Actual result

• Clear icon is not added to input Fixed with #155
• Clicking on the clear icon doesn't do anything
• Clicking on the dropdown icon clears the form

Testcase

https://jsfiddle.net/Korinu/gapkb8o0/

Version

2.6.2

SUI Issues

Semantic-Org/Semantic-UI#6617 / Semantic-Org/Semantic-UI#6594

[Range] Snap to Position

Feature Request

Snap to Position

Description

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%

Example

https://codepen.io/andreruffert/pen/yyEVrE (no need for the numbers underneath)

New templates & contributing guide

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.

Labled basic button issue in docs

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!

[Header] Top-attached headers missing top border

Bug Report

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;
}

Testcase

https://jsfiddle.net/n5qb9srL/

Version

2.6.2

[Color Picker] New UI component for color

Feature Request

Description

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!!!!

[Build Tools] update to gulp4

Merge this PR to update to gulp4 Semantic-Org/Semantic-UI#6566

[Icons] update to FontAwesome 5.4

Feature Request

Description

Update to FA 5.4

Clearable dropdown doesn't affect multiple

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.

Merge new SUI release

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.

[Toast] Action Text

Feature Request

Description

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

Example

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

[CORE] Updating proccess not works correctly

Steps

Trying to update from one version 2.3.2 to newer 2.4.2 with no success

Expected Result

Semantic folder in project sould updates automaticaly after npm update.

Actual Result

Gives output saying Current version of Semantic UI already installed.

Version

2.4.4

Investigation

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.

[Icon] Bad corner position when using some icons in group

Bug Report

Steps to reproduce

Just create a group icon with a corner icon that contain a direction (eg. right arrow...)

Expected result

For a bottom left corner right arrow icon

Actual result

Testcase

https://jsfiddle.net/qhk32v79/

Version

2.6.2

[Feature request] Add a calendar / date picker

That's a popular request for SUI. Maybe we can consider importing @mdehoog's calendar into FUI ?

[Build Tools] build-docs fs error on new node version

Steps

• Install latest NodeJS (tested with 10.4.1)
• run gulp build-docs

Expected Result

• should build docs to ../docs/out/

Actual Result

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\

Add fomantic to cdnjs

Create a PR to add Fomantic to CDNJS https://github.com/cdnjs/cdnjs

[Dropdown] Performance since 2.4.0 hideDividers

Performance when using dropdowns with many items is poor.

Steps

Add many items to a dropdown

Expected Result

Fast dropdown initialization

Actual Result

Slow dropdown initialization

Version

2.4.0

[Message] `color` overwrites `floating`

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:

### Version

v0.82.5 (2018-09-12) i guess?

[Button] Simplify less code

Feature Request

Description

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

[Range] Upper and Lower Points

Feature Request

Upper and lower points

Description

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).

Example

http://jqueryui.com/slider/#range

[Statistics] add Stackable and/or Doubling

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)

[Slider] Alternative stepping modes/positions

Feature Request

Alternative stepping modes/positions

Description

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)

[Dropdown] - Setting showOnFocus to false will prevent dropdown to open on click.

Bug Report

Steps to reproduce

1. Create dropdown input
2. Set option 'showOnFocus' to false

Expected result

Clicking the dropdown arrow icon should open dropdown.

Actual result

Dropdown is not opening.

Testcase

https://jsfiddle.net/ibelar/eokn6yv8/

Version

2.6.2