feat: advanced playground UI tweaks #4136
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -260,7 +258,7 @@ export const AdvancedPlayground: VFC<{ | |||
| sx={theme => ({ | |||
| width: resultsWidth, | |||
| transition: 'width 0.4s ease', | |||
| padding: theme.spacing(4, 2), | |||
| padding: theme.spacing(4, 4), | |||
There was a problem hiding this comment.
align results table spacing with the form
| @@ -196,10 +196,11 @@ export const PlaygroundCodeFieldset: VFC<IPlaygroundCodeFieldsetProps> = ({ | |||
| onChange={changeContextValue} | |||
| options={options} | |||
| multiple={isAdvancedPlayground} | |||
| sx={{ width: 200, maxWidth: '100%' }} | |||
| sx={{ width: 370, maxWidth: '100%' }} | |||
There was a problem hiding this comment.
align context fields length with environments
| sx={{ width: 200, maxWidth: '100%' }} | ||
| sx={{ width: 370, maxWidth: '100%' }} | ||
| placeholder={ | ||
| isAdvancedPlayground ? 'value1,value2,value3' : 'value1' |
There was a problem hiding this comment.
new placeholder hints nudging to use multiple values
| <Typography | ||
| variant="body2" | ||
| color={theme.palette.text.secondary} | ||
| color={theme.palette.text.primary} |
There was a problem hiding this comment.
since 1,2,3 guidance indicators disappeared we make the text darker
| @@ -114,7 +114,7 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({ | |||
| </StyledEditorHeader> | |||
| <CodeMirror | |||
| value={context} | |||
| height="200px" | |||
| height="150px" | |||
There was a problem hiding this comment.
6 lines of JSON is more than enough and it doesn't shift the results table too low on the screen
| id="environment" | ||
| multiple={isAdvancedPlayground} | ||
| options={environmentOptions} | ||
| sx={{ width: 200, maxWidth: '100%' }} | ||
| sx={{ flex: 1 }} |
There was a problem hiding this comment.
environments and projects are on one line now
| marginRight: theme.spacing(0.4), | ||
| })); | ||
|
|
||
| export const renderOption = ( |
There was a problem hiding this comment.
we want to have checkboxes in the multi selection dropdown similar to API tokens for project selection
...ound/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx
Outdated
Show resolved
Hide resolved
About the changes
Final overview with the adjusted spacing and multi select fields
Detailed adjustments below
Left align results table and the form:
Allow 3 pills and then +1/n indicator
Align environments and context fields length
Placeholder for multiple values
Persistent multi selection for projects
Persistent multi selection for environments
Old playground is still usable but we optimize UI for the new playground
Discussion points