@stoplight/ui-kit 3.0.0-beta.37 → 3.0.0-beta.40

package/styles/blueprint/src/components/context-menu/_context-menu.scss

@@ -0,0 +1,10 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+.#{$ns}-context-menu .#{$ns}-popover-target {
+  display: block;
+}
+
+.#{$ns}-context-menu-popover-target {
+  position: fixed;
+}

package/styles/blueprint/src/components/dialog/_dialog.scss

@@ -0,0 +1,146 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "~@blueprintjs/icons/src/icons";
+@import "../../common/mixins";
+@import "../../common/react-transition";
+@import "../../common/variables";
+
+/*
+Dialog
+
+Markup:
+<!-- this container element fills its parent and centers the .#{$ns}-dialog within it -->
+<div class="#{$ns}-dialog-container">
+  <div class="#{$ns}-dialog">
+    <div class="#{$ns}-dialog-header">
+      <span class="#{$ns}-icon-large #{$ns}-icon-inbox"></span>
+      <h4 class="#{$ns}-heading">Dialog header</h4>
+      <button aria-label="Close" class="#{$ns}-dialog-close-button #{$ns}-button #{$ns}-minimal #{$ns}-icon-cross"></button>
+    </div>
+    <div class="#{$ns}-dialog-body">
+      This dialog hasn't been wired up with any open or close interactions.
+      It's just an example of markup and styles.
+    </div>
+    <div class="#{$ns}-dialog-footer">
+      <div class="#{$ns}-dialog-footer-actions">
+        <button type="button" class="#{$ns}-button">Secondary button</button>
+        <button type="submit" class="#{$ns}-button #{$ns}-intent-primary">Primary button</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+Styleguide dialog
+*/
+
+$dialog-border-radius: $pt-border-radius * 2 !default;
+$dialog-margin: ($pt-grid-size * 3) 0 !default;
+$dialog-padding: $pt-grid-size * 2 !default;
+
+.#{$ns}-dialog-container {
+  $dialog-transition-props: (
+    opacity: (0, 1),
+    transform: (scale(0.5), scale(1))
+  );
+
+  @include react-transition(
+    "#{$ns}-overlay",
+    $dialog-transition-props,
+    $duration: $pt-transition-duration * 3,
+    $easing: $pt-transition-ease-bounce,
+    $before: "&",
+    $after: "> .#{$ns}-dialog"
+  );
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+  pointer-events: none;
+  user-select: none;
+  width: 100%;
+}
+
+.#{$ns}-dialog {
+  background: $light-gray4;
+  border-radius: $dialog-border-radius;
+  box-shadow: $pt-dialog-box-shadow;
+  display: flex;
+  flex-direction: column;
+  margin: $dialog-margin;
+  padding-bottom: $pt-grid-size * 2;
+  pointer-events: all;
+  user-select: text;
+  width: $pt-grid-size * 50;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
+    background: $pt-dark-app-background-color;
+    box-shadow: $pt-dark-dialog-box-shadow;
+    color: $pt-dark-text-color;
+  }
+}
+
+.#{$ns}-dialog-header {
+  align-items: center;
+  background: $white;
+  border-radius: $dialog-border-radius $dialog-border-radius 0 0;
+  box-shadow: 0 1px 0 $pt-divider-black;
+  display: flex;
+  flex: 0 0 auto;
+  min-height: $pt-icon-size-large + $dialog-padding;
+  padding-left: $dialog-padding;
+  padding-right: $dialog-padding * 0.25;
+
+  .#{$ns}-icon-large,
+  .#{$ns}-icon {
+    color: $pt-icon-color;
+    flex: 0 0 auto;
+    margin-right: $dialog-padding * 0.5;
+  }
+
+  .#{$ns}-heading {
+    @include overflow-ellipsis();
+    flex: 1 1 auto;
+    line-height: inherit;
+    margin: 0;
+
+    &:last-child {
+      margin-right: $dialog-padding;
+    }
+  }
+
+  .#{$ns}-dark & {
+    background: $dark-gray4;
+    box-shadow: 0 1px 0 $pt-dark-divider-black;
+
+    .#{$ns}-icon-large,
+    .#{$ns}-icon {
+      color: $pt-dark-icon-color;
+    }
+  }
+}
+
+.#{$ns}-dialog-body {
+  flex: 1 1 auto;
+  line-height: $pt-grid-size * 1.8;
+  margin: $dialog-padding;
+}
+
+.#{$ns}-dialog-footer {
+  flex: 0 0 auto;
+  margin: 0 $dialog-padding;
+}
+
+.#{$ns}-dialog-footer-actions {
+  display: flex;
+  justify-content: flex-end;
+
+  .#{$ns}-button {
+    margin-left: $pt-grid-size;
+  }
+}

package/styles/blueprint/src/components/divider/_divider.scss

@@ -0,0 +1,19 @@
+// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+$divider-margin: $pt-grid-size * 0.5 !default;
+
+.#{$ns}-divider {
+  border-bottom: 1px solid $pt-divider-black;
+  // since the element is empty, it will occupy minimal space and only show
+  // the appropriate border based on direction of container.
+  border-right: 1px solid $pt-divider-black;
+  margin: $divider-margin;
+
+
+  .#{$ns}-dark & {
+    border-color: $pt-dark-divider-black;
+  }
+}

