From e36f8da69b3946d30288707972553058165de163 Mon Sep 17 00:00:00 2001
From: Sam Duncan <samkduncan@gmail.com>
Date: Thu, 17 Oct 2024 13:19:04 -0500
Subject: [PATCH] [PLAY-1592] Show htmlOptions as a Global Prop  (#3755)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PLAY-1592](https://runway.powerhrg.com/backlog_items/PLAY-1592)

As a Playbook user, I want the htmlOptions prop to display in Playbook
as a global prop instead of a kit prop (which is false) so that there is
no confusion to what type of prop htmlOptions is.

**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to any kit page
2. Ensure you are in the react tab
3. Scroll down to the available props list
4. The "htmlOptions" prop should not appear under the kit props list,
but will show under the global props list.


#### Checklist:
- [X] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [X] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.

Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com>
---
 .../components/AvailableProps/globalPropsValues.ts        | 5 +++++
 .../app/javascript/components/AvailableProps/index.tsx    | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts b/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
index 949a2f54be..92a30ed8b8 100644
--- a/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
+++ b/playbook-website/app/javascript/components/AvailableProps/globalPropsValues.ts
@@ -78,6 +78,11 @@ const globalPropsValues = [
     type: "union",
     values: '"wrap" | "nowrap" | "wrapReverse"'
   },
+  {
+    prop: "htmlOptions",
+    type: "object",
+    values: "{ [key: string]: string | number | boolean | (() => void); }"
+  },
   {
     prop: "id",
     type: "string",
diff --git a/playbook-website/app/javascript/components/AvailableProps/index.tsx b/playbook-website/app/javascript/components/AvailableProps/index.tsx
index f37ee20812..daea96b73f 100644
--- a/playbook-website/app/javascript/components/AvailableProps/index.tsx
+++ b/playbook-website/app/javascript/components/AvailableProps/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Card, Nav, SectionSeparator, NavItem } from 'playbook-ui'
 import GlobalProps from './globalProps'
+import GlobalPropsValues from './globalPropsValues'
 import KitProps from './kitProps'
 
 type AvailablePropsType = {
@@ -10,8 +11,15 @@ type AvailablePropsType = {
 
 const AvailableProps = ({ availableProps, darkMode }: AvailablePropsType) => {
   const props = JSON.parse(availableProps)
+  const globalPropsNames = GlobalPropsValues.map(prop => prop.prop)
   const [showKitTab, setShowKitTab] = useState(true)
 
+  for(var propName in props) {
+    if(globalPropsNames.includes(propName)) {
+      delete props[propName]
+    }
+  }
+
   return (
     <>
       <Card padding="none" dark={darkMode}>