show filled docs icon when docs are visible (#2739)

thomasheyenbrock · web-flow · commit 98e14155c650 · 2022-09-02T15:31:37.000+02:00
diff --git a/.changeset/grumpy-dogs-wave.md b/.changeset/grumpy-dogs-wave.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add `DocsFilledIcon` component and use show that icon in the sidebar when the docs plugin is visible
diff --git a/packages/graphiql-react/src/icons/docs-filled.svg b/packages/graphiql-react/src/icons/docs-filled.svg
@@ -0,0 +1,5 @@
+<svg height="1em" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 3C0.75 1.75736 1.75736 0.75 3 0.75H17.25C17.8023 0.75 18.25 1.19772 18.25 1.75V5.25" stroke="currentColor" stroke-width="1.5"/>
+<path d="M0.75 3C0.75 4.24264 1.75736 5.25 3 5.25H18.25C18.8023 5.25 19.25 5.69771 19.25 6.25V22.25C19.25 22.8023 18.8023 23.25 18.25 23.25H3C1.75736 23.25 0.75 22.2426 0.75 21V3Z" stroke="currentColor" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.25C1.75736 5.25 0.75 4.24264 0.75 3V21C0.75 22.2426 1.75736 23.25 3 23.25H18.25C18.8023 23.25 19.25 22.8023 19.25 22.25V6.25C19.25 5.69771 18.8023 5.25 18.25 5.25H3ZM13 11L6 11V12.5L13 12.5V11Z" fill="currentColor"/>
+</svg>
diff --git a/packages/graphiql-react/src/icons/index.tsx b/packages/graphiql-react/src/icons/index.tsx
@@ -8,6 +8,7 @@ import _DeprecatedArgumentIcon from './deprecated-argument.svg';
 import _DeprecatedEnumValueIcon from './deprecated-enum-value.svg';
 import _DeprecatedFieldIcon from './deprecated-field.svg';
 import _DirectiveIcon from './directive.svg';
+import _DocsFilledIcon from './docs-filled.svg';
 import _DocsIcon from './docs.svg';
 import _EnumValueIcon from './enum-value.svg';
 import _FieldIcon from './field.svg';
@@ -53,6 +54,7 @@ export const DeprecatedFieldIcon = generateIcon(
   'deprecated field icon',
 );
 export const DirectiveIcon = generateIcon(_DirectiveIcon, 'directive icon');
+export const DocsFilledIcon = generateIcon(_DocsFilledIcon, 'filled docs icon');
 export const DocsIcon = generateIcon(_DocsIcon, 'docs icon');
 export const EnumValueIcon = generateIcon(_EnumValueIcon, 'enum value icon');
 export const FieldIcon = generateIcon(_FieldIcon, 'field icon');
diff --git a/packages/graphiql-react/src/plugin.tsx b/packages/graphiql-react/src/plugin.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react';
 import { DocExplorer, useExplorerContext } from './explorer';
 import { History, useHistoryContext } from './history';
-import { DocsIcon, HistoryIcon } from './icons';
+import { DocsFilledIcon, DocsIcon, HistoryIcon } from './icons';
 import { useStorageContext } from './storage';
 import { createContextHook, createNullableContext } from './utility/context';
 
@@ -31,7 +31,14 @@ export type GraphiQLPlugin = {
 
 export const DOC_EXPLORER_PLUGIN: GraphiQLPlugin = {
   title: 'Documentation Explorer',
-  icon: DocsIcon,
+  icon: function Icon() {
+    const pluginContext = usePluginContext();
+    return pluginContext?.visiblePlugin === DOC_EXPLORER_PLUGIN ? (
+      <DocsFilledIcon />
+    ) : (
+      <DocsIcon />
+    );
+  },
   content: DocExplorer,
 };
 export const HISTORY_PLUGIN: GraphiQLPlugin = {
diff --git a/packages/graphiql/__mocks__/@graphiql/react.tsx b/packages/graphiql/__mocks__/@graphiql/react.tsx
@@ -31,6 +31,7 @@ export {
   DirectiveIcon,
   DOC_EXPLORER_PLUGIN,
   DocExplorer,
+  DocsFilledIcon,
   DocsIcon,
   EditorContext,
   EditorContextProvider,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@graphiql/react': minor
 +---
++
 +Add `DocsFilledIcon` component and use show that icon in the sidebar when the docs plugin is visible