docs: improve UI in examples (#33121)

apps/public-docsite-v9/src/Utilities/FocusManagement/useUncontrolledFocus/Default.stories.tsx

@@ -4,50 +4,72 @@ import { FocusTrapZone } from '@fluentui/react';
 import { useUncontrolledFocus, Field, Switch, Button, makeStyles, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+    placeItems: 'start',
+  },
   focusTrapZone: {
     display: 'flex',
-    columnGap: '10px',
+    gap: '20px',
     padding: '20px 10px 10px 10px',
     position: 'relative',
-    maxWidth: '400px',
+    width: '400px',
     border: `2px solid ${tokens.colorBrandBackground}`,
+
     '::after': {
       content: `'FocusTrapZone'`,
       position: 'absolute',
-      padding: '1px 4px 1px',
+      padding: '4px',
       top: '-2px',
       left: '-2px',
       fontFamily: 'monospace',
-      fontSize: '15px',
+      fontSize: '14px',
       fontWeight: 900,
       lineHeight: 1,
       letterSpacing: '1px',
       color: tokens.colorNeutralForegroundOnBrand,
       backgroundColor: tokens.colorBrandBackground,
     },
   },
+  controls: {
+    flex: 1,
+    display: 'flex',
+    gap: '10px',
+    alignItems: 'end',
+    justifyContent: 'end',
+  },
 });
 
 export const Default = () => {
   const attr = useUncontrolledFocus();
-  const [uncontrolled, setUncontrolled] = React.useState(false);
   const styles = useStyles();
+
+  const [enabled, setEnabled] = React.useState(true);
+
   return (
-    <>
+    <div className={styles.container}>
       <Button>Outside</Button>
+
       <FocusTrapZone
+        {...attr}
         className={styles.focusTrapZone}
-        {...(uncontrolled && attr)}
+        disabled={!enabled}
         isClickableOutsideFocusTrap
         forceFocusInsideTrap={false}
       >
-        <Field label="Uncontrolled tabster">
-          <Switch checked={uncontrolled} onChange={(e, data) => setUncontrolled(data.checked)} />
+        <Field label="Enable focus trap">
+          <Switch checked={enabled} onChange={(e, data) => setEnabled(data.checked)} />
         </Field>
-        <Button>{uncontrolled ? 'Trapped' : 'Not trapped'}</Button>
-        <Button>{uncontrolled ? 'Trapped' : 'Not trapped'}</Button>
+
+        <div className={styles.controls}>
+          <Button>{enabled ? 'Trapped' : 'Not trapped'}</Button>
+          <Button>{enabled ? 'Trapped' : 'Not trapped'}</Button>
+        </div>
       </FocusTrapZone>
+
       <Button>Outside</Button>
-    </>
+    </div>
   );
 };

apps/public-docsite-v9/src/Utilities/FocusManagement/useUncontrolledFocus/useUncontrolledFocusDescription.md

@@ -3,4 +3,4 @@ only focus management framework in an application. However, it's understandable
 other focus management frameworks. In these cases, the `useUncontrolledFocus` hook can be used to explicitly
 remove explicit focus controlling for a region of DOM.
 
-This is particularly useful to support legacy v8 focus management components such as `FocusZone` and `FocusTrapZone`
+This is particularly useful to support legacy v8 focus management components such as `FocusZone` and `FocusTrapZone`.

packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx

