@stoplight/ui-kit 3.0.0-beta.9 → 3.0.0

package/src/styles/blueprint/src/components/tag/_tag.scss

@@ -0,0 +1,75 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "./common";
+
+/*
+Tags
+
+Markup:
+<span class="#{$ns}-tag {{.modifier}}">125</span>
+<span class="#{$ns}-tag {{.modifier}}">Done</span>
+<span class="#{$ns}-tag {{.modifier}}">
+  Tracking
+  <button class="#{$ns}-tag-remove"></button>
+</span>
+<span class="#{$ns}-tag {{.modifier}}">
+  Crushed
+  <button class="#{$ns}-tag-remove"></button>
+</span>
+<span class="#{$ns}-tag {{.modifier}}">
+  A rather long string of text that wraps to multiple lines
+  demonstrates the position of the remove button.
+  <button class="#{$ns}-tag-remove"></button>
+</span>
+
+.#{$ns}-large - Large
+.#{$ns}-minimal - Minimal appearance
+.#{$ns}-round - Rounded corners, ideal for badges
+.#{$ns}-interactive - Hover and active effects
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-success - Success intent
+.#{$ns}-intent-warning - Warning intent
+.#{$ns}-intent-danger  - Danger intent
+
+Styleguide tag
+*/
+
+.#{$ns}-tag {
+  @include pt-tag();
+
+  &.#{$ns}-large,
+  .#{$ns}-large & {
+    @include pt-tag-large();
+  }
+
+  @each $intent, $color in $pt-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      @include pt-tag-intent($color);
+    }
+  }
+
+  &.#{$ns}-fill {
+    display: flex;
+    width: 100%;
+  }
+
+  &.#{$ns}-minimal {
+    @include pt-tag-minimal();
+
+    @each $intent, $color in $pt-intent-colors {
+      &.#{$ns}-intent-#{$intent} {
+        @include pt-tag-minimal-intent(
+          $color,
+          map-get($pt-intent-text-colors, $intent),
+          map-get($pt-dark-intent-text-colors, $intent)
+        );
+      }
+    }
+  }
+}
+
+.#{$ns}-tag-remove {
+  @include pt-tag-remove();
+}

package/src/styles/blueprint/src/components/tag-input/_tag-input.scss

