elementalui / elemental Goto Github PK
View Code? Open in Web Editor NEWA flexible and beautiful UI framework for React.js
Home Page: elemental-ui.com
License: MIT License
A flexible and beautiful UI framework for React.js
Home Page: elemental-ui.com
License: MIT License
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
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
Hey sorry guys, this might be a dumb question, but what is the difference between the code in /lib and the /src folder? Thanks! :)
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.
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)
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.
Will it support server side rendering ?
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
I think this is a nice approach https://github.com/markdalgleish/react-themeable
This seems like a helpful resource http://contribute.md
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.
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?
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?
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?
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?
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?
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?
I wish contribute for a SASS version, have any plan for this or I can create a fork with this feature?
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.
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
).
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?
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
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.
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!! ๐
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)
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.
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?
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?
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.
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.
Tooklit
includig
devolpment
In general (especially in longer pages), users don't want to be shoved to the top of the page when they open a modal.
Under Validation
, selecting an item in the dropdown will not change the state of the dropdown, but a validation error will appear.
Bower is popular and easy to use. To install elemental using bower try: bower install elementalui
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!
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>
);
}
Looks like a really nice project, I'm wondering what the intended browser support is?.
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.
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?
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.