feat(chip): add outlined version

[adrianptrv]

Closes #591

Needs to be tested together with this theming PR: #592

The WC implementation is still a work in progress.

Description

Type of Change (check all that apply):

• New functionality
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Tests

Component(s) / Area(s) Affected:

Chip

How Has This Been Tested?

• Unit tests
• Manual testing

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR contains breaking changes

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

projects/igniteui-angular/chips/src/chips/chip.component.ts:238

• PR description says it closes issue #591, but the referenced issue is about an Avatar ripple overflow, while this PR changes Chip styling/API (outlined variant). Please update the PR description/linked issue(s) so the tracking is accurate (either link the correct chip-related issue or remove the close directive).

    /**
     * Sets/gets whether the chip is outlined.
     * Default value is `false`.
     *
     * @example
     * ```html
     * <igx-chip outlined></igx-chip>
     * ```
     */
    @Input({transform: booleanAttribute})
    @HostBinding('class.igx-chip--outlined')
    public outlined = false;

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

projects/igniteui-angular/chips/src/chips/chip.component.ts:236

• Decorator formatting is inconsistent with the rest of the file (missing spaces inside the @Input options object). Keeping the same spacing style improves readability and reduces noisy diffs.

    @Input({transform: booleanAttribute})

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (3)

projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss:941

• In the disabled + outlined indigo branch, the text color uses contrast-color($color: 'error', ...), which looks like a copy/paste mistake (it applies to primary/info/success/warning/danger chips). This makes disabled outlined chips depend on the error palette unexpectedly.

                    @if $variant == 'indigo' {
                        color: if($theme-variant == 'light', color($color: 'gray', $variant: 900), contrast-color($color: 'error', $variant: 900));
                        background: transparent;
                        opacity: .4;

projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss:33

• Same as above for focus-selected-shadow-color: without a fallback, older theme maps that only define focus-selected-outline-color could generate an invalid box-shadow value.

    $box-shadow-focus-selected: map.get((
        'material': null,
        'fluent': null,
        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-selected-shadow-color'),
        'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-shadow-color')

projects/igniteui-angular/chips/src/chips/chip.component.ts:236

• Formatting is inconsistent with the surrounding inputs (missing spaces inside the object literal).

    @Input({transform: booleanAttribute})

[sbayreva]

Material

The Outlined disabled chip for all variants ( Default, Primary, Info, Success, Warning and Danger) shares the same colours as in the Outlined Default Disabled chip:

Light Mode:
Background: Gray 200 with 30% opacity
Border Color: Gray 500 with 30% opacity
Text and Icon: Gray 500

Dark Mode:
Background: Gray 200 with 30% opacity
Border Color: Gray 500 with 30% opacity
Text and Icon: Gray 500

[sbayreva]

Indigo Light Mode

1. Outlined Default Selected Disabled chip should have the following colours:

Background color: transparent
Icon and Text color: Gray 900
Border color: Primary 400
Opacity for the whole component: 40%

Indigo Dark Mode

2. Outlined Default Selected Disabled chip should have the following colours:

Background color: transparent
Icon and Text color: White
Border color: Primary 400
Opacity for the whole component: 40%

[sbayreva]

All themes, Light and Dark Mode
Something that might be a bug coming from the browser itself is that when the component is in focused or hover state and the user selects "disabled" switch button, the disabled state preserves the Focus or Hover state and adds some kind of opacity to the whole component. The example below is from bootstrap but it is relevant for all themes:

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

Suppressed comments (4)

projects/igniteui-angular/chips/src/chips/chip.component.ts:236

• Keep decorator argument formatting consistent with the rest of the file (spaces after { and before }) for the new outlined input.

    @Input({transform: booleanAttribute})

projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss:27

• focus-shadow-color is only referenced here in the repo; if the theming token/CSS var name wasn’t introduced alongside this change, Bootstrap/Indigo chips may lose their focus ring. Please confirm the token exists (and is emitted by the theming layer) or keep backward compatibility with the previous token name.

        'material': null,
        'fluent': null,
        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-shadow-color'),
        'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-shadow-color')
    ), $variant);

projects/igniteui-angular/chips/src/chips/chip.component.ts:234

• The PR description indicates it closes IgniteUI/igniteui-theming#591 (avatar ripple behavior), but the code changes here appear focused on adding an outlined variant for chips. Please verify the linked issue/closure reference is correct (or update the PR metadata) so tracking remains accurate.

    /**
     * Sets/gets whether the chip is outlined.
     * Default value is `false`.
     *
     * @example
     * ```html
     * <igx-chip outlined></igx-chip>
     * ```

src/app/chips/chips.sample.html:53

• The new outlined chip sample block uses inconsistent indentation compared to the existing Angular Chip example above it, which makes the sample harder to read and may fail template formatting/lint expectations.

            @if (hasAvatar) {
              <igx-avatar
                igxPrefix
                class="chip-area-avatar"
                [shape]="'circle'"

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

Suppressed comments (3)

projects/igniteui-angular/chips/src/chips/chip.component.ts:229

• The PR description links to igniteui-theming issue #591 about igxAvatar ripple spreading across the page, but the changes here add an outlined Chip variant and update Chip styles/tests. This looks like a mismatch in what the PR claims to close/test against; please update the PR description/linked issue(s) (or adjust scope) so tracking and release notes are accurate.

    /**
     * Sets/gets whether the chip is outlined.
     * Default value is `false`.

projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss:27

• The focus ring token names were changed from focus-outline-color/focus-selected-outline-color to focus-shadow-color/focus-selected-shadow-color. This is inconsistent with other component themes (e.g. switch uses focus-outline-color for box-shadow in core/src/core/styles/components/switch/_switch-theme.scss:236,248,258) and may break existing theme overrides/migrations that rely on the old token names.

        'material': null,
        'fluent': null,
        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-shadow-color'),
        'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-shadow-color')
    ), $variant);

projects/igniteui-angular/chips/src/chips/chip.component.ts:235

• outlined is a new public @Input, but the chip README’s Inputs table doesn’t document it yet. Please add it to projects/igniteui-angular/chips/README.md so consumers discover the API and the breaking change is clearly communicated.

    /**
     * Sets/gets whether the chip is outlined.
     * Default value is `false`.
     *
     * @example
     * ```html
     * <igx-chip outlined></igx-chip>
     * ```
     */

[sbayreva]

All themes, Light and Dark Mode Something that might be a bug coming from the browser itself is that when the component is in focused or hover state and the user selects "disabled" switch button, the disabled state preserves the Focus or Hover state and adds some kind of opacity to the whole component. The example below is from bootstrap but it is relevant for all themes:

This is due to dev tools in the browser, the user will not be able to reach these states.