elementalui/elemental

A flexible and beautiful UI framework for React.js

Elemental UI

React & CSS UI Framework.

Currently under development; built by @JedWatson and @JossMac at Thinkmill.

See elemental-ui.com for examples and documentation.

Follow us on twitter @elementalui for updates!

Browser Support

We'd like Elemental to be viable (functionally and aesthetically) to as many browsers as possible, without hindering our ability to move quickly.

For now that means:

• Chrome (mobile and desktop)
• Safari (mobile and desktop)
• Firefox
• Internet Explorer 10 and up

elemental's Issues

How can I use these components with gem react-rails

Modal box is opened out of screen

Create pagination component

Automatically duplicate site index.html for each page route during deployment

Ref #36

We've got copies of the index.html page for each possible route at the moment in the site/src folder.

It would be nice to automatically create the copies as part of the gulp publish task (will probably require changes to the react-component-gulp-tasks package to support this)

Bower support

Bower is popular and easy to use. To install elemental using bower try: bower install elementalui

`data-uri` causes build system (webpack) to fail

First of all, I regret not discovering this amazingly well-written library/toolkit earlier, so thanks for putting this together :) And I wouldn't mind writing documentations for it in my spare time.

I had a problem with data-uri with webpack style loaders where the path fails to resolve. Also, I read somewhere that data uris actually load slower than directly referencing the asset paths. Therefore, it would be nice to remove the 2 data-uri usages if we could unless there's some considerations that I'm not aware of.

Thanks!

Cannot find module 'react/addons' while using react-rails

While using react-rails and properly turning addons on (double checked via React.addons) I keep getting a Cannot find module 'react/addons' error on the console despise react loading the addons.

Any ideas of where I should start looking for trouble? I'd gladly submit a PR if pointed in the right direction.

Dropdown menu scroll behaviour

At the moment when you get reach the scroll threshold (top/bottom) you begin to scroll the body, or the nearest scrollable parent. It'd be nice to trap the scroll inside the dropdown menu.

Perhaps something like http://codepen.io/somethingkindawierd/blog/react-mixin-scroll-lock

Setting Custom Width/Height and page position for Modal. How?

I have seen Elemental UI's demo. I have one concern.
How can we set custom width and height on Modal without using any third party dependency like CSS/jQuery/javascript etc.
And also similarly how can we position modal (top/left way) on page without using CSS/jQuery/Javascript etc?

Pill does not show clear button after refactoring

Hi guys,

Looks like Pills will show clear button on them only when onClear function defined. Previously it was dependent on showClearButton flag.

So, as this flag is not used anywhere else, should we just remove it and update documentation or was it unintentional change in 9f0062b?

Thanks

Modal CSS transitions lag caused by React's CSSTransitionGroup

If you open and close the modal a couple times within 5 seconds, you'll see a warning like this:

Warning: transition(): tried to perform an animation without an animationend or transitionend event after timeout (5000ms). You should either disable this transition in JS or add a CSS animation/transition.

Although it's "only a warning", and everything is still functional as expected, but it causes the transition to lag a bit.

This is a bug that needs to be fixed by the React team, but in the mean time could we use Khan Academy's TimeoutTransitionGroup.

Let me know if you guys have encountered the same problem or have had some discussions on this topic, and if I should create a PR for it - I personally am not sure if the TimeoutTransitionGroup is going to solve the problem, but a lot of other people have had success with it.

Compiled dist version does not include classnames module

As per instructions of @nkbt did following:

git clone [email protected]:elementalui/elemental.git
cd elemental
npm install
npm run build

Took following files from dist folder:
elemental.css
elemental.js

Added these two files to my HTML page header. Executed the page but it complained following:

Error: Module name "classnames" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded

I guess full js output (independent of any dependency) is still not coming.

Reference issue: #39 (comment)

touch capable range slider

Is something like this on the cards? http://refreshless.com/nouislider/

I'll have the need for it within a month, so if it's not making it into impending keystone0.4-related changes, let me know and I'll have a crack at it.

Themes support

I think this is a nice approach https://github.com/markdalgleish/react-themeable

arrows don't work in the datepicker

Server side rendering support

Will it support server side rendering ?

Get rid of the lib folder except for npm

