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

Adds a new “outlined” visual variant for the Chip component by introducing an outlined API input, wiring the corresponding BEM modifier class, and extending the chip theme styles (including outlined-specific hover/focus/disabled rules). The PR also updates focus-ring styling to use shadow tokens and adds a unit test asserting the outlined class application.

Changes:

• Introduces @Input() outlined on IgxChipComponent and binds it to igx-chip--outlined.
• Adds the outlined modifier to the chip component SCSS and defines the outlined styling in the chip theme SCSS.
• Adds a unit test validating the outlined class is applied when the input is true.

Reviewed changes

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

File	Description
projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss	Adds outlined chip styling, adjusts focus/hover/disabled styling, and updates focus-shadow token usage.
projects/igniteui-angular/core/src/core/styles/components/chip/_chip-component.scss	Registers the outlined BEM modifier so the theme placeholder can be extended.
projects/igniteui-angular/chips/src/chips/chip.component.ts	Adds the public outlined input and host class binding.
projects/igniteui-angular/chips/src/chips/chip.spec.ts	Adds a unit test asserting igx-chip--outlined class application.

Comments suppressed due to low confidence (2)

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

• There is trailing whitespace on the blank line before the &%igx-chip--disabled block in the primary outlined styles. This can fail stylelint no-eol-whitespace.

            }
    
            &%igx-chip--disabled {

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

• There is trailing whitespace on the blank line between the disabled outlined base item styles and the disabled selected styles. This can fail stylelint rules like no-eol-whitespace.

            }
        
            %igx-chip__item--selected {

[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: