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

package/styles/blueprint/src/components/forms/_form-group.scss

@@ -0,0 +1,111 @@
+// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../../common/mixins";
+@import "common";
+
+/*
+Form groups
+
+Markup:
+<div class="#{$ns}-form-group {{.modifier}}">
+  <label class="#{$ns}-label" for="form-group-input">
+    Label
+    <span class="#{$ns}-text-muted">(required)</span>
+  </label>
+  <div class="#{$ns}-form-content">
+    <div class="#{$ns}-input-group {{.modifier}}">
+      <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
+      <input id="form-group-input" type="text" {{:modifier}} class="#{$ns}-input"
+             style="width: 200px;" placeholder="Placeholder text" dir="auto" />
+    </div>
+    <div class="#{$ns}-form-helper-text">Please enter a value</div>
+  </div>
+</div>
+
+:disabled - Disable the input.
+.#{$ns}-disabled - Disabled styles. Input must be disabled separately via attribute.
+.#{$ns}-inline - Label and content appear side by side.
+.#{$ns}-intent-primary - Apply intent to form group and input separately.
+
+Styleguide form-group
+*/
+
+.#{$ns}-form-group {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 ($pt-grid-size * 1.5);
+
+  label.#{$ns}-label {
+    margin-bottom: $pt-grid-size * 0.5;
+  }
+
+  .#{$ns}-control {
+    margin-top: ($pt-input-height - $control-indicator-size) * 0.5;
+  }
+
+  .#{$ns}-form-helper-text {
+    color: $pt-text-color-muted;
+    font-size: $pt-font-size-small;
+    margin-top: $pt-grid-size * 0.5;
+  }
+
+  // stylelint-disable-next-line order/declaration-block-order
+  @each $intent, $color in $pt-intent-text-colors {
+    &.#{$ns}-intent-#{$intent} {
+      .#{$ns}-form-helper-text {
+        color: $color;
+      }
+    }
+  }
+
+  &.#{$ns}-inline {
+    align-items: flex-start;
+    flex-direction: row;
+
+    &.#{$ns}-large label.#{$ns}-label {
+      line-height: $pt-input-height-large;
+      margin: 0 $pt-grid-size 0 0;
+    }
+
+    label.#{$ns}-label {
+      line-height: $pt-input-height;
+      margin: 0 $pt-grid-size 0 0;
+    }
+  }
+
+  &.#{$ns}-disabled {
+    .#{$ns}-label,
+    .#{$ns}-text-muted,
+    .#{$ns}-form-helper-text {
+      // disabled state always overrides over styles
+      // stylelint-disable-next-line declaration-no-important
+      color: $pt-text-color-disabled !important;
+    }
+  }
+
+  .#{$ns}-dark & {
+    @each $intent, $color in $pt-dark-intent-text-colors {
+      &.#{$ns}-intent-#{$intent} {
+        .#{$ns}-form-helper-text {
+          color: $color;
+        }
+      }
+    }
+
+    .#{$ns}-form-helper-text {
+      color: $pt-dark-text-color-muted;
+    }
+
+    &.#{$ns}-disabled {
+      .#{$ns}-label,
+      .#{$ns}-text-muted,
+      .#{$ns}-form-helper-text {
+        // disabled state always overrides over styles
+        // stylelint-disable-next-line declaration-no-important
+        color: $pt-dark-text-color-disabled !important;
+      }
+    }
+  }
+}

package/styles/blueprint/src/components/forms/_index.scss

@@ -0,0 +1,20 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+// NOTE: this partial file is imported once here so form components can just use it.
+// multiple @imports of shared/forms from different files causes placeholder @extends to
+// output CSS multiple times which breaks textbox padding.
+@import "./common";
+
+@import "./control-group";
+@import "./controls";
+@import "./file-input";
+@import "./form-group";
+@import "./input-group";
+@import "./input";
+@import "./label";
+@import "./numeric-input";
+
+form {
+  display: block;
+}

package/styles/blueprint/src/components/forms/_input-group.scss