To reduce confusion, we should probably not include the build folder /lib in the Git repo (#17)

Before we do, we need to make sure the release process absolutely always generates lib from the latest src so we don't accidentally push out a dev (or worse, missing) build folder. At the moment, the git workflow makes it pretty obvious so that hasn't been a problem,

We'll also want to explain how to build your own if you download the repo, that should probably go in the Readme, and explain how to use elemental in npm link mode (with npm run watch).

Select input styling is broken in Firefox

Latest stable Firefox 38.0.5

Input group size small

<InputGroup contiguous>
    <InputGroup.Section grow>
        <FormInput type="text" placeholder="Input group field" size="sm" />
    </InputGroup.Section>
    <InputGroup.Section>
        <Button size="sm">Button</Button>
    </InputGroup.Section>
</InputGroup>

Website Example: Dropdown Broken

http://elemental-ui.com/forms

Under Validation, selecting an item in the dropdown will not change the state of the dropdown, but a validation error will appear.

SASS support

I wish contribute for a SASS version, have any plan for this or I can create a fork with this feature?

Put together a contribute.md file

This seems like a helpful resource http://contribute.md

Very slow performance on validation forms

http://elemental-ui.com/forms
try to type something in password/email
then just try to type in non-validated fields

Why is it ssooooo slow?

Consider primer for the base UI kit

http://primercss.io

Cannot set default value in date/time pickers.

First and foremost, thank you for this beautiful resource.

By setting the Form Input type to "date" or "time", I was successful in rendering both these fields. I could not, however, set default values.

Moreover, there doesn't seem to be any documentation referring to these fields on the Elemental example page. I only discovered them by testing different field types. Trawling through past issues, it seems this feature was supported but is since deprecated.

Any leads on this front would be appreciated.

How to use ElementalUI in a simple website without using node.js?

I am trying to figure out how can I use ElementalUI in a simple website without using node.js?
I mean by simply adding js files to page head section and not through nodejs.
Is it possible?
Tried dist of ElementalUI on:
https://github.com/elementalui/elemental-dist
but it fails upon not having certain dependencies which I guess require Node.js context. So is there anyway to use it without Node by simply having files added to page header?

Split out LESS into a core package

Update to React 0.14

I propose we update for React 0.14 with a new version (0.5) and leave behind support for 0.13.

Although it's not strictly necessary to drop support for 0.13, upgrading will allow us (finally) to start using parent-based context for certain features like theme support and validation.

I think it will also help keep the codebase clean and free of warnings (including depending on react-dom, etc); there probably isn't any downside to staying on [email protected] for anyone who can't upgrade to [email protected] yet, other than missing out on new features going forward.

There's already a branch in place thanks to @NogsMPLS and @zackify.

Any objections?

Create breadcrumbs component

Problems at elemental installation

Guys, why is it so difficult to install your package?

First, I had to include the elemental.less in my main, because the components doesn't style itself.
Then I had to require react-date-select, because you hadn't installed
Now, i am at:
"Module build failed: error evaluating function data-uri: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!"

Using webpack, with less-loader and babel-loader

Why dont require styles at the component?

typos

On http://elemental-ui.com/--

Tooklit
includig
devolpment

add a dist folder in repository

Hello, I would like to add elemental to cndjs (website) .

cdnjs has an auto-update mechanism to update libraries by git tags.
It need to know a common path to add distributed files, it couldn't build the library.
So, I hope there have a dist folder to contain "elemental.css".

Would you please consider on adding a dist folder to collect the build file?

Thanks for your great work!! 😃

Difference between /lib and /src

Hey sorry guys, this might be a dumb question, but what is the difference between the code in /lib and the /src folder? Thanks! :)

Feature Request: Sortable list

Nice project.

I haven't been able to run the demo so I'm not sure if it's already implemented but over at keystonejs/keystone#1289 we'll need a sortable list of sorts. There is a proposed mockup for inspiration. Ping @pr1ntr cheers.

Select box caret icon misplaced

Hey guys, thought you might wanna know. When validation on a select input fails, the caret icon shifts down (see the image)

Cheers!

Better css in js

I think this project would benefit from styles written in js. I particular I am an author of jss and this is a shameless self promotion) There is also integration for react. It is used in production and I think its a more performant and feature reach solution for static styles than inline.

Do we need Modal to follow scroll?

I reckon we could add an option for Modal to follow scroll. To some extend, of course, so it is possible to scroll if Modal is very long. So if I scroll up after showing modal, it should smoothly follow still having 100px top margin. If I scroll down - it will follow only if bottom margin is >=100px.

If modal is longer then screen, it should follow up, but then will follow down only after bottom margin will be large enough (100px with current styles).

Using setTimeout/clearTimeout to check current scroll every, to say, 200ms. Not scroll event.

Browser support

Looks like a really nice project, I'm wondering what the intended browser support is?.

missing common.js & bundle.js

When I visit src/site or src/dist/ , missing common.js and bundle.js,
I have no idea how to generate two files, I tried gulp build in the root of elemental.
Could you help out?

Use FormatJS react-intl v2 for numbers, dates, and string messages, international./local.

It also does internationalisation/localisation using ICU message syntax
Probably wait for a stable release of v2, though. If nobody else does it earlier, I'll have a go at this next month. What do you think about this approach @jossmac @JedWatson? Would you rather have this in Elemental or would it fit in better with Keystone CMS directly, as the translation may be viewed as content by itself already, and could obviously be managed by KS? Or is there any alternative you deem better suited for the job? Let me know, please!

