grommet / grommet

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience

Documentation

Visit the Grommet website for more information.

Support / Contributing

Before opening an issue or pull request, please read the Contributing guide.

Install

You can install Grommet using either of the methods given below.

NOTE: Currently Grommet is only compatible with styled-components v5. We are actively working to add support for v6.

For npm users:

  $ npm install grommet styled-components --save

For Yarn users:

  $ yarn add grommet styled-components

There are more detailed instructions in the Grommet Starter app tutorial for new apps. For incorporating Grommet into an existing app, see the Existing App version.

Explore

1. Storybook examples per component, you can create them locally by running:

     $ npm run storybook

   or

     $ yarn storybook

2. Grommet starter template sandbox.

3. Templates, patterns, and starters: feel free to share with us more pattern ideas on Slack.

4. End-to-end project examples from our community in the #i-made-this Slack channel.

5. Read more from the Grommet team on Medium.

Stable

grommet is also available on a stable branch that is built with the content of the 'master' branch. From your package.json point to stable.

"grommet": "https://github.com/grommet/grommet/tarball/stable",

For more info, read the stable wiki.

Release History

See the Change Log.

Tools Behind Grommet

Grommet is produced using this great tool:

• BrowserStack for browser emulators and simulators.
• Circle CI for continuous integration.

grommet's Issues

gulp tasks fails at scsslint task

After I've updated my gem scss_lint to version 0.39.0 I can't run gulp tasks anymore. The task fails at the scsslint level with the following log:

[17:04:14] Finished 'jslint' after 6.6 s
[17:04:14] Starting 'scsslint'...

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: Command line usage error

If I revert scss_lint to version 0.38 everything works fine.

0 bytes grommet-hpinc.min.css with bower

When I include grommet in an application and use bower install it downloads grommet which includes minified versions of the css files. The grommet-hpinc.min.css file is 0 bytes which isn't usable.

gulp dist fails at 'test' task

PROJECTS/grommet (master)
$ gulp dist
[00:24:04] Using gulpfile c:\PROJECTS\grommet\gulpfile.js
[00:24:04] Starting 'dist-preprocess'...
[00:24:04] Starting 'preprocess'...
[00:24:04] Starting 'clean'...
[00:24:04] Finished 'clean' after 307 ms
[00:24:04] Starting 'copy'...
[00:24:04] Finished 'copy' after 9.08 ms
[00:24:04] Starting 'jslint'...
[00:24:09] Finished 'jslint' after 5.05 s
[00:24:09] Starting 'scsslint'...
[00:24:09] Finished 'scsslint' after 4.76 μs
[00:24:09] Finished 'preprocess' after 5.37 s
[00:24:09] Starting 'dist-css'...
[00:24:10] Finished 'dist-css' after 546 ms
[00:24:10] Starting 'copy'...
[00:24:10] Finished 'copy' after 5.05 ms
[00:24:10] Starting 'test'...

c:\PROJECTS\grommet\node_modules\jsdom\lib\jsdom\utils.js:269
const children = el._childNodes;
^^^^^
[00:24:10] 'test' errored after 604 ms
[00:24:10] SyntaxError: Use of const in strict mode.
at Module._compile (module.js:439:25)
at Object.require.extensions..js (c:\PROJECTS\grommet\src\utils\test\test-compiler.js:44:17)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (c:\PROJECTS\grommet\node_modules\jsdom\lib\jsdom.js:12:17)
at Module._compile (module.js:456:26)
at Object.require.extensions..js (c:\PROJECTS\grommet\src\utils\test\test-compiler.js:44:17)
at Module.load (module.js:356:32)
[00:24:10] 'dist-preprocess' errored after 6.53 s
[00:24:10] Error: [object Object]
at formatError (c:\Users\belovy\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:169:10)
at Gulp. (c:\Users\belovy\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:195:15)
at Gulp.emit (events.js:117:20)
at Gulp.Orchestrator._emitTaskDone (c:\PROJECTS\grommet\node_modules\gulp\node_modules\orchestrator\index.js:264:8)
at c:\PROJECTS\grommet\node_modules\gulp\node_modules\orchestrator\index.js:275:23
at finish (c:\PROJECTS\grommet\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:21:8)
at cb (c:\PROJECTS\grommet\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:29:3)
at finish (c:\PROJECTS\grommet\node_modules\run-sequence\index.js:53:5)
at Gulp.onError (c:\PROJECTS\grommet\node_modules\run-sequence\index.js:60:4)
at Gulp.emit (events.js:117:20)