@@ -0,0 +1,247 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../button/common";
+
+/*
+Input groups
+
+Markup:
+<div class="#{$ns}-input-group {{.modifier}}">
+  <span class="#{$ns}-icon #{$ns}-icon-filter"></span>
+  <input type="text" class="#{$ns}-input" {{:modifier}} placeholder="Filter histogram..." />
+</div>
+<div class="#{$ns}-input-group {{.modifier}}">
+  <input type="password" class="#{$ns}-input" {{:modifier}} placeholder="Enter your password..." />
+  <button class="#{$ns}-button #{$ns}-minimal #{$ns}-intent-warning #{$ns}-icon-lock" {{:modifier}}></button>
+</div>
+<div class="#{$ns}-input-group {{.modifier}}">
+  <span class="#{$ns}-icon #{$ns}-icon-search"></span>
+  <input type="text" class="#{$ns}-input" {{:modifier}} placeholder="Search" />
+  <button class="#{$ns}-button #{$ns}-minimal #{$ns}-intent-primary #{$ns}-icon-arrow-right" {{:modifier}}></button>
+</div>
+
+:disabled - Disabled input. Must be added separately to the <code>&#60;input&#62;</code> and <code>&#60;button&#62;</code>. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-input-group</code> for icon coloring (not shown below).
+.#{$ns}-round - Rounded caps. Button will also be rounded.
+.#{$ns}-large - Large group. Children will adjust size accordingly.
+.#{$ns}-small - Small group. Children will adjust size accordingly.
+.#{$ns}-intent-primary - Primary intent. (All 4 intents are supported.)
+.#{$ns}-fill - Take up full width of parent element.
+
+Styleguide input-group
+*/
+
+// 3px space between small button and regular input
+$input-button-height: $pt-button-height-small !default;
+// 5px space between regular button and large input
+$input-button-height-large: $pt-button-height !default;
+// 1px space between regular button and small input
+$input-button-height-small: $pt-button-height-smaller !default;
+
+.#{$ns}-input-group {
+  display: block;
+  position: relative;
+
+  .#{$ns}-input {
+    // explicit position prevents shadow clipping https://github.com/palantir/blueprint/pull/490#issuecomment-273342170
+    position: relative;
+    width: 100%;
+
+    // add space if there's something before or after the input
+    &:not(:first-child) {
+      padding-left: $pt-input-height;
+    }
+
+    &:not(:last-child) {
+      padding-right: $pt-input-height;
+    }
+  }
+
+  .#{$ns}-input-action,
+  > .#{$ns}-input-left-container,
+  > .#{$ns}-button,
+  > .#{$ns}-icon {
+    position: absolute;
+    top: 0;
+
+    // glue it to the end it appears on
+    &:first-child {
+      left: 0;
+    }
+
+    &:last-child {
+      right: 0;
+    }
+  }
+
+  .#{$ns}-button {
+    @include pt-button-height($input-button-height);
+    margin: ($pt-input-height - $input-button-height) * 0.5;
+    padding: $button-padding-small;
+
+    // icons CSS API support
+    &:empty { padding: 0; }
+  }
+
+  // bump icon or left content up so it sits above input
+  > .#{$ns}-input-left-container,
+  > .#{$ns}-icon {
+    z-index: 1;
+  }
+
+  // direct descendant to exclude icons in buttons
+  > .#{$ns}-input-left-container > .#{$ns}-icon,
+  > .#{$ns}-icon {
+    color: $pt-icon-color;
+
+    &:empty {
+      @include pt-icon($pt-icon-size-standard);
+    }
+  }
+
+  // adjusting the margin of spinners in input groups
+  // we have to avoid targetting buttons that contain a spinner
+  > .#{$ns}-input-left-container > .#{$ns}-icon,
+  > .#{$ns}-icon,
+  .#{$ns}-input-action > .#{$ns}-spinner {
+    margin: ($pt-input-height - $pt-icon-size-standard) * 0.5;
+  }
+
+  .#{$ns}-tag {
+    margin: $pt-grid-size * 0.5;
+  }
+
+  // all buttons go gray in default state and assume their native colors only when hovered
+  // or when input is focused. this prevents distracting colors in the UI.
+  .#{$ns}-input:not(:focus) + .#{$ns}-button,
+  .#{$ns}-input:not(:focus) + .#{$ns}-input-action .#{$ns}-button {
+    &.#{$ns}-minimal:not(:hover):not(:focus) {
+      color: $pt-text-color-muted;
+
+      // same goes for dark
+      // stylelint-disable-next-line selector-max-compound-selectors
+      .#{$ns}-dark & {
+        color: $pt-dark-text-color-muted;
+      }
+
+      #{$icon-classes} {
+        color: $pt-icon-color;
+      }
+    }
+
+    &.#{$ns}-minimal:disabled {
+      // override more specific selector above
+      // stylelint-disable declaration-no-important
+      color: $pt-icon-color-disabled !important;
+
+      #{$icon-classes} {
+        color: $pt-icon-color-disabled !important;
+      }
+    }
+  }
+
+  // this class echoes `input:disabled` on the child input, but each action must individually be disabled
+  &.#{$ns}-disabled {
+    // note that enabled buttons inside this input group are still clickable
+    cursor: not-allowed;
+
+    .#{$ns}-icon {
+      color: $pt-icon-color-disabled;
+    }
+  }
+
+  &.#{$ns}-large {
+    .#{$ns}-button {
+      @include pt-button-height($input-button-height-large);
+      margin: ($pt-input-height-large - $input-button-height-large) * 0.5;
+    }
+
+    > .#{$ns}-input-left-container > .#{$ns}-icon,
+    > .#{$ns}-icon,
+    .#{$ns}-input-action > .#{$ns}-spinner {
+      margin: ($pt-input-height-large - $pt-icon-size-standard) * 0.5;
+    }
+
+    .#{$ns}-input {
+      @include pt-input-large();
+
+      &:not(:first-child) {
+        padding-left: $pt-button-height-large;
+      }
+
+      &:not(:last-child) {
+        padding-right: $pt-button-height-large;
+      }
+    }
+  }
+
+  &.#{$ns}-small {
+    .#{$ns}-button {
+      @include pt-button-height($pt-button-height-smaller);
+      margin: ($pt-input-height-small - $pt-button-height-smaller) * 0.5;
+    }
+
+    .#{$ns}-tag {
+      @include pt-button-height($pt-button-height-smaller);
+      margin: ($pt-input-height-small - $pt-button-height-smaller) * 0.5;
+    }
+
+    > .#{$ns}-input-left-container > .#{$ns}-icon,
+    > .#{$ns}-icon,
+    .#{$ns}-input-action > .#{$ns}-spinner {
+      margin: ($pt-input-height-small - $pt-icon-size-standard) * 0.5;
+    }
+
+    .#{$ns}-input {
+      @include pt-input-small();
+
+      &:not(:first-child) {
+        padding-left: $pt-icon-size-standard + $input-small-padding;
+      }
+
+      &:not(:last-child) {
+        padding-right: $pt-icon-size-standard + $input-small-padding;
+      }
+    }
+  }
+
+  &.#{$ns}-fill {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+
+  &.#{$ns}-round {
+    .#{$ns}-button,
+    .#{$ns}-input,
+    .#{$ns}-tag {
+      border-radius: $pt-input-height;
+    }
+  }
+
+  .#{$ns}-dark & {
+    .#{$ns}-icon {
+      color: $pt-dark-icon-color;
+    }
+
+    &.#{$ns}-disabled .#{$ns}-icon {
+      color: $pt-dark-icon-color-disabled;
+    }
+  }
+
+  @each $intent, $color in $pt-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      .#{$ns}-input {
+        @include pt-input-intent($color);
+      }
+
+      > .#{$ns}-icon {
+        color: map-get($pt-intent-text-colors, $intent);
+
+        .#{$ns}-dark & {
+          color: map-get($pt-dark-intent-text-colors, $intent);
+        }
+      }
+    }
+  }
+}

