grommet / grommet-docs Goto Github PK
View Code? Open in Web Editor NEWWebsite project for Grommet framework (http://grommet.io)
License: Apache License 2.0
Website project for Grommet framework (http://grommet.io)
License: Apache License 2.0
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
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
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
See:
#8
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
This url blinks in chrome. it works well in safari
Currently Meter docs is outdated. We could use this opportunity to migrate to jsx-to-string
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 />
The distribution component will now allow multiple axis to be displayed. Need a richer example showing this.
The last example on the Layer page states it's for "Article, center". It should open a centered article.
It opens the "Edit, left" example.
Examples no longer have import statements and it can be tricky for new users to correctly import components.
When scrolling in scroll animate example, I see 4 different scroll bars.
https://grommet.github.io/hpe/docs/animate/examples#3
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
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.
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
Clicking on an icon does not change the docs above or update the docs on
http://www.grommet.io/docs/develop/icon
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
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:
SelfAdd to Tip components recommendations on when and how to use them.
Changes that have been piling up in the master branch need to be merged into the new-site branch.
Remove basis
and flip
from Axis examples. For example:
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.
Besides the header alignment being not centered, the Video hero example is missing the video.
https://grommet.github.io/hpe/docs/hero/examples#1
Layer docs for example has a minified name in it t
We should always display the actual component name
The component name is minified
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.
It seems that analytics is not running for the new site
Add to Toast components recommendations on when and how to use them.
Improve example of SunBurst:
Should include references to internalization for time/dates, strings, number formats, currency.
Should include tests for website as well as Hello World sample app.
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]
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.
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.
Use the Grommet Tag at the component level to designate that a component is one of:
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
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.
In several places in the Grommet documentation, spaces are missing between words when the sentence or phrase contains whitespace.
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.
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?
example of selectable tiles is not working on Linux VM, tested on RHEL7, Cent 6
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
Add documentation for the Timestamp component.
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.