Grommet Button cannot be used correctly in the Hello World page

Hi Grommet Team,

I cloned the project and try to play with the demo 'Hello World'. But during my study time, I met some issues after I modified some simple codes on 'grommet\examples\hello-world\index.html'.

    var GrommetButton = React.createClass({
      render: function() {
        return (
          // <Grommet.CheckBox id="{item2}" label="Item 2" />
          // <Grommet.CheckBox id="{item3}" label="Item 3" toggle={true} />
          // <Grommet.Button label="Item 1" />
          // <Grommet.Status value="disabled"></Grommet.Status>
          <Grommet.Button label="Action" primary={true} strong={true}></Grommet.Button>
        );

Case 1 & 2 works fine, but case 3 & 4 cannot display the button. And gave me the error messages in the console(screenshot attached).

Can't generate test coverage on windows.

Hi,

I'm trying to generate the test coverage on my windows machine, but every time I run gulp coverage I get the error:

Test failed: Error: connect ECONNREFUSED
    at exports._errnoException (util.js:746:11)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1010:19)

The tests run Ok, but it doesn't generate the coverage report.

slackin error

When visiting http://grommet.io/slackin I see the error:

Error: connect ECONNREFUSED
   at errnoException (net.js:901:11)
   at Object.afterConnect [as oncomplete] (net.js:892:19) 

Note, I noticed https://grommet.io/slackin doesn't work. Is that intentional?

grommet/examples only work inside the grommet source tree

Presuming that grommet/examples are intended to be examples that people can copy and modify, they must be standalone, able to be built outside the Grommet source tree, targeting only a Grommet distribution.

Looking at Tour specifically, I see several problems preventing it from being standalone:

• Its gulpfile.js has relative references that assume it's being built along with Grommet.
• Its package.json does not list its dependencies (react, react-router, react-gravatar) or its development dependencies (jsx-loader, style-loader, css-loader, sass-loader).
• Its index.scss files import style sheets from the Grommet source tree instead of the Grommet distribution.

I haven't researched extensively, but a brief glance suggests that the other examples/* projects have similar issues.

No Photoshop assets.

The grommet.io homepage says "All the resources you could possibly need! Sticker sheets, Stencils, PSDs, and more. Simply click the app you use to get started." But the downloads section doesn't have psd assets.

All assets(except photoshop psds) are available.

They are also not available in the design folder in the repo.

Gulp fails with 'libsass` bindings not found. Try reinstalling `node-sass`

Facing issue in building grommet on local windows.

Followed the steps in https://github.com/HewlettPackard/grommet/wiki/Building-Grommet & most of it seemed successfull

But when i tried running " gulp dev-hpe " inside the docs it fails with :--

[gulp-chug](docs\hpe\gulpfile.tmp.1431766288152.js) [webpack-dev-server] started
: Browse to http://localhost:8003/webpack-dev-server/
[gulp-chug](docs\hpe\gulpfile.tmp.1431766288152.js) Error: `libsass` bindings no
t found. Try reinstalling `node-sass`?
    at getBinding (C:\Grommet\node_modules\sass-loader\node_modules\node-sass\li
b\index.js:22:11)
    at Object. (C:\Grommet\node_modules\sass-loader\node_modules\node
-sass\lib\index.js:188:23)

I tried reinstalling npm install node-sass@3 & npm install gulp-sass which went fine...
Any suggestions on how can i fix it wud b appreciated

Details of the call stack-

[gulp-chug](docs\hpe\gulpfile.tmp.1431766288152.js) Error: `libsass` bindings no
t found. Try reinstalling `node-sass`?
    at getBinding (C:\Grommet\node_modules\sass-loader\node_modules\node-sass\li
b\index.js:22:11)
    at Object. (C:\Grommet\node_modules\sass-loader\node_modules\node
-sass\lib\index.js:188:23)
    at Module._compile (module.js:431:26)
    at Object.Module._extensions..js (module.js:449:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object. (C:\Grommet\node_modules\sass-loader\index.js:4:12)
    at Module._compile (module.js:431:26)

Broken link to assets

The link on download page to the AI sticker sheet is broken:
http://grommet.io/assets/latest/grommet_sticker_sheet.ai

Cannot GET /assets/latest/grommet_sticker_sheet.ai

Other download assets also appear to be broken.

After gulp dev my Grommet app keeps loading forever

I can run gulp dev but when I try to access the dev server the Grommet loading icon is there forever.

Server Side Grommet?

One of the nice features about React is the virtual DOM. Because of that you can create React apps server side, render them to html, and serve that. This is useful for search engines when your building a site for the general public rather than an app you're logged into.

Grommet 0.2.4 let me build an app like that. Grommet 0.3.0 doesn't. The reason for that is the direct references to the document object from within Grommet components. For example, see the App component that sets the language on the document object. This will just not work on the server side and it circumvents the virtual DOM of Angular.

Should we expect Grommet to only be client side and not used server side? If yes, what's the server side option to be used to be consistent with Grommet and the themes?

online demo please :)?

Hi-
Seems like a potentially interesting framework -- is there a representative demo app built with it online? Would like to add it to react.rocks, thanks.

Meter .legend__item-value width causes line-break

The css properties defined in _objects.legend.scss:

.legend {
  //...
  &__item, &__total {
    //...
    &-value {
      //...
      width: double($inuit-base-spacing-unit); // here in line 25
    }
  }
}

will cause the labels to do a line break if they are larger than 3 digits and if 2-character units are specified. Removing this property or doubling the value will remove the issue.

Assuming that most values will be within 0-999 and most units being 2-characters, doubling the width should be fine.

"Cannot read property 'trim' of undefined" while installing the new tour (medium-app)

Hi Alan, I am having trouble installing the new Tour.

After figuring out that I needed to use a new app name after reading the change log (might want to change the Tour install instructions), I was able to properly export the directory using:

         $ grommet export medium-app sample-app

However, after attempting to run "npm install" in my new "sample-app" directory, I received the following message...

The installation goes as far as creating the gulp-rsynch directory, then quits. I have attached a picture of the npm debug log section.

Please note that "npm install" works perfectly in the "server" directory underneath this one.

unable to use HPE styles in consumer build

With a consumer build environment set up by "grommet init", I can successfully run "gulp dist" and get a site using default Grommet styles. But I get problems when trying to use HPE styles. I attempted this by editing src/scss/init.scss and changing the import from grommet/scss/grommet-core/index.scss to grommet/scss/hpe/index.scss. Here's the resulting "gulp dist" output:

[11:13:59] Using gulpfile ~/dev/cim-usb-key/gulpfile.js
[11:13:59] Starting 'preprocess'...
[11:13:59] Starting 'clean'...
[11:13:59] Finished 'clean' after 4.87 ms
[11:13:59] Starting 'copy'...
[11:13:59] Finished 'copy' after 16 ms
[11:13:59] Starting 'jslint'...
[11:13:59] Finished 'jslint' after 12 ms
[11:13:59] Starting 'scsslint'...
[11:13:59] Finished 'scsslint' after 12 μs
[11:13:59] Finished 'preprocess' after 38 ms
[11:13:59] Starting 'dist-preprocess'...
[11:13:59] Finished 'dist-preprocess' after 13 μs
[11:13:59] Starting 'dist'...
[11:14:39] Version: webpack 1.8.11
   Asset    Size  Chunks             Chunk Names
index.js  619 kB       0  [emitted]  main

ERROR in ./~/css-loader!./~/sass-loader?outputStyle=expanded&includePaths[]=/home/crauth/dev/cim-usb-key/node_modules!./src/scss/index.scss
Module not found: Error: Cannot resolve module 'grommet/hpe/font/MetricWeb-Regular.woff' in /home/crauth/dev/cim-usb-key/src/scss
 @ ./~/css-loader!./~/sass-loader?outputStyle=expanded&includePaths[]=/home/crauth/dev/cim-usb-key/node_modules!./src/scss/index.scss 2:240-290
[11:14:39] Finished 'dist' after 40 s

Datepicker - selected date differs one day from shown date

URL: http://grommet.io/docs/hpe/develop/calendar
Trying the example on this page, the shown date in the framed box at the bottom of the page is not the selected date from the datepicker. It is always the day before. This bug can be observed with different browsers (IE, FF, Chrome).

adjustBackground() is called even if there is no background image defined (Login Component)

Hi,

the function adjustBackground() of the Login Component is called even if there is no background image defined. This results in a JavaScript error Uncaught TypeError: Cannot read property 'getDOMNode' of undefined.

The problem is that the adjustBackgroundis bound to the window's resize event without checking whether this.props.background is truthy.

It's not a critical error, but I think it would be good to resolve this just to keep the log free from errors. If you have not already solved this issue, I can submit a PR.

Getting Started page on grommet.io is lacking

I am trying to follow the getting started page and have found several challenges.
I have found the following on Debian 8:

1. When following the instructions, "node" is not found, which is required for grommet. I found that creating a symbolic link for node pointing to /usr/bin/nodejs makes grommet seem to work.
2. 'grommet init sample-app' must have permission to write the sample app. In my case this requires root privileges.
3. The getting started page should set an expectation of how much stuff will be loaded into the system. For my system it was 236MB.

Perhaps a troubleshooting link on the getting started page would resolve os or environment specific challenges.

Unable to install sample app using npm on windows

I was able to install grommet successfully on Windows 7, but when I try to build the sample app using npm, I get these build errors:

VCBUILD : error Message: [c:\Tutorials & Examples\grommet\sample-app\node_modu
les\webpack-dev-server\node_modules\socket.io\node_modules\engine.io\node_modul
es\ws\build\binding.sln]
VCBUILD : error Message: [c:\Tutorials & Examples\grommet\sample-app\node_modu
les\webpack-dev-server\node_modules\socket.io\node_modules\engine.io\node_modul
es\ws\build\binding.sln]

Then, when I run gulp dev, I get this error:

ERROR in .//css-loader!.//sass-loader?outputStyle=expanded&includePaths[]=c:/
utorials & Examples/grommet/sample-app/node_modules!./src/scss/index.scss
Module build failed: file to import not found or unreadable: grommet/scss/gromm
t-core/index
Current dir: (1:9)
@ ./src/scss/index.scss 4:14-214 12:19-219

If I try to load the app in my browser, it does not appear to load correctly and I get a similar error in the debug console.

Any help would be appreciated!
Don

microdata properties

It would be useful to support microdata so things like schema.org could be integrated. React itself supports microdata properties.

Consider this a feature request that I may get to or others may get to first.

Bower broken font path

The font path in the css files begins with a ~. For example ~grommet/scss/hpinc/font/hps-me-w27-regular-woff.woff.

Make Slack accessible to everyone

Right now Slack access is limited to those with a @hp.com email address. Please open this up to all users if it will be the primary form of chat listed in the Readme.

Table.js get error _onResize when scrollable is false

when scrollable is false, mirror is null,

var mirrorElement = this.refs.mirror.getDOMNode(); has below error.
Uncaught TypeError: Cannot read property 'getDOMNode' of undefinedTable.js:73 _alignMirrorTable.js:57 _onResize

The default search component is closing fast when mouseup

The default search functionality

<Search />

Is open when clicking (mousedown) on search icon, but it's closing fast when the "mouseup" event occur. So we're no able to type in the search input.

Tested on Firefox 38.0.5
Chrome 43.0.2357.81
Internet Explorer 11

Update Intl

The intl package now has 1.0.0 release candidates. If I use npm install intl it installs the release candidate. Something changed so that if you have a 1.0.0 release candidate things break. Should likely update sometime in the near future.

Blocking issue building Grommet components on server side with node

Hi there

it seems that Grommet as node module fails to refer to React node module

my environment is a little bit messed up:
I was not able to install grommet using npm because my workplace is out of HP network then I used bower. Once gathered grommet with bower I moved it under node_modules and executed 'npm init' to have a package.json file. Finally I edited the package.json file to refer React node_module.

I set up an application (using https://github.com/DavidWells/isomorphic-react-example as template app) to render pages on the server side using 'express' and it works properly since I limit myself to React components

As I try to introduce Grommet, I get during startup with 'gulp'

[17:52:58] [nodemon] starting `node server.js`
/home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:2851
        module.exports = React;
                         ^
ReferenceError: React is not defined
    at Object.<anonymous> (/home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:2851:19)
    at __webpack_require__ (/home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:21:30)
    at Object.<anonymous> (/home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:112:14)
    at __webpack_require__ (/home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:21:30)
    at Object.<anonymous> (/home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:52:9)
    at __webpack_require__ (/home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:21:30)
    at /home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:41:18
    at Object.<anonymous> (/home/rick/workspace/node/isojs/node_modules/grommet/grommet.js:44:10)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
[17:52:58] [nodemon] app crashed - waiting for file changes before starting...

my components are wrapped in a local module

var React = require('react');

//commented out to avoid Grommet
var Grommet = require('grommet');

var SayHello = React.createClass({
  render: function() {
    return (
      <p>Hello Grommet!!!</p>
    );
  }
});

var HelloGrommet = React.createClass({
  render: function() {
    return (
        //no grommet
        // <SayHallo />

        //grommet
        <Grommet.App>
          <Grommet.Header><SayHello /></Grommet.Header>
        </Grommet.App>
    );
  }
});

module.exports = {
  SayHello: SayHello,
  HelloGrommet: HelloGrommet
};

my environment:

rick@pinguHP:~/workspace/node/isojs> uname -a
Linux pinguHP.site 3.16.7-21-desktop #1 SMP PREEMPT Tue Apr 14 07:11:37 UTC 2015 (93c1539) x86_64 x86_64 x86_64 GNU/Linux
rick@pinguHP:~/workspace/node/isojs> kde4-config --version
Qt: 4.8.6
KDE Development Platform: 4.14.6
kde4-config: 1.0
rick@pinguHP:~/workspace/node/isojs> node -v
v0.12.2

Enable compression on the website

The Grommet website could use some compression (gzip/deflate). According to PageSpeed, there is savings to be had on the website.

Scrollbar missing on the logon page

When using <Logon or <LogonForm, there is no scrollbar present.

Fonts are not loaded over https

If the server is running over https, the fonts are not loaded as the client fails with, e.g.:

Mixed Content: The page at 'https://localhost:8443/dashboard/' was loaded over HTTPS, but requested an insecure font 
'http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGPS42wKzre0cxmO5m5GyTsY.ttf'. This request has been blocked; the content must be served over HTTPS.

The fonts are also provided over https, e.g. https://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGPS42wKzre0cxmO5m5GyTsY.ttf change the links in _settings.font.scss

<input size="10"> is not big enough to hold 10 characters

Try UH4ACP0150 as example input to see this.
Reported from CI Manager USB Key generator, http://crauth.usa.hp.com/cim-usb-key/

No enforced code style

Literally the first file I looked at in grommet had mixed spaces and tabs. 😭

I would seriously consider adding an .editorconfig file and would DEFINITELY add a .jscsrc file to enforce consistant code style for contributors.

Just my 2 cents. Feel free to close this if I am out of line here.

npm install doesn't work on Windows

Several folks mentioned to me that the dependency on native builds had been removed so that Grommet could now be successfully installed on Windows. However, it still fails for me with current Grommet bits (a715b48). node-sass requires a native build.

Need instructions for setting up Grommet dev env

People building apps on top of Grommet will want to leverage its Flux architecture, router, etc., as well as its build infrastructure. I believe that was the design intent? However, there are currently no instructions or examples for how to do so.

unable to access web page from network (non 127.0.0.1)

1. Followed the npm instructions on grommet Getting Started page.
2. Ran gulp dev
3. Everything works fine from the command line, can access the webpage from local computer. I am not able to access the webpage from a remote computer browser.

I have also tested this on the server running grommet and can connect successfully connect with telnet 127.0.0.1 9000 but telnet hostname 9000 I get Error Connection refused.

Problem with jslint when executing "gulp dev"

I'm having a problem with jslint when executing gulp dev inside a fresh generated project using grommet init.
It's complaining from things like:
/Users/marlon/Workspace/HP/grommet/sample-app/src/js/index.js: line 1, col 29, Strings must use singlequote. (W109)

After some research about JSHint I got this from their docs:

In case of .jshintrc, JSHint will start looking for this file in the same directory as the file that's being linted. If not found, it will move one level up the directory tree all the way up to the filesystem root. (Note that if the input comes from stdin, JSHint doesn't attempt to find a configuration file)

What's happening is that the generated project does not have its own .jshintrc file, so it is looking up on my folder tree and unfortunately it found one in my home folder that didn't correspond to the project and has other types of configurations.

I will be send a PR that add a .jshintrc file to new generated projects.

Donut ignores CSS classes assigned to it

Hi,

the "Donut" component ignores CSS classes assigned to it, e.g. <Donut className="my-donut-class" series={...} /> will be rendered without the CSS class "my-donut-class".

The Donut's render function doesn't check for CSS classes provided as a property. Most of grommet's components use the following code to take care of the className property in their render function:

if (this.props.className) {
  classes.push(this.props.className);
}

However, this is not the case for the Donut component. Is this intended?

Buttons are jumping on hover.

Probably because of the different border widths - normal 2px on hover 3px.
Can be solved by using shadows (multiple insets ) instead of borders.
Or by changing the design to fixed border width.

I think that second option is better.

sudo npm install -g grommet doesn't create /usr/bin/grommet symlink

Tested on CentOS 6.6. Console output:

[crauth@crauth dev]$ sudo npm install -g grommet
[email protected] /usr/lib/node_modules/grommet
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected]
└── [email protected] ([email protected])
[crauth@crauth dev]$ grommet init cim-usb-key
-bash: grommet: command not found

Note that the equivalent does work for gulp. The first line shows the creation of the symlink:

[crauth@crauth dev]$ sudo npm install -g gulp
/usr/bin/gulp -> /usr/lib/node_modules/gulp/bin/gulp.js
[email protected] /usr/lib/node_modules/gulp
├── [email protected]
├── [email protected]
...

Gulp Build fails : " Unexpected token < You may need an appropriate loader to handle this file type."

Hello,

I have been trying out grommet since couple of weeks back . I had initial build problems but was able to resolve and Start the Example apps.

Recently I cloned the latest grommet source code into a new directory on my local.
Next I followed steps mention in "https://github.com/HewlettPackard/grommet/wiki/Building-Grommet"

Now it fails with errors. docs , examples all fail with same error while starting up the webpack-server

Apparently Some Loader module is not able to recognize the jsx syntax inside the js files....any suggestion wud b appreciated

ERROR in ./src/js/components/index/IndexHistory.js
Module parse failed: C:\ggg\grommet-master\src\js\components\index\IndexHistory.
js Line 103: Unexpected token <
You may need an appropriate loader to handle this file type.
|   render: function () {
|     return (
|       

---

ERROR in ./src/js/components/App.js
Module parse failed: C:\ggg\grommet-master\src\js\components\App.js Line 54: Une
xpected token <
You may need an appropriate loader to handle this file type.
|
|     return (
|       

|         {children}
|       
 @ ./examples/medium-app/src/js/MediumApp.js 8:10-43

Main menu usability?

When the main menu comes in from the side it's triggered by clicking on the logo. This is different from using something like a hamburger icon to trigger the main menu. My question, is using the logo as a method to trigger the menu finable for most users?

Note, I understand the ideal is to have the menu not be collapsed like this. Luke Wroblewski wrote about just this earlier this year.

Hamburger menus aren't intuitive to most users. This caused AWS to put the word Menu next to theirs and when you visit the site the first time there is even a pop-up noting what's in the Menu.

Given that the hamburger menu isn't obvious, how is the logo obvious when it's historical trigger is the home page/screen?

Can we get validation of the current pattern or change the pattern?

Need FormField attribute for optional/required

Users of the CI Manager USB Key Generator are requesting visual indication of which fields are required and which are optional. FormField should have an attribute for this that triggers appropriate styling (whatever you decide that is).

Meter, vertical breaks in mobile view

When using the <Meter type={arc|circle} vertical={true}/> component it is not displayed correctly in mobile device view, width ~330px. The value is not centered any more and the ledgend is messed up.

Can we include some conditional display of the ledgend, i.e.

@include media-query(palm) {
  .legend {
    display: none;
  }
}

or switch to the horizontal display mode if the width is too small.

gulp-tasks.js is not included in the Grommet distribution

A project gulpfile that requires grommet/utils/gulp-tasks, as the examples do, fails because that path does not exist in the Grommet distribution.

Submitting form by pressing Enter in a form field

Hi,

I think there is an issue with submitting forms when pressing enter in a form field when there are two buttons (a submit button and a cancel button). I was able to reproduce this issue using the FullForm example from the docs.

If the user presses enter within a form, the form is not always submitted. Instead the onClick action associated to the first button defined within the form's DOM will be executed, i.e. if the submit button is defined before the cancel button, pressing enter will submit the form. However, if the cancel button is defined before the submit button, pressing enter will 'cancel' the form, i.e. execute the onClick action associated with the cancel button.

This issue can be observed by changing

<Footer>
  <Menu direction="right">
    <Button label="OK" primary={true} strong={true} onClick={this.props.onSubmit} />
    <Button label="Cancel" onClick={this.props.onCancel} />
  </Menu>
</Footer>

to

<Footer>
  <Menu direction="right">
    <Button label="Cancel" onClick={this.props.onCancel} />
    <Button label="OK" primary={true} strong={true} onClick={this.props.onSubmit} />
  </Menu>
</Footer>

in the FullForm sample. (I have also added log messages to FormDoc to see which function is executed).

I know this is not really a grommet specific issue, but maybe a hint in the documentation would be useful because in my opinion adding the primary attribute to a button suggests that the action associated with a primary button will be the default action when hitting Enter while filling out the form.

I suppose a solution with <input type="reset"> and <input type="submit"> as in this fiddle is not a feasible solution for grommet because it would require dedicated "form buttons". That's why I think a hint in the documentation would be sufficient.

gulp dist

My environment is windows, nodejs version is 0.12.4. I ran into this problem when running 'gulp dist':

module.js:338
throw err;
^
Error: Cannot find module './lib/install'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (C:\Users\trankim1\git\grommet\node_modules\selenium-
tandalone\index.js:2:12)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)

Alan Souzati noted: "we are running integration tests now (started yesterday), that’s why you see the selenium dependency. It seems it is problematic with windows. "

Example Server Fails to work

The server in examples/server fails to work. There are several things going on.

1. The README points to an examples/tour directory that isn't present. Is that supposed to do something?

2. When you run gulp dev and the server starts and you go to localhost:8000 it tries to redirect to localhost:8000/docs which displays the error:

   Error: ENOENT, stat '/docs/dist/index.html'
   at Error (native)
   

3. If you look at one of the sample paths in server.js you see that localhost:8000/hello-world/ should work. It just displays a blank screen because of a bunch of errors.

If you visit the paths that don't work like http://grommet.io/assets/0.2.0/grommet.min.js you''' get an error like:

Cannot GET /assets/0.2.0/grommet.min.js

I'd try to clean this up but I'm not entirely sure how it should work and what should be happening.

Unable to perform bower step in Getting Started

I’m trying the Get Started process and I can’t perform the 3. Install Grommet step of the Bower section.

1. I can install bower using the npm command.
2. I skipped the proxy step because I am on the intranet using Pulse.
3. When I execute the Install Grommet step I get the following error:

C:\Users\leongleo>bower install --save HewlettPackard/grommet-bower
bower ENOGIT        git is not installed or not in the PATH

4. So to get around this I manually edited my path in the Node.js command box to add the Git libraries at the beginning of my path statement:

>path C:\Program Files (x86)\Git\bin\;<rest of my path>

5. Now when I execute the install again, I get:

  C:\Users\leongleo>bower install --save HewlettPackard/grommet-bower
   bower not-cached    git://github.com/HewlettPackard/grommet-bower.git#*
   bower resolve       git://github.com/HewlettPackard/grommet-bower.git#*
   bower ECMDERR       Failed to execute "git ls-remote --tags --heads
  git://github.com/HewlettPackard/grommet-bower.git", exit code of #128 fatal: remote error:
  Repository not found.

  Additional error details:
  fatal: remote error:
  Repository not found.

6. So guessing that I am probably trying to get to this webpage here -- http://grommet.usa.hp.com:2374 -- I went to it in my browser and saw that the grommet-bower package was not listed.

grommet export tool does not export outside references

When using the export tool (export medium-app) the resulting app includes references folders outside the exported app, which are not included in the export. As a result the app does not run.

App css and flush property will bring up scroll bars.

Hi,

the App component has a css property overflow: auto;, which will bring up the browser scroll bars if content is too large. As far as I experienced it, this is always the case when setting the flush={true} property, e.g. with the Tiles component.

Can we change the overflow: auto; to overflow: hidden;?

Sorry if this is negligible, I am new to this community.