@@ -0,0 +1,165 @@
+// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../forms/common";
+@import "../tag/common";
+
+$tag-input-padding: ($pt-input-height - $tag-height) * 0.5 !default;
+
+$tag-input-icon-padding: ($pt-input-height - $pt-icon-size-standard) * 0.5 !default;
+$tag-input-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) * 0.5 !default;
+
+.#{$ns}-tag-input {
+  @include pt-flex-container(row, $fill: ".#{$ns}-tag-input-values");
+  align-items: flex-start;
+  cursor: text;
+  height: auto;
+  line-height: inherit;
+  min-height: $pt-input-height;
+  padding-left: $tag-input-padding;
+  padding-right: 0;
+
+  .#{$ns}-tag-input-icon {
+    color: $pt-icon-color;
+    margin-left: $tag-input-icon-padding - $tag-input-padding;
+    margin-right: $tag-input-icon-padding;
+    // margins to center icon in one-line input
+    margin-top: $tag-input-icon-padding;
+  }
+
+  .#{$ns}-tag-input-values {
+    @include pt-flex-container(row, $tag-input-padding);
+    align-items: center;
+    // fill vertical height
+    align-self: stretch;
+    flex-wrap: wrap;
+    margin-right: $tag-input-icon-padding;
+    margin-top: $tag-input-padding;
+    // allow tags to ellipse and not overflow the container
+    min-width: 0;
+
+    // use the larger, conventional input padding when there are no tags and no left icon present.
+    // see: https://github.com/palantir/blueprint/issues/2872
+    &:first-child .#{$ns}-input-ghost:first-child {
+      // recall that some padding-left is already applied on the root component.
+      padding-left: $input-padding-horizontal - $tag-input-padding;
+    }
+
+    > * {
+      margin-bottom: $tag-input-padding;
+    }
+  }
+
+  .#{$ns}-tag {
+    // NOTE: in order to wrap long words, you must set explicit width on TagInput,
+    // or use .#{$ns}-fill CSS class modifier.
+    overflow-wrap: break-word;
+
+    &.#{$ns}-active {
+      @include focus-outline(0);
+    }
+  }
+
+  .#{$ns}-input-ghost {
+    // input fills remaining line
+    flex: 1 1 auto;
+    line-height: $tag-height;
+    // essentially a min-width, cuz flex allows it to grow or shrink:
+    width: $pt-grid-size * 8;
+
+    &:disabled,
+    &.#{$ns}-disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$ns}-button,
+  .#{$ns}-spinner {
+    margin: ($pt-input-height - $pt-button-height-small) * 0.5;
+    margin-left: 0;
+  }
+
+  .#{$ns}-button {
+    @include pt-button-height-small();
+  }
+
+  &.#{$ns}-large {
+    @include pt-flex-margin(row, $tag-input-icon-padding-large);
+    height: auto;
+    min-height: $pt-input-height-large;
+
+    .#{$ns}-tag-input-icon {
+      margin-left: $tag-input-icon-padding-large - $tag-input-padding;
+      margin-top: $tag-input-icon-padding-large;
+    }
+
+    .#{$ns}-input-ghost {
+      line-height: $tag-height-large;
+    }
+
+    .#{$ns}-button {
+      @include pt-button-height-default();
+      margin: ($pt-input-height-large - $pt-button-height) * 0.5;
+      margin-left: 0;
+    }
+
+    .#{$ns}-spinner {
+      margin: ($pt-input-height-large - $pt-button-height-small) * 0.5;
+      margin-left: 0;
+    }
+  }
+
+  &.#{$ns}-active {
+    background-color: $input-background-color;
+    box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+
+    @each $intent, $color in $pt-intent-text-colors {
+      &.#{$ns}-intent-#{$intent} {
+        box-shadow: input-transition-shadow($color, true), $input-box-shadow-focus;
+      }
+    }
+  }
+
+  .#{$ns}-dark &,
+  &.#{$ns}-dark {
+    .#{$ns}-tag-input-icon {
+      color: $pt-dark-icon-color;
+    }
+
+    .#{$ns}-input-ghost {
+      @include pt-dark-input-placeholder();
+
+      color: $dark-input-color;
+    }
+
+    &.#{$ns}-active {
+      background-color: $dark-input-background-color;
+      box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true),
+                  $pt-dark-input-box-shadow;
+
+      @each $intent, $color in $pt-intent-text-colors {
+        &.#{$ns}-intent-#{$intent} {
+          box-shadow: input-transition-shadow($color, true), $pt-dark-input-box-shadow;
+        }
+      }
+    }
+  }
+}
+
+// TODO: this is probably a useful modifier that we should pull into core, and use in EditableText
+.#{$ns}-input-ghost {
+  @include pt-input-placeholder();
+  background: none;
+
+  // reset browser input styles (we're using an input solely because you can type in it)
+  border: none;
+  box-shadow: none;
+  padding: 0;
+
+  &:focus {
+    // remove focus state too
+    // stylelint-disable-next-line declaration-no-important
+    outline: none !important;
+  }
+}

package/src/styles/blueprint/src/components/toast/_toast.scss

