Note: All references to documentation refer to the following version: 2024-04, however, as far as I can tell all versions of the documentation produce similar results.
As I am building a "Product Detail Configuration Extension" and attempting to put together something I would regard as useable for a extension, I am struggling to find Components that are "compatible" with the extension target. I have now tried almost all of the components, and only 12 seem to be available, as in the console I see "Unsupported component: x". Here is an example for "ProgressIndicator" - something for good UX I would deem important:
Digging into the console errors to see what that's about, it appears from the UI there's a configuration that says only the following components are valid:
Going to the documentation seems to suggest you can only use "ProductConfigurationComponents", but clicking it leads to an infinite tree which just repeats the type def:
But then when looking at the exports from the admin surface, everything is exported: https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions-react/src/surfaces/admin/components.ts, this obfuscates the ability to understand in the code there. For example, Progress indicators for loading data? In my extension, I need to make two calls; once to retrieve the metafield value and once to request product information for, in my case, the bundle. This seems like important user feedback for good UX? In lieu of that, a Skeleton, or a loading experience similar to the rest of the admin UI? At the moment my component looks broken until it "flashes" into life).
The documentation suggests to look at the tutorial which points you to the bundle configuration extension, that documentation also seems to suggest "just pull the code and it works" and contains the following image:
[Image Removed for Brevity]
As far as I can tell, there is no way to currently build this UI using the Admin components which are permitted for that extension type that the documentation links to, but I can't help but feel I'm missing something?
Update: I didn't notice the gap on the edge of the grey dividers, and I can see this is possible. No bleed components are not possible as far as I can tell. Please excuse the omission.
If I understanding correctly, when you're building the admin ui extension currently in this specific case, the only way a developer can understand what components are working is to inspect the DOM? Even then, I am not sure despite reading all documentation I can find, and all versions, I feel like I'm maybe missing something.
Looking into it is not clear to me whether the documentation is not up to date, whether I have a misconfiguration in my extension settings, or something else. I am not sure how, and there's no example code, I could even achieve this basic layout. Hoping I'm missing something, but if not I do think the Documentation needs a better overhaul, or templates need to be updated to make this very clear - even a comment in the generated template files would make it very clear (but not solve the UI/UX issues, unfortunately).
Steps to reproduce the behavior:
Create a admin ui configuration extension for above mentioned target.
Replace the component return with just "" and import from "@shopify/ui-extensions-react/admin"
Test the component and observe the console error.
Expected behavior
Documentation have a clear example, or at least a sample repository clearly sign posted, to understand what components are available, or how to create shopify-class experiences
Admin UI Components were more aligned to their Polaris components, even if a little more restricted, so that the developer upskilling when coming from Polaris doesn't feel like you're using entirely different components
Please list the package(s) involved in the issue, and include the version you are using
Describe the bug
Note: All references to documentation refer to the following version: 2024-04, however, as far as I can tell all versions of the documentation produce similar results.
As I am building a "Product Detail Configuration Extension" and attempting to put together something I would regard as useable for a extension, I am struggling to find Components that are "compatible" with the extension target. I have now tried almost all of the components, and only 12 seem to be available, as in the console I see "Unsupported component: x". Here is an example for "ProgressIndicator" - something for good UX I would deem important:
Digging into the console errors to see what that's about, it appears from the UI there's a configuration that says only the following components are valid:
Going to the documentation seems to suggest you can only use "ProductConfigurationComponents", but clicking it leads to an infinite tree which just repeats the type def:
But then when looking at the exports from the admin surface, everything is exported: https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions-react/src/surfaces/admin/components.ts, this obfuscates the ability to understand in the code there. For example, Progress indicators for loading data? In my extension, I need to make two calls; once to retrieve the metafield value and once to request product information for, in my case, the bundle. This seems like important user feedback for good UX? In lieu of that, a Skeleton, or a loading experience similar to the rest of the admin UI? At the moment my component looks broken until it "flashes" into life).
The documentation suggests to look at the tutorial which points you to the bundle configuration extension, that documentation also seems to suggest "just pull the code and it works" and contains the following image:[Image Removed for Brevity]
As far as I can tell, there is no way to currently build this UI using the Admin components which are permitted for that extension type that the documentation links to, but I can't help but feel I'm missing something?Update: I didn't notice the gap on the edge of the grey dividers, and I can see this is possible. No bleed components are not possible as far as I can tell. Please excuse the omission.
If I understanding correctly, when you're building the admin ui extension currently in this specific case, the only way a developer can understand what components are working is to inspect the DOM? Even then, I am not sure despite reading all documentation I can find, and all versions, I feel like I'm maybe missing something.
Looking into it is not clear to me whether the documentation is not up to date, whether I have a misconfiguration in my extension settings, or something else. I am not sure how, and there's no example code, I could even achieve this basic layout. Hoping I'm missing something, but if not I do think the Documentation needs a better overhaul, or templates need to be updated to make this very clear - even a comment in the generated template files would make it very clear (but not solve the UI/UX issues, unfortunately).
Steps to reproduce the behavior:
Expected behavior
Screenshots
Inlined.
Additional context