Fix icon prop styling in builder (#4578)

* Fix icon prop styling in builder

* fix lint

libs/apps/uesio/builder/bundle/componentpacks/main/src/components/collectionfieldpicker/collectionfieldpicker.tsx

@@ -2,6 +2,7 @@ import { definition, component, context, metadata, styles } from "@uesio/ui"
 import FieldPicker from "../mainwrapper/propertiespanel/wire/fieldpicker"
 import { useRef, useState } from "react"
 import { FullPath } from "../../api/path"
+import PopoutPanel from "../mainwrapper/propertiespanel/popoutpanel"
 
 type ComponentDefinition = {
   allowReferenceTraversal?: boolean
@@ -55,7 +56,6 @@ const CollectionFieldPicker: definition.UC<ComponentDefinition> = (props) => {
   const FieldWrapper = component.getUtility("uesio/io.fieldwrapper")
   const IconButton = component.getUtility("uesio/io.iconbutton")
   const TextField = component.getUtility("uesio/io.textfield")
-  const Popper = component.getUtility("uesio/io.popper")
   const anchorEl = useRef<HTMLDivElement>(null)
   const [showPopper, setShowPopper] = useState(false)
   const record = context.getRecord()
@@ -103,16 +103,7 @@ const CollectionFieldPicker: definition.UC<ComponentDefinition> = (props) => {
   return (
     <>
       {showPopper && anchorEl && (
-        <Popper
-          referenceEl={anchorEl.current}
-          context={context}
-          placement="right-start"
-          autoPlacement={["right-start"]}
-          offset={8}
-          parentSelector="#propertieswrapper"
-          matchHeight
-          portalId="builder-root"
-        >
+        <PopoutPanel referenceEl={anchorEl.current} context={context}>
           <FieldPicker
             allowReferenceTraversal={allowReferenceTraversal}
             allowMultiselect={allowMultiselect}
@@ -122,7 +113,7 @@ const CollectionFieldPicker: definition.UC<ComponentDefinition> = (props) => {
             onSelect={onSelect}
             isSelected={isSelected}
           />
-        </Popper>
+        </PopoutPanel>
       )}
       <FieldWrapper
         ref={anchorEl}

libs/apps/uesio/builder/bundle/componentpacks/main/src/components/iconprop/iconprop.tsx

@@ -5,24 +5,37 @@ import { FullPath } from "../../api/path"
 import { IconProperty } from "../../properties/componentproperty"
 import { materialIcons } from "../../icons/materialicons"
 import PropertiesWrapper from "../mainwrapper/propertiespanel/propertieswrapper"
+import PopoutPanel from "../mainwrapper/propertiespanel/popoutpanel"
 
 type Definition = {
   property: IconProperty
   path: FullPath
 }
 
 const StyleDefaults = Object.freeze({
-  icons: ["grid", "overflow-auto", "grid-cols-6", "p-4", "gap-4"],
+  icons: [
+    "grid",
+    "overflow-auto",
+    "grid-cols-6",
+    "p-4",
+    "gap-4",
+    "text-field_label_text_color",
+  ],
   iconfield: ["grid", "grid-cols-[1fr_min-content]", "items-center", "gap-2"],
-  iconpreview: ["bg-slate-100", "p-2", "rounded-full", "text-xs"],
+  iconpreview: [
+    "bg-field_bg_color",
+    "p-2",
+    "rounded-full",
+    "text-xs",
+    "leading-none",
+  ],
 })
 
 const IconProp: definition.UC<Definition> = (props) => {
   const { context, definition } = props
   const { path, property } = definition
 
   const TextField = component.getUtility("uesio/io.textfield")
-  const Popper = component.getUtility("uesio/io.popper")
   const IconButton = component.getUtility("uesio/io.iconbutton")
   const FieldWrapper = component.getUtility("uesio/io.fieldwrapper")
 
@@ -79,16 +92,7 @@ const IconProp: definition.UC<Definition> = (props) => {
       </FieldWrapper>
 
       {selected && anchorEl && (
-        <Popper
-          referenceEl={anchorEl}
-          matchHeight
-          context={context}
-          offset={8}
-          placement="right-start"
-          autoPlacement={["right-start"]}
-          parentSelector="#propertieswrapper"
-          portalId="builder-root"
-        >
+        <PopoutPanel referenceEl={anchorEl} context={context}>
           <PropertiesWrapper
             title="Select an Icon"
             path={iconPropPath}
@@ -110,7 +114,7 @@ const IconProp: definition.UC<Definition> = (props) => {
               ))}
             </div>
           </PropertiesWrapper>
-        </Popper>
+        </PopoutPanel>
       )}
     </div>
   )

libs/apps/uesio/builder/bundle/componentpacks/main/src/components/mainwrapper/propertiespanel/popoutpanel.tsx

@@ -0,0 +1,36 @@
+import { definition, component } from "@uesio/ui"
+
+interface PopoutPanelProps {
+  referenceEl: HTMLDivElement | null
+}
+
+const PopoutPanel: definition.UtilityComponent<PopoutPanelProps> = (props) => {
+  const { context, children, referenceEl } = props
+  const Popper = component.getUtility("uesio/io.popper")
+  return (
+    <Popper
+      referenceEl={referenceEl}
+      matchHeight
+      context={context}
+      offset={8}
+      placement="right-start"
+      autoPlacement={["right-start"]}
+      parentSelector="#propertieswrapper"
+      styleTokens={{
+        popper: [
+          "box-content",
+          "border-r-8",
+          "border-b-8",
+          "border-panel_divider_color",
+        ],
+      }}
+      portalId="builder-root"
+    >
+      {children}
+    </Popper>
+  )
+}
+
+PopoutPanel.displayName = "PopoutPanel"
+
+export default PopoutPanel

libs/apps/uesio/builder/bundle/componentpacks/main/src/components/mainwrapper/propertiespanel/tablecolumns.tsx

@@ -17,6 +17,7 @@ import { useRef, useState } from "react"
 import FieldPicker from "./wire/fieldpicker"
 import { FullPath } from "../../../api/path"
 import { getWirePath, getWireProperty } from "../../../api/wireapi"
+import PopoutPanel from "./popoutpanel"
 
 export type ColumnDefinition = {
   field?: string
@@ -119,7 +120,6 @@ const TableColumns: definition.UC = (props) => {
   const { context } = props
 
   const ListPropertyUtility = component.getUtility("uesio/builder.listproperty")
-  const Popper = component.getUtility("uesio/io.popper")
   // eslint-disable-next-line react-hooks/rules-of-hooks -- waiting on release of https://github.com/facebook/react/pull/31720
   const anchorEl = useRef<HTMLDivElement>(null)
   // eslint-disable-next-line react-hooks/rules-of-hooks -- waiting on release of https://github.com/facebook/react/pull/31720
@@ -254,16 +254,7 @@ const TableColumns: definition.UC = (props) => {
   return (
     <div ref={anchorEl}>
       {showPopper && anchorEl && (
-        <Popper
-          referenceEl={anchorEl.current}
-          context={context}
-          placement="right-start"
-          autoPlacement={["right-start"]}
-          offset={8}
-          parentSelector="#propertieswrapper"
-          matchHeight
-          portalId="builder-root"
-        >
+        <PopoutPanel referenceEl={anchorEl.current} context={context}>
           <FieldPicker
             context={context}
             baseCollectionKey={wireCollection}
@@ -277,7 +268,7 @@ const TableColumns: definition.UC = (props) => {
               fieldId: string,
             ) => isSelected(columns, path, fieldId)}
           />
-        </Popper>
+        </PopoutPanel>
       )}
       <ListPropertyUtility
         context={context}

libs/apps/uesio/builder/bundle/componentpacks/main/src/components/mainwrapper/propertiespanel/wire/fieldsproperties.tsx

@@ -9,6 +9,7 @@ import FieldPicker from "./fieldpicker"
 import { FullPath } from "../../../../api/path"
 import AggregateFieldPropTag from "./aggregatefieldproptag"
 import GroupByFieldPropTag from "./groupbyfieldproptag"
+import PopoutPanel from "../popoutpanel"
 
 type FieldsPropertiesDefinition = {
   viewOnly?: boolean
@@ -20,7 +21,6 @@ const FieldsProperties: definition.UC<FieldsPropertiesDefinition> = (props) => {
   const ScrollPanel = component.getUtility("uesio/io.scrollpanel")
   const Icon = component.getUtility("uesio/io.icon")
   const Button = component.getUtility("uesio/io.button")
-  const Popper = component.getUtility("uesio/io.popper")
   const { context, definition } = props
   const { viewOnly, aggregate, groupBy } = definition
   const isViewOnlyWire = viewOnly
@@ -54,16 +54,7 @@ const FieldsProperties: definition.UC<FieldsPropertiesDefinition> = (props) => {
   return (
     <>
       {showPopper && anchorEl && (
-        <Popper
-          referenceEl={anchorEl.current}
-          context={context}
-          placement="right-start"
-          autoPlacement={["right-start"]}
-          offset={8}
-          parentSelector="#propertieswrapper"
-          matchHeight
-          portalId="builder-root"
-        >
+        <PopoutPanel referenceEl={anchorEl.current} context={context}>
           <FieldPicker
             context={context}
             baseCollectionKey={collection}
@@ -73,7 +64,7 @@ const FieldsProperties: definition.UC<FieldsPropertiesDefinition> = (props) => {
             allowMultiselect={true}
             isSelected={isSelected}
           />
-        </Popper>
+        </PopoutPanel>
       )}
       <ScrollPanel
         ref={anchorEl}

libs/apps/uesio/builder/bundle/componentpacks/main/src/components/stylesproperty/stylesproperty.tsx

@@ -12,6 +12,7 @@ import { getComponentDef } from "../../api/stateapi"
 import { useEffect, useRef, useState } from "react"
 import PropertiesWrapper from "../mainwrapper/propertiespanel/propertieswrapper"
 import TailwindClassPicker from "../../utilities/tailwindclasspicker/tailwindclasspicker"
+import PopoutPanel from "../mainwrapper/propertiespanel/popoutpanel"
 
 type Props = {
   componentType: metadata.MetadataKey
@@ -35,7 +36,6 @@ const StylesProperty: definition.UC<Props> = (props) => {
   const PillBox = component.getUtility("uesio/io.pillbox")
   const Button = component.getUtility("uesio/io.button")
   const tokensPath = componentPath.addLocal("uesio.styleTokens")
-  const Popper = component.getUtility("uesio/io.popper")
   const anchorEl = useRef<HTMLDivElement>(null)
 
   const tokensByRegion = (get(context, tokensPath) || {}) as Record<
@@ -131,16 +131,7 @@ const StylesProperty: definition.UC<Props> = (props) => {
         )
       })}
       {showPopper && anchorEl && (
-        <Popper
-          referenceEl={anchorEl.current}
-          context={context}
-          placement="right-start"
-          autoPlacement={["right-start"]}
-          offset={8}
-          parentSelector="#propertieswrapper"
-          matchHeight
-          portalId="builder-root"
-        >
+        <PopoutPanel referenceEl={anchorEl.current} context={context}>
           <PropertiesWrapper
             context={context}
             path={parseFullPath(path)}
@@ -158,7 +149,7 @@ const StylesProperty: definition.UC<Props> = (props) => {
               parsedTokens={tailwindTokens}
             />
           </PropertiesWrapper>
-        </Popper>
+        </PopoutPanel>
       )}
     </div>
   )

libs/apps/uesio/builder/bundle/componentpacks/main/src/utilities/propnodetag/propnodetag.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useState } from "react"
 import { component, styles, definition } from "@uesio/ui"
+import PopoutPanel from "../../components/mainwrapper/propertiespanel/popoutpanel"
 
 type Props = {
   selected?: boolean
@@ -15,7 +16,6 @@ const StyleDefaults = Object.freeze({
 
 const PropNodeTag: definition.UtilityComponent<Props> = (props) => {
   const Tile = component.getUtility("uesio/io.tile")
-  const Popper = component.getUtility("uesio/io.popper")
   const classes = styles.useUtilityStyleTokens(StyleDefaults, props)
   const {
     onClick,
@@ -46,20 +46,9 @@ const PropNodeTag: definition.UtilityComponent<Props> = (props) => {
       )}
     >
       {selected && popperChildren && (
-        <Popper
-          referenceEl={anchorEl}
-          offset={8}
-          context={context}
-          placement="right-start"
-          autoPlacement={["right-start"]}
-          parentSelector="#propertieswrapper"
-          styleTokens={{
-            popper: ["h-full"],
-          }}
-          portalId="builder-root"
-        >
+        <PopoutPanel referenceEl={anchorEl} context={context}>
           {popperChildren}
-        </Popper>
+        </PopoutPanel>
       )}
       {props.children}
     </Tile>