package/styles/blueprint/src/components/forms/_input.scss

@@ -0,0 +1,115 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+/*
+Text inputs
+
+Markup:
+<input class="#{$ns}-input {{.modifier}}" {{:modifier}} type="text" placeholder="Text input" dir="auto" />
+
+:disabled - Disabled
+:readonly - Readonly
+.#{$ns}-round - Rounded ends
+.#{$ns}-large - Larger size
+.#{$ns}-small - Small size
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-success - Success intent
+.#{$ns}-intent-warning - Warning intent
+.#{$ns}-intent-danger - Danger intent
+.#{$ns}-fill - Take up full width of parent element
+
+Styleguide input
+*/
+
+.#{$ns}-input {
+  @include pt-input();
+
+  &.#{$ns}-large {
+    @include pt-input-large();
+  }
+
+  &.#{$ns}-small {
+    @include pt-input-small();
+  }
+
+  &.#{$ns}-fill {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+
+  .#{$ns}-dark & {
+    @include pt-dark-input();
+  }
+
+  @each $intent, $color in $pt-intent-colors {
+    &.#{$ns}-intent-#{$intent} {
+      @include pt-input-intent($color);
+
+      .#{$ns}-dark & {
+        @include pt-dark-input-intent($color);
+      }
+    }
+  }
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+/*
+Search inputs
+
+Markup:
+<div class="#{$ns}-input-group {{.modifier}}">
+  <span class="#{$ns}-icon #{$ns}-icon-search"></span>
+  <input class="#{$ns}-input" {{:modifier}} type="search" placeholder="Search input" dir="auto" />
+</div>
+
+:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-input-group</code> for icon coloring (not shown below).
+.#{$ns}-large - Large
+.#{$ns}-small - Small
+
+Styleguide input-search
+*/
+
+/*
+Textareas
+
+Markup:
+<textarea class="#{$ns}-input {{.modifier}}" {{:modifier}} dir="auto"></textarea>
+
+:disabled - Disabled
+:readonly - Readonly
+.#{$ns}-large - Larger font size
+.#{$ns}-small - Small font size
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-danger  - Danger intent
+.#{$ns}-fill  - Take up full width of parent element
+
+Styleguide textarea
+*/
+
+// stylelint-disable-next-line selector-no-qualifying-type
+textarea.#{$ns}-input {
+  max-width: 100%;
+  padding: $input-padding-horizontal;
+
+  &,
+  &.#{$ns}-large,
+  &.#{$ns}-small {
+    // override input styles for these modifiers.
+    // line-height is needed to center text on <input> but not on multiline <textarea>
+    height: auto;
+    line-height: inherit;
+  }
+
+  &.#{$ns}-small {
+    padding: $input-small-padding;
+  }
+
+  .#{$ns}-dark & {
+    @include pt-dark-input();
+  }
+}

