From 022c0933614d3980279cb212805726a56bddf1e9 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Sat, 2 Sep 2023 00:36:21 -0700
Subject: [PATCH 1/3] refactor(flow): split up custom flow item interfaces

---
 .../calcite-components/conventions/README.md  | 36 ++++++++++++++-----
 .../src/components/flow/interfaces.ts         |  8 ++---
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md
index bff430b437f..c2f3bc3cdd7 100644
--- a/packages/calcite-components/conventions/README.md
+++ b/packages/calcite-components/conventions/README.md
@@ -419,15 +419,33 @@ For such cases, the following pattern will enable developers to create custom ch
 #### Parent component
 
 - Must provide a `customItemSelectors` property to allow querying for custom elements in addition to their expected children.
-- An interface for `HTML<ChildComponentItem>Element` must be created in the parent's `interfaces.d.ts` file, where the necessary child APIs must be extracted.
-  **`parent/interfaces.d.ts`**
-  ```ts
-  type ChildComponentLike = Pick<HTMLCalciteChildElement, "required" | "props" | "from" | "parent"> & HTMLElement;
-  ```
-  **`parent/parent.tsx`**
-  ```tsx
-    @Prop() selectedItem: HTMLChildComponentElement | ChildComponentLike;
-  ```
+- An interface for the class (used by custom item classes) and element (used by parent component APIs) must be created in the parent's `interfaces.d.ts` file, where the necessary child APIs must be extracted.
+
+**Example**
+
+**`parent/interfaces.d.ts`**
+
+```ts
+type ChildComponentLike = Pick<Components.CalciteChild, "required" | "props" | "from" | "parent">;
+type ChildComponentLikeElement = ChilcComponentLike & HTMLElement;
+```
+
+**`parent/parent.tsx`**
+
+```tsx
+  @Prop() selectedItem: HTMLChildComponentElement | ChildComponentLikeElement;
+```
+
+**`custom-item/custom-item.tsx`**
+
+```tsx
+export class CustomItem implements ChildComponentLike {
+  @Prop() required: boolean;
+  @Prop() props: string;
+  @Prop() from: number;
+  @Prop() parent: string;
+}
+```
 
 #### Custom child component
 
diff --git a/packages/calcite-components/src/components/flow/interfaces.ts b/packages/calcite-components/src/components/flow/interfaces.ts
index be33fbfcbb8..a4380c878ff 100644
--- a/packages/calcite-components/src/components/flow/interfaces.ts
+++ b/packages/calcite-components/src/components/flow/interfaces.ts
@@ -1,7 +1,5 @@
 export type FlowDirection = "advancing" | "retreating";
 
-export type FlowItemLikeElement = Pick<
-  HTMLCalciteFlowItemElement,
-  "beforeBack" | "menuOpen" | "setFocus" | "showBackButton"
-> &
-  HTMLElement;
+export type FlowItemLike = Pick<HTMLCalciteFlowItemElement, "beforeBack" | "menuOpen" | "setFocus" | "showBackButton">;
+
+export type FlowItemLikeElement = FlowItemLike & HTMLElement;

From 390f4b66904eed4b9d5acd138deee13faf8eab26 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Sat, 2 Sep 2023 00:48:19 -0700
Subject: [PATCH 2/3] improve component example

---
 .../calcite-components/conventions/README.md  | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md
index c2f3bc3cdd7..ade8934e509 100644
--- a/packages/calcite-components/conventions/README.md
+++ b/packages/calcite-components/conventions/README.md
@@ -440,10 +440,28 @@ type ChildComponentLikeElement = ChilcComponentLike & HTMLElement;
 
 ```tsx
 export class CustomItem implements ChildComponentLike {
+  private childComponentEl: HTMLChlidComponentLikeElement;
+
   @Prop() required: boolean;
   @Prop() props: string;
   @Prop() from: number;
-  @Prop() parent: string;
+
+  @Method() async parent(): Promise<string> {
+    await this.childComponentEl.parent();
+  }
+
+  render(): VNode {
+    return (
+      <Host>
+        <child-component
+          required={this.required}
+          props={this.props}
+          from={this.from}
+          ref={(el) => (this.childComponentEl = el)}
+        />
+      </Host>
+    );
+  }
 }
 ```
 

From 78b62cb513228157d3c38d564c4dca6feb61dafd Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 5 Sep 2023 12:16:42 -0700
Subject: [PATCH 3/3] fix typo

---
 packages/calcite-components/conventions/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md
index ade8934e509..3a92d3937ff 100644
--- a/packages/calcite-components/conventions/README.md
+++ b/packages/calcite-components/conventions/README.md
@@ -440,7 +440,7 @@ type ChildComponentLikeElement = ChilcComponentLike & HTMLElement;
 
 ```tsx
 export class CustomItem implements ChildComponentLike {
-  private childComponentEl: HTMLChlidComponentLikeElement;
+  private childComponentEl: HTMLChildComponentLikeElement;
 
   @Prop() required: boolean;
   @Prop() props: string;