Add play/pause button to IDE component (#1101)

* removed showReplayButton prop

* implementation

* bugfixes

* fix broken animation

* test animation behaviour

* add changeset

* remove unused imports

* fix incorrect copilot suggestion animation

* update snapshots

* use borderRadius token

* regen snapshots

* revert changes to IDE content

* wrap onPlayPause in useCallback

* test that animations can be resumed

* move PlayPauseButton to end of file

Author: joshfarrant

.changeset/brown-donkeys-beg.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': minor
+---
+
+Added play/pause control to the `IDE` component.
+
+Removed the `showReplayButton` prop as the play/pause control replaces its functionality, and is always visible.

apps/next-docs/content/components/IDE/index.mdx

@@ -31,7 +31,6 @@ The `IDE` does not automatically apply syntax highlighting to code snippets. Usa
 ```jsx live
 <IDE height={500}>
   <IDE.Editor
-    showReplayButton={false}
     files={[
       {
         name: 'index.js',
@@ -212,7 +211,6 @@ When using the `glass` variant, pay close attention to the background image behi
 >
   <IDE height={400} variant="glass">
     <IDE.Editor
-      showReplayButton={false}
       files={[
         {
           name: 'index.js',
@@ -283,7 +281,6 @@ In both cases, the goal is to provide a meaningful summary of the content that w
 | `showLineNumbers`  | `boolean`              |         | `false`  | Show line numbers in the editor |
 | `size`             | <IDEEditorSizeProp />  |         | `false`  | Controls editor text size       |
 | `triggerAnimation` | `boolean`              |         | `false`  | Trigger animation externally    |
-| `showReplayButton` | `boolean`              |         | `false`  | Show replay button              |
 
 Supported file extensions in the editor include: <IDEFileExtensionsList />
 

packages/design-tokens/src/tokens/functional/components/ide/colors.js

@@ -106,5 +106,15 @@ module.exports = {
         dark: 'var(--base-color-scale-gray-5)',
       },
     },
+    playPauseControl: {
+      rest: {
+        value: 'var(--base-color-scale-gray-2)',
+        dark: '#4d4e6a',
+      },
+      hover: {
+        value: 'var(--base-color-scale-gray-3)',
+        dark: '#5a5b7c',
+      },
+    },
   },
 }

packages/react/src/IDE/IDE.features.stories.tsx

@@ -59,24 +59,13 @@ export const EditorOnly = args => {
   )
 }
 
-export const EditorNoReplayButton = args => {
-  return (
-    <IDE {...args}>
-      <IDE.Editor size="large" activeTab={0} files={files} showReplayButton={false} />
-    </IDE>
-  )
-}
-
-EditorNoReplayButton.storyName = 'Editor Only (no replay button)'
-
 export const EditorCustomIcons = args => {
   return (
     <IDE {...args}>
       <IDE.Editor
         size="large"
         activeTab={0}
         files={files}
-        showReplayButton={false}
         tabIcons={{
           ...Object.keys(IDEDefaultIconMap).reduce((acc, key) => {
             acc[key] = 'https://github.com/primer/brand/assets/13340707/fede56eb-578f-4d17-b045-5f6fdfae28cf'
@@ -88,8 +77,6 @@ export const EditorCustomIcons = args => {
   )
 }
 
-EditorNoReplayButton.storyName = 'Editor Only (no replay button)'
-
 export const ChatOnly = args => {
   return (
     <IDE {...args}>
@@ -238,7 +225,7 @@ PerspectiveExampleLight.decorators = [
 export const AllGlass = args => (
   <IDE {...args} variant="glass">
     <IDE.Chat script={chatScript} alternativeText={chatScriptAlt}></IDE.Chat>
-    <IDE.Editor size="large" files={files} showReplayButton={false} />
+    <IDE.Editor size="large" files={files} />
   </IDE>
 )
 

packages/react/src/IDE/IDE.module.css

@@ -377,17 +377,52 @@ pre.IDE__Chat-copilot-indicator {
   fill: var(--brand-IDE-autoSuggest-fgColor);
 }
 
-.IDE__Editor-replay {
-  margin-block-start: var(--base-size-24);
-  margin-block-end: var(--base-size-16);
-  align-self: center;
-  position: relative;
-  z-index: 1;
+.IDE__play-pause-button {
+  cursor: pointer;
+  position: absolute;
+  bottom: var(--base-size-16);
+  right: var(--base-size-16);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--base-size-48);
+  height: var(--base-size-48);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--brand-borderRadius-full);
+  background-color: var(--brand-IDE-playPauseControl-rest);
+  transition: background-color var(--brand-animation-duration-faster);
 }
 
-.IDE__Editor-replay[disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
+.IDE__play-pause-button:hover {
+  background-color: var(--brand-IDE-playPauseControl-hover);
+}
+
+.IDE__play-pause-button:focus-visible {
+  outline: var(--base-size-4) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
+.IDE__play-pause-button svg {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+}
+
+.IDE__play-pause-button path {
+  fill: var(--brand-button-subtle-fgColor-rest);
+}
+
+.IDE--chat-only .IDE__Chat-input-area {
+  width: calc(100% - var(--base-size-64));
+}
+
+.IDE--chat-only .IDE__play-pause-button {
+  background-color: var(--brand-IDE-playPauseControl-rest);
+}
+
+.IDE--chat-only .IDE__play-pause-button:hover {
+  background-color: var(--brand-IDE-playPauseControl-hover);
 }
 
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

packages/react/src/IDE/IDE.module.css.d.ts

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "IDE": string;
+  readonly "IDE--chat-only": string;
   readonly "IDE--default": string;
   readonly "IDE--full-exp": string;
   readonly "IDE--glass": string;
@@ -28,14 +29,14 @@ declare const styles: {
   readonly "IDE__Editor-lineNumbers": string;
   readonly "IDE__Editor-pane": string;
   readonly "IDE__Editor-pane--suggested": string;
-  readonly "IDE__Editor-replay": string;
   readonly "IDE__Editor-tab": string;
   readonly "IDE__Editor-tab--active": string;
   readonly "IDE__Editor-tab-close-icon": string;
   readonly "IDE__Editor-tab-icon": string;
   readonly "IDE__Editor-tabs": string;
   readonly "IDE__inner": string;
   readonly "IDE__main": string;
+  readonly "IDE__play-pause-button": string;
 };
 export = styles;
 

packages/react/src/IDE/IDE.stories.tsx

@@ -27,7 +27,6 @@ export default {
   args: {
     showChat: true,
     height: 800,
-    showReplayButton: false,
   },
   argTypes: {
     showChat: {
@@ -43,13 +42,6 @@ export default {
       control: {
         type: 'number',
       },
-      showReplayButton: {
-        name: 'show replay button',
-        description: 'toggle replay button visibility',
-        control: {
-          type: 'boolean',
-        },
-      },
     },
     className: {table: {disable: true}},
     id: {table: {disable: true}},
@@ -74,15 +66,14 @@ export default {
 
 type StoryProps = {
   showChat: boolean
-  showReplayButton: boolean
   height: number
 } & IDEProps
 
-const Template: StoryFn<StoryProps> = ({showChat, showReplayButton, ...args}) => {
+const Template: StoryFn<StoryProps> = ({showChat, ...args}) => {
   return (
     <IDE {...args}>
       {showChat && <IDE.Chat script={chatScript} alternativeText={chatScriptAlt}></IDE.Chat>}
-      <IDE.Editor files={defaultFiles} showReplayButton={showReplayButton} />
+      <IDE.Editor files={defaultFiles} />
     </IDE>
   )
 }