[core] feat: CompoundTag (#6686)

packages/core/src/common/_variables-extended.scss

@@ -11,7 +11,11 @@
 
 $half-grid-size: $pt-grid-size * 0.5 !default;
 
-// Extended color pallete
+// Extended color palette
+$blue0: #11376b !default;
+$green0: #0f3e25 !default;
+$orange0: #5f380b !default;
+$red0: #782326 !default;
 $blue6: #99c4ff !default;
 $green6: #7cd7a2 !default;
 $orange6: #f5c186 !default;

packages/core/src/common/classes.ts

@@ -339,6 +339,11 @@ export const TABS = `${TAB}s`;
 
 export const TAG = `${NS}-tag`;
 export const TAG_REMOVE = `${TAG}-remove`;
+export const COMPOUND_TAG = `${NS}-compound-tag`;
+export const COMPOUND_TAG_LEFT = `${COMPOUND_TAG}-left`;
+export const COMPOUND_TAG_LEFT_CONTENT = `${COMPOUND_TAG}-left-content`;
+export const COMPOUND_TAG_RIGHT = `${COMPOUND_TAG}-right`;
+export const COMPOUND_TAG_RIGHT_CONTENT = `${COMPOUND_TAG}-right-content`;
 
 export const TAG_INPUT = `${NS}-tag-input`;
 export const TAG_INPUT_ICON = `${TAG_INPUT}-icon`;

packages/core/src/components/_index.scss

@@ -41,6 +41,7 @@
 @import "spinner/spinner";
 @import "tabs/tabs";
 @import "tag/tag";
+@import "tag/compound-tag";
 @import "tag-input/tag-input";
 @import "tag-input/resizable-input";
 @import "toast/toast";

packages/core/src/components/components.md

@@ -30,6 +30,7 @@
 @page spinner
 @page tabs
 @page tag
+@page compound-tag
 @page text
 @page tree
 

packages/core/src/components/index.ts

@@ -120,6 +120,7 @@ export { SwitchCard, type SwitchCardProps } from "./control-card/switchCard";
 export { Tab, type TabId, type TabProps } from "./tabs/tab";
 // eslint-disable-next-line deprecation/deprecation
 export { Tabs, type TabsProps, TabsExpander, Expander } from "./tabs/tabs";
+export { CompoundTag, type CompoundTagProps } from "./tag/compoundTag";
 export { Tag, type TagProps } from "./tag/tag";
 export { TagInput, type TagInputProps, type TagInputAddMethod } from "./tag-input/tagInput";
 export { OverlayToaster, type OverlayToasterCreateOptions } from "./toast/overlayToaster";

packages/core/src/components/tag/_common.scss

@@ -22,6 +22,27 @@ $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) * 0.5 !def
 
 $tag-round-adjustment: 2px !default;
 
