Changing the size property on a button with an icon does not apply anything.

Enable re-publishing a URL so you don’t need to re-send a new URL for each version.

Consider maintaining publication history within each design, allowing browsing forward and backward in change history.

Clicking on the gridArea under Layout in Container results in a blank screen.
Everything disappears including the left and right panel.

Publish a small number of designs that would provide good starting places. For example:

• simple app
• enterprise app
• marketing
• news

Here is an example of when you have multiple screens in your document. The screen is only highlighted when you select it.

This is a bad example because the screens are empty, but if you have a lot of layers this is more of an issue.

Expected behavior: As a quick fix you could always highlight the screen, even if you select a different component inside of it. A more sophisticated solution would be to turn this into a menu as you only see one screen at a time anyway. In Sketch pages are treated this way.

I noticed empty prop values such as <Button label="" ... > and <Heading margin={{}} ...>, we should consider cleaning those up.

Enhance Repeater to control animation of children in a progressive way. For instance, if any children are a Box with animation set, adjust the delay of those animations based on the index of the child.

When you create a new design it will take the date as default title, if you keep hitting create new, it will overwrite the design if you did not change the name.

Suggestions

• Use Untitled as the default title
• If you did not change the title and you click New, create a new document Untitled (or Untitled 2, etc.)
• Alternatively, prompt the user to name their design when you click New

Create multiple <2m screencast tutorials on various topics:

• what is the designer?
• basic interaction
• Box layout guide
• Grid layout guide
• publishing, sharing, comments
• themes
• imports
• data

I do not fully remember what happened, but I dragged an anchor component into a button component (by accident) or something along these lines. The app showed me a blank page and it comes up after refreshing the page too.

Fortunately I took screenshots of my progress. 😥

Expected behavior: I don't know how to avoid bugs like this, but maybe snapshots of progress could be captured and retrieved somehow, even if you did not publish designs in a while.

I want to select multiple layers at the same time to move them or delete them.

Currently, there is no indication that the design I’m building is being saved, I thought I lost the design and then saw it again under ‘My Designs’. thinking maybe changing the URL or a small notification will help to understand whether it was saved.

Ideas and examples on how this can be achieved are on this slack thread https://grommet.slack.com/archives/G9L4Z4D18/p1565358557000100?thread_ts=1565307352.000700&cid=G9L4Z4D18

It would be great to have a short url to create a new document, for example https://designer.grommet.io/new

Similar to https://doc.new

Expected behavior: File - New Document

Improve the scope of keyboard interaction to speed up using the tool.

Propose removing the current autofocus behavior that focuses on a component text or name. This will allow us to make use of single character shortcuts, which should be oriented around frequent tasks, such as selecting components, adding components, and setting properties. Here are some suggested mappings:

p j return - "p" initiates searching on the currently selected component's properties and gives that focus, "j" prunes the list of properties down to ones that match, return gives focus to the first matching property's input
a b o return - add a Box, "a" signifies adding, "add" layer gets a new search input which starts with focus, "bo" trims choices down to Box, return initiates add
z - undo
Z - redo

Allow inline editing of Heading, Text, Paragraph.

Allow dragging and dropping in the main content to re-order children.

Here's the idea:

1. someone publishes a design with one or more screens containing components designed to be re-used.
2. someone else imports that design into an existing design by reference, without replacing the current design.
3. this second person can then reference components in the library.

The example cards can wrap (as if it was hardcoded somewhere?), however there is no wrapping in the designer.

example

"demo" project (boxes stripped to bare components)
import React from 'react'
import { Grommet, Box } from 'grommet'

export default () => {

return (
<Grommet theme={undefined}>
    <Box align="center" justify="center" pad="small" background={{"color":"accent-4","image":"url('\n')"}} height="xlarge" flex={false} direction="row" *wrap={true}* overflow="auto">
      <Box align="center" justify="center" />
      <Box align="center" justify="center" />
      <Box align="center" justify="center" />

  </Box>
  </Grommet>

)
}

Browser: Chrome, Mac

Add ability to customize spacing and general rounding.

Often, I want to be able to toggle visibility of multiple items as part of onClick. For example, to show the progression from one state of a card to another, I may want to hide card 1 and show card 2.

Like here: https://storybook.grommet.io/?path=/story/select--search

It would be helpful to be able to link to a custom URL, an existing website, for example.

Enhance Box animation property editing to support object and array values.

There is a bug in the Screen path property that makes entering text very difficult.
After entering a character or two, no more characters appear, until you re-click on the path box.
Often you have to do this several times if you want to add a long path name.

