From d03909e26cd51d9b68014d98a74fc09429204e62 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Wed, 7 Jul 2021 12:25:21 -0700
Subject: [PATCH] docs(breakpoint): update docs

---
 docs/src/pages/components/Breakpoint.svx       | 18 ++++++++++++------
 .../pages/framed/Breakpoint/Breakpoint.svelte  | 13 +++++++++++--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx
index b0408151..e3ea9c12 100644
--- a/docs/src/pages/components/Breakpoint.svx
+++ b/docs/src/pages/components/Breakpoint.svx
@@ -1,21 +1,27 @@
 
 <script>
   import {
-    Breakpoint
+    Breakpoint, UnorderedList, ListItem
   } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
 
-- Small (`sm`): less than 672px
-- Medium (`md`): 672 - 1056px
-- Large (`lg`): 1056 - 1312px
-- X-Large (`xlg`): 1312 - 1584px
-- Max (`max`): greater than 1584px
+<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+  <ListItem><strong>Small</strong> (`sm`): less than 672px</ListItem>
+  <ListItem><strong>Medium</strong> (`md`): 672 - 1056px</ListItem>
+  <ListItem><strong>Large</strong> (`lg`): 1056 - 1312px</ListItem>
+  <ListItem><strong>X-Large</strong> (`xlg`): 1312 - 1584px</ListItem>
+  <ListItem><strong>Max</strong> (`max`): greater than 1584px</ListItem>
+</UnorderedList>
 
 This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
 
 ### Default
 
+Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
+
+The `"on:match"` event will fire only when a breakpoint change event occurs (e.g., the browser width is resized).
+
 <FileSource src="/framed/Breakpoint/Breakpoint" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
index 9ab36bd8..f1cca7ae 100644
--- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
+++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
@@ -7,8 +7,17 @@
 
 <Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
 
+<p>Resize the width of your browser.</p>
+<h6>Current breakpoint size</h6>
 <h1>{size}</h1>
 
 <pre>
-    {JSON.stringify(events,null, 2)}
-    </pre>
+  {JSON.stringify(events,null, 2)}
+</pre>
+
+<style>
+  p,
+  h1 {
+    margin-bottom: var(--cds-spacing-08);
+  }
+</style>