+$tag-intent-colors: (
+  "primary": ($pt-intent-primary, $blue2, $blue1, $white),
+  "success": ($pt-intent-success, $green2, $green1, $white),
+  "warning": ($orange5, $orange4, $orange3, $pt-text-color),
+  "danger": ($pt-intent-danger, $red2, $red1, $white)
+) !default;
+
+$minimal-tag-intent-colors: (
+  "primary": ($pt-intent-primary, $blue2, $blue1),
+  "success": ($pt-intent-success, $green2, $green1),
+  "warning": ($pt-intent-warning, $orange2, $orange1),
+  "danger": ($pt-intent-danger, $red2, $red1)
+) !default;
+
+$minimal-dark-tag-intent-colors: (
+  "primary": ($pt-intent-primary, $blue5, $blue6),
+  "success": ($pt-intent-success, $green5, $green6),
+  "warning": ($pt-intent-warning, $orange5, $orange6),
+  "danger": ($pt-intent-danger, $red5, $red6)
+) !default;
+
 @mixin pt-tag() {
   @include pt-flex-container(row, $tag-icon-spacing, inline);
   align-items: center;

packages/core/src/components/tag/_compound-tag.scss

@@ -0,0 +1,243 @@
+// Copyright 2024 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../../common/variables-extended";
+@import "../../common/mixins";
+@import "./common";
+
+/*
+Compound Tags
+*/
+
+// some of these values are copied from _common.scss, but our mixins have a different shape here
+$compound-tag-left-default-colors: ($dark-gray5, $dark-gray4, $dark-gray3) !default;
+$compound-tag-right-default-colors: ($gray1, $dark-gray5, $dark-gray4) !default;
+$dark-compound-tag-left-default-colors: ($gray4, $gray3, $gray2) !default;
+$dark-compound-tag-right-default-colors: ($gray5, $gray4, gray3) !default;
+
+// one shade darker than $tag-intent-colors
+$compound-tag-left-intent-colors: (
+  "primary": ($blue2, $blue1, $blue0),
+  "success": ($green2, $green1, $green0),
+  "warning": ($orange4, $orange3, $orange2),
+  "danger": ($red2, $red1, $red0),
+) !default;
+
+@mixin compound-tag-colors(
+  /* each list is a (default, hover, active) tuple of background colors */
+  $left-colors,
+  $right-colors
+) {
+  // override default tag background styles: this is important for minimal tags with opacity values
+  // which we want to define _absolutely_ in our design system and not by stacking opacities on top of each other.
+  background: none;
+
+  .#{$ns}-compound-tag-left {
+    background-color: nth($left-colors, 1);
+  }
+
+  .#{$ns}-compound-tag-right {
+    background-color: nth($right-colors, 1);
+  }
+
+  &.#{$ns}-interactive {
+    &:hover {
+      .#{$ns}-compound-tag-left {
+        background-color: nth($left-colors, 2);
+      }
+
+      .#{$ns}-compound-tag-right {
+        background-color: nth($right-colors, 2);
+      }
+    }
+
+    &:active,
+    &.#{$ns}-active {
+      .#{$ns}-compound-tag-left {
+        background-color: nth($left-colors, 3);
+      }
+
+      .#{$ns}-compound-tag-right {
+        background-color: nth($right-colors, 3);
+      }
+    }
+  }
+}
+
+@mixin minimal-compound-tag-colors($base-color) {
+  $left-colors: (rgba($base-color, 0.2), rgba($base-color, 0.3), rgba($base-color, 0.4));
+  $right-colors: (rgba($base-color, 0.1), rgba($base-color, 0.2), rgba($base-color, 0.3));
+
+  @include compound-tag-colors($left-colors, $right-colors);
+}
+
+@mixin dark-minimal-compound-tag-colors($base-color) {
+  $left-colors: (rgba($base-color, 0.4), rgba($base-color, 0.5), rgba($base-color, 0.55));
+  $right-colors: (rgba($base-color, 0.2), rgba($base-color, 0.3), rgba($base-color, 0.35));
+
+  @include compound-tag-colors($left-colors, $right-colors);
+}
+
+.#{$ns}-compound-tag {
+  // Variants: default & interactive
+  @include compound-tag-colors(
+    $compound-tag-left-default-colors,
+    $compound-tag-right-default-colors
+  );
+  padding: 0;
+
+  // Layout
+  .#{$ns}-compound-tag-left,
+  .#{$ns}-compound-tag-right {
+    align-items: center;
+    display: inline-flex;
+    padding: 2px 4px;
+  }
+
+  .#{$ns}-compound-tag-left {
+    border-bottom-left-radius: $pt-border-radius;
+    border-top-left-radius: $pt-border-radius;
+    margin-right: 0; // override pt-tag() pt-flex-container() style
+
+    > #{$icon-classes} {
+      margin-right: 4px;
+    }
+  }
+
+  .#{$ns}-compound-tag-right {
+    border-bottom-right-radius: $pt-border-radius;
+    border-top-right-radius: $pt-border-radius;
+    flex-grow: 1;
+    padding: 2px 4px;
+
+    > #{$icon-classes} {
+      margin-left: 4px;
+    }
+
+    .#{$ns}-compound-tag-right-text {
+      flex-grow: 1;
+    }
+
+    .#{$ns}-tag-remove {
+      margin-left: 2px;
+      // overriding pt-tag-remove() style
+      /* stylelint-disable-next-line declaration-no-important */
+      margin-right: -4px !important;
+    }
+  }
+
+  // Variant: round
+  &.#{$ns}-round {
+    $tag-round-horizontal-padding: ($tag-height * 0.5) - $tag-round-adjustment;
+    padding: 0;
+
+    .#{$ns}-compound-tag-left {
+      border-bottom-left-radius: $tag-height;
+      border-top-left-radius: $tag-height;
+      padding-left: $tag-round-horizontal-padding;
+    }
+
+    .#{$ns}-compound-tag-right {
+      border-bottom-right-radius: $tag-height;
+      border-top-right-radius: $tag-height;
+      padding-right: $tag-round-horizontal-padding;
+    }
+  }
+
+  // Variant: large
+  &.#{$ns}-large {
+    padding: 0;
+
+    .#{$ns}-compound-tag-left,
+    .#{$ns}-compound-tag-right {
+      padding: 5px 8px;
+    }
+
+    .#{$ns}-compound-tag-left {
+      > #{$icon-classes} {
+        margin-right: 7px;
+      }
+    }
+
+    .#{$ns}-compound-tag-right {
+      > #{$icon-classes} {
+        margin-left: 7px;
+      }
+    }
+
+    .#{$ns}-tag-remove {
+      margin-left: 7px;
+      // overriding pt-tag-remove() style
+      /* stylelint-disable-next-line declaration-no-important */
+      margin-right: -10px !important;
+    }
+
+    // Variant: large & round
+    &.#{$ns}-round {
+      $tag-round-horizontal-padding-large: ($tag-padding-large) + $tag-round-adjustment;
+      padding: 0;
+
+      .#{$ns}-compound-tag-left {
+        border-bottom-left-radius: $tag-height-large;
+        border-top-left-radius: $tag-height-large;
+        padding-left: $tag-round-horizontal-padding-large;
+      }
+
+      .#{$ns}-compound-tag-right {
+        border-bottom-right-radius: $tag-height-large;
+        border-top-right-radius: $tag-height-large;
+        padding-right: $tag-round-horizontal-padding-large;
+      }
+    }
+  }
+
+  &.#{$ns}-minimal {
+    // Variants: minimal default & interactive
+    &:not([class*="#{$ns}-intent-"]) {
+      @include minimal-compound-tag-colors($gray1);
+    }
+
+    // Variant: minimal intent
+    @each $intent, $color in $pt-intent-colors {
+      &.#{$ns}-intent-#{$intent} {
+        @include minimal-compound-tag-colors($color);
+      }
+    }
+  }
+
+  .#{$ns}-dark & {
+    // Variants: dark default & interactive
+    @include compound-tag-colors(
+      $dark-compound-tag-left-default-colors,
+      $dark-compound-tag-right-default-colors
+    );
+
+    // Variant: dark intent
+    // colors are identical to light theme, so we don't need any styles here
+
+    &.#{$ns}-minimal {
+      // Variants: dark minimal default & interactive
+      &:not([class*="#{$ns}-intent-"]) {
+        @include dark-minimal-compound-tag-colors($gray1);
+      }
+
+      // Variant: dark minimal intent
+      @each $intent, $color in $pt-intent-colors {
+        &.#{$ns}-intent-#{$intent} {
+          @include dark-minimal-compound-tag-colors($color);
+        }
+      }
+    }
+  }
+
+  // Important: these styles must come last to override dark theme default (no intent) styles
+  // Variant: intent
+  @each $intent, $left-colors in $compound-tag-left-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      $right-colors: map-get($tag-intent-colors, $intent);
+
+      @include compound-tag-colors($left-colors, $right-colors);
+    }
+  }
+}

