feat(frontend): animate GenerateButton

3 files changed, 110 insertions, 15 deletions

diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
new file mode 100644
index 00000000..d08decbc
--- /dev/null
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -0,0 +1,95 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import React, { type ReactNode, useLayoutEffect, useState } from 'react';
+
+const AnimatedButtonBase = styled(Button, {
+  shouldForwardProp: (prop) => prop !== 'width',
+})<{ width: string }>(({ theme, width }) => {
+  // Transition copied from `@mui/material/Button`.
+  const colorTransition = theme.transitions.create(
+    ['background-color', 'box-shadow', 'border-color', 'color'],
+    { duration: theme.transitions.duration.short },
+  );
+  return {
+    width,
+    // Make sure the button does not change width if a number is updated.
+    fontVariantNumeric: 'tabular-nums',
+    transition: `
+      ${colorTransition},
+      ${theme.transitions.create(['width'], {
+        duration: theme.transitions.duration.short,
+        easing: theme.transitions.easing.easeOut,
+      })}
+    `,
+    '@media (prefers-reduced-motion: reduce)': {
+      transition: colorTransition,
+    },
+  };
+});
+
+export default function AnimatedButton({
+  'aria-label': ariaLabel,
+  onClick,
+  color,
+  disabled,
+  startIcon,
+  children,
+}: {
+  'aria-label'?: string;
+  onClick?: () => void;
+  color: 'error' | 'warning' | 'primary' | 'inherit';
+  disabled?: boolean;
+  startIcon: JSX.Element;
+  children?: ReactNode;
+}): JSX.Element {
+  const [width, setWidth] = useState<string | undefined>();
+  const [contentsElement, setContentsElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  useLayoutEffect(() => {
+    if (contentsElement !== null) {
+      const updateWidth = () => {
+        setWidth(window.getComputedStyle(contentsElement).width);
+      };
+      updateWidth();
+      const observer = new ResizeObserver(updateWidth);
+      observer.observe(contentsElement);
+      return () => observer.unobserve(contentsElement);
+    }
+    return () => {};
+  }, [setWidth, contentsElement]);
+
+  return (
+    <AnimatedButtonBase
+      {...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel })}
+      {...(onClick === undefined ? {} : { onClick })}
+      color={color}
+      variant="outlined"
+      className="rounded"
+      disabled={disabled ?? false}
+      startIcon={startIcon}
+      width={width === undefined ? 'auto' : `calc(${width} + 50px)`}
+    >
+      <Box
+        display="flex"
+        flexDirection="row"
+        justifyContent="end"
+        overflow="hidden"
+        width="100%"
+      >
+        <Box whiteSpace="nowrap" ref={setContentsElement}>
+          {children}
+        </Box>
+      </Box>
+    </AnimatedButtonBase>
+  );
+}
+
+AnimatedButton.defaultProps = {
+  'aria-label': undefined,
+  onClick: undefined,
+  disabled: false,
+  children: undefined,
+};
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 485989b5..8b6ae660 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -1,8 +1,10 @@
+import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import AnimatedButton from './AnimatedButton';
 import type EditorStore from './EditorStore';
 
 const GENERATE_LABEL = 'Generate';
@@ -16,7 +18,7 @@ const GenerateButton = observer(function GenerateButton({
 }): JSX.Element {
   if (editorStore === undefined) {
     return (
-      <Button color="inherit" className="rounded" disabled>
+      <Button color="inherit" variant="outlined" className="rounded" disabled>
         Loading&hellip;
       </Button>
     );
@@ -35,26 +37,25 @@ const GenerateButton = observer(function GenerateButton({
 
   if (errorCount > 0) {
     return (
-      <Button
+      <AnimatedButton
         aria-label={`Select next diagnostic out of ${summary}`}
         onClick={() => editorStore.nextDiagnostic()}
         color="error"
-        className="rounded"
+        startIcon={<DangerousOutlinedIcon />}
       >
         {summary}
-      </Button>
+      </AnimatedButton>
     );
   }
 
   return (
-    <Button
+    <AnimatedButton
       disabled={!editorStore.opened}
       color={warningCount > 0 ? 'warning' : 'primary'}
-      className="rounded"
       startIcon={<PlayArrowIcon />}
     >
       {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
-    </Button>
+    </AnimatedButton>
   );
 });
 
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 09a72d54..d990fd5d 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -93,15 +93,14 @@ const components: Components = {
         '.MuiButton-startIcon': { marginRight: 6 },
         '.MuiButton-endIcon': { marginLeft: 6 },
       },
+      sizeSmall: { fontSize: '0.75rem' },
+      sizeLarge: { fontSize: '1rem' },
       text: { '&.rounded': { padding: '6px 14px' } },
-      textSizeSmall: {
-        fontSize: '0.875rem',
-        '&.rounded': { padding: '4px 8px' },
-      },
-      textSizeLarge: {
-        fontSize: '1rem',
-        '&.rounded': { padding: '8px 20px' },
-      },
+      textSizeSmall: { '&.rounded': { padding: '4px 8px' } },
+      textSizeLarge: { '&.rounded': { padding: '8px 20px' } },
+      outlined: { '&.rounded': { padding: '5px 13px' } },
+      outlinedSizeSmall: { '&.rounded': { padding: '3px 9px' } },
+      outlinedSizeLarge: { '&.rounded': { padding: '7px 19px' } },
     },
   },
   MuiToggleButton: {