diff --git a/.changeset/perf-selectpanel-has-selector.md b/.changeset/perf-selectpanel-has-selector.md new file mode 100644 index 00000000000..b7992e4c6ff --- /dev/null +++ b/.changeset/perf-selectpanel-has-selector.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +perf(SelectPanel): Document acceptable :has() selector usage + +Added documentation explaining why the :has(input:placeholder-shown) selector is acceptable. diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css b/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css index 7689c6c9261..3ea6ebf6005 100644 --- a/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css +++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css @@ -112,7 +112,12 @@ .TextInput { padding-left: var(--base-size-8) !important; - /* stylelint-disable-next-line selector-class-pattern */ + /* + * NOTE: Uses descendant :has() - input is not direct child of TextInputWrapper + * due to TextInputInnerVisualSlot wrappers. This is acceptable performance + * as the search is scoped to this single element's subtree. + */ + /* stylelint-disable-next-line selector-class-pattern -- global class from TextInput */ &:has(input:placeholder-shown) :global(.TextInput-action) { display: none; }