Skip to content

Commit

Permalink
[redesign] implement sidebar (#2543)
Browse files Browse the repository at this point in the history
* implement sidebar in new design

* simplify callback
  • Loading branch information
thomasheyenbrock committed Aug 9, 2022
1 parent 591019c commit 17ef326
Show file tree
Hide file tree
Showing 16 changed files with 349 additions and 307 deletions.
4 changes: 4 additions & 0 deletions packages/graphiql-react/src/icons/docs.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions packages/graphiql-react/src/icons/history.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions packages/graphiql-react/src/icons/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import _ChevronDownIcon from './chevron-down.svg';
import _ChevronUpIcon from './chevron-up.svg';
import _CopyIcon from './copy.svg';
import _DocsIcon from './docs.svg';
import _HistoryIcon from './history.svg';
import _KeyboardShortcutIcon from './keyboard-shortcut.svg';
import _MergeIcon from './merge.svg';
import _PlayIcon from './play.svg';
import _PrettifyIcon from './prettify.svg';
import _ReloadIcon from './reload.svg';
import _SettingsIcon from './settings.svg';
import _StopIcon from './stop.svg';

export const ChevronDownIcon = generateIcon(
Expand All @@ -12,9 +17,17 @@ export const ChevronDownIcon = generateIcon(
);
export const ChevronUpIcon = generateIcon(_ChevronUpIcon, 'chevron up icon');
export const CopyIcon = generateIcon(_CopyIcon, 'copy icon');
export const DocsIcon = generateIcon(_DocsIcon, 'docs icon');
export const HistoryIcon = generateIcon(_HistoryIcon, 'history icon');
export const KeyboardShortcutIcon = generateIcon(
_KeyboardShortcutIcon,
'keyboard shortcut icon',
);
export const MergeIcon = generateIcon(_MergeIcon, 'merge icon');
export const PlayIcon = generateIcon(_PlayIcon, 'play icon');
export const PrettifyIcon = generateIcon(_PrettifyIcon, 'prettify icon');
export const ReloadIcon = generateIcon(_ReloadIcon, 'reload icon');
export const SettingsIcon = generateIcon(_SettingsIcon, 'settings icon');
export const StopIcon = generateIcon(_StopIcon, 'stop icon');

function generateIcon(RawComponent: any, title: string) {
Expand Down
7 changes: 7 additions & 0 deletions packages/graphiql-react/src/icons/keyboard-shortcut.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions packages/graphiql-react/src/icons/reload.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/graphiql-react/src/icons/settings.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/graphiql-react/src/style/root.css
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,15 @@
0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061);

/* Layout */
--sidebar-width: 44px;
--toolbar-width: 40px;
}

.graphiql-container,
.CodeMirror-info,
.CodeMirror-lint-tooltip,
.graphiql-container button {
color: var(--color-neutral-100);
font-family: var(--font-family);
font-size: var(--font-size-body);
font-weight: var(----font-weight-regular);
Expand Down
8 changes: 2 additions & 6 deletions packages/graphiql-react/src/utility/resize.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,12 +145,8 @@ export function useDragResize({

if (firstRef.current && storage && storageKey) {
const storedValue = storage?.get(storageKey);
if (
storedValue &&
storedValue !== HIDE_FIRST &&
storedValue !== HIDE_SECOND
) {
firstRef.current.style.flex = storedValue;
if (storedValue !== HIDE_FIRST && storedValue !== HIDE_SECOND) {
firstRef.current.style.flex = storedValue || defaultFlexRef.current;
}
}
},
Expand Down
5 changes: 5 additions & 0 deletions packages/graphiql/__mocks__/@graphiql/react.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export {
ChevronDownIcon,
ChevronUpIcon,
CopyIcon,
DocsIcon,
Dropdown,
EditorContext,
EditorContextProvider,
Expand All @@ -25,13 +26,17 @@ export {
ExplorerContextProvider,
HistoryContext,
HistoryContextProvider,
HistoryIcon,
ImagePreview,
KeyboardShortcutIcon,
onHasCompletion,
MergeIcon,
PlayIcon,
PrettifyIcon,
ReloadIcon,
SchemaContext,
SchemaContextProvider,
SettingsIcon,
StopIcon,
StorageContext,
StorageContextProvider,
Expand Down
8 changes: 4 additions & 4 deletions packages/graphiql/cypress/integration/docs.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ describe('GraphiQL DocExplorer - button', () => {
cy.visit(`/`);
});
it('Toggles doc pane on', () => {
cy.get('.docExplorerShow').click();
cy.get('.graphiql-sidebar button').eq(0).click();
cy.get('.doc-explorer').should('be.visible');
});

Expand All @@ -19,7 +19,7 @@ describe('GraphiQL DocExplorer - button', () => {
describe('GraphiQL DocExplorer - search', () => {
before(() => {
cy.visit(`/`);
cy.get('.docExplorerShow').click();
cy.get('.graphiql-sidebar button').eq(0).click();
});

it('Searches docs for values', () => {
Expand Down Expand Up @@ -66,7 +66,7 @@ describe('GraphiQL DocExplorer - search', () => {

it('Allows clearing the search', () => {
cy.visit(`/`);
cy.get('.docExplorerShow').click();
cy.get('.graphiql-sidebar button').eq(0).click();
cy.get('label.search-box input').type('test');
cy.get('.doc-category-item').should('have.length', 7);
cy.get('.search-box-clear').click();
Expand All @@ -78,7 +78,7 @@ describe('GraphiQL DocExplorer - search', () => {
describe('GraphQL DocExplorer - deprecated fields', () => {
before(() => {
cy.visit(`/`);
cy.get('.docExplorerShow').click();
cy.get('.graphiql-sidebar button').eq(0).click();
});
it('should show deprecated fields category title', () => {
cy.get('.doc-category>.doc-category-item').first().find('a').click();
Expand Down
Loading

0 comments on commit 17ef326

Please sign in to comment.