Update Admin Section types and add Number and EmptyState types - #4666
Merged
Conversation
Regenerated from admin-ui-components 2.21.2 with `pnpm build:definitions --configComponents=Section`. Adds the `subheading` property and the `primaryAction`, `secondaryActions`, `graphic`, `accessory`, and `supplemental` slots. Scoped to the per-component file, matching how Popover was exposed in 6ed2ff9: the generator also rewrites `components.d.ts` and `shared.d.ts` wholesale, and both still carry hand-written docs polish on top of output generated from 1.25.0, so regenerating them here would revert it. Assisted-By: devx/796ee9a4-a314-4344-89e7-0d9abf6b59d9
argyleink
approved these changes
Sep 1, 2026
Member
Author
|
/snapit |
Contributor
|
🫰✨ Thanks @kyledurand! Your snapshots have been published to npm. Test the snapshots by updating your "@shopify/ui-extensions": "0.0.0-snapshot-20260902134640",
"@shopify/ui-extensions-tester": "0.0.0-snapshot-20260902134640" |
Regenerated from admin-ui-components 2.21.2 with `pnpm build:definitions --configComponents=Number,EmptyState`. Both components are already in the Polaris 3P allowlist (`UI_EXTENSIONS_COMPONENTS` in `uiExtensionsBundlePlugin.js`) but had no type definitions on any surface, so extension authors writing `s-number` or `s-empty-state` got nothing. `Number` declares `tone`, `color`, `fontSize`, and `fontWeight`, plus the `dir`, `accessibilityVisibility`, `id`, `lang`, and `children` it takes from `TextProps`. It has no slots. `EmptyState` declares the `heading` property and the `graphic`, `subheading`, `primaryAction`, and `secondaryActions` slots. Scoped to the per-component files, matching Section in 96cf66d: the generator also rewrites `components.d.ts` and `shared.d.ts` wholesale, and both still carry hand-written docs polish on top of output generated from 1.25.0, so regenerating them here would revert it. Neither component is listed in `admin/components/StandardComponents.ts`, so this ships the types without adding either to the standard admin extension component set. Exposing them is a separate change, the shape 6ed2ff9 used for Popover. Assisted-By: devx/d40aa885-861c-43ba-a99a-f234ceba6551
The per-component `.d.ts` files under `surfaces/admin/components/` are what
3P developers actually import (`./admin/components/*` maps to
`build/ts/surfaces/admin/components/*.d.ts` in package.json exports), and they
had drifted a long way from the Polaris implementation.
Roughly 35 components gain properties that already existed at runtime but were
absent from the types. The worst case was `DatePicker`, which was missing its
entire prop surface -- `allow`, `allowDays`, `defaultValue`, `defaultView`,
`disallow`, `disallowDays`, `value`, `view` and `visibleMonths` were all
untyped. Others include typography on `Text` / `Paragraph` / `Heading`,
`Banner`'s `heading` and `dismissible`, `Button`'s `variant`, `ColorPicker`'s
`alpha` / `value` / `defaultValue`, and `Modal`'s `heading` and `padding`.
Two things in this diff are worth a reviewer's attention:
1. `click({sourceEvent}?: ClickOptions)` is removed from 55 components, along
with the `ClickOptions` and `ActivationEventEsque` interfaces. This is not
accidental: the method is tagged `@private` in `PreactCustomElement.tsx`,
and the definitions generator strips `@private` members
(`mergeExternalDtsPlugin.js`). The checked-in files predate that behavior,
so they have been advertising a private API. The standard DOM
`element.click()` is untouched; only the single-argument overload goes.
2. `Thumbnail` and `Image` look like they lose `alt`, `src` and the border
properties. They do not -- those are still supplied by
`extends Required<Pick<...>>`; the regeneration just stops redeclaring them
inline.
`components.d.ts` and `components/shared.d.ts` are deliberately left alone.
`components.d.ts` feeds the shopify.dev docs build rather than the published
types, and no per-component file imports from `shared.d.ts`, so neither is
needed for this change and regenerating them would revert hand-written
documentation.
Generated with the fixed definitions generator (shop/world#2034910 and
shop/world#2035692) and formatted with the repo's prettier config.
`yarn type-check` passes.
Assisted-By: devx/796ee9a4-a314-4344-89e7-0d9abf6b59d9
kyledurand
commented
Sep 2, 2026
kyledurand
commented
Sep 2, 2026
Fixes the `lint` and `test` failures on the previous commit. Both came from the same mistake: I ran the generator against a scratch clone that had no `node_modules`, so its final `yarn lint --fix` step died with exit 127 and I treated that as harmless. It is not harmless -- it is part of the pipeline. `test`: 65 of the 66 per-component files import `PreactCustomElement` from `./shared.d.ts`, and I had deliberately excluded `shared.d.ts` from the previous commit. Without it the element classes no longer resolve a base that extends `HTMLElement`, so every DOM member disappeared from them: SelectionAction.test.ts: Property 'textContent' does not exist on type 'Text' SelectionAction.test.ts: Property 'getAttribute' does not exist on type 'AdminAction' I had "verified" that no file imported it with a grep for `from './shared'`, which cannot match the real specifier `from './shared.d.ts'`. `yarn type-check` did not catch it either -- the breakage only shows up at a use site, which is why the example extension's `tsc --noEmit` was the thing that failed. `lint`: the generator emits a fixed block of `eslint-disable` comments in every file regardless of whether each rule is triggered there, and the repo treats unused disables as errors (`eslint-comments/no-unused-disable`), plus some emitted `type` aliases that should be `interface`. 577 errors. The generator's own `yarn lint --fix` step resolves all of them; this commit is that step, run in a checkout that actually has dependencies installed. Verified locally against every step the `test` and `lint` jobs run: yarn lint (clean cache), yarn type-check, yarn build, examples/testing/admin-testing-example npm run typecheck && npm test, packages/ui-extensions-tester typecheck and tests, and package:publint. Assisted-By: devx/796ee9a4-a314-4344-89e7-0d9abf6b59d9
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Regenerates the Admin
Sectiontype definitions fromadmin-ui-components2.21.2, picking up the header work that has landed in Polaris since these types were last generated (1.25.0), and adds the missingNumberandEmptyStatedefinitions from the same generator run.SectionNew API surface for
s-section:subheadingprimaryActionsecondaryActionsButtonGroupholding an action plus an icon-only Menu activator renders as one segmented group.graphicBadgewithsize="large"; not rendered without aheading.accessorysupplementalNumberandEmptyState(net new)Both are in the Polaris 3P allowlist (
UI_EXTENSIONS_COMPONENTSinadmin-ui-components/lib/uiExtensionsBundlePlugin.js) but had never been generated onto any definition surface, so an extension author writings-numberors-empty-stategot no types at all.s-number— no slots:tone'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'caution' | 'critical''auto'.color'base' | 'subdued''base'.fontSize'auto' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100''auto'; also applies matching line-height and letter-spacing.fontWeight'auto' | 'base' | 'medium' | 'semibold' | 'bold''auto'.dir,accessibilityVisibilityTextPropsRequired<Pick<TextProps, …>>.id,lang,childrenTextPropss-empty-state:headinggraphicImageorIcon, directly or as the only child of a wrapper.subheadingTextandLink.primaryActionButtonwithvariant="primary".secondaryActionsButtonwithvariant="secondary"or"auto"— despite the plural name, only one renders.How
# in libraries/javascript/polaris (shop/world) pnpm build:definitions --configComponents=Section pnpm build:definitions --configComponents=Number,EmptyStateNote for anyone reproducing this: there is no
--before--configComponents. Under pnpm 11 the extra--makes rollup treat the flag as a positional path.documentation/extensions-architecture.mdin the Polaris zone is stale on this.Scope note
The generator also rewrites
surfaces/admin/components.d.tsandsurfaces/admin/components/shared.d.tsin full. Both are still generated from 1.25.0 and have since accumulated hand-written docs polish (Description improvements,Use 'web components' terminology,Fix broken web-components doc links). Regenerating them here would be +7.9k/-2.5k and +4.2k/-1.3k and would revert all of that, so this PR is scoped to the per-component files — the same shape as 6ed2ff9, which exposed Popover.Bringing those two files back in sync with Polaris is real work that deserves its own PR.
Follow-ups
docs/surfaces/admin/build-docs.mjs:51generates fromsrc/surfaces/admin/components.d.ts, not from the per-component file. That aggregate still hasSectionSlots(@publicDocs) declaring onlychildren, andRequiredSectionPropslistingprimaryAction/secondaryActionsbut notsubheading,graphic,accessory, orsupplemental— so the docs continue to describe Section at 1.25.0 untilcomponents.d.tsis regenerated.NumberandEmptyStateare absent from that aggregate entirely, so they get no docs page from this PR either.NumberandEmptyStateare not inadmin/components/StandardComponents.ts. This PR ships their types; it does not add either to the standard admin extension component set.Sectionwas already there, so it needs no component-set change. Exposing the two new ones is a deliberate separate decision, the shape 6ed2ff9 used for Popover.Section.d.ts,Number.d.ts, andEmptyState.d.tsimportPreactCustomElementandRenderImplfrom./shared.d.ts, which does not export them;Number.d.tsandEmptyState.d.tsadditionally importTextPropsandEmptyStateProps$1, whichshared.d.tsonly has as unexportedTextProps$1/EmptyStateProps$1. None of this errors becauseskipLibCheck: true(@shopify/typescript-configs/base.json), andPopover.d.tsalready ships the identical dangling imports. It resolves whenshared.d.tsis regenerated.s-section,s-number, ands-empty-stateneed the matching properties and slots. That change can only land after this merges and admin-web bumps@shopify/ui-extensions-nextpast2026.10.0-rc.8.Testing
prettier --checkclean on the changed files.Sectionis already inStandardComponents.ts, so no component-set change is needed.