packages/core/src/components/tag/_tag.scss

@@ -37,27 +37,6 @@ Markup:
 Styleguide tag
 */
 
-$tag-intent-colors: (
-  "primary": ($pt-intent-primary, $blue2, $blue1, $white),
-  "success": ($pt-intent-success, $green2, $green1, $white),
-  "warning": ($orange5, $orange4, $orange3, $pt-text-color),
-  "danger": ($pt-intent-danger, $red2, $red1, $white)
-) !default;
-
-$minimal-tag-intent-colors: (
-  "primary": ($pt-intent-primary, $blue2, $blue1),
-  "success": ($pt-intent-success, $green2, $green1),
-  "warning": ($pt-intent-warning, $orange2, $orange1),
-  "danger": ($pt-intent-danger, $red2, $red1)
-) !default;
-
-$minimal-dark-tag-intent-colors: (
-  "primary": ($pt-intent-primary, $blue5, $blue6),
-  "success": ($pt-intent-success, $green5, $green6),
-  "warning": ($pt-intent-warning, $orange5, $orange6),
-  "danger": ($pt-intent-danger, $red5, $red6)
-) !default;
-
 .#{$ns}-tag {
   @include pt-tag();
 

packages/core/src/components/tag/compound-tag.md

@@ -0,0 +1,25 @@
+---
+tag: new
+---
+
+@# Compound Tag
+
+**Compound Tag** is a variant of [**Tag**](#core/components/tag) which renders textual information in
+a pair (sometimes referred to as a "key-value pair"). The content on the left and right is visually
+segmented to signify the pairwise relationship. Just like **Tag**, this component supports a range
+of visual modifiers for many different situations and its colors are designed to be accessible in
+almost any context.
+
+@reactExample CompoundTagExample
+
+@## Usage
+
+The `<CompoundTag>` component is a stateless wrapper around its content with support for an optional
+close button and icons on the left and/or right side. It supports all valid `<span>` DOM attributes.
+
+Content for the left side of the tag is specified with the `leftContent` prop, while the `children` node(s)
+are rendered on the right side.
+
+@## Props interface
+
+@interface CompoundTagProps