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

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

@@ -0,0 +1,239 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "~@blueprintjs/icons/src/icons";
+@import "../../common/variables";
+@import "../button/common";
+
+$input-padding-horizontal: $pt-grid-size !default;
+$input-small-padding: $pt-input-height-small - $pt-icon-size-standard !default;
+$input-font-weight: 400 !default;
+$input-transition: box-shadow $pt-transition-duration $pt-transition-ease;
+
+$input-color: $pt-text-color !default;
+$input-color-disabled: $button-color-disabled !default;
+$input-placeholder-color: $pt-text-color-disabled !default;
+$input-background-color: $white !default;
+$input-background-color-disabled: rgba($light-gray1, 0.5) !default;
+$input-shadow-color-focus: $pt-intent-primary !default;
+
+$dark-input-color: $pt-dark-text-color !default;
+$dark-input-color-disabled: $dark-button-color-disabled !default;
+$dark-input-placeholder-color: $pt-dark-text-color-disabled !default;
+$dark-input-background-color: rgba($black, 0.3) !default;
+$dark-input-background-color-disabled: rgba($dark-gray5, 0.5) !default;
+$dark-input-shadow-color-focus: $pt-intent-primary !default;
+
+$control-indicator-size: $pt-icon-size-standard !default;
+$control-indicator-size-large: $pt-icon-size-large !default;
+
+// avoids edge blurriness for light theme focused default input
+// second box-shadow of $pt-input-box-shadow
+$input-box-shadow-focus: inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
+
+// for best visual results, button group and control group elements should be
+// stacked in the following order to ensure sharp edges in all cases and states:
+
+$control-group-stack: (
+  // lowest z-index
+  "input-disabled",
+  "input-default",
+  "button-disabled",
+  "button-default",
+  "button-focus",
+  "button-hover",
+  "button-active",
+  "intent-button-disabled",
+  "intent-button-default",
+  "intent-button-focus",
+  "intent-button-hover",
+  "intent-button-active",
+  "intent-input-default",
+  "input-focus",
+  "intent-input-focus",
+  "input-group-children",
+  "select-caret"
+);
+
+// animating shadows requires the same number of shadows in different states
+@function input-transition-shadow($color: $input-shadow-color-focus, $focus: false) {
+  @if $focus {
+    @return
+      border-shadow(1, $color, 1px),
+      border-shadow(0.3, $color, 3px);
+  } @else {
+    @return
+      border-shadow(0, $color, 0),
+      border-shadow(0, $color, 0);
+  }
+}
+
+@function dark-input-transition-shadow($color: $dark-input-shadow-color-focus, $focus: false) {
+  @if $focus {
+    @return
+      border-shadow(1, $color, 1px),
+      border-shadow(1, $color, 1px), // duplicating to minimize browser antialiasing in dark
+      border-shadow(0.3, $color, 3px);
+  } @else {
+    @return
+      border-shadow(0, $color, 0),
+      border-shadow(0, $color, 0),
+      border-shadow(0, $color, 0);
+  }
+}
+
+@mixin pt-input() {
+  @include pt-input-placeholder();
+  appearance: none;
+  background: $input-background-color;
+  border: none;
+  border-radius: $pt-border-radius;
+  box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
+  color: $input-color;
+  font-size: $pt-font-size;
+  font-weight: $input-font-weight;
+  height: $pt-input-height;
+  line-height: $pt-input-height;
+
+  outline: none;
+  padding: 0 $input-padding-horizontal;
+  transition: $input-transition;
+  vertical-align: middle;
+
+  &:focus,
+  &.#{$ns}-active {
+    box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+  }
+
+  &[type="search"],
+  &.#{$ns}-round {
+    border-radius: $pt-input-height;
+    // override normalize.css
+    box-sizing: border-box;
+    padding-left: $pt-grid-size;
+  }
+
+  &[readonly] {
+    box-shadow: inset 0 0 0 1px $pt-divider-black;
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    @include pt-input-disabled();
+  }
+}
+
+@mixin pt-input-placeholder() {
+  &::placeholder {
+    color: $input-placeholder-color;
+    // normalize.css sets an opacity less than 1, we don't want this
+    opacity: 1;
+  }
+}
+
+@mixin pt-input-disabled() {
+  background: $input-background-color-disabled;
+  box-shadow: none;
+  color: $input-color-disabled;
+  cursor: not-allowed;
+  resize: none;
+}
+
+@mixin pt-input-large() {
+  font-size: $pt-font-size-large;
+  height: $pt-input-height-large;
+  line-height: $pt-input-height-large;
+
+  &[type="search"],
+  &.#{$ns}-round {
+    padding: 0 ($input-padding-horizontal * 1.5);
+  }
+}
+
+@mixin pt-input-small() {
+  font-size: $pt-font-size-small;
+  height: $pt-input-height-small;
+  line-height: $pt-input-height-small;
+  padding-left: $input-small-padding;
+  padding-right: $input-small-padding;
+
+  &[type="search"],
+  &.#{$ns}-round {
+    padding: 0 ($input-small-padding * 1.5);
+  }
+}
+
+@mixin pt-dark-input-disabled() {
+  background: $dark-input-background-color-disabled;
+  box-shadow: none;
+  color: $dark-input-color-disabled;
+}
+
+@mixin pt-dark-input-placeholder() {
+  &::placeholder {
+    color: $dark-input-placeholder-color;
+  }
+}
+
+@mixin pt-dark-input() {
+  @include pt-dark-input-placeholder();
+  background: $dark-input-background-color;
+
+  box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus),
+              $pt-dark-input-box-shadow;
+  color: $dark-input-color;
+
+  &:focus {
+    box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true),
+                $pt-dark-input-box-shadow;
+  }
+
+  &[readonly] {
+    box-shadow: inset 0 0 0 1px $pt-dark-divider-black;
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    @include pt-dark-input-disabled();
+  }
+}
+
+@mixin pt-input-intent($color) {
+  box-shadow: input-transition-shadow($color),
+              inset border-shadow(1, $color),
+              $pt-input-box-shadow;
+
+  &:focus {
+    box-shadow: input-transition-shadow($color, true),
+                $input-box-shadow-focus;
+  }
+
+  &[readonly] {
+    box-shadow: inset 0 0 0 1px $color;
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    box-shadow: none;
+  }
+}
+
+@mixin pt-dark-input-intent($color) {
+  box-shadow: dark-input-transition-shadow($color),
+              inset border-shadow(1, $color),
+              $pt-dark-input-box-shadow;
+
+  &:focus {
+    box-shadow: dark-input-transition-shadow($color, true),
+                $pt-dark-input-box-shadow;
+  }
+
+  &[readonly] {
+    box-shadow: inset 0 0 0 1px $color;
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,276 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../button/common";
+@import "./common";
+
+/*
+Control groups
+
+Markup:
+<div class="#{$ns}-control-group">
+  <button class="#{$ns}-button #{$ns}-icon-filter">Filter</button>
+  <input type="text" class="#{$ns}-input" placeholder="Find filters..." />
+</div>
+<div class="#{$ns}-control-group">
+  <div class="#{$ns}-select">
+    <select>
+      <option selected>Filter...</option>
+      <option value="1">Issues</option>
+      <option value="2">Requests</option>
+      <option value="3">Projects</option>
+    </select>
+  </div>
+  <div class="#{$ns}-input-group">
+    <span class="#{$ns}-icon #{$ns}-icon-search"></span>
+    <input type="text" class="#{$ns}-input" value="from:ggray to:allorca" />
+  </div>
+</div>
+<div class="#{$ns}-control-group">
+  <div class="#{$ns}-input-group">
+    <span class="#{$ns}-icon #{$ns}-icon-people"></span>
+    <input type="text" class="#{$ns}-input" placeholder="Find collaborators..." style="padding-right:94px" />
+    <div class="#{$ns}-input-action">
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-intent-primary">
+        can view<span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
+      </button>
+    </div>
+  </div>
+  <button class="#{$ns}-button #{$ns}-intent-primary">Add</button>
+</div>
+
+Styleguide control-group
+*/
+
+.#{$ns}-control-group {
+  // create a new stacking context to isolate all the z-indices
+  @include new-render-layer();
+  @include pt-flex-container(row);
+  // each child is full height
+  align-items: stretch;
+
+  // similarly to button groups, elements in control groups are stacked in a
+  // very particular order for best visual results. in each level of selector
+  // specificity, we define disabled styles last so that they override all other
+  // equally-specific styles (e.g. we don't want mouse interactions or focus
+  // changes to change the z-index of a disabled element).
+
+  .#{$ns}-button,
+  .#{$ns}-html-select,
+  .#{$ns}-input,
+  .#{$ns}-select {
+    // create a new stacking context
+    position: relative;
+  }
+
+  .#{$ns}-input {
+    // inherit radius since it's most likely to be zero
+    border-radius: inherit;
+    z-index: index($control-group-stack, "input-default");
+
+    &:focus {
+      border-radius: $pt-border-radius;
+      z-index: index($control-group-stack, "input-focus");
+    }
+
+    &[class*="#{$ns}-intent"] {
+      z-index: index($control-group-stack, "intent-input-default");
+
+      &:focus {
+        z-index: index($control-group-stack, "intent-input-focus");
+      }
+    }
+
+    &[readonly],
+    &:disabled,
+    &.#{$ns}-disabled {
+      z-index: index($control-group-stack, "input-disabled");
+    }
+  }
+
+  .#{$ns}-input-group[class*="#{$ns}-intent"] .#{$ns}-input {
+    z-index: index($control-group-stack, "intent-input-default");
+
+    &:focus {
+      z-index: index($control-group-stack, "intent-input-focus");
+    }
+  }
+
+  .#{$ns}-button,
+  .#{$ns}-html-select select,
+  .#{$ns}-select select {
+    @include new-render-layer();
+    // inherit radius since it's most likely to be zero
+    border-radius: inherit;
+    z-index: index($control-group-stack, "button-default");
+
+    &:focus {
+      z-index: index($control-group-stack, "button-focus");
+    }
+
+    &:hover {
+      z-index: index($control-group-stack, "button-hover");
+    }
+
+    &:active {
+      z-index: index($control-group-stack, "button-active");
+    }
+
+    &[readonly],
+    &:disabled,
+    &.#{$ns}-disabled {
+      z-index: index($control-group-stack, "button-disabled");
+    }
+
+    &[class*="#{$ns}-intent"] {
+      z-index: index($control-group-stack, "intent-button-default");
+
+      &:focus {
+        z-index: index($control-group-stack, "intent-button-focus");
+      }
+
+      &:hover {
+        z-index: index($control-group-stack, "intent-button-hover");
+      }
+
+      &:active {
+        z-index: index($control-group-stack, "intent-button-active");
+      }
+
+      &[readonly],
+      &:disabled,
+      &.#{$ns}-disabled {
+        z-index: index($control-group-stack, "intent-button-disabled");
+      }
+    }
+  }
+
+  // input group contents appear above input always
+  .#{$ns}-input-group > .#{$ns}-icon,
+  .#{$ns}-input-group > .#{$ns}-button,
+  .#{$ns}-input-group > .#{$ns}-input-action {
+    z-index: index($control-group-stack, "input-group-children");
+  }
+
+  // keep the select-menu carets on top of everything always (particularly when
+  // .#{$ns}-selects are focused).
+  .#{$ns}-select::after,
+  .#{$ns}-html-select::after,
+  .#{$ns}-select > .#{$ns}-icon,
+  .#{$ns}-html-select > .#{$ns}-icon {
+    z-index: index($control-group-stack, "select-caret");
+  }
+
+  // have consecutive elements share a border
+  &:not(.#{$ns}-vertical) {
+    > * {
+      margin-right: -$button-border-width;
+    }
+
+    .#{$ns}-dark & {
+      > * {
+        margin-right: 0;
+      }
+
+      // consecutive buttons within a button group look okay out of the box, but
+      // we need need to make a small correction for non-grouped buttons. this
+      // replicates what's already done in dark theme button groups.
+      > .#{$ns}-button + .#{$ns}-button {
+        margin-left: $button-border-width;
+      }
+    }
+  }
+
+  // Add border radius inheritance to support components wrapped in a popover
+  .#{$ns}-popover-wrapper,
+  .#{$ns}-popover-target {
+    border-radius: inherit;
+  }
+
+  // round the left corners of the left-most element
+  > :first-child {
+    border-radius: $pt-border-radius 0 0 $pt-border-radius;
+  }
+
+  // round the right corners of the right-most element
+  > :last-child {
+    border-radius: 0 $pt-border-radius $pt-border-radius 0;
+    margin-right: 0;
+  }
+
+  // round all the corners of the only child element
+  > :only-child {
+    border-radius: $pt-border-radius;
+    margin-right: 0;
+  }
+
+  // bring back border radius on these buttons
+  .#{$ns}-input-group .#{$ns}-button {
+    border-radius: $pt-border-radius;
+  }
+
+  /*
+  Responsive control groups
+
+  Markup:
+  <div class="#{$ns}-control-group">
+    <div class="#{$ns}-input-group #{$ns}-fill">
+      <span class="#{$ns}-icon #{$ns}-icon-people"></span>
+      <input type="text" class="#{$ns}-input" placeholder="Find collaborators..." />
+    </div>
+    <button class="#{$ns}-button #{$ns}-intent-primary">Add</button>
+  </div>
+  <div class="#{$ns}-control-group #{$ns}-fill">
+    <button class="#{$ns}-button #{$ns}-icon-minus #{$ns}-fixed"></button>
+    <input type="text" class="#{$ns}-input" placeholder="Enter a value..." />
+    <button class="#{$ns}-button #{$ns}-icon-plus #{$ns}-fixed"></button>
+  </div>
+
+  Styleguide control-group-fill
+  */
+
+  > .#{$ns}-fill {
+    flex: 1 1 auto;
+  }
+
+  &.#{$ns}-fill > *:not(.#{$ns}-fixed) {
+    flex: 1 1 auto;
+  }
+
+  /*
+  Vertical control groups
+
+  Markup:
+  <div class="#{$ns}-control-group #{$ns}-vertical" style="width: 300px;">
+    <div class="#{$ns}-input-group #{$ns}-large">
+      <span class="#{$ns}-icon #{$ns}-icon-person"></span>
+      <input type="text" class="#{$ns}-input" placeholder="Username" />
+    </div>
+    <div class="#{$ns}-input-group #{$ns}-large">
+      <span class="#{$ns}-icon #{$ns}-icon-lock"></span>
+      <input type="password" class="#{$ns}-input" placeholder="Password" />
+    </div>
+    <button class="#{$ns}-button #{$ns}-large #{$ns}-intent-primary">Login</button>
+  </div>
+
+  Styleguide control-group-vertical
+  */
+
+  &.#{$ns}-vertical {
+    flex-direction: column;
+
+    > * {
+      margin-top: -$button-border-width;
+    }
+
+    > :first-child {
+      border-radius: $pt-border-radius $pt-border-radius 0 0;
+      margin-top: 0;
+    }
+
+    > :last-child {
+      border-radius: 0 0 $pt-border-radius $pt-border-radius;
+    }
+  }
+}