Scratch-blocks: Design for "create variable" button and dialog

[rachel-fenichel]

Placeholders right now:

[carljbowman]

Todo -

• [ ] Document 2.0 Variable Deletion Behavior
• [ ] Document 2.0 Variable Editing/Renaming Behavior
• [ ] Document 2.0 Dragging Variables to Sprites/Stage Behavior

Scratch 2.0 - Creating a Variable Behaviors

Clicking 'Create a Variable' opens dialog

Ability to Name a Variable

• Variables cannot have the same name (case sensitive), if the user tries to name a Variable with the same name an error will be thrown
  
  
• A user can create two 'For this sprite only' variables that have same name across two different sprites

Ability to Choose if the Variable is 'For all sprites' or 'For this sprite only'

• For all sprites (aka Global): The Variable that is created will be accessible in the 'Data' category on all sprites
  

• For only this sprite (aka Local): The Variable that is created will only be accessible in the 'Data' category on the sprite it was created. (Unless manually dragged to another block)
  

Cloud Var checkbox

This will only appear for users who have been given access to the Cloud Variable feature and can only be checked 'On' for 'For all sprites' variables

[carljbowman]

Todo:

• [ ] Spec 3.0 Variable Deletion Behavior
• [ ] Spec 3.0 Variable Editing/Renaming Behavior
• [ ] Spec 3.0 Dragging Variables to Sprites/Stage Behavior

Scratch 3.0 - Round 1 - Creating a Variable Behaviors

Overall we should the keep current behavior within Scratch 2.0 that is outlined above.

Cloud Vars are out of scope for this initial pass. The sketches include the option to explore the extensibility of the dialog component

Opening 'Make a Variable' Dialog

User Clicks 'Make a Variable' button

Dialog opens

Close 'Make a Variable' Dialog

• User can click the transparent background
• User can click the ( x ) icon in the upper right corner
• User can click the 'Cancel' button

Naming a Variable

• User can name the variable
  

• Variables cannot have the same name (case sensitive), if the user tries to name a Variable with the same name an error will be thrown
  @rschamp - Might be nice to utilize some of the validation mechanisms we built in the Join Flow, rather than popping another dialog like in 2.0. Not 100% sure about this idea as this feels like an error state, which we have traditionally avoided. Needs discussion.
  

• A user can create two 'For this sprite only' variables that have same name across two different sprites

Ability to Choose if the Variable is 'For all sprites' or 'For this sprite only'

• User can toggle these options
• Another place we could leverage some of the UI (checkboxes, radio button) from the Teacher Join flow on WWW

• These options should follow the 2.0 model (see https://github.com/LLK/scratch-blocks/issues/535#issuecomment-280390616 for more info):
  
  
  
  • For all sprites (aka Global): The Variable that is created will be accessible in the 'Data' category on all sprites
  
  
  • For only this sprite (aka Local): The Variable that is created will only be accessible in the 'Data' category on the sprite it was created on. (Unless manually dragged to another block)
  
  

Cloud Var checkbox

This will only appear for users who have been given access to the Cloud Variable feature and can only be checked 'On' for 'For all sprites' variables

• User with access to Cloud Vars
  

• User without access to Cloud Vars
  

Variable Created

• Single Variable
  

• Multiple Variables
  

Proportions

We will need to refine these over time as we create more dialogs, but these will work for now.

Orange: 0.75 rem (12px)
Green: 1.5rem (24px)
Purple: 2.25rem (36px)

[thisandagain]

Done enough to move forward with.

[thisandagain]

For playtest don't worry about the variable scope or cloud variables. We will get to that in a future iteration.