@@ -0,0 +1,203 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../../common/react-transition";
+
+$toast-height: $pt-button-height-large !default;
+$toast-min-width: $pt-grid-size * 30 !default;
+$toast-max-width: $pt-grid-size * 50 !default;
+$toast-margin: $pt-grid-size * 2 !default;
+
+.#{$ns}-toast {
+  // toast transition properties
+  $enter-translate: (transform: translateY(-$toast-height) translateY(0));
+  $leave-blur: (opacity: 0 1, filter: blur($pt-grid-size) blur(0));
+
+  // new toasts slide in from the top
+  @include react-transition-phase(
+    "#{$ns}-toast",
+    "enter",
+    $enter-translate,
+    $duration: $pt-transition-duration * 3,
+    $easing: $pt-transition-ease-bounce,
+    $before: "&"
+  );
+  @include react-transition-phase(
+    "#{$ns}-toast",
+    "enter",
+    $enter-translate,
+    $duration: $pt-transition-duration * 3,
+    $easing: $pt-transition-ease-bounce,
+    $before: "&",
+    $after: "~ &"
+  );
+  // leaving toasts simply fade away
+  @include react-transition-phase(
+    "#{$ns}-toast",
+    "exit",
+    $leave-blur,
+    $duration: $pt-transition-duration * 3,
+    $before: "&"
+  );
+  // younger siblings of leaving toasts wait a moment before moving to fill gap
+  @include react-transition-phase(
+    "#{$ns}-toast",
+    "exit",
+    $enter-translate,
+    $delay: $pt-transition-duration * 0.5,
+    $before: "&",
+    $after: "~ &"
+  );
+  align-items: flex-start;
+  background-color: $white;
+  border-radius: $pt-border-radius;
+  box-shadow: $pt-elevation-shadow-3;
+  display: flex;
+  margin: $toast-margin 0 0;
+  max-width: $toast-max-width;
+  min-width: $toast-min-width;
+
+  // toast is interactive even though container isn't
+  pointer-events: all;
+
+  // override inline styles (#367): toasts rely on relative positioning for stacking.
+  // stylelint-disable-next-line declaration-no-important
+  position: relative !important;
+
+  .#{$ns}-button-group {
+    flex: 0 0 auto;
+    padding: ($toast-height - $pt-button-height) * 0.5;
+    padding-left: 0;
+  }
+
+  > .#{$ns}-icon {
+    color: $pt-icon-color;
+    margin: ($toast-height - $pt-icon-size-standard) * 0.5;
+    margin-right: 0;
+  }
+
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
+    background-color: $dark-gray5;
+    box-shadow: $pt-dark-elevation-shadow-3;
+
+    > .#{$ns}-icon {
+      color: $pt-dark-icon-color;
+    }
+  }
+
+  &[class*="#{$ns}-intent-"] {
+    a {
+      color: rgba($white, 0.7);
+
+      &:hover {
+        color: $white;
+      }
+    }
+
+    > .#{$ns}-icon {
+      color: $white;
+    }
+  }
+
+  // HACKHACK custom colors for buttons on intent background so they always show up nice
+  // stylelint-disable declaration-no-important
+  &[class*="#{$ns}-intent-"] .#{$ns}-button {
+    &,
+    &::before,
+    .#{$ns}-icon,
+    &:active {
+      color: rgba($white, 0.7) !important;
+    }
+
+    &:focus {
+      // blue outline color shows poorly on colored bg
+      outline-color: rgba($white, 0.5);
+    }
+
+    &:hover {
+      background-color: rgba($white, 0.15) !important;
+      color: $white !important;
+    }
+
+    &:active {
+      background-color: rgba($white, 0.3) !important;
+      color: $white !important;
+    }
+
+    &::after {
+      background: rgba($white, 0.3) !important;
+    }
+  }
+  // stylelint-enable declaration-no-important
+
+  // define these last so they override default dark colors above
+  @each $intent, $color in $pt-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      background-color: $color;
+      color: $white;
+    }
+  }
+}
+
+.#{$ns}-toast-message {
+  flex: 1 1 auto;
+  padding: centered-text($toast-height);
+  word-break: break-word;
+}
+
+.#{$ns}-toast-container {
+  align-items: center;
+  // override inline overlay styles (#2626)
+  // stylelint-disable-next-line declaration-no-important
+  display: flex !important;
+  flex-direction: column;
+  left: 0;
+  // toasts have margin-top so omit it on container
+
+  // prevent container from scrolling as new toasts enter (from bottom)
+  overflow: hidden;
+
+  // ensure there's enough space for full box-shadow
+  padding: 0 $toast-margin $toast-margin;
+
+  // container will not block clicks on elements behind it
+  pointer-events: none;
+
+  position: fixed;
+  right: 0;
+
+  // #975 ensure toasts are on top of everything (esp dialogs)
+  z-index: $pt-z-index-overlay * 2;
+
+  &.#{$ns}-toast-container-top {
+    top: 0;
+  }
+
+  &.#{$ns}-toast-container-bottom {
+    bottom: 0;
+    flex-direction: column-reverse;
+    top: auto;
+  }
+
+  &.#{$ns}-toast-container-left {
+    align-items: flex-start;
+  }
+
+  &.#{$ns}-toast-container-right {
+    align-items: flex-end;
+  }
+}
+
+.#{$ns}-toast-container-bottom .#{$ns}-toast {
+  // minimal diff in react-transition styles so we can avoid calling those mixins again
+  &.#{$ns}-toast-enter:not(.#{$ns}-toast-enter-active),
+  &.#{$ns}-toast-enter:not(.#{$ns}-toast-enter-active) ~ .#{$ns}-toast,
+  &.#{$ns}-toast-appear:not(.#{$ns}-toast-appear-active),
+  &.#{$ns}-toast-appear:not(.#{$ns}-toast-appear-active) ~ .#{$ns}-toast,
+  &.#{$ns}-toast-exit-active ~ .#{$ns}-toast,
+  &.#{$ns}-toast-leave-active ~ .#{$ns}-toast {
+    transform: translateY($toast-margin + $toast-height);
+  }
+}

