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

package/styles/blueprint/src/components/button/_button-group.scss

@@ -0,0 +1,240 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../forms/common";
+@import "./common";
+
+/*
+Button groups
+
+Markup:
+<div class="#{$ns}-button-group {{.modifier}}">
+  <button type="button" class="#{$ns}-button #{$ns}-intent-success">Save</button>
+  <button type="button" class="#{$ns}-button #{$ns}-intent-success #{$ns}-icon-caret-down"></button>
+</div>
+<div class="#{$ns}-button-group {{.modifier}}">
+  <a class="#{$ns}-button #{$ns}-icon-database" tabindex="0" role="button">Queries</a>
+  <a class="#{$ns}-button #{$ns}-icon-function" tabindex="0" role="button">Functions</a>
+  <a class="#{$ns}-button" tabindex="0" role="button">
+    Options <span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
+  </a>
+</div>
+<div class="#{$ns}-button-group {{.modifier}}">
+  <a class="#{$ns}-button #{$ns}-icon-chart" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-control" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-graph" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-camera" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-map" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-code" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-th" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-time" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-compressed" tabindex="0" role="button"></a>
+</div>
+
+.#{$ns}-fill - Buttons expand equally to fill container
+.#{$ns}-large - Use large buttons
+.#{$ns}-minimal - Use minimal buttons
+.#{$ns}-vertical - Vertical layout
+
+Styleguide button-group
+*/
+
+.#{$ns}-button-group {
+  display: inline-flex;
+
+  .#{$ns}-button {
+    // ensure button can never be smaller than its default size
+    flex: 0 0 auto;
+    position: relative;
+    z-index: index($control-group-stack, "button-default");
+
+    // the ordering of these z-index CSS rules is particular because of CSS
+    // selector specificity. specifically, disabled styles should have
+    // precedence over hover and active styles to prevent mouse interactions on
+    // disabled buttons from reordering elements in the stack.
+
+    &:focus {
+      z-index: index($control-group-stack, "button-focus");
+    }
+
+    &:hover {
+      z-index: index($control-group-stack, "button-hover");
+    }
+
+    &:active,
+    &.#{$ns}-active {
+      z-index: index($control-group-stack, "button-active");
+    }
+
+    &: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,
+      &.#{$ns}-active {
+        z-index: index($control-group-stack, "intent-button-active");
+      }
+
+      &:disabled,
+      &.#{$ns}-disabled {
+        z-index: index($control-group-stack, "intent-button-disabled");
+      }
+    }
+  }
+
+  // support wrapping buttons in a tooltip, which adds a wrapper element
+  &:not(.#{$ns}-minimal) {
+    > .#{$ns}-popover-wrapper:not(:first-child) .#{$ns}-button,
+    > .#{$ns}-button:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
+    > .#{$ns}-button:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      margin-right: -$button-border-width;
+    }
+  }
+
+  &.#{$ns}-minimal {
+    .#{$ns}-button {
+      @include pt-button-minimal();
+    }
+  }
+
+  .#{$ns}-popover-wrapper,
+  .#{$ns}-popover-target {
+    display: flex;
+    flex: 1 1 auto;
+  }
+
+  /*
+  Responsive
+
+  Markup:
+  <div class="#{$ns}-button-group #{$ns}-large #{$ns}-fill">
+    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-fixed" tabindex="0" role="button">Start</a>
+    <a class="#{$ns}-button #{$ns}-intent-primary" tabindex="0" role="button">Left</a>
+    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-active" tabindex="0" role="button">Middle</a>
+    <a class="#{$ns}-button #{$ns}-intent-primary" tabindex="0" role="button">Right</a>
+    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-fixed" tabindex="0" role="button">End</a>
+  </div>
+  <br />
+  <div class="#{$ns}-button-group #{$ns}-fill">
+    <button class="#{$ns}-button #{$ns}-icon-arrow-left"></button>
+    <button class="#{$ns}-button #{$ns}-fill">Middle</button>
+    <button class="#{$ns}-button #{$ns}-icon-arrow-right"></button>
+  </div>
+
+  Styleguide button-group}-fill
+  */
+
+  &.#{$ns}-fill {
+    display: flex;
+    width: 100%;
+  }
+
+  .#{$ns}-button.#{$ns}-fill,
+  &.#{$ns}-fill .#{$ns}-button:not(.#{$ns}-fixed) {
+    flex: 1 1 auto;
+  }
+
+  /*
+  Vertical button groups
+
+  Markup:
+  <div class="#{$ns}-button-group #{$ns}-vertical">
+    <a class="#{$ns}-button #{$ns}-icon-search-template" role="button" tabindex="0"></a>
+    <a class="#{$ns}-button #{$ns}-icon-zoom-in" role="button" tabindex="0"></a>
+    <a class="#{$ns}-button #{$ns}-icon-zoom-out" role="button" tabindex="0"></a>
+    <a class="#{$ns}-button #{$ns}-icon-zoom-to-fit" role="button" tabindex="0"></a>
+  </div>
+  <div class="#{$ns}-button-group #{$ns}-vertical">
+    <button type="button" class="#{$ns}-button #{$ns}-active">Home</button>
+    <button type="button" class="#{$ns}-button">Pages</button>
+    <button type="button" class="#{$ns}-button">Blog</button>
+    <button type="button" class="#{$ns}-button">Calendar</button>
+  </div>
+  <div class="#{$ns}-button-group #{$ns}-vertical #{$ns}-align-left #{$ns}-large">
+    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-document">Text</button>
+    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-media #{$ns}-active">Media</button>
+    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-link">Sources</button>
+  </div>
+
+  Styleguide button-group-vertical
+  */
+
+  &.#{$ns}-vertical {
+    align-items: stretch;
+    flex-direction: column;
+    vertical-align: top;
+
+    &.#{$ns}-fill {
+      height: 100%;
+      width: unset;
+    }
+
+    .#{$ns}-button {
+      // we never want that margin-right when vertical
+      margin-right: 0 !important; // stylelint-disable-line declaration-no-important
+      // needed to ensure buttons take up the full width when wrapped in a Popover:
+      width: 100%;
+    }
+
+    &:not(.#{$ns}-minimal) {
+      > .#{$ns}-popover-wrapper:first-child .#{$ns}-button,
+      > .#{$ns}-button:first-child {
+        border-radius: $pt-border-radius $pt-border-radius 0 0;
+      }
+
+      > .#{$ns}-popover-wrapper:last-child .#{$ns}-button,
+      > .#{$ns}-button:last-child {
+        border-radius: 0 0 $pt-border-radius $pt-border-radius;
+      }
+
+      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
+      > .#{$ns}-button:not(:last-child) {
+        margin-bottom: -$button-border-width;
+      }
+    }
+  }
+
+  &.#{$ns}-align-left .#{$ns}-button {
+    text-align: left;
+  }
+
+  .#{$ns}-dark & {
+    // support wrapping buttons in a Blueprint.Tooltip, which adds a wrapper element
+    // in dark theme, we adjust the spacing between buttons for best visual results
+    &:not(.#{$ns}-minimal) {
+      // deeply nested selector necessary to target the appropriate popover
+      // wrapper, yet ensure we only style buttons within the target.
+      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
+      > .#{$ns}-button:not(:last-child) {
+        margin-right: $button-border-width;
+      }
+    }
+
+    &.#{$ns}-vertical {
+      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
+      > .#{$ns}-button:not(:last-child) {
+        margin-bottom: $button-border-width;
+      }
+    }
+  }
+}

