In [Title, inline menu, and search] header example, on click of ellipsis icon, options aren't aligned with the original ellipsis icon.

https://grommet.github.io/hpe/docs/header/examples#1

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

Layer docs for example has a minified name in it t

Expected Behavior

We should always display the actual component name

Actual Behavior

The component name is minified

URL or screen shot exhibiting the issue

Your Environment

• Browser Name and version: Any
• Operating System and version (desktop or mobile): Any

Expected Behavior

We need a way to indicate when a component or property is new and either not part of a released version of grommet, or is experimental and the interface has not solidified.

Actual Behavior

When a grommet component is documented, the documentation appears immediately and there's no way to determine if it it's in a released version of grommet. When a property is added to documentation, there's no indication that it's stable and will not change without a breaking change.

Design suggestions

Use the Grommet Tag at the component level to designate that a component is one of:

• experimental - a component or property is in the stable branch and possibly in a released version of grommet, but its interface and capability is not yet finalized. Changes to visual, behavior, and API are likely for experimental components or properties. A Change to experimental components and properties will not be considered a breaking change.
• pre-release - a component or property is ready for use in the stable branch of grommet, but is not yet available in a released version of grommet. Minor changes to the component or property are possible without being considered a breaking change.
• released - a component or property is ready for use and is available in a released version of grommet. Changes to the component will be made in a backwards compatible manner or will be made as part of a major version update. In the case of a breaking change, the change will be documented in the release notes.

Considerations

• After writing the above, I'm wondering that maybe we don't need the *released tag as it's implied if neither of the other two are present.
• It would be nice to have a small Tag to use for experimental or pre-release properties and the "normal size" tag at the component level.
• It would be nice to be able to set the color on tags so we can use different colors for the tags, like the red explicit tag in Apple Music for experimental tags.
• We will need a docs page with describing the meaning of the tags similar to the above.

Dark theme on all card examples, have #fff font color with light grey backgrounds. We should have either a tile background color change to match the dark theme, or keep the font color #333 on dark theme when tile background color is light.

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

Hello hello!

I noticed, while snooping around, that the onResponsive option was not mentioned in the docs for Split but i could see it in use here

Is it something that isn't public or should it be added to the options?

function: _buildMirror()
mirrorRow.appendChild(cells[i].cloneNode(true));

This cloneNode will clone all child elements with 'data-reactid', it will show error:
Uncaught Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0.0.0.0:1.3.1.0.0.1:

When thead/tr/th include React Element:

• nested boxes
• add box button instead of count
• url state for sharing

Expected Behavior

The last example on the Layer page states it's for "Article, center". It should open a centered article.

Actual Behavior

It opens the "Edit, left" example.

URL or screen shot exhibiting the issue

Steps to Reproduce

1. Navigate here: http://grommet.github.io/hpe/docs/layer
2. Click on "edit" button under "Article, center" button.

Remove basis and flip from Axis examples. For example:

http://grommet.github.io/docs/chart-examples#4

Clicking on an icon does not change the docs above or update the docs on
http://www.grommet.io/docs/develop/icon

Currently Meter docs is outdated. We could use this opportunity to migrate to jsx-to-string

We need a different way to show value on icon distribution example. The transparent background on the value can't dynamically read the dark theme to match it.

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

In the anchor examples, on [icon + label], the icon grows on hover, but for icon, it only changes to #fff, no grow.

https://grommet.github.io/hpe/docs/anchor/examples#3

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

Layer Article example has a footer that doesn't stretch to be 100% of the screen.
https://grommet.github.io/hpe/docs/layer/examples#3

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

Whenever the Ticker series data is updated in IE there's a 'SCRIPT28: Out of stack space' error in IE11.

This is true whether using original draw, setState, or forceUpdate with the series data.

While it is getting to the Out of stack space error it freezes the entire UI. It does update after the error, which is somewhat disconcerting.

Besides the header alignment being not centered, the Video hero example is missing the video.
https://grommet.github.io/hpe/docs/hero/examples#1

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

example of selectable tiles is not working on Linux VM, tested on RHEL7, Cent 6

Should include references to internalization for time/dates, strings, number formats, currency.

Not only do they get the fun style flash, but they go from vertical layout to horizontal in IE11 with overlapping.

Examples

http://webcache.googleusercontent.com/search?q=cache:kCYoSj2FUYsJ:www.grommet.io/&num=1&hl=en&gl=us&strip=0&vwsrc=0

This url blinks in chrome. it works well in safari

The distribution component will now allow multiple axis to be displayed. Need a richer example showing this.

Add to Toast components recommendations on when and how to use them.

On the Anchor Docs page, the Anchor icon & text color should be matching (in this case, they should be green).

Currently, all anchors have :visited styles applied (green icon, dark text).

This is inconsistent with other themes.
Also this is confusing as users will think Anchor's default style is green icon with dark text.

