From e8d98f716b1e497fea79eb9115f8c70ba68542b1 Mon Sep 17 00:00:00 2001
From: Nicholas Rice <nicholas.rice119@gmail.com>
Date: Fri, 10 Jul 2020 16:32:33 -0700
Subject: [PATCH] chore: updates documentation for MatchMediaStylesheetBehavior
 changes (#3493)

* updates documentation for MatchMediaStylesheetBehavior changes

* fixing comments
---
 .../docs/design/match-media-stylesheets.md    | 44 ++++++++++++++-----
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/web-components/fast-components/docs/design/match-media-stylesheets.md b/packages/web-components/fast-components/docs/design/match-media-stylesheets.md
index 18fb1b8c739..d66b47a645d 100644
--- a/packages/web-components/fast-components/docs/design/match-media-stylesheets.md
+++ b/packages/web-components/fast-components/docs/design/match-media-stylesheets.md
@@ -8,17 +8,41 @@ FAST exposes a mechanism to attach stylesheets conditionally based on a [MatchMe
 
 ### MatchMedia stylesheets
 
-`matchMediaStylesheetBehaviorFactory` can be used to construct a Behavior that will conditionally attach stylesheets based on the `matches` property of a [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList).
+`MatchMediaStylesheetBehavior` can be used to attach a stylesheet when a [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) matches and detach it when the query un-matches.
 
-__Example: Using the `matchMediaStylesheetBehaviorFactory`__
-```js
-import { matchMediaStylesheetBehaviorFactory } from "@microsoft/fast-foundation";
-const query = Window.matchMedia('(max-width: 600px)');
-const maxWidthStylesheetBehavior = matchMediaStylesheetBehaviorFactory(query)
+__Example: Constructing the `MatchMediaStyleSheetBehavior`__
+```ts
+import { MatchMediaStyleSheetBehavior } from "@microsoft/fast-foundation";
+
+const mobileStylesheetBehavior = new MatchMediaStyleSheetBehavior(
+    Window.matchMedia('(max-width: 600px)'),
+    css`
+        body {
+            color: red;
+        }
+    `
+));
+
+const styles = css`
+    /* ... */
+`.withBehaviors(
+    mobileStylesheetBehavior    
+)
+```
+
+`MatchMediaStyleSheetBehavior` can also be used to curry the [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList). This can be useful for defining commonly-used `MatchMediaStyleSheetBehavior`:
+
+__Example: Re-using a commonly used query__
+```ts
+import { MatchMediaStyleSheetBehavior } from "@microsoft/fast-foundation";
+
+const mobileStylesheetBehavior = MatchMediaStyleSheetBehavior.with(
+    Window.matchMedia('(max-width: 600px)')
+);
 const styles = css`
     /* ... */
 `.withBehaviors(
-    maxWidthStylesheetBehavior(css`
+    mobileStylesheetBehavior(css`
         body {
             color: red;
         }
@@ -31,7 +55,7 @@ const styles = css`
 FAST has a commitment to facilitating accessible web experiences and [forced-colors](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors) support is a core tenant of that commitment. `@microsoft/fast-components` exports the `forcedColorsStylesheetBehavior` utility to provide a simple mechanism to apply forced-color stylesheets without bloating the component stylesheet in non-forced-color environments. This Behavior is built using [MatchMedia Stylesheets](#matchmedia-stylesheets).
 
 __Example: Forced-colors stylesheets__
-```js
+```ts
 import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
 import { SystemColors } from "@microsoft/fast-web-utilities";
 const styles = css`
@@ -45,6 +69,4 @@ const styles = css`
         /* ... */
     `)
 )
-```
-
-
+```
\ No newline at end of file