package/src/styles/blueprint/src/components/tooltip/_common.scss

@@ -0,0 +1,11 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+$tooltip-background-color: $dark-gray5 !default;
+$tooltip-text-color: $light-gray5 !default;
+
+$dark-tooltip-background-color: $light-gray3 !default;
+$dark-tooltip-text-color: $dark-gray5 !default;
+
+$tooltip-padding-vertical: $pt-grid-size !default;
+$tooltip-padding-horizontal: 1.2 * $pt-grid-size !default;

package/src/styles/blueprint/src/components/tooltip/_tooltip.scss

@@ -0,0 +1,61 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../popover/common";
+@import "./common";
+
+.#{$ns}-tooltip {
+  @include popover-sizing(
+    $arrow-square-size: 22px,
+    $arrow-offset: 3px,
+    $arrow-target-offset: -4px
+  );
+  @include popover-appearance(
+    $tooltip-background-color,
+    $tooltip-text-color,
+    $pt-tooltip-box-shadow,
+    $pt-drop-shadow-opacity,
+    $pt-border-shadow-opacity
+  );
+  // lightweight scale for tooltips
+  @include react-transition(
+    "#{$ns}-popover",
+    (transform: scale(0.8) scale(1)),
+    $duration: $pt-transition-duration,
+    $after: "> &"
+  );
+
+  .#{$ns}-popover-content {
+    padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
+  }
+
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
+    @include popover-appearance(
+      $dark-tooltip-background-color,
+      $dark-tooltip-text-color,
+      $pt-dark-tooltip-box-shadow,
+      $pt-dark-drop-shadow-opacity,
+      $pt-dark-border-shadow-opacity
+    );
+  }
+
+  @each $intent, $color in $pt-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      .#{$ns}-popover-content {
+        background: $color;
+        color: $white;
+      }
+
+      .#{$ns}-popover-arrow-fill {
+        fill: $color;
+      }
+    }
+  }
+}
+
+.#{$ns}-tooltip-indicator {
+  border-bottom: dotted 1px;
+  cursor: help;
+}

package/src/styles/blueprint/src/components/tree/_tree.scss