package/styles/blueprint/src/components/drawer/_drawer.scss

@@ -0,0 +1,232 @@
+// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "~@blueprintjs/icons/src/icons";
+@import "../../common/mixins";
+@import "../../common/react-transition";
+@import "../../common/variables";
+
+$drawer-margin: ($pt-grid-size * 3) 0 !default;
+$drawer-padding: $pt-grid-size * 2 !default;
+
+$drawer-default-size: 50%;
+
+$drawer-background-color: $white !default;
+$dark-drawer-background-color: $dark-gray4 !default;
+
+.#{$ns}-drawer {
+  background: $drawer-background-color;
+  box-shadow: $pt-elevation-shadow-4;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &.#{$ns}-position-top {
+    @include react-transition-phase(
+      "#{$ns}-overlay",
+      "enter",
+      (transform: (translateY(-100%), translateY(0))),
+      $pt-transition-duration * 2,
+      $pt-transition-ease,
+      $before: "&"
+    );
+    @include react-transition-phase(
+      "#{$ns}-overlay",
+      "exit",
+      (transform: (translateY(-100%), translateY(0))),
+      $pt-transition-duration,
+      $before: "&"
+    );
+    height: $drawer-default-size;
+    left: 0;
+    right: 0;
+
+    top: 0;
+  }
+
+  &.#{$ns}-position-bottom {
+    @include react-transition-phase(
+      "#{$ns}-overlay",
+      "enter",
+      (transform: (translateY(100%), translateY(0))),
+      $pt-transition-duration * 2,
+      $pt-transition-ease,
+      $before: "&"
+    );
+    @include react-transition-phase(
+      "#{$ns}-overlay",
+      "exit",
+      (transform: (translateY(100%), translateY(0))),
+      $pt-transition-duration,
+      $before: "&"
+    );
+    bottom: 0;
+    height: $drawer-default-size;
+    left: 0;
+
+    right: 0;
+  }
+
+  &.#{$ns}-position-left {
+    @include react-transition-phase(
+      "#{$ns}-overlay",
+      "enter",
+      (transform: (translateX(-100%), translateX(0))),
+      $pt-transition-duration * 2,
+      $pt-transition-ease,
+      $before: "&"
+    );
+    @include react-transition-phase(
+      "#{$ns}-overlay",
+      "exit",
+      (transform: (translateX(-100%), translateX(0))),
+      $pt-transition-duration,
+      $before: "&"
+    );
+    bottom: 0;
+    left: 0;
+
+    top: 0;
+    width: $drawer-default-size;
+  }
+
+  &.#{$ns}-position-right {
+    @include react-transition-phase(
+      "#{$ns}-overlay",
+      "enter",
+      (transform: (translateX(100%), translateX(0))),
+      $pt-transition-duration * 2,
+      $pt-transition-ease,
+      $before: "&"
+    );
+    @include react-transition-phase(
+      "#{$ns}-overlay",
+      "exit",
+      (transform: (translateX(100%), translateX(0))),
+      $pt-transition-duration,
+      $before: "&"
+    );
+    bottom: 0;
+    right: 0;
+
+    top: 0;
+    width: $drawer-default-size;
+  }
+
+  &:not(.#{$ns}-position-top):not(.#{$ns}-position-bottom):not(.#{$ns}-position-left):not(
+  .#{$ns}-position-right) {
+    &:not(.#{$ns}-vertical) {
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "enter",
+        (transform: (translateX(100%), translateX(0))),
+        $pt-transition-duration * 2,
+        $pt-transition-ease,
+        $before: "&"
+      );
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "exit",
+        (transform: (translateX(100%), translateX(0))),
+        $pt-transition-duration,
+        $before: "&"
+      );
+      bottom: 0;
+      right: 0;
+
+      top: 0;
+      width: $drawer-default-size;
+    }
+
+    &.#{$ns}-vertical {
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "enter",
+        (transform: (translateY(100%), translateY(0))),
+        $pt-transition-duration * 2,
+        $pt-transition-ease,
+        $before: "&"
+      );
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "exit",
+        (transform: (translateY(100%), translateY(0))),
+        $pt-transition-duration,
+        $before: "&"
+      );
+      bottom: 0;
+      height: $drawer-default-size;
+      left: 0;
+
+      right: 0;
+    }
+  }
+
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
+    background: $dark-drawer-background-color;
+    box-shadow: $pt-dark-dialog-box-shadow;
+    color: $pt-dark-text-color;
+  }
+}
+
+.#{$ns}-drawer-header {
+  align-items: center;
+  border-radius: 0;
+  box-shadow: 0 1px 0 $pt-divider-black;
+  display: flex;
+  flex: 0 0 auto;
+  min-height: $pt-icon-size-large + $drawer-padding;
+  padding: $drawer-padding * 0.25;
+  padding-left: $drawer-padding;
+  position: relative;
+
+  .#{$ns}-icon-large,
+  .#{$ns}-icon {
+    color: $pt-icon-color;
+    flex: 0 0 auto;
+    margin-right: $drawer-padding * 0.5;
+  }
+
+  .#{$ns}-heading {
+    @include overflow-ellipsis();
+    flex: 1 1 auto;
+    line-height: inherit;
+    margin: 0;
+
+    &:last-child {
+      margin-right: $drawer-padding;
+    }
+  }
+
+  .#{$ns}-dark & {
+    box-shadow: 0 1px 0 $pt-dark-divider-black;
+
+    .#{$ns}-icon-large,
+    .#{$ns}-icon {
+      color: $pt-dark-icon-color;
+    }
+  }
+}
+
+.#{$ns}-drawer-body {
+  flex: 1 1 auto;
+  line-height: $pt-grid-size * 1.8;
+  overflow: auto;
+}
+
+.#{$ns}-drawer-footer {
+  box-shadow: inset 0 1px 0 $pt-divider-black;
+  flex: 0 0 auto;
+  padding: $drawer-padding*0.5 $drawer-padding;
+  position: relative;
+
+  .#{$ns}-dark & {
+    box-shadow: inset 0 1px 0 $pt-dark-divider-black;
+  }
+}