package/styles/blueprint/src/components/forms/_label.scss

@@ -0,0 +1,114 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+/*
+Labels
+
+Markup:
+<div>
+  <label class="#{$ns}-label {{.modifier}}">
+    Label A
+    <span class="#{$ns}-text-muted">(optional)</span>
+    <input {{:modifier}} class="#{$ns}-input" style="width: 200px;" type="text" placeholder="Text input" dir="auto" />
+  </label>
+  <label class="#{$ns}-label {{.modifier}}">
+    Label B
+    <div class="#{$ns}-input-group {{.modifier}}">
+      <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
+      <input {{:modifier}} class="#{$ns}-input" style="width: 200px;" type="text" placeholder="Input group" dir="auto" />
+    </div>
+  </label>
+  <label class="#{$ns}-label {{.modifier}}">
+    Label C
+    <div class="#{$ns}-select {{.modifier}}">
+      <select {{:modifier}}>
+        <option selected>Choose an item...</option>
+        <option value="1">One</option>
+      </select>
+    </div>
+  </label>
+</div>
+
+:disabled - Disable the input.
+.#{$ns}-disabled - Disabled styles. Input must be disabled separately via attribute.
+.#{$ns}-inline - Label and content appear side by side.
+
+Styleguide label
+*/
+
+label.#{$ns}-label {
+  display: block;
+  margin-bottom: ($pt-grid-size * 1.5);
+  margin-top: 0;
+
+  .#{$ns}-html-select,
+  .#{$ns}-input,
+  .#{$ns}-select,
+  .#{$ns}-slider,
+  .#{$ns}-popover-wrapper {
+    display: block;
+    margin-top: $pt-grid-size * 0.5;
+    text-transform: none;
+  }
+
+  .#{$ns}-button-group {
+    margin-top: $pt-grid-size * 0.5;
+  }
+
+  .#{$ns}-select select,
+  .#{$ns}-html-select select {
+    font-weight: 400;
+    vertical-align: top;
+    width: 100%;
+  }
+
+  &.#{$ns}-disabled {
+    &,
+    .#{$ns}-text-muted {
+      color: $pt-text-color-disabled;
+    }
+  }
+
+  &.#{$ns}-inline {
+    line-height: $pt-input-height;
+
+    .#{$ns}-html-select,
+    .#{$ns}-input,
+    .#{$ns}-input-group,
+    .#{$ns}-select,
+    .#{$ns}-popover-wrapper {
+      display: inline-block;
+      margin: 0 0 0 ($pt-grid-size * 0.5);
+      vertical-align: top;
+    }
+
+    .#{$ns}-button-group {
+      margin: 0 0 0 ($pt-grid-size * 0.5);
+    }
+
+    .#{$ns}-input-group .#{$ns}-input {
+      margin-left: 0;
+    }
+
+    &.#{$ns}-large {
+      line-height: $pt-input-height-large;
+    }
+  }
+
+  &:not(.#{$ns}-inline) .#{$ns}-popover-target {
+    display: block;
+  }
+
+  .#{$ns}-dark & {
+    color: $pt-dark-heading-color;
+
+    &.#{$ns}-disabled {
+      &,
+      .#{$ns}-text-muted {
+        color: $pt-dark-text-color-disabled;
+      }
+    }
+  }
+}

