feat(Tag): add Tag to @carbon/styles

packages/carbon-react/src/components/Tag/Tag.stories.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Tag } from 'carbon-components-react';
+import React from 'react';
+
+export default { title: 'Components/Tag' };
+
+export const Default = () => {
+  return (
+    <Tag className="some-class" type="red">
+      {'This is a tag'}
+    </Tag>
+  );
+};

packages/carbon-react/src/components/Tag/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { Tag } from 'carbon-components-react';

packages/styles/scss/components/__tests__/tag-test.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/tag', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:meta';
+      @use '../tag/tag';
+      $_: get('mixin', meta.mixin-exists('tag', 'tag'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

packages/styles/scss/components/_index.scss

@@ -28,6 +28,7 @@
 @use 'data-table/expandable';
 @use 'data-table/skeleton';
 @use 'data-table/sort';
+@use 'tag';
 @use 'text-area';
 @use 'text-input';
 @use 'structured-list';

packages/styles/scss/components/tag/_index.scss

@@ -0,0 +1,4 @@
+@forward 'tag';
+@use 'tag';
+
+@include tag.tag;

packages/styles/scss/components/tag/_tag.scss

@@ -0,0 +1,302 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../theme';
+@use '../../utilities/button-reset';
+@use '../../type';
+@use '../../motion';
+
+@use '../../config' as *;
+@use '../../utilities/convert' as *;
+@use '../../spacing' as *;
+
+/// @access private
+/// @group tag
+@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
+  background-color: $bg-color;
+  color: $text-color;
+
+  &.#{$prefix}--tag--interactive,
+  .#{$prefix}--tag__close-icon {
+    &:hover {
+      background-color: $filter-hover-color;
+    }
+  }
+}
+
+/// Tag styles
+/// @access private
+/// @group tag
+@mixin tag {
+  .#{$prefix}--tag {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-gray'),
+      get-token-value($tag-colors, 'tag-color-gray'),
+      get-token-value($tag-colors, 'tag-hover-gray')
+    );
+
+    display: inline-flex;
+    // ensures tag stays pill shaped;
+    min-width: rem(32px);
+    // restricts size of contained elements
+    max-width: 100%;
+    min-height: rem(24px);
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-02 $spacing-03;
+    margin: $spacing-02;
+    border-radius: rem(15px);
+    cursor: default;
+    vertical-align: middle;
+    word-break: break-word;
+
+    &:not(:first-child) {
+      margin-left: 0;
+    }
+  }
+
+  .#{$prefix}--tag--red {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-red'),
+      get-token-value($tag-colors, 'tag-color-red'),
+      get-token-value($tag-colors, 'tag-hover-red')
+    );
+  }
+
+  .#{$prefix}--tag--magenta {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-magenta'),
+      get-token-value($tag-colors, 'tag-color-magenta'),
+      get-token-value($tag-colors, 'tag-hover-magenta')
+    );
+  }
+
+  .#{$prefix}--tag--purple {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-purple'),
+      get-token-value($tag-colors, 'tag-color-purple'),
+      get-token-value($tag-colors, 'tag-hover-purple')
+    );
+  }
+
+  .#{$prefix}--tag--blue {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-blue'),
+      get-token-value($tag-colors, 'tag-color-blue'),
+      get-token-value($tag-colors, 'tag-hover-blue')
+    );
+  }
+
+  .#{$prefix}--tag--cyan {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-cyan'),
+      get-token-value($tag-colors, 'tag-color-cyan'),
+      get-token-value($tag-colors, 'tag-hover-cyan')
+    );
+  }
+
+  .#{$prefix}--tag--teal {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-teal'),
+      get-token-value($tag-colors, 'tag-color-teal'),
+      get-token-value($tag-colors, 'tag-hover-teal')
+    );
+  }
+
+  .#{$prefix}--tag--green {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-green'),
+      get-token-value($tag-colors, 'tag-color-green'),
+      get-token-value($tag-colors, 'tag-hover-green')
+    );
+  }
+
+  .#{$prefix}--tag--gray {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-gray'),
+      get-token-value($tag-colors, 'tag-color-gray'),
+      get-token-value($tag-colors, 'tag-hover-gray')
+    );
+  }
+
+  .#{$prefix}--tag--cool-gray {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-cool-gray'),
+      get-token-value($tag-colors, 'tag-color-cool-gray'),
+      get-token-value($tag-colors, 'tag-hover-cool-gray')
+    );
+  }
+
+  .#{$prefix}--tag--warm-gray {
+    @include tag-theme(
+      get-token-value($tag-colors, 'tag-background-warm-gray'),
+      get-token-value($tag-colors, 'tag-color-warm-gray'),
+      get-token-value($tag-colors, 'tag-hover-warm-gray')
+    );
+  }
+
+  .#{$prefix}--tag--high-contrast {
+    @include tag-theme(
+      $background-inverse,
+      $text-inverse,
+      $background-inverse-hover
+    );
+  }
+
+  .#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
+    @include tag-theme($layer-disabled, $text-disabled);
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$prefix}--tag__label {
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--tag--interactive:focus {
+    box-shadow: inset 0 0 0 1px $focus;
+    outline: none;
+  }
+
+  .#{$prefix}--tag--interactive:hover {
+    cursor: pointer;
+  }
+
+  // tags used for filtering
+  .#{$prefix}--tag--filter {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    cursor: pointer;
+
+    &:hover {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--tag--interactive {
+    transition: background-color $duration--fast-01 motion(entrance, productive);
+  }
+
+  .#{$prefix}--tag__close-icon {
+    display: flex;
+    width: rem(24px);
+    height: rem(24px);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    margin: 0 0 0 rem(2px);
+    background-color: transparent;
+    border-radius: 50%;
+    color: currentColor;
+    cursor: pointer;
+    transition: background-color $duration--fast-01 motion(standard, productive),
+      box-shadow $duration--fast-01 motion(standard, productive);
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  .#{$prefix}--tag__custom-icon {
+    width: rem(16px);
+    height: rem(16px);
+    flex-shrink: 0;
+    padding: 0;
+    border: 0;
+    margin-right: $spacing-02;
+    background-color: transparent;
+    color: currentColor;
+    outline: none;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--tag__close-icon:focus {
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px $focus;
+    outline: none;
+  }
+
+  .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 1px $focus-inverse;
+  }
+
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
+    .#{$prefix}--tag__close-icon:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
+    fill: $icon-disabled;
+  }
+
+  // small tags
+  .#{$prefix}--tag--sm {
+    min-height: rem(18px);
+    padding: 0 $spacing-03;
+  }
+
+  .#{$prefix}--tag--sm.#{$prefix}--tag--filter {
+    padding-right: 0;
+  }
+
+  .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
+    width: rem(18px);
+    height: rem(18px);
+    margin-left: rem(5px);
+  }
+
+  // Skeleton state
+  .#{$prefix}--tag.#{$prefix}--skeleton {
+    @include skeleton;
+    @include tag-theme(
+      $bg-color: $skeleton-background,
+      $text-color: $text-primary
+    );
+
+    overflow: hidden;
+    width: rem(60px);
+
+    // Safari specific bug (#7672)
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+        transform: translateZ(0);
+      }
+    }
+  }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--tag {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--tag__close-icon svg,
+  .#{$prefix}--tag__custom-icon svg {
+    @include high-contrast-mode('icon-fill');
+  }
+
+  .#{$prefix}--tag__close-icon:focus {
+    @include high-contrast-mode('focus');
+  }
+  /* stylelint-enable */
+}