topic-deprecation-removals#119
Open
coryrylan wants to merge 4 commits into
Open
Conversation
Signed-off-by: Cory Rylan <[email protected]>
Signed-off-by: Cory Rylan <[email protected]>
Signed-off-by: Cory Rylan <[email protected]>
Signed-off-by: Cory Rylan <[email protected]>
📝 WalkthroughWalkthroughThis PR removes multiple deprecated APIs, types, slot patterns, and CSS variables from the component library and updates ESLint rules to provide better deprecation coverage. Changes span core components (Accordion, Card, Progress-Ring, Badge, Toast, Button, Page-Panel), the lint plugin, and site documentation. ChangesType System and Core API Cleanup
Slot-Based Component Pattern Modernization
Property and Attribute Removals
CSS Custom Properties and Selector Modernization
Panel Component Deprecation Guidance
ESLint Rule Enhancements
Documentation and Migration Guide Updates
🎯 4 (Complex) | ⏱️ ~60 minutes Possibly Related PRs
Suggested Labels
Suggested Reviewers
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
|
coryrylan
commented
Jun 4, 2026
Collaborator
Author
There was a problem hiding this comment.
working on updating
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/core/src/accordion/accordion.ts`:
- Around line 161-163: The current getter get `#hasSuffixContent` checks the whole
element for [slot="suffix"], causing nested descendants to incorrectly set
has-suffix; instead, first locate the header container (element with
slot="header") and only search within that node for [slot="suffix"]. Update get
`#hasSuffixContent` to: find const header = this.querySelector('[slot="header"]')
(or return false if missing) and then check
Array.from(header.querySelectorAll('[slot="suffix"]')).length > 0 so only suffix
children in the header affect the result.
In `@projects/lint/src/eslint/rules/no-deprecated-css-variable.ts`:
- Around line 151-155: The rule currently passes the entire <style> block text
as the selector context (StyleTag handler uses context.sourceCode.getText(node)
and calls findDeprecatedCssVariables(text, text) and
getDeprecatedCssVariable(name, text), which causes selector-scoped variables to
be matched against unrelated selectors in the same stylesheet; fix by parsing
the stylesheet so you call findDeprecatedCssVariables and
getDeprecatedCssVariable with the specific selector text (or the single rule's
selector string) instead of the full stylesheet: in the StyleTag(HtmlTagNode)
handler iterate CSS rules/selectors, extract each rule's selector string and the
corresponding rule body, then call findDeprecatedCssVariables(selectorText,
ruleBodyOrSelectorText) and getDeprecatedCssVariable(name, selectorText) so
scoped names only match within their selector context.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: af357018-7983-4d95-a553-8f0de3af2542
⛔ Files ignored due to path filters (2)
projects/core/.visual/accordion.dark.pngis excluded by!**/*.pngprojects/core/.visual/accordion.pngis excluded by!**/*.png
📒 Files selected for processing (76)
projects/core/build/icons.jsprojects/core/src/accordion/accordion-header.cssprojects/core/src/accordion/accordion.cssprojects/core/src/accordion/accordion.examples.tsprojects/core/src/accordion/accordion.snippets.htmlprojects/core/src/accordion/accordion.test.tsprojects/core/src/accordion/accordion.test.visual.tsprojects/core/src/accordion/accordion.tsprojects/core/src/alert/alert.cssprojects/core/src/badge/badge.cssprojects/core/src/badge/badge.test.tsprojects/core/src/badge/badge.tsprojects/core/src/breadcrumb/breadcrumb.cssprojects/core/src/breadcrumb/breadcrumb.tsprojects/core/src/button/button.cssprojects/core/src/button/button.tsprojects/core/src/card/card-header.cssprojects/core/src/card/card.snippets.htmlprojects/core/src/card/card.test.tsprojects/core/src/card/card.tsprojects/core/src/combobox/combobox.test.tsprojects/core/src/combobox/combobox.tsprojects/core/src/copy-button/copy-button.test.tsprojects/core/src/copy-button/copy-button.tsprojects/core/src/icon-button/icon-button.cssprojects/core/src/icon/icons.tsprojects/core/src/internal/types/index.tsprojects/core/src/menu/menu.examples.tsprojects/core/src/page/page-panel/page-panel.global.cssprojects/core/src/page/page-panel/page-panel.test.tsprojects/core/src/page/page-panel/page-panel.test.visual.tsprojects/core/src/page/page-panel/page-panel.tsprojects/core/src/page/page.test.visual.tsprojects/core/src/panel/panel-footer.test.tsprojects/core/src/panel/panel-header.test.tsprojects/core/src/panel/panel.examples.tsprojects/core/src/panel/panel.test.axe.tsprojects/core/src/panel/panel.test.lighthouse.tsprojects/core/src/panel/panel.test.ssr.tsprojects/core/src/panel/panel.test.tsprojects/core/src/panel/panel.tsprojects/core/src/progress-ring/progress-ring.test.tsprojects/core/src/progress-ring/progress-ring.tsprojects/core/src/tabs/tabs-item.cssprojects/core/src/tabs/tabs.cssprojects/core/src/tabs/tabs.global.cssprojects/core/src/tabs/tabs.test.visual.tsprojects/core/src/tabs/tabs.tsprojects/core/src/toast/toast.test.tsprojects/core/src/toast/toast.tsprojects/core/src/toggletip/toggletip.examples.tsprojects/core/src/toggletip/toggletip.test.axe.tsprojects/lint/README.mdprojects/lint/src/eslint/configs/html.tsprojects/lint/src/eslint/internals/attributes.tsprojects/lint/src/eslint/rules/no-deprecated-attributes.test.tsprojects/lint/src/eslint/rules/no-deprecated-attributes.tsprojects/lint/src/eslint/rules/no-deprecated-css-variable.test.tsprojects/lint/src/eslint/rules/no-deprecated-css-variable.tsprojects/lint/src/eslint/rules/no-deprecated-global-attribute-value.test.tsprojects/lint/src/eslint/rules/no-deprecated-global-attribute-value.tsprojects/lint/src/eslint/rules/no-deprecated-popover-attributes.test.tsprojects/lint/src/eslint/rules/no-deprecated-popover-attributes.tsprojects/lint/src/eslint/rules/no-deprecated-slots.test.tsprojects/lint/src/eslint/rules/no-deprecated-tags.test.tsprojects/lint/src/eslint/rules/no-deprecated-tags.tsprojects/lint/src/eslint/rules/no-unexpected-attribute-value.test.tsprojects/lint/src/eslint/rules/no-unexpected-attribute-value.tsprojects/lint/src/eslint/rules/no-unexpected-global-attribute-value.test.tsprojects/site/src/_11ty/layouts/common.jsprojects/site/src/docs/about/migration.mdprojects/site/src/docs/elements/progress-ring.mdprojects/site/src/docs/integrations/lit.mdprojects/site/src/docs/lint/index.mdprojects/styles/src/layout.cssprojects/styles/src/typography.css
💤 Files with no reviewable changes (18)
- projects/core/src/tabs/tabs.global.css
- projects/core/src/icon/icons.ts
- projects/core/src/card/card-header.css
- projects/site/src/_11ty/layouts/common.js
- projects/styles/src/typography.css
- projects/core/src/tabs/tabs-item.css
- projects/core/src/tabs/tabs.ts
- projects/core/src/page/page-panel/page-panel.global.css
- projects/core/src/breadcrumb/breadcrumb.ts
- projects/core/src/card/card.ts
- projects/core/src/icon-button/icon-button.css
- projects/core/build/icons.js
- projects/core/src/accordion/accordion-header.css
- projects/core/src/internal/types/index.ts
- projects/core/src/combobox/combobox.test.ts
- projects/core/src/button/button.css
- projects/core/src/tabs/tabs.css
- projects/core/src/badge/badge.css
Comment on lines
+161
to
163
| get #hasSuffixContent(): boolean { | ||
| return !!(this?.querySelectorAll ? Array.from(this?.querySelectorAll<HTMLSlotElement>('[slot="suffix"]')) : []) | ||
| .length; |
There was a problem hiding this comment.
Scope suffix detection to header content only.
Line 162 scans the entire light DOM for [slot="suffix"], so nested content can accidentally trigger has-suffix and change header layout/caret direction. Limit detection to suffix children within the header slot content.
Proposed fix
get `#hasSuffixContent`(): boolean {
- return !!(this?.querySelectorAll ? Array.from(this?.querySelectorAll<HTMLSlotElement>('[slot="suffix"]')) : [])
- .length;
+ const header = this.querySelector(AccordionHeader.metadata.tag);
+ if (!header) return false;
+ return header.querySelectorAll(':scope > [slot="suffix"]').length > 0;
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@projects/core/src/accordion/accordion.ts` around lines 161 - 163, The current
getter get `#hasSuffixContent` checks the whole element for [slot="suffix"],
causing nested descendants to incorrectly set has-suffix; instead, first locate
the header container (element with slot="header") and only search within that
node for [slot="suffix"]. Update get `#hasSuffixContent` to: find const header =
this.querySelector('[slot="header"]') (or return false if missing) and then
check Array.from(header.querySelectorAll('[slot="suffix"]')).length > 0 so only
suffix children in the header affect the result.
Comment on lines
+151
to
+155
| StyleTag(node: HtmlTagNode) { | ||
| const text = context.sourceCode.getText(node as unknown as Rule.Node); | ||
| findDeprecatedCssVariables(text, text).forEach(name => { | ||
| const config = getDeprecatedCssVariable(name, text); | ||
| if (!config) return; |
There was a problem hiding this comment.
Selector-scoped checks in <style> blocks use the entire stylesheet as the selector context.
Line 153 and Line 154 pass the full <style> text into selector matching. That makes scoped variables (for example tabs-only --border-*) report on unrelated selectors when the same block also contains nve-tabs anywhere.
Proposed fix
+function findDeprecatedCssVariablesByBlock(cssText: string) {
+ const matches: Array<{ name: string; selector: string }> = [];
+ for (const match of cssText.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+ const selector = match[1]?.trim() ?? '';
+ const body = match[2] ?? '';
+ for (const name of findDeprecatedCssVariables(body, selector)) {
+ matches.push({ name, selector });
+ }
+ }
+ return matches;
+}
+
StyleTag(node: HtmlTagNode) {
const text = context.sourceCode.getText(node as unknown as Rule.Node);
- findDeprecatedCssVariables(text, text).forEach(name => {
- const config = getDeprecatedCssVariable(name, text);
+ findDeprecatedCssVariablesByBlock(text).forEach(({ name, selector }) => {
+ const config = getDeprecatedCssVariable(name, selector);
if (!config) return;
context.report({
messageId: 'deprecated-css-var',
node: node as unknown as Rule.Node,
data: { value: name, alternative: config.alternative }
});
});
},🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@projects/lint/src/eslint/rules/no-deprecated-css-variable.ts` around lines
151 - 155, The rule currently passes the entire <style> block text as the
selector context (StyleTag handler uses context.sourceCode.getText(node) and
calls findDeprecatedCssVariables(text, text) and getDeprecatedCssVariable(name,
text), which causes selector-scoped variables to be matched against unrelated
selectors in the same stylesheet; fix by parsing the stylesheet so you call
findDeprecatedCssVariables and getDeprecatedCssVariable with the specific
selector text (or the single rule's selector string) instead of the full
stylesheet: in the StyleTag(HtmlTagNode) handler iterate CSS rules/selectors,
extract each rule's selector string and the corresponding rule body, then call
findDeprecatedCssVariables(selectorText, ruleBodyOrSelectorText) and
getDeprecatedCssVariable(name, selectorText) so scoped names only match within
their selector context.
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
1 participant
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.
Summary by CodeRabbit
Release Notes
Bug Fixes
Removed Features
notagsproperty; usetag-layout="hidden"instead.prominence="muted"instead.Updated Behavior