combobox add element name for list item child (#4348)

* feat(combobox): add element name for list item child

* feat(combobox): add changeset

Author: PixeledCode

.changeset/perfect-experts-cheat.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/combobox": patch
+"@twilio-paste/core": patch
+---
+
+[Combobx] add element name for Combobox List Item child

packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx

@@ -127,6 +127,7 @@ const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOpt
           backgroundColor={getBackgroundColor(highlighted, selected)}
           paddingY="space40"
           transition="background-color 150ms ease, color 150ms ease"
+          element={`${element}_LIST_ITEM_CHILD`}
           {...VariantStyles[variant]}
         >
           <Box as="span">

packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx

@@ -48,6 +48,7 @@ const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: b
             COMBOBOX_GROUPNAME: { fontFamily: "fontFamilyText", cursor: "help" },
             COMBOBOX_GROUPNAME_TEXT: { fontWeight: "fontWeightLight" },
             COMBOBOX_LIST_ITEM: { backgroundColor: "colorBackgroundPrimaryStrong" },
+            COMBOBOX_LIST_ITEM_CHILD: { backgroundColor: "colorBackgroundPrimary" },
             COMBOBOX_LIST_ITEM_TEXT: { color: "colorTextWeakest", fontWeight: "fontWeightBold" },
             HELP_TEXT: { color: "colorTextWarningStrong" },
             COMBOBOX_PREFIX: { backgroundColor: "colorBackgroundRequired", borderRadius: "borderRadius20" },
@@ -71,6 +72,7 @@ const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: b
             FOO_GROUPNAME: { fontFamily: "fontFamilyText", cursor: "help" },
             FOO_GROUPNAME_TEXT: { fontWeight: "fontWeightLight" },
             FOO_LIST_ITEM: { backgroundColor: "colorBackgroundPrimaryStrong" },
+            FOO_LIST_ITEM_CHILD: { backgroundColor: "colorBackgroundPrimary" },
             FOO_LIST_ITEM_TEXT: { color: "colorTextWeakest", fontWeight: "fontWeightBold" },
             HELP_TEXT: { color: "colorTextWarningStrong" },
             FOO_PREFIX: { backgroundColor: "colorBackgroundRequired", borderRadius: "borderRadius20" },