package/styles/blueprint/src/components/button/_button.scss

@@ -0,0 +1,206 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "./common";
+
+/*
+Button
+
+Markup:
+<a role="button" class="#{$ns}-button {{.modifier}}" {{:modifier}} tabindex="0">Anchor</a>
+<button type="button" class="#{$ns}-button #{$ns}-icon-add {{.modifier}}" {{:modifier}}>Button</button>
+
+:disabled - Disabled state
+.#{$ns}-active - Active appearance
+.#{$ns}-disabled - Disabled appearance
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-success - Success intent
+.#{$ns}-intent-warning - Warning intent
+.#{$ns}-intent-danger - Danger intent
+.#{$ns}-minimal - More subtle appearance
+.#{$ns}-outlined - Subtle yet structured appearance
+.#{$ns}-large - Larger size
+.#{$ns}-small - Smaller size
+.#{$ns}-fill - Fill parent container
+
+Styleguide button
+*/
+.#{$ns}-button {
+  @include pt-button-base();
+  @include pt-button-height($pt-button-height);
+
+  &:empty {
+    // override padding from other modifiers (for CSS icon support)
+    // stylelint-disable-next-line declaration-no-important
+    padding: 0 !important;
+  }
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    cursor: not-allowed;
+  }
+
+  &.#{$ns}-fill {
+    display: flex;
+    width: 100%;
+  }
+
+  &.#{$ns}-align-right,
+  .#{$ns}-align-right & {
+    text-align: right;
+  }
+
+  &.#{$ns}-align-left,
+  .#{$ns}-align-left & {
+    text-align: left;
+  }
+
+  // default styles
+  &:not([class*="#{$ns}-intent-"]) {
+    @include pt-button();
+  }
+
+  // intents
+  @each $intent, $colors in $button-intents {
+    &.#{$ns}-intent-#{$intent} {
+      @include pt-button-intent($colors...);
+    }
+  }
+
+  &[class*="#{$ns}-intent-"] .#{$ns}-button-spinner .#{$ns}-spinner-head {
+    stroke: $white;
+  }
+
+  // size modifiers
+  &.#{$ns}-large,
+  .#{$ns}-large & {
+    @include pt-button-height-large();
+  }
+
+  &.#{$ns}-small,
+  .#{$ns}-small & {
+    @include pt-button-height-small();
+  }
+
+  // loading state
+  &.#{$ns}-loading {
+    position: relative;
+
+    &[class*="#{$ns}-icon-"]::before {
+      visibility: hidden;
+    }
+
+    .#{$ns}-button-spinner {
+      margin: 0;
+      // spinner appears centered within button
+      position: absolute;
+    }
+
+    > :not(.#{$ns}-button-spinner) {
+      visibility: hidden;
+    }
+  }
+
+  // icons
+  &[class*="#{$ns}-icon-"] {
+    &::before {
+      @include pt-icon();
+      color: $pt-icon-color;
+    }
+  }
+
+  #{$icon-classes} {
+    color: $pt-icon-color;
+
+    &.#{$ns}-align-right {
+      margin-left: $button-icon-spacing;
+    }
+  }
+
+  // button with SVG icon only (no text or children)
+  .#{$ns}-icon:first-child:last-child,
+  // if loading, then it contains exactly [spinner, icon]
+  .#{$ns}-spinner + .#{$ns}-icon:last-child {
+    // center icon horizontally. this works for large buttons too.
+    margin: 0 (-($pt-button-height - $pt-icon-size-standard) * 0.5);
+  }
+
+  // dark theme
+  .#{$ns}-dark & {
+    &:not([class*="#{$ns}-intent-"]) {
+      @include pt-dark-button();
+
+      &[class*="#{$ns}-icon-"]::before {
+        color: $pt-dark-icon-color;
+      }
+
+      #{$icon-classes} {
+        color: $pt-dark-icon-color;
+      }
+    }
+
+    &[class*="#{$ns}-intent-"] {
+      @include pt-dark-button-intent();
+
+      .#{$ns}-button-spinner .#{$ns}-spinner-head {
+        stroke: $dark-progress-head-color;
+      }
+    }
+  }
+
+  // disabled and intent button icon should use same color as text
+  &:disabled,
+  &.#{$ns}-disabled,
+  &[class*="#{$ns}-intent-"] {
+    &::before,
+    #{$icon-classes} {
+      // stylelint-disable-next-line declaration-no-important
+      color: inherit !important;
+    }
+  }
+
+  // minimal must come last to override all default styles
+  &.#{$ns}-minimal {
+    @include pt-button-minimal();
+  }
+
+  // outline is based on the styles of minimal
+  &.#{$ns}-outlined {
+    @include pt-button-minimal();
+    @include pt-button-outlined();
+  }
+}
+
+a.#{$ns}-button {
+  text-align: center;
+  text-decoration: none;
+  transition: none;
+
+  &,
+  &:hover,
+  &:active {
+    // override global 'a' styles
+    color: $pt-text-color;
+  }
+
+  &.#{$ns}-disabled {
+    color: $button-color-disabled;
+  }
+}
+
+.#{$ns}-button-text {
+  // default: don't grow to fill but allow shrinking as necessary
+  flex: 0 1 auto;
+}
+
+// when alignment is set, grow to fill and inherit `text-align` set on `.#{$ns}-button`
+.#{$ns}-button,
+.#{$ns}-button-group {
+  &.#{$ns}-align-left,
+  &.#{$ns}-align-right {
+    .#{$ns}-button-text {
+      flex: 1 1 auto;
+    }
+  }
+}