feat(chip): enhance component's interactivity states

[aPreciado88]

Related Issue: #10005

Summary

• Update chip's interactivity states for chip-group's with selection modes.

• appearance=“solid” kind=“neutral”:

  • Update hover background-color to --calcite-color-foreground-3.
  • Update active background-color to --calcite-color-border-3.

• appearance=“solid” kind=“inverse”:

  • Update hover background-color to --calcite-color-inverse-hover.
  • Update active background-color to --calcite-color-inverse-press.

• appearance=“solid” kind=“brand”:

  • Update hover background-color to --calcite-color-brand-hover.
  • Update active background-color to --calcite-color-brand-press.

• appearance=“outline-fill” kind=“neutral”:

  • Update hover background-color to --calcite-color-foreground-2.
  • Update hover border-color to --calcite-color-border-input.
  • Update active background-color to --calcite-color-foreground-3.
  • Update active border-color to --calcite-color-text-3.

• appearance=“outline-fill” kind=“inverse | brand”:

  • Update hover background-color to --calcite-color-foreground-2.
  • Update active background-color to --calcite-color-foreground-3.

• appearance=“outline” kind=“neutral”:

  • Update hover background-color to --calcite-color-transparent-hover.
  • Update hover border-color to --calcite-color-border-input.
  • Update active background-color to --calcite-color-transparent-press.
  • Update active border-color to --calcite-color-text-3.

• appearance=“outline” kind=“inverse | brand”:

  • Update hover background-color to --calcite-color-transparent-hover.
  • Update active background-color to --calcite-color-transparent-press.

[eriklharper]

Didn't see any existing stories that would capture these new visual changes. Could you create a new story that shows all of these chip combinations so we can visually capture them with Chromatic? If you make a new one, you can add the _TestOnly suffix to the story name since it would just be for visual testing.

[aPreciado88]

@eriklharper I added stories to cover the new visual changes.

[eriklharper]

Hey @aPreciado88 ! Just saw this come in: #9085 Could you drop the _TestOnly suffix from the new story name? Thanks!

[aPreciado88]

@ashetland @SkyeSeitz Can you please take a look? 👀

[jcfranco]

🚀

[jcfranco]

Would internal CSS props help simplify this?

.container {
  &.selectable {
    &:active {
      background-color: var(--calcite-internal-chip-selectable-active-background-color);
      border-color: var(--calcite-internal-chip-selectable-active-border-color);
    }
    &:hover {
      background-color: var(--calcite-internal-chip-selectable-hover-background-color);
      border-color: var(--calcite-internal-chip-selectable-hover-border-color);
    }
}

:host([appearance="solid"]) {
  &:host([kind="neutral"]) {
    // using illustrative names
    --calcite-internal-chip-selectable-active-background-color: var(--calcite-color-a);
    --calcite-internal-chip-selectable-active-border-color: transparent;
    --calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-c);
    --calcite-internal-chip-selectable-hover-border-color: transparent;    
  }
}

// ...

This can be done in a follow-up if feasible.

[aPreciado88]

I can take a look at this and create a follow-up issue if it's feasible.

[jcfranco]

This might not be the case, but let’s remove any non-essential inline styles for the test to keep it as focused and simple as possible.

[ashetland]

A thing of beauty! 🍾 🚀