Right now the tile pulses after selection, but it is very subtle.

Suggestion: Introduce a loading spinner and put it either right on the tile or somewhere in the container, change the tile color?

Update the readme with more descriptive text, guidance on how to use it, a link to the site, etc.

Hi,
Firstly I have just stumbled across grommet and it's incredible. Thank you for all those who are involved.

I am trying to use the designer to mock up some test pages.
I tried to add the Video component and am unsure what to put i the Source property.
I have tried all sorts of things and nothing seems to work.

   a) 'http://v2.grommet.io/assets/small.mp4'
   b) key="video" src="//v2.grommet.io/assets/small.mp4'" type="video/mp4"

I am looking at the https://v2.grommet.io/video documentation which mentions:

  <source key="video" src="/assets/small.mp4" type="video/mp4" />

For example, allow creating a banner component that can be reused across multiple screens.

But, what if the "master" component/screen is deleted? Maybe just a note that it is used in multiple places so the caller can manage? Or, maybe move the master to the next screen using it?

Maybe this pushes a design change to remove components as children of screens and have them as a flat list at the top of a design?

Tested in Firefox, Mac.

I cannot seem to get the Video component to work in designer.
I used the following as an example -> https://storybook.grommet.io/?path=/story/video--simple
I copied the following from the 'source' tag into the Source property of designer.
src="http://techslides.com/demos/sample-videos/small.mp4"
type="video/mp4"
The video component partially displays, but does not play and NaN:NaN displayed in the control.

When i inspected the generated React code there was no 'source' tag anywhere to be seen.
Adding the 'source' tag to the generated React code resolved the issue.

The use case is that sometimes I quickly put together a variation and reference an existing component, but at some point I want to introduce deviation/develop it further.

I think it would be great to add an option to do it right from the reference.

It says: "Well, gridArea only does anything when the parent component is a Grid. Currently, the parent of this component is a grommet.Grid"

If you delete the first screen that is created by default, you face this error:

TypeError: nextDesign.screens[nextScreen] is undefined

Expected behavior: Show me an empty layer list and stage. Maybe with a disclaimer that you need to create a screen and a button to do just that

Expected behavior (as learned in most design software) is that when you select a layer on the canvas, it will be reflected in the layer list too.

I really like the grommet system that you all are creating.

I’m a big fan of drag and drop and keep it simple, so I really like the idea of using designer as much as possible, before having to turn to code.

I believe that there is one piece missing that would really elevate grommet and entice more people to use it.

That is by allowing users to Extend grommet by creating functional react components and include them as normal grommet components, as well as extending grommet base components.

I am not a very experienced web developer, so forgive me if I mix up terminology. Hopefully you get the idea of what I am proposing.

As a very simple example

So In designer there could be the option to select a functional component template from the list of components and through the properties panel define the component, it’s name, JavaScript code along with any state/properties and events.

An example would be creating a login component and on successful login navigate to another page.

It would also be good if it was possible to hook into grommet and extend existing components to allow the addition of JavaScript code to fine tune and enhance base components.

Expected behavior: Whatever screen is selected when share link is created should be the default view.

Example: https://designer.grommet.io/?preview=true&n=d-2019-06-03T22%3A03%3A20.147Z

Provide a control to undo the latest change. Perhaps, consider a short history queue that could be undone/redone.

Today I noticed that there seems to be a bug with the JS code being generated with https://designer.grommet.io/

It is generating const Huband Spoke which is a variable declaration that can be done. The code compiled correctly once I removed the extra space from const HubandSpoke and similarly in the route, <Route path="undefined" Component={HubandSpoke} />

Another possible issue is that once I compiled and ran the generated code is that clicking down on the bottom Patterns buttons Hub and Spoke Banner and Sidebar it does not switch between those components as it does on the online demo.

Description:

I've made a design, but when adding a Button (blank, default), and pressing it or the name on Left Bar, the screen goes blank.

My code:

{"screens":{"1":{"id":1,"root":2,"name":"SEO KeywordsTool"}},"screenOrder":[1],"components":{"2":{"id":2,"type":"Grommet","props":{"style":{"height":"100vh"}},"children":[3,12],"collapsed":false},"3":{"type":"Grid","id":3,"props":{"align":"center","alignContent":"center","justify":"center","columns":"xlarge"},"name":"LoginForm","children":[4,6,9]},"4":{"type":"Box","id":4,"props":{"align":"center","justify":"center","pad":"small","alignSelf":"center","animation":[{"type":"fadeIn","delay":5},{"type":"jiggle","delay":2}],"background":{"color":"brand"},"round":"medium"},"name":"Tiitle","children":[5]},"5":{"type":"Heading","id":5,"props":{"color":"accent-2"},"text":"Entra"},"6":{"type":"Box","id":6,"props":{"align":"center","justify":"center","pad":"small","overflow":"auto","wrap":true,"alignSelf":"start","background":{"color":"dark-1"},"round":"small","width":"large"},"name":"Email","children":[7,8],"collapsed":false},"7":{"type":"FormField","id":7,"props":{"color":"brand","error":"Revisa si el email esta bien escrito","help":"Trata de que no queden espacios antes, en medio, o despues del email.","label":"EMAIL"},"name":"email"},"8":{"type":"TextInput","id":8,"props":{"placeholder":"Ingresa tu email aca"},"name":"emailInput"},"9":{"type":"Box","id":9,"props":{"align":"center","justify":"center","pad":"small","background":{"color":"dark-1"},"wrap":true,"overflow":"auto","round":"small","width":"large"},"name":"Password","children":[10,11]},"10":{"type":"FormField","id":10,"props":{"error":"Verifica que tu password este bien escrito","help":"Trata de que no queden espacios antes, en medio o al final de tu contrasena","label":"CONTRASENA","color":"accent-2"},"name":"password"},"11":{"type":"TextInput","id":11,"props":{"placeholder":"Ingresa tu contrasena"},"name":"passwordInput"},"12":{"type":"Button","id":12,"props":{"label":"Button"}}},"nextId":13,"version":2}
Local Storage saves my design

Console shows this message:

What is expected:

Nothing more than the normal hover/click Button animation

What it happens:

The whole screen goes suddenly blank

How to reproduce:

Save code into a JSON, upload to designer, click button. I've made the same several times in private or normal mode in Firefox ESR on debian 9, with the same result.

I accidentally added a reference to my design, then tried to generate code - but nothing is ever displayed.

I think it is because a null check needs to happen here (in code.js):

Old:

const nextReferenceDesign = getReferenceDesign(importsArg, component);
result = componentToJSX({
        screen,
        id: component.props.component,
        indent,
        referenceDesign: nextReferenceDesign,
      });

New:

const nextReferenceDesign = getReferenceDesign(importsArg, component);
result = nextReferenceDesign ? componentToJSX({
        screen,
        id: component.props.component,
        indent,
        referenceDesign: nextReferenceDesign,
      }) : '';

Incoming PR ...

Each of only about five or six code gen attempts has yielded either "false" or "undefined" as the third line of generated code after the import statements. For me, this happens even with a simple two-page design with only button on each page.

This tool is not an SVG editor. But, it's helpful to allow richer background graphic images created as SVGs. SVG images are usually fairly compact, compared to JPEGs and PNGs. So, how about allowing the user to browse or drop a file on a Box background image property, or an Image src property? Restrict to SVG file types. Make it a data URI and include it in the design.

Another option would be to add an SVG component type. This could be used instead of an Image and would be useful for primary graphics, like Stak. This approach wouldn't work for Box backgrounds though.

When you use the tool, over time the transitions to create new documents, but more so to add components really add up. I don't need a menu see come in from the top or bottom every time. I suggest fading in the component, so it does not travel of the screen. It is fun the first couple of times, but then it gets annoying.

I find that these sort of animations are better used for uses cases where you want to make somebody aware of something.

To get to more real prototypes, it would be helpful to enable users to type into fields, select options in Select, etc.

It would be a great enhancement if I was able to copy/paste properties of a component, I do not always want to duplicate the whole component (maybe it has lots of children), but for example reusing a Box's properties for layout.

I can see it being added a shortcut, in Figma this is Cmd + Option + C/V or in the Component panel near the Duplicate action.

Allow adding ResponsiveContext such that designs can show responsive behavior.

Have to think about what's the best way to represent this. One generally uses ResponsiveContext.Consumer to get the current breakpoint and then change the underlying layout and/or properties based on the breakpoint.

One idea would be to enable a breakpoint feature on any component. When enabled, it would allow the designer to customize properties and children based on breakpoint.

Currently, the "add components" button disappears when you select a layer that does not support inheritance. As somebody that knows Grommet this makes sense, but I would assume it appears random otherwise.

Suggestion: Always show the "add" button. Keep the behavior the same for the Box component, for everything else place new component above current selection.