Core: Fix onboarding visual bugs, survey telemetry and modal dismissal

code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx

@@ -37,7 +37,7 @@ export const TableWrapper = styled.table<{
     // End Resets
 
     fontSize: theme.typography.size.s2 - 1,
-    lineHeight: '20px',
+    lineHeight: '19px',
     textAlign: 'left',
     width: '100%',
 

code/addons/onboarding/src/Onboarding.tsx

@@ -90,11 +90,7 @@ export default function Onboarding({
           userAgent,
         });
       }
-      // remove onboarding query parameter from current url
-      const url = new URL(window.location.href);
-      url.searchParams.set('onboarding', 'false');
-      history.replaceState({}, '', url.href);
-      api.setQueryParams({ onboarding: 'false' });
+      api.applyQueryParams({ onboarding: undefined }, { replace: true });
       setEnabled(false);
     },
     [api, setEnabled, userAgent]
@@ -113,12 +109,23 @@ export default function Onboarding({
     [api, selectStory, userAgent]
   );
 
+  useEffect(() => {
+    if (step === '6:IntentSurvey' && !hasCompletedSurvey) {
+      api.emit(ADDON_ONBOARDING_CHANNEL, {
+        from: 'onboarding',
+        type: 'openSurvey',
+        userAgent,
+      });
+    }
+  }, [api, hasCompletedSurvey, step, userAgent]);
+
   useEffect(() => {
     api.setQueryParams({ onboarding: 'true' });
     selectStory('example-button--primary');
     api.togglePanel(true);
     api.togglePanelPosition('bottom');
     api.setSelectedPanel(ADDON_CONTROLS_ID);
+    api.setSizes({ bottomPanelHeight: 300 });
   }, [api, selectStory]);
 
   useEffect(() => {
@@ -304,6 +311,7 @@ export default function Onboarding({
         <SplashScreen onDismiss={() => setStep('2:Controls')} />
       ) : step === '6:IntentSurvey' ? (
         <IntentSurvey
+          isOpen={enabled}
           onComplete={completeSurvey}
           onDismiss={() => disableOnboarding('6:IntentSurvey')}
         />

code/addons/onboarding/src/Survey.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { type API } from 'storybook/manager-api';
 import { ThemeProvider, convert } from 'storybook/theming';
@@ -12,12 +12,19 @@ export default function Survey({ api }: { api: API }) {
   // eslint-disable-next-line compat/compat
   const userAgent = globalThis?.navigator?.userAgent;
 
+  const [isOpen, setIsOpen] = useState(true);
+
+  useEffect(() => {
+    api.emit(ADDON_ONBOARDING_CHANNEL, {
+      from: 'guide',
+      type: 'openSurvey',
+      userAgent,
+    });
+  }, [api, userAgent]);
+
   const disableOnboarding = useCallback(() => {
-    // remove onboarding query parameter from current url
-    const url = new URL(window.location.href);
-    url.searchParams.set('onboarding', 'false');
-    history.replaceState({}, '', url.href);
-    api.setQueryParams({ onboarding: 'false' });
+    setIsOpen(false);
+    api.applyQueryParams({ onboarding: undefined }, { replace: true });
   }, [api]);
 
   const complete = useCallback(
@@ -41,7 +48,7 @@ export default function Survey({ api }: { api: API }) {
 
   return (
     <ThemeProvider theme={theme}>
-      <IntentSurvey onComplete={complete} onDismiss={dismiss} />
+      <IntentSurvey isOpen={isOpen} onComplete={complete} onDismiss={dismiss} />
     </ThemeProvider>
   );
 }

code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.stories.tsx

@@ -7,6 +7,7 @@ import { IntentSurvey } from './IntentSurvey';
 const meta = {
   component: IntentSurvey,
   args: {
+    isOpen: true,
     onComplete: fn(),
     onDismiss: fn(),
   },

code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.tsx

@@ -65,9 +65,11 @@ const Checkbox = styled(Form.Checkbox)({
 });
 
 export const IntentSurvey = ({
+  isOpen,
   onComplete,
   onDismiss,
 }: {
+  isOpen: boolean;
   onComplete: (formData: Record<string, Record<string, boolean>>) => void;
   onDismiss: () => void;
 }) => {
@@ -172,7 +174,7 @@ export const IntentSurvey = ({
   return (
     <Modal
       ariaLabel="Storybook user survey"
-      defaultOpen
+      open={isOpen}
       width={420}
       onOpenChange={(isOpen) => {
         if (!isOpen) {

code/core/src/components/components/Modal/Modal.styled.tsx

@@ -187,6 +187,7 @@ export const Close = ({ asChild, children, onClick, ...props }: CloseProps) => {
 
   return (
     <Button
+      type="button"
       padding="small"
       ariaLabel="Close modal"
       variant="ghost"

code/core/src/controls/components/ControlsPanel.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { ScrollArea } from 'storybook/internal/components';
 import type { ArgTypes } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
@@ -31,11 +30,15 @@ const clean = (obj: { [key: string]: any }) =>
     {} as typeof obj
   );
 
-const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI }) => ({
-  display: 'grid',
-  gridTemplateRows: showSaveFromUI ? '1fr 41px' : '1fr',
+const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI, theme }) => ({
   height: '100%',
   maxHeight: '100vh',
+  paddingBottom: showSaveFromUI ? 41 : 0,
+  backgroundColor: theme.background.content,
+
+  table: {
+    backgroundColor: theme.background.app,
+  },
 }));
 
 interface ControlsParameters {
@@ -101,20 +104,18 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
 
   return (
     <AddonWrapper showSaveFromUI={showSaveFromUI}>
-      <ScrollArea vertical>
-        <ArgsTable
-          key={path} // resets state when switching stories
-          compact={!expanded && hasControls}
-          rows={withPresetColors}
-          args={args}
-          globals={globals}
-          updateArgs={updateArgs}
-          resetArgs={resetArgs}
-          inAddonPanel
-          sort={sort}
-          isLoading={isLoading}
-        />
-      </ScrollArea>
+      <ArgsTable
+        key={path} // resets state when switching stories
+        compact={!expanded && hasControls}
+        rows={withPresetColors}
+        args={args}
+        globals={globals}
+        updateArgs={updateArgs}
+        resetArgs={resetArgs}
+        inAddonPanel
+        sort={sort}
+        isLoading={isLoading}
+      />
       {showSaveFromUI && <SaveStory {...{ resetArgs, saveStory, createStory }} />}
     </AddonWrapper>
   );

code/core/src/controls/components/SaveStory.tsx

@@ -18,8 +18,9 @@ const highlight = keyframes({
 
 const Container = styled.div({
   containerType: 'size',
-  position: 'sticky',
+  position: 'absolute',
   bottom: 0,
+  width: '100%',
   height: 41,
   overflow: 'hidden',
   zIndex: 1,
@@ -43,6 +44,7 @@ const Info = styled.div({
   display: 'flex',
   flex: '99 0 auto',
   alignItems: 'center',
+  marginInlineStart: 7,
   marginInlineEnd: 10,
   gap: 6,
 });

code/core/src/controls/manager.tsx

@@ -122,7 +122,7 @@ export default addons.register(ADDON_ID, (api) => {
           return null;
         }
         return (
-          <AddonPanel active={active} hasScrollbar={false}>
+          <AddonPanel active={active}>
             <ControlsPanel saveStory={saveStory} createStory={createStory} />
           </AddonPanel>
         );

code/core/src/theming/global.ts

@@ -99,9 +99,12 @@ export const createGlobal = memoize(1)(({
     ...resetStyles,
     body: {
       ...resetStyles.body,
+      position: 'fixed',
+      width: '100vw',
+      height: '100vh',
+      overflow: 'hidden',
       color: color.defaultText,
       background: background.app,
-      overflow: 'hidden',
     },
 
     hr: {