fix(Dialog): Content should have 100% width

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Update Silver color scheme, changing `backgroundHover` and `backgroundPressed` for high-contrast theme @pompomon ([#2078](https://github.com/microsoft/fluent-ui-react/pull/2078))
 - Updating the `attachment` component styles to match Teams theme @notandrew ([#2012](https://github.com/stardust-ui/react/pull/2012))
 - Honor `disableAnimations` prop in `Provider` @miroslavstastny ([#2087](https://github.com/microsoft/fluent-ui-react/pull/2087))
+- `Dialog` content should have 100% width @jurokapsiar ([#2104](https://github.com/microsoft/fluent-ui-react/pull/2104))
 - Allow focusing radio and checkbox in the focus zone @jurokapsiar ([#2103](https://github.com/microsoft/fluent-ui-react/pull/2103))
 - Apply unhandled props of `Ref` to the children if used @jurokapsiar ([#2105](https://github.com/microsoft/fluent-ui-react/pull/2105))
 - Add necessary `-ms-grid-` styles to `Layout` for IE11 @jurokapsiar ([#2106](https://github.com/microsoft/fluent-ui-react/pull/2106))

docs/src/examples/components/Dialog/Content/DialogExampleFullWidth.shorthand.steps.ts

@@ -0,0 +1,8 @@
+import getScreenerSteps from '../commonScreenerSteps'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams'],
+  steps: getScreenerSteps(),
+}
+
+export default config

docs/src/examples/components/Dialog/Content/DialogExampleFullWidth.shorthand.tsx

@@ -0,0 +1,14 @@
+import { Button, Dialog, Input } from '@stardust-ui/react'
+import * as React from 'react'
+
+const DialogExampleFullWidth: React.FC = () => (
+  <Dialog
+    cancelButton="Cancel"
+    confirmButton="Confirm"
+    content={<Input fluid />}
+    header="Full width content"
+    trigger={<Button content="Open a dialog" />}
+  />
+)
+
+export default DialogExampleFullWidth

packages/react/src/themes/teams/components/Dialog/dialogStyles.ts

@@ -32,6 +32,7 @@ export default {
     gridColumn: '1 / span 2',
     gridRow: 2,
     justifySelf: 'left',
+    width: '100%',
   }),
 
   header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({