package/styles/blueprint/src/components/editable-text/_editable-text.scss

@@ -0,0 +1,156 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../forms/common";
+
+.#{$ns}-editable-text {
+  cursor: text;
+  display: inline-block;
+  max-width: 100%;
+  position: relative;
+  vertical-align: top;
+  white-space: nowrap;
+
+  // input styles on the ::before
+  &::before {
+    @include position-all(absolute, -$pt-border-radius);
+    border-radius: $pt-border-radius;
+    content: "";
+    transition: background-color $pt-transition-duration $pt-transition-ease,
+                box-shadow $pt-transition-duration $pt-transition-ease;
+  }
+
+  &:hover::before {
+    box-shadow: input-transition-shadow($input-shadow-color-focus),
+                inset 0 0 0 1px $pt-divider-black;
+  }
+
+  &.#{$ns}-editable-text-editing::before {
+    background-color: $input-background-color;
+    box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+  }
+
+  &.#{$ns}-disabled::before {
+    box-shadow: none;
+  }
+
+  @each $intent, $color in $pt-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      .#{$ns}-editable-text-input,
+      .#{$ns}-editable-text-content {
+        color: $color;
+      }
+
+      &:hover::before {
+        box-shadow: input-transition-shadow($color), inset border-shadow(0.4, $color, 1px);
+      }
+
+      &.#{$ns}-editable-text-editing::before {
+        box-shadow: input-transition-shadow($color, true), $input-box-shadow-focus;
+      }
+    }
+  }
+
+  .#{$ns}-dark & {
+    &:hover::before {
+      box-shadow: input-transition-shadow($dark-input-shadow-color-focus),
+                  inset 0 0 0 1px $pt-dark-divider-white;
+    }
+
+    &.#{$ns}-editable-text-editing::before {
+      background-color: $dark-input-background-color;
+      box-shadow: input-transition-shadow($dark-input-shadow-color-focus, true),
+                  $pt-dark-input-box-shadow;
+    }
+
+    &.#{$ns}-disabled::before {
+      box-shadow: none;
+    }
+
+    @each $intent, $color in $pt-dark-intent-text-colors {
+      &.#{$ns}-intent-#{$intent} {
+        .#{$ns}-editable-text-content {
+          color: $color;
+        }
+
+        &:hover::before {
+          box-shadow: input-transition-shadow($color), inset border-shadow(0.4, $color, 1px);
+        }
+
+        &.#{$ns}-editable-text-editing::before {
+          box-shadow: input-transition-shadow($color, true), $pt-dark-input-box-shadow;
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}-editable-text-input,
+.#{$ns}-editable-text-content {
+  color: inherit;
+  display: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  max-width: inherit;
+  // inherit and respect parent bounds and text styles
+  min-width: inherit;
+  position: relative;
+  // prevent user resizing of textarea
+  resize: none;
+  text-transform: inherit;
+  vertical-align: top;
+}
+
+.#{$ns}-editable-text-input {
+  @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;
+  // IE11's textarea will otherwise inherit the white-space property from its direct parent
+  white-space: pre-wrap;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+.#{$ns}-editable-text-content {
+  overflow: hidden;
+  // magical number to account for slight increase in input width for cursor bar
+  padding-right: 2px;
+  text-overflow: ellipsis;
+  // preserve so trailing whitespace is included in scrollWidth
+  white-space: pre;
+
+  .#{$ns}-editable-text-editing > & {
+    left: 0;
+    position: absolute;
+    visibility: hidden;
+  }
+
+  .#{$ns}-editable-text-placeholder > & {
+    color: $input-placeholder-color;
+
+    .#{$ns}-dark & {
+      color: $dark-input-placeholder-color;
+    }
+  }
+}
+
+.#{$ns}-editable-text.#{$ns}-multiline {
+  display: block;
+
+  .#{$ns}-editable-text-content {
+    overflow: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}