• No results

Chips Filter

Installation

  yarn add @chewy/kib-chips-styles

Import

  @use '~@chewy/kib-chips-styles/src/kib-chip-filter/styles' as kib-chip-filter;

Mixins

chip-filter-container

@mixin chip-filter-container() { ... }@mixin chip-filter-container() { 
  @include common.chip-container-styles;
 }
Description

Base styles for chip filter container

Parameters

None.

Author

  • UXE

generate-styles

@mixin generate-styles() { ... }@mixin generate-styles() { 
  --kib-chip-filter-border-width: #{border.get('ct', 'chip', 'border-width', 'standard')};
  --kib-chip-filter-border-color: #{color.get(
      'ct',
      'chip',
      'filter',
      $variant,
      'active',
      'border-color'
    )};

  @include common.chip-base-styles;

  border: 0;
  border-radius: border.get('ct', 'chip', 'border-radius', 'standard');
  background: color.get('ct', 'chip', 'filter', $variant, 'active', 'bg-color');
  box-shadow: inset 0 0 0 var(--kib-chip-filter-border-width) var(--kib-chip-filter-border-color);
  color: color.get('ct', 'chip', 'filter', $variant, 'active', 'text-color');
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    --kib-chip-filter-border-color: #{color.get(
        'ct',
        'chip',
        'filter',
        $variant,
        'hover',
        'border-color'
      )};
    background: color.get('ct', 'chip', 'filter', $variant, 'hover', 'bg-color');
    color: color.get('ct', 'chip', 'filter', $variant, 'hover', 'text-color');
  }

  &:focus-visible {
    --kib-chip-filter-border-width: #{border.get('ct', 'chip', 'border-width', 'focused')};
    --kib-chip-filter-border-color: #{color.get(
        'ct',
        'chip',
        'filter',
        $variant,
        'focus',
        'border-color'
      )};
    outline: 0;
    background: color.get('ct', 'chip', 'filter', $variant, 'focus', 'bg-color');
    color: color.get('ct', 'chip', 'filter', $variant, 'focus', 'text-color');
  }

  &:active {
    --kib-chip-filter-border-width: #{border.get('ct', 'chip', 'border-width', 'standard')};
    --kib-chip-filter-border-color: #{color.get(
        'ct',
        'chip',
        'filter',
        $variant,
        'pressed',
        'border-color'
      )};
    background: color.get('ct', 'chip', 'filter', $variant, 'pressed', 'bg-color');
    color: color.get('ct', 'chip', 'filter', $variant, 'pressed', 'text-color');
  }
 }
Description

Generator of Styles for Chip Filter

Parameters

None.

Requires
Author

  • UXE

transition

@mixin transition() { ... }@mixin transition() { 
  #{$parent}__icon {
    flex-shrink: 0;
    overflow: hidden;
    animation: kibChipFilterIconReveal 0.2s ease forwards;

    // stylelint-disable-next-line keyframes-name-pattern
    @keyframes kibChipFilterIconReveal {
      0% {
        max-width: 0;
        opacity: 0;
      }

      100% {
        max-width: unit.rem(16px);
        opacity: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      max-width: unit.rem(16px);
      animation: none;
      opacity: 1;
    }
  }
 }
Description

Transition styles — reveal the check on the icon only. Animating the control width then reverting to auto caused a visible snap (final keyframe wider than intrinsic flex size).

Parameters

None.

Requires
Author

  • UXE

transition-out

@mixin transition-out() { ... }@mixin transition-out() { 
  animation: kibChipFilterExitGap 0.2s ease forwards;

  // stylelint-disable-next-line keyframes-name-pattern
  @keyframes kibChipFilterExitGap {
    0% {
      gap: spacing.get('s2');
    }

    100% {
      gap: 0;
    }
  }

  #{$parent}__icon {
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
    animation: kibChipFilterIconHide 0.2s ease forwards;

    // stylelint-disable-next-line keyframes-name-pattern
    @keyframes kibChipFilterIconHide {
      0% {
        width: unit.rem(16px);
        max-width: unit.rem(16px);
        opacity: 1;
      }

      100% {
        width: 0;
        max-width: 0;
        opacity: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      width: 0;
      max-width: 0;
      animation: none;
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    gap: 0;
    animation: none;
  }
 }
Description

Reverse of transition — collapse the check when unselecting (pair with delayed icon unmount in React). Also animates flex gap to 0 so layout matches a single child after unmount (avoids end snap).

Parameters

None.

Requires
Author

  • UXE

generate-icon-styles

@mixin generate-icon-styles() { ... }@mixin generate-icon-styles() { 
  display: inline-block;
  width: unit.rem(16px);
  height: unit.rem(16px);
  fill: color.get('ct', 'chip', 'filter', 'selected', 'active', 'icon-color');

  vertical-align: middle;

  @media (forced-colors: active) {
    color: HighLight;
  }
 }
Description

Styles for check icon

Parameters

None.

Requires
Author

  • UXE