From a651258b88ce8de0d84717d929c5bb0df3ccaf21 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 18 Nov 2021 13:23:28 -0800
Subject: [PATCH] docs(context-menu): add target, multiple target examples

---
 docs/src/pages/components/ContextMenu.svx     | 14 ++++
 .../ContextMenu/ContextMenuTarget.svelte      | 65 +++++++++++++++++
 .../ContextMenu/ContextMenuTargets.svelte     | 70 +++++++++++++++++++
 3 files changed, 149 insertions(+)
 create mode 100644 docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
 create mode 100644 docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte

diff --git a/docs/src/pages/components/ContextMenu.svx b/docs/src/pages/components/ContextMenu.svx
index d195fd63..a37e7a32 100644
--- a/docs/src/pages/components/ContextMenu.svx
+++ b/docs/src/pages/components/ContextMenu.svx
@@ -9,9 +9,23 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex
 In the examples, right click anywhere within the iframe.
   
 ### Default
+
+By default, the context menu will trigger when right clicking anywhere in the `window`.
   
 <FileSource src="/framed/ContextMenu/ContextMenu" />
 
+### Custom target
+
+Specify a custom `HTMLElement` using the `target` prop.
+
+<FileSource src="/framed/ContextMenu/ContextMenuTarget" />
+
+### Multiple targets
+
+The `target` prop also accepts an array of elements.
+
+<FileSource src="/framed/ContextMenu/ContextMenuTargets" />
+
 ### Radio groups
   
 <FileSource src="/framed/ContextMenu/ContextMenuGroups" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
new file mode 100644
index 00000000..87b4d8a6
--- /dev/null
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
@@ -0,0 +1,65 @@
+<script>
+  import {
+    ContextMenu,
+    ContextMenuDivider,
+    ContextMenuGroup,
+    ContextMenuOption,
+  } from "carbon-components-svelte";
+  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
+  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+
+  let target;
+</script>
+
+<ContextMenu target="{target}" on:open="{(e) => console.log(e.detail)}">
+  <ContextMenuOption
+    indented
+    labelText="Copy"
+    shortcutText="⌘C"
+    icon="{CopyFile16}"
+  />
+  <ContextMenuOption
+    indented
+    labelText="Cut"
+    shortcutText="⌘X"
+    icon="{Cut16}"
+  />
+  <ContextMenuDivider />
+  <ContextMenuOption indented labelText="Export as">
+    <ContextMenuGroup labelText="Export options">
+      <ContextMenuOption id="pdf" labelText="PDF" />
+      <ContextMenuOption id="txt" labelText="TXT" />
+      <ContextMenuOption id="mp3" labelText="MP3" />
+    </ContextMenuGroup>
+  </ContextMenuOption>
+  <ContextMenuDivider />
+  <ContextMenuOption selectable labelText="Remove metadata" />
+  <ContextMenuDivider />
+  <ContextMenuGroup labelText="Style options">
+    <ContextMenuOption id="0" labelText="Font smoothing" selected />
+    <ContextMenuOption id="1" labelText="Reduce noise" />
+    <ContextMenuOption id="2" labelText="Auto-sharpen" />
+  </ContextMenuGroup>
+  <ContextMenuDivider />
+  <ContextMenuOption indented kind="danger" labelText="Delete" />
+</ContextMenu>
+
+<div>
+  <p bind:this="{target}">Right click this element</p>
+</div>
+
+<style>
+  div {
+    position: absolute;
+    width: calc(100% - var(--cds-spacing-05));
+    height: calc(100% - var(--cds-spacing-06));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cds-text-02);
+  }
+
+  p {
+    outline: 1px solid var(--cds-interactive-01);
+  }
+</style>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
new file mode 100644
index 00000000..aa51e7de
--- /dev/null
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
@@ -0,0 +1,70 @@
+<script>
+  import {
+    ContextMenu,
+    ContextMenuDivider,
+    ContextMenuGroup,
+    ContextMenuOption,
+  } from "carbon-components-svelte";
+  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
+  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+
+  let target;
+  let target2;
+</script>
+
+<ContextMenu
+  target="{[target, target2]}"
+  on:open="{(e) => console.log(e.detail)}"
+>
+  <ContextMenuOption
+    indented
+    labelText="Copy"
+    shortcutText="⌘C"
+    icon="{CopyFile16}"
+  />
+  <ContextMenuOption
+    indented
+    labelText="Cut"
+    shortcutText="⌘X"
+    icon="{Cut16}"
+  />
+  <ContextMenuDivider />
+  <ContextMenuOption indented labelText="Export as">
+    <ContextMenuGroup labelText="Export options">
+      <ContextMenuOption id="pdf" labelText="PDF" />
+      <ContextMenuOption id="txt" labelText="TXT" />
+      <ContextMenuOption id="mp3" labelText="MP3" />
+    </ContextMenuGroup>
+  </ContextMenuOption>
+  <ContextMenuDivider />
+  <ContextMenuOption selectable labelText="Remove metadata" />
+  <ContextMenuDivider />
+  <ContextMenuGroup labelText="Style options">
+    <ContextMenuOption id="0" labelText="Font smoothing" selected />
+    <ContextMenuOption id="1" labelText="Reduce noise" />
+    <ContextMenuOption id="2" labelText="Auto-sharpen" />
+  </ContextMenuGroup>
+  <ContextMenuDivider />
+  <ContextMenuOption indented kind="danger" labelText="Delete" />
+</ContextMenu>
+
+<div>
+  <p bind:this="{target}">Right click this element</p>
+  <p bind:this="{target2}">... or this one</p>
+</div>
+
+<style>
+  div {
+    position: absolute;
+    width: calc(100% - var(--cds-spacing-05));
+    height: calc(100% - var(--cds-spacing-06));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cds-text-02);
+  }
+
+  p {
+    outline: 1px solid var(--cds-interactive-01);
+  }
+</style>