At a minimum, [Icon,Label,Plain] button example should be the same as [Icon, Label] Anchor example.

Button: https://grommet.github.io/hpe/docs/button/examples#6
Anchor: https://grommet.github.io/hpe/docs/anchor/examples#2

[Icon,Label,Plain] button example currently only changes the icon color. Currently there is no grow of icon and no underline of label.

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

• Need some type of training on how Grommet bases everything on 24 px (12, 24, 48, 96)
  • Use small, medium, large to explain this
  • Primarily for designers, so layouts fit this
  • For developers, should understand this to think this way

See:
#8

Improve example of SunBurst:

1. use a Legend explaining colors
2. use a Legend on segment hover to explain color, label, value.
3. have onClick alert also explain detail better.

In Form example 2, The first Select (Select-No Search) icon is lighter grey than the second Select (Select-Search) icon. First Select (Select-No Search) also needs an on hover color change.

https://grommet.github.io/hpe/docs/form/examples#2

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

For Multi-select list example, I use shift-click to select multiple items in the list. I then use Shift-click to deselect one of the selected items and it won't deselect.

If I do a regular click, the selection starts over to 1 only item selected.

https://grommet.github.io/hpe/docs/list/examples#2

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

http://www.grommet.io/docs/develop/meter
Splits out the following (truncated) warning.

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) "Gen 7", "value": 50},
  {"label": "Gen 
 (server) "Gen 7", "value": 50, "colorIndex": "gra

This is happening on Safari, Chrome, and Firefox browsers running on OSX Yosemite 10.10.5.

Removing overflow-y: scroll on html seems to fix the issue (see screenshot below). I haven't seen this before so it seems like this might be introduced by the latest changes in Grommet?

http://www.grommet.io/docs/aruba/

Dark theme error message on Form examples are white when error message on LoginForm examples are red.

Form: https://grommet.github.io/hpe/docs/form/examples#2
LoginForm: https://grommet.github.io/hpe/docs/login-form/examples#1

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

Add to Tip components recommendations on when and how to use them.

The radio buttons on the RadioButton page does not display the "bullet" at the center of the button as it should, it only shows a light-blue highlighting around the border of the radio button.

However, the Radio Buttons on the Form page display correctly.

• Browser Name and version: Chrome 52.0.2743.116
• Operating System and version (desktop or mobile): Mac OS X El Capitan

The layers doc does not have any mention of how a layer/modal can be activated through a button or a list item.
Since,(like most) I've been in the react scene only for a short while, a quick 'how-to' would really be appreciated.

If required, I wouldn't mind contributing to the docs once I have an overview.
btw, really loving grommet.

Thanks,
[email protected]

For all header examples, starting at example 0, when I use the right arrow to navigate through the Header examples, the menu options are not collapsing into their dropdown label.

Example: on header example 1 (screenshot below) the First, Second, Third labels are suppose to be collapsed under a dropdown. When I navigate to example 4 and then back to example 1, the menu items are collapsed properly.

https://grommet.github.io/hpe/docs/header/examples#0

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

The "Get Started" link near the bottom of the Hello World page, is broken (i.e. when I click it, my browser doesn't take me to the Get Started page).

Here's a screenshot showing the link:

According to Chrome's developer tools (shown below), the HTML element associated with the link lacks an href attribute:

Here's a link to the line of source code associated with the link:
https://github.com/grommet/grommet-docs/blob/master/src/develop/HelloWorld.js#L40

It seems that analytics is not running for the new site

It appears icons that have a hypen in their name get messed up when being displayed in the docs. For example, link-next appears like this (notice the spaces):

var Link next = require('grommet/components/icons/base/Link next');
//or var Link next = Grommet.Icons.Base.Link next
<Link next />

In several places in the Grommet documentation, spaces are missing between words when the sentence or phrase contains whitespace.

Some of the docs page have buttons which are unnecessarily wide

Expected Behavior

Button should have regular width

Actual Behavior

Button has extra width

URL or screen shot exhibiting the issue

Your Environment

• Browser Name and version: Any
• Operating System and version (desktop or mobile): Any

Add documentation for the Timestamp component.

Examples no longer have import statements and it can be tricky for new users to correctly import components.

When window is small in IE11 or firefox you do not get the nice logo and contents title as you do in chrome. Instead you have the full LHS on top, then the content/article below it.

Image at the juncture of LHS and bottom

Changes that have been piling up in the master branch need to be merged into the new-site branch.

On click on a dropdown, the values inside the dropdown are larger than the dropdown label.

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

When scrolling in scroll animate example, I see 4 different scroll bars.
https://grommet.github.io/hpe/docs/animate/examples#3

Your Environment

• Browser Name and version: Firefox 48.0 and Chrome 53.0.2785.116

Should include tests for website as well as Hello World sample app.

There are several issues with grommet.github.io over https. These appear in the console when the CodePen is loaded. This also prevents the CodePen from rendering.