see:
http://formatjs.io/react/
https://github.com/yahoo/react-intl
For info & the state of v2:
formatjs/formatjs#162

Help by anyone is apreciated 👍

ps: https://github.com/yahoo/react-intl/tree/master/examples/translations
https://github.com/yahoo/babel-plugin-react-intl

Date Picker broken in demo

The arrow buttons do nothing for me on http://elemental-ui.com/date-picker
Also in the last picker selecting one of the preset ranges(e.g. Past Week) does nothing.

I am using Chrome

Roadmap

Would love a roadmap of desired components/direction of framework. Would help with community contributions to know what the needs to be done beyond bug fixes.

Routing doesn't work properly on elemental-ui.com

Refreshing a url, e.g. http://elemental-ui.com/css on the live domain doesn't load the route correctly. It works in dev, so I'm not sure what's wrong. Needs investigation.

Had to copy "spinner.less" to "Spinner.less" on Debian

Got this error on Debian Jessie when using elemental:

Error: './components/Spinner.less' wasn't found

Fixed it with this:

cp node_modules/elemental/less/components/spinner.less node_modules/elemental/less/components/Spinner.less

Perhaps change of filename, or change code to use the lowercase name?

Grid fixed width

Sometimes ya just need a fixed width item in your grid (for a sidebar for example.

Thoughts on supporting this in the grid system and reflowing the width of non-fixed siblings?

There should be a 'Getting Started...' page

Maybe this comes from me being super new to the JS/React community but there are no clear instructions on how to get this set up. Problem I'm running into right now is how to get the css loaded. Do I need to compile your less myself from node_modules using webpack/browserify? Seems hacky to me but maybe just because I'm spoiled from ruby gem ecosystem.

At the very least there should be a page like this: http://react-bootstrap.github.io/getting-started.html explaining that you need to npm install elemental, etc.

React 0.14 support

Any plans on supporting React v0.14? (and react-router 1.0?)

Currently getting a lot of these
Warning: require('react/addons') is deprecated. Access using require('react-addons-{addon}') instead.

Should we open up a react 0.14 branch?

Invariant Violation: addComponentAsRefTo(...) when mounting/unmounting FormInput

This issue appears to be caused by multiple versions of React being loaded at the same time. I was able to resolve the issue by replacing import React from "react" with import React from "elemental/node_modules/react/addons" in my top level component, but this does not seem ideal.

Versions:
node 0.12.7
react 0.13.3
elemental 0.3.4

The full error message:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): 
Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.invariant 
@ app.js:5718ReactOwner.addComponentAsRefTo 
@ app.js:8811attachRef 
@ app.js:8689ReactRef.attachRefs 
@ app.js:8705attachRefs 
@ app.js:8561assign.notifyAll 
@ app.js:8397ON_DOM_READY_QUEUEING.close 
@ app.js:22635Mixin.closeAll 
@ app.js:9700Mixin.perform 
@ app.js:9641batchedMountComponentIntoNode 
@ app.js:13698Mixin.perform 
@ app.js:9627ReactDefaultBatchingStrategy.batchedUpdates 
@ app.js:20757batchedUpdates 
@ app.js:8154ReactMount._renderNewRootComponent 
@ app.js:13833ReactPerf.measure.wrapper 
@ app.js:8502ReactMount.render 
@ app.js:13922ReactPerf.measure.wrapper 
@ app.js:8502(anonymous function) 
@ app.js:134__webpack_require__ 
@ app.js:20i
@ app.js:40(anonymous function) 
@ app.js:43

Here is my render function (compiled using Babel and Webpack):

  render() {
    const {username, password, failed} = this.state;
    const {updateUsername, updatePassword} = this;

    return (
      <div>
        <Form>
          {failed ? 
            <Alert type="warning">Invalid username or password</Alert> :
            null
          }
          <FormField label="Username" htmlFor="username">
            <FormInput value={username} onChange={updateUsername} focusOnMount={true} ontype="text" placeholder="Username" name="username"/>
          </FormField>
          <FormField label="Password" htmlFor="password">
            <FormInput value={password} onChange={updatePassword} type="password" placeholder="Password" name="password"/>
          </FormField>
          <Button type="default" onClick={this.submit}>Submit</Button>
        </Form>
      </div>
    );
  }

FormSelect doesn't allow setting value

I've been trying to programmatically set the value for the <FormSelect /> component but have been having trouble doing so.

My first instinct is to the the value prop:

<FormSelect options={ [...] } value={ selectedValue } />

Unfortunately this doesn't seem to do anything. I noticed in the source that value is blacklisted from the props for handing down to the select element. If I remove this from the blacklist, the value of the select gets appropriately updated.

Am I doing something wrong or is this a bug?

Demo modal scrolls to the top

In general (especially in longer pages), users don't want to be shoved to the top of the page when they open a modal.