@@ -0,0 +1,194 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../../common/mixins";
+@import "~@blueprintjs/icons/src/icons";
+
+/*
+Trees
+
+Markup:
+<div class="#{$ns}-tree #{$ns}-elevation-0">
+  <ul class="#{$ns}-tree-node-list #{$ns}-tree-root">
+    <li class="#{$ns}-tree-node #{$ns}-tree-node-expanded">
+      <div class="#{$ns}-tree-node-content">
+        <span class="#{$ns}-tree-node-caret #{$ns}-tree-node-caret-open #{$ns}-icon-standard"></span>
+        <span class="#{$ns}-tree-node-icon #{$ns}-icon-standard #{$ns}-icon-folder-close"></span>
+        <span class="#{$ns}-tree-node-label">Label</span>
+        <span class="#{$ns}-tree-node-secondary-label">Secondary label</span>
+      </div>
+      <ul class="#{$ns}-tree-node-list">
+        <li class="#{$ns}-tree-node">
+          <div class="#{$ns}-tree-node-content">
+            <span class="#{$ns}-tree-node-caret-none #{$ns}-icon-standard"></span>
+            <span class="#{$ns}-tree-node-icon #{$ns}-icon-standard #{$ns}-icon-document"></span>
+          <span class="#{$ns}-tree-node-label">A Document</span>
+          </div>
+        </li>
+        <li class="#{$ns}-tree-node">
+          <div class="#{$ns}-tree-node-content">
+            <span class="#{$ns}-tree-node-caret-none #{$ns}-icon-standard"></span>
+            <span class="#{$ns}-tree-node-icon #{$ns}-icon-standard #{$ns}-icon-document"></span>
+            <span class="#{$ns}-tree-node-label">Another Document</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+Styleguide tree
+*/
+
+$tree-row-height: $pt-grid-size * 3 !default;
+$tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) * 0.5 !default;
+
+.#{$ns}-tree {
+  #{$icon-classes} {
+    color: $pt-icon-color;
+
+    @each $intent, $colors in $pt-intent-colors {
+      &.#{$ns}-intent-#{$intent} {
+        @include intent-color($intent);
+      }
+    }
+  }
+}
+
+.#{$ns}-tree-node-list {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.#{$ns}-tree-root {
+  background-color: transparent;
+  cursor: default;
+  padding-left: 0;
+  // lets us position hover/selection effects based on the width of the whole tree
+  position: relative;
+}
+
+@for $i from 0 through 20 {
+  .#{$ns}-tree-node-content-#{$i} {
+    padding-left: ($tree-row-height - $tree-icon-spacing) * $i;
+  }
+}
+
+.#{$ns}-tree-node-content {
+  align-items: center;
+  display: flex;
+  height: $tree-row-height;
+  padding-right: $pt-grid-size * 0.5;
+  width: 100%;
+
+  &:hover {
+    background-color: rgba($gray5, 0.4);
+  }
+}
+
+.#{$ns}-tree-node-caret,
+.#{$ns}-tree-node-caret-none {
+  min-width: $tree-row-height;
+}
+
+.#{$ns}-tree-node-caret {
+  @include pt-icon-colors();
+  cursor: pointer;
+  padding: $tree-icon-spacing;
+  transform: rotate(0deg);
+  transition: transform ($pt-transition-duration * 2) $pt-transition-ease;
+
+  &.#{$ns}-tree-node-caret-open {
+    transform: rotate(90deg);
+  }
+
+  // CSS API support
+  &.#{$ns}-icon-standard::before {
+    content: $pt-icon-chevron-right;
+  }
+}
+
+.#{$ns}-tree-node-icon {
+  margin-right: $tree-icon-spacing;
+  position: relative;
+}
+
+.#{$ns}-tree-node-label {
+  @include overflow-ellipsis();
+  flex: 1 1 auto;
+  position: relative;
+  user-select: none;
+
+  span {
+    // prevents spans from interfering with text overflows (e.g. when Tooltips are used in labels)
+    display: inline;
+  }
+}
+
+.#{$ns}-tree-node-secondary-label {
+  padding: 0 ($pt-grid-size * 0.5);
+  user-select: none;
+
+  .#{$ns}-popover-wrapper,
+  .#{$ns}-popover-target {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.#{$ns}-tree-node.#{$ns}-disabled {
+  .#{$ns}-tree-node-content {
+    background-color: inherit;
+    color: $pt-text-color-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$ns}-tree-node-caret,
+  .#{$ns}-tree-node-icon {
+    color: $pt-text-color-disabled;
+    cursor: not-allowed;
+  }
+}
+
+.#{$ns}-tree-node.#{$ns}-tree-node-selected > .#{$ns}-tree-node-content {
+  background-color: $pt-intent-primary;
+
+  &,
+  #{$icon-classes} {
+    color: $white;
+  }
+
+  .#{$ns}-tree-node-caret {
+    &::before {
+      color: rgba($white, 0.7);
+    }
+
+    &:hover::before {
+      color: $white;
+    }
+  }
+}
+
+.#{$ns}-dark {
+  .#{$ns}-tree-node-content:hover {
+    background-color: rgba($gray1, 0.3);
+  }
+
+  .#{$ns}-tree {
+    #{$icon-classes} {
+      color: $pt-dark-icon-color;
+
+      @each $intent, $colors in $pt-intent-colors {
+        &.#{$ns}-intent-#{$intent} {
+          @include intent-color($intent);
+        }
+      }
+    }
+  }
+
+  .#{$ns}-tree-node.#{$ns}-tree-node-selected > .#{$ns}-tree-node-content {
+    background-color: $pt-intent-primary;
+  }
+}