package/styles/blueprint/src/components/forms/_numeric-input.scss

@@ -0,0 +1,40 @@
+
+@import "../../common/variables";
+@import "./common";
+
+.#{$ns}-numeric-input {
+
+  // we need a very-specific selector here to override specificicty of selectors defined elsewhere.
+  .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
+    // let the buttons shrink to equal heights
+    flex: 1 1 ($pt-button-height * 0.5 - 1);
+    min-height: 0;
+    padding: 0;
+    width: $pt-button-height;
+
+    &:first-child {
+      border-radius: 0 $pt-border-radius 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 $pt-border-radius 0;
+    }
+  }
+
+  // fix button border radii when the buttons are on the left
+  .#{$ns}-button-group.#{$ns}-vertical {
+    &:first-child > .#{$ns}-button {
+      &:first-child {
+        border-radius: $pt-border-radius 0 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 0 $pt-border-radius;
+      }
+    }
+  }
+
+  &.#{$ns}-large .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
+    width: $pt-button-height-large;
+  }
+}

package/styles/blueprint/src/components/hotkeys/_hotkeys.scss

@@ -0,0 +1,50 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+
+@import "../../common/variables";
+@import "../../common/mixins";
+
+.#{$ns}-key-combo {
+  @include pt-flex-container(row, $pt-grid-size * 0.5);
+  align-items: center;
+}
+
+.#{$ns}-hotkey-dialog {
+  padding-bottom: 0;
+  top: $pt-grid-size * 4;
+
+  .#{$ns}-dialog-body {
+    margin: 0;
+    padding: 0;
+  }
+
+  .#{$ns}-hotkey-label {
+    flex-grow: 1;
+  }
+}
+
+.#{$ns}-hotkey-column {
+  margin: auto;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding: $pt-grid-size * 3;
+
+  .#{$ns}-heading {
+    margin-bottom: $pt-grid-size * 2;
+
+    &:not(:first-child) {
+      margin-top: $pt-grid-size * 4;
+    }
+  }
+}
+
+.#{$ns}-hotkey {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 0;
+  margin-right: 0;
+
+  &:not(:last-child) {
+    margin-bottom: $pt-grid-size;
+  }
+}