chore(xplat): Add button stories to StrictDomDemo (#30849)

apps/xplat-v9/StrictDomDemo.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 
-import { Button } from '@fluentui/react-button';
 import { Label } from '@fluentui/react-label';
-import { getStylesFromClassName, makeStyles, shorthands } from '@fluentui/react-platform-adapter-preview';
+import { mergeClasses, makeStyles, shorthands } from '@fluentui/react-platform-adapter-preview';
 import { FluentProvider } from '@fluentui/react-provider';
 import { tokens, webLightTheme } from '@fluentui/react-theme';
-import { html } from 'react-strict-dom';
+import { ButtonStories } from './stories/Button/ButtonStories';
 
 const useClassNames = makeStyles({
   root: {
@@ -19,17 +18,13 @@ const useClassNames = makeStyles({
   },
 });
 
-export const StrictDomDemo = (props: { cond?: boolean }) => {
-  const { cond } = props;
-
+export const StrictDomDemo = () => {
   const classNames = useClassNames();
 
   return (
-    <FluentProvider theme={webLightTheme}>
-      <html.div style={getStylesFromClassName(classNames.root)}>
-        <Label required>Required label</Label>
-        <Button appearance="primary">Primary button</Button>
-      </html.div>
+    <FluentProvider theme={webLightTheme} className={mergeClasses(classNames.root)}>
+      <Label required>Label</Label>
+      <ButtonStories />
     </FluentProvider>
   );
 };

apps/xplat-v9/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@fluentui/react-button": "*",
+    "@fluentui/react-jsx-runtime": "*",
     "@fluentui/react-label": "*",
     "@fluentui/react-platform-adapter-preview": "*",
     "@fluentui/react-provider": "*",

apps/xplat-v9/stories/Button/ButtonAppearance.tsx

@@ -0,0 +1,28 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import * as React from 'react';
+
+import { Button } from '@fluentui/react-button';
+import { makeStyles } from '@fluentui/react-platform-adapter-preview';
+
+const useStyles = makeStyles({
+  wrapper: {
+    columnGap: '15px',
+    display: 'flex',
+  },
+});
+
+export const Appearance = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.wrapper}>
+      <Button>Default</Button>
+      <Button appearance="primary">Primary</Button>
+      <Button appearance="outline">Outline</Button>
+      <Button appearance="subtle">Subtle</Button>
+      <Button appearance="transparent">Transparent</Button>
+    </div>
+  );
+};

apps/xplat-v9/stories/Button/ButtonDefault.tsx

@@ -0,0 +1,8 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import * as React from 'react';
+
+import { Button } from '@fluentui/react-button';
+
+export const Default = () => <Button>Example</Button>;

apps/xplat-v9/stories/Button/ButtonDisabled.tsx

@@ -0,0 +1,42 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import * as React from 'react';
+
+import { Button } from '@fluentui/react-button';
+import { makeStyles } from '@fluentui/react-platform-adapter-preview';
+
+const useStyles = makeStyles({
+  innerWrapper: {
+    columnGap: '15px',
+    display: 'flex',
+  },
+  outerWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: '15px',
+  },
+});
+
+export const Disabled = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.outerWrapper}>
+      <div className={styles.innerWrapper}>
+        <Button>Enabled state</Button>
+        <Button disabled>Disabled state</Button>
+        <Button disabledFocusable>Disabled focusable state</Button>
+      </div>
+      <div className={styles.innerWrapper}>
+        <Button appearance="primary">Enabled state</Button>
+        <Button appearance="primary" disabled>
+          Disabled state
+        </Button>
+        <Button appearance="primary" disabledFocusable>
+          Disabled focusable state
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/xplat-v9/stories/Button/ButtonShape.tsx

@@ -0,0 +1,25 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import * as React from 'react';
+
+import { Button } from '@fluentui/react-button';
+import { makeStyles } from '@fluentui/react-platform-adapter-preview';
+
+const useStyles = makeStyles({
+  wrapper: {
+    columnGap: '15px',
+    display: 'flex',
+  },
+});
+
+export const Shape = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.wrapper}>
+      <Button>Rounded</Button>
+      <Button shape="circular">Circular</Button>
+      <Button shape="square">Square</Button>
+    </div>
+  );
+};

apps/xplat-v9/stories/Button/ButtonSize.tsx

@@ -0,0 +1,38 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import * as React from 'react';
+
+import { Button } from '@fluentui/react-button';
+import { makeStyles } from '@fluentui/react-platform-adapter-preview';
+
+const useStyles = makeStyles({
+  innerWrapper: {
+    // alignItems: 'start',
+    columnGap: '15px',
+    display: 'flex',
+  },
+  outerWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: '15px',
+  },
+});
+
+export const Size = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.outerWrapper}>
+      <div className={styles.innerWrapper}>
+        <Button size="small">Small</Button>
+      </div>
+      <div className={styles.innerWrapper}>
+        <Button>Medium</Button>
+      </div>
+      <div className={styles.innerWrapper}>
+        <Button size="large">Large</Button>
+      </div>
+    </div>
+  );
+};

apps/xplat-v9/stories/Button/ButtonStories.tsx

@@ -0,0 +1,28 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import * as React from 'react';
+
+import { Default } from './ButtonDefault';
+import { Shape } from './ButtonShape';
+import { Appearance } from './ButtonAppearance';
+import { Size } from './ButtonSize';
+import { Disabled } from './ButtonDisabled';
+import { WithLongText } from './ButtonWithLongText';
+
+export const ButtonStories = () => (
+  <div>
+    <h1>Default</h1>
+    <Default />
+    <h1>Shape</h1>
+    <Shape />
+    <h1>Appearance</h1>
+    <Appearance />
+    <h1>Size</h1>
+    <Size />
+    <h1>Disabled</h1>
+    <Disabled />
+    <h1>With long text</h1>
+    <WithLongText />
+  </div>
+);

apps/xplat-v9/stories/Button/ButtonWithLongText.tsx

@@ -0,0 +1,29 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import * as React from 'react';
+
+import { Button } from '@fluentui/react-button';
+import { makeStyles } from '@fluentui/react-platform-adapter-preview';
+
+const useStyles = makeStyles({
+  longText: {
+    width: '280px',
+  },
+  wrapper: {
+    alignItems: 'center',
+    columnGap: '15px',
+    display: 'flex',
+  },
+});
+
+export const WithLongText = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.wrapper}>
+      <Button>Short text</Button>
+      <Button className={styles.longText}>Long text wraps after it hits the max width of the component</Button>
+    </div>
+  );
+};