[IMinchev64]

Closes #701

React samples: IgniteUI/igniteui-react-examples#1118
WC samples: IgniteUI/igniteui-wc-examples#1294
Blazor samples: IgniteUI/igniteui-blazor-examples#1321
Angular samples: IgniteUI/igniteui-angular-samples#4050

Checklist:

• check topic's TOC/menu and paragraph headings
• Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
• link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
• at the References section at the end of the topic add links to topics, samples, etc
• reference API documentation instead of adding a section with API

• use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
• use spell checker tool (VS Code, Grammarly, Microsoft Editor)
• add inline code blocks for the names of classes / tags / properties
• add language descriptor for the code blocks
• check if links function by running the check-api/mdx npm commands
• check if sample is working and fully visible in the topic
• check if sample is working and fully visible in the StackBlitz
• check if code blocks match the code in StackBlitz demo
• add or update meaningful llms.description metadata and run npm run check:llms-metadata

• follow SEO guidelines to fill topic's metadata (SEO guidelines)

• do not resolve requested changes (leave that to the reviewer)

[DiLazarova]

Test and Review for Chip - React / Chrome

1. Live Demo

Please use the Live Demo design from Figma File : Figma Design

2. Layout

Please, use for Indigo theme the Indigo Arrow Icon - indigo-arrow-upward. This is relevant for ALL EXAMPLES with indigo theme for both light and dark mode.

3. Outlined Chip

Please use the outline variants for this example

4. Size

Please double check the Chip background color for Material theme - Light Mode. Should be #E0E0E0

5. Section "Remove Chip" to be "Read only" with no interactions

No need for "restore chip" button

[Hristo313]

The action and remove parts and the documented start/end slots shipped in 7.3.1, not 7.4.0. See the 7.3.1 CHANGELOG entry (#2362), or compare components/chip/chip.js and chip.d.ts in the 7.3.0 and 7.3.1 packages. Also, 7.3.0 doesn't mark start/end as deprecated. It doesn't list them at all, and the deprecation note comes from a much older release.

[Hristo313]

This is a good place to say that Blazor 26.1 ships the older chip. Besides the missing Outlined, Locale, and ResourceStrings: base is the selection button, there are no action/remove parts, and the focus styles read --ig-chip-focus-outline-color / --ig-chip-focus-selected-outline-color. You can check it in staticwebassets/igniteui-webcomponents.*.bundle.js of the IgniteUI.Blazor 26.1.98 NuGet package.

[Hristo313]

Nit: ApiLink labels in shared prose render as-is on every platform, so WC/React/Angular readers see Variant (also Outlined L388, Disabled L472, Selectable/Selected L522, Removable L612) while the property is variant. The tables already use the right casing per platform.

[Hristo313]

In the chip that Blazor bundles, the remove key binding falls back to the host when the chip isn't removable. So on a selectable chip without Removable, Space doesn't toggle the selection, and Enter toggles it and also raises Remove. 7.3.1 fixed this ("Space did not toggle the selection, and igcRemove fired on chips that are not removable"). For Blazor, this table and the 2.1.1 row (L1173) hold only when the chip is also removable.

[Hristo313]

Not true for Blazor yet. The default select icon has aria-label="select chip", so it isn't hidden. The remove icon renders inside the selection button, so it's a nested control, not a separate one. Because of that, the accessible name includes the icon labels ("Chip remove chip"), which 7.3.1 fixed. Suggest WC/React-only bullets here, plus Blazor bullets or a Blazor known exception.

[Hristo313]

::part(base): change 7.4.0 to 7.3.1. Neither question applies to Blazor yet. Blazor still has the old part structure and still uses the outline variables, so the focus question (L1246) tells Blazor readers to rename to variables that don't exist. Suggest for="WebComponents, React" for both questions.

[ChronosSF]

This is sample-related but writing it here because it spans all platforms.

Can we have the remove button on the Remove Chip section actually do something. I clicked on it and was surprised it doesn't do anything. I know removing a chip is an application scenario but it doesn't mean we can't implement it for this sample.

Have it remove the chip and add a button in its place that lets you restore it or something simple liek that. You can also just restore it after 3 seconds with a toast counting down or something like that, doesn't have to be super complicated.