@@ -42,7 +42,6 @@ const useClasses = makeStyles({
     display: 'grid',
     gridTemplateColumns: '1fr',
     gridTemplateRows: 'auto 1fr',
-    paddingBottom: '24px',
     boxShadow: tokens.shadow16,
   },
   card: {
@@ -146,23 +145,25 @@ export const Autoplay = () => {
           <Switch checked={autoplayEnabled} onChange={() => setAutoplayEnabled(!autoplayEnabled)} />
         </Field>
       </div>
-      <Carousel groupSize={1} circular announcement={getAnnouncement}>
-        <CarouselSlider>
-          {IMAGES.map((imageSrc, index) => (
-            <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
-              Card {index + 1}
-            </BannerCard>
-          ))}
-        </CarouselSlider>
-        <CarouselNavContainer
-          layout="inline"
-          autoplay={autoplayProps}
-          next={{ 'aria-label': 'go to next' }}
-          prev={{ 'aria-label': 'go to prev' }}
-        >
-          <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav>
-        </CarouselNavContainer>
-      </Carousel>
+      <div className={classes.card}>
+        <Carousel groupSize={1} circular announcement={getAnnouncement}>
+          <CarouselSlider>
+            {IMAGES.map((imageSrc, index) => (
+              <BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
+                Card {index + 1}
+              </BannerCard>
+            ))}
+          </CarouselSlider>
+          <CarouselNavContainer
+            layout="inline"
+            autoplay={autoplayProps}
+            next={{ 'aria-label': 'go to next' }}
+            prev={{ 'aria-label': 'go to prev' }}
+          >
+            <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav>
+          </CarouselNavContainer>
+        </Carousel>
+      </div>
     </div>
   );
 };

packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx

@@ -16,7 +16,6 @@ import {
   tokens,
   typographyStyles,
 } from '@fluentui/react-components';
-import { useEffect } from 'react';
 
 const useStyles = makeStyles({
   surface: {
@@ -67,7 +66,7 @@ const getAnnouncement: CarouselAnnouncerFunction = (index: number, totalSlides:
   return `Carousel slide ${index + 1} of ${totalSlides}, ${PAGES[index].header}`;
 };
 
-export const CarouselFirstRunExperience = () => {
+export const FirstRunExperience = () => {
   const styles = useStyles();
   const [activeIndex, setActiveIndex] = React.useState(0);
   const [open, setModalOpen] = React.useState(false);
@@ -80,19 +79,9 @@ export const CarouselFirstRunExperience = () => {
     }
     setActiveIndex(page);
   };
-  // NearButton and FarButton are function components that handle navigation and focus management
-  const NearButton = () => (
-    <Button onClick={() => setPage(activeIndex - 1)}>{activeIndex <= 0 ? 'Not Now' : 'Previous'}</Button>
-  );
-
-  const FarButton = () => (
-    <Button appearance="primary" onClick={() => setPage(activeIndex + 1)}>
-      {activeIndex === totalPages - 1 ? 'Try Copilot' : 'Next'}
-    </Button>
-  );
 
-  useEffect(() => {
-    // Reset or initialize page on open if nessecary
+  React.useEffect(() => {
+    // Reset or initialize page on open if necessary
     if (open) {
       setActiveIndex(0);
     }
@@ -114,7 +103,7 @@ export const CarouselFirstRunExperience = () => {
           onActiveIndexChange={(e, data) => setActiveIndex(data.index)}
         >
           <CarouselSlider>
-            {PAGES.map((page, index) => (
+            {PAGES.map(page => (
               <CarouselCard className={styles.card} key={page.id}>
                 <Image src={page.imgSrc} width={600} height={324} alt={page.imgSrc} />
                 <h1 tabIndex={-1} className={styles.header}>
@@ -125,14 +114,26 @@ export const CarouselFirstRunExperience = () => {
             ))}
           </CarouselSlider>
           <div className={styles.footer}>
-            {NearButton()}
+            <Button onClick={() => setPage(activeIndex - 1)}>{activeIndex <= 0 ? 'Not Now' : 'Previous'}</Button>
+
             <CarouselNav appearance="brand">
               {index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}
             </CarouselNav>
-            {FarButton()}
+
+            <Button appearance="primary" onClick={() => setPage(activeIndex + 1)}>
+              {activeIndex === totalPages - 1 ? 'Try Copilot' : 'Next'}
+            </Button>
           </div>
         </Carousel>
       </DialogSurface>
     </Dialog>
   );
 };
+
+FirstRunExperience.parameters = {
+  docs: {
+    description: {
+      story: 'Carousel can be used in a Dialog to create a _first-run_ experience.',
+    },
+  },
+};

packages/react-components/react-carousel/stories/src/Carousel/index.stories.tsx

@@ -19,7 +19,7 @@ export { Controlled } from './CarouselControlled.stories';
 export { ImageSlideshow } from './CarouselImageBox.stories';
 export { AlignmentAndWhitespace } from './CarouselActionCards.stories';
 export { Autoplay } from './CarouselAutoplay.stories';
-export { CarouselFirstRunExperience } from './CarouselFirstRunExperience.stories';
+export { FirstRunExperience } from './CarouselFirstRunExperience.stories';
 
 export default {
   title: 'Components/Carousel',