From 365c520201e924a01afe4c30d7ec4d04f77472f4 Mon Sep 17 00:00:00 2001
From: Gilad Gray <giladgray@gmail.com>
Date: Thu, 16 Mar 2017 10:15:35 -0700
Subject: [PATCH] =?UTF-8?q?[DM]=20rename=20.kss-*=20=E2=86=92=20.docs-*=20?=
 =?UTF-8?q?(#850)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* delete unused _markup.scss file
* remove unused kss- things in html
* wholesale rename .kss-* => .docs-*
---
 packages/core/examples/common/baseExample.tsx |  2 +-
 packages/docs/src/common/cssExample.tsx       |  6 ++--
 packages/docs/src/common/resolveExample.tsx   |  2 +-
 .../docs/src/components/modifierTable.tsx     |  2 +-
 packages/docs/src/components/propsTable.tsx   |  2 +-
 packages/docs/src/components/styleguide.tsx   |  2 +-
 packages/docs/src/index.html                  |  3 +-
 packages/docs/src/index.tsx                   |  2 +-
 packages/docs/src/styles/_content.scss        | 26 +++++++---------
 packages/docs/src/styles/_examples.scss       |  6 ++--
 packages/docs/src/styles/_markup.scss         | 30 -------------------
 packages/docs/src/styles/_sections.scss       | 12 ++++----
 12 files changed, 29 insertions(+), 66 deletions(-)
 delete mode 100644 packages/docs/src/styles/_markup.scss

diff --git a/packages/core/examples/common/baseExample.tsx b/packages/core/examples/common/baseExample.tsx
index 03a69cd0fb..ccf8f9ccbf 100644
--- a/packages/core/examples/common/baseExample.tsx
+++ b/packages/core/examples/common/baseExample.tsx
@@ -25,7 +25,7 @@ export default class BaseExample<S> extends React.Component<IBaseExampleProps, S
 
     public render() {
         return (
-            <div className={classNames("kss-example", this.className)} data-example-id={this.props.id}>
+            <div className={classNames("docs-example", this.className)} data-example-id={this.props.id}>
                 <div className="docs-react-example">{this.renderExample()}</div>
                 <div className="docs-react-options">{this.actuallyRenderOptions()}</div>
             </div>
diff --git a/packages/docs/src/common/cssExample.tsx b/packages/docs/src/common/cssExample.tsx
index 9a19a393c3..e8c61b6356 100644
--- a/packages/docs/src/common/cssExample.tsx
+++ b/packages/docs/src/common/cssExample.tsx
@@ -11,11 +11,11 @@ const DEFAULT_MODIFIER: IKssModifier = {
 export const CssExample: React.SFC<IKssExample> = ({ markup, markupHtml, modifiers, reference }) => (
     <div>
         {modifiers.length > 0 ? <ModifierTable modifiers={modifiers} /> : undefined}
-        <div className="kss-example-wrapper" data-reference={reference}>
+        <div className="docs-example-wrapper" data-reference={reference}>
             {renderMarkupForModifier(markup, DEFAULT_MODIFIER)}
             {modifiers.map((mod) => renderMarkupForModifier(markup, mod))}
         </div>
-        <div className="kss-markup" dangerouslySetInnerHTML={{ __html: markupHtml }} />
+        <div className="docs-markup" dangerouslySetInnerHTML={{ __html: markupHtml }} />
     </div>
 );
 
@@ -31,7 +31,7 @@ function renderMarkupForModifier(markup: string, modifier: IKssModifier) {
         }
     });
     return (
-        <div className="kss-example" data-modifier={modifier.name} key={modifier.name}>
+        <div className="docs-example" data-modifier={modifier.name} key={modifier.name}>
             <code>{modifier.name}</code>
             <div dangerouslySetInnerHTML={{ __html: html }} />
         </div>
diff --git a/packages/docs/src/common/resolveExample.tsx b/packages/docs/src/common/resolveExample.tsx
index 524ec76b69..e2596ea1cd 100644
--- a/packages/docs/src/common/resolveExample.tsx
+++ b/packages/docs/src/common/resolveExample.tsx
@@ -54,7 +54,7 @@ export interface IExampleProps {
 }
 
 const Example: React.SFC<IExampleProps> = (props) => (
-    <div className="kss-example-wrapper">
+    <div className="docs-example-wrapper">
         {React.createElement(props.component, { getTheme, id: props.name })}
         <a className="view-example-source" href={props.sourceUrl} target="_blank">
             <span className="pt-icon-standard pt-icon-code">&nbsp;</span>View source on GitHub
diff --git a/packages/docs/src/components/modifierTable.tsx b/packages/docs/src/components/modifierTable.tsx
index 4a8c76fe81..17ade715c0 100644
--- a/packages/docs/src/components/modifierTable.tsx
+++ b/packages/docs/src/components/modifierTable.tsx
@@ -19,7 +19,7 @@ function renderModifier(modifier: IKssModifier, index: number) {
 }
 
 export const ModifierTable: React.SFC<{ modifiers: IKssModifier[] }> = ({ modifiers }) => (
-    <div className="kss-modifiers">
+    <div className="docs-modifiers">
         <table className="pt-table">
             <thead>
                 <tr>
diff --git a/packages/docs/src/components/propsTable.tsx b/packages/docs/src/components/propsTable.tsx
index 5b13328c91..a75134b05d 100644
--- a/packages/docs/src/components/propsTable.tsx
+++ b/packages/docs/src/components/propsTable.tsx
@@ -75,7 +75,7 @@ const renderPropRow = (prop: IInheritedPropertyEntry) => {
 };
 
 export const PropsTable: React.SFC<{ name: string, props: IInheritedPropertyEntry[] }> = ({ name, props }) => (
-    <div className="kss-modifiers">
+    <div className="docs-modifiers">
         <div className="docs-interface-name">{name}</div>
         <table className="pt-table">
             <thead>
diff --git a/packages/docs/src/components/styleguide.tsx b/packages/docs/src/components/styleguide.tsx
index cf2ecbc6ca..5a5111eaae 100644
--- a/packages/docs/src/components/styleguide.tsx
+++ b/packages/docs/src/components/styleguide.tsx
@@ -247,7 +247,7 @@ function queryHTMLElement(parent: Element, selector: string) {
  * Returns the reference of the closest section within `offset` pixels of the top of the viewport.
  */
 function getScrolledReference(offset: number, container: HTMLElement, scrollParent = document.body) {
-    const headings = container.queryAll(".kss-title");
+    const headings = container.queryAll(".docs-title");
     while (headings.length > 0) {
         // iterating in reverse order (popping from end / bottom of page)
         // so the first element below the threshold is the one we want.
diff --git a/packages/docs/src/index.html b/packages/docs/src/index.html
index 9e1b4af0fc..6a518715f1 100644
--- a/packages/docs/src/index.html
+++ b/packages/docs/src/index.html
@@ -9,7 +9,6 @@
   <title>Blueprint – Documentation</title>
 
   <meta name="description" content="">
-  <meta name="generator" content="kss-node">
 
   <link rel="stylesheet" href="docs.css">
   <link rel="icon" href="assets/favicon.png" sizes="32x32" type="image/png" />
@@ -25,7 +24,7 @@
   }
   </script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body id="kss-node">
+<body>
     <div id="blueprint-documentation"></div>
 
     <script src="docs.js"></script>
diff --git a/packages/docs/src/index.tsx b/packages/docs/src/index.tsx
index ada23da132..d686ef1652 100644
--- a/packages/docs/src/index.tsx
+++ b/packages/docs/src/index.tsx
@@ -57,7 +57,7 @@ function resolveInterface(name: string, key: React.Key) {
 const Heading: React.SFC<{ depth: number, header: string, reference: string }> =
     ({ depth, header, reference }) => (
         // use createElement so we can dynamically choose tag based on depth
-        React.createElement(`h${depth}`, { className: "kss-title" },
+        React.createElement(`h${depth}`, { className: "docs-title" },
             <a className="docs-anchor" key="anchor" name={reference} />,
             <a className="docs-anchor-link" href={"#" + reference} key="link">
                 <span className="pt-icon-standard pt-icon-link" />
diff --git a/packages/docs/src/styles/_content.scss b/packages/docs/src/styles/_content.scss
index 96f78cf320..8ab7981515 100644
--- a/packages/docs/src/styles/_content.scss
+++ b/packages/docs/src/styles/_content.scss
@@ -17,7 +17,7 @@ $example-background-color: $content-background-color;
 $dark-example-background-color: $dark-content-background-color;
 
 // title of a section
-.kss-title {
+.docs-title {
   position: relative;
   margin: $heading-margin 0 ($heading-margin / 2);
 
@@ -50,7 +50,7 @@ $dark-example-background-color: $dark-content-background-color;
   }
 
   &:focus,
-  .kss-title:hover & {
+  .docs-title:hover & {
     opacity: 1;
   }
 }
@@ -61,7 +61,7 @@ $dark-example-background-color: $dark-content-background-color;
 }
 
 // modifiers table
-.kss-modifiers {
+.docs-modifiers {
   margin-top: $heading-margin;
   margin-bottom: $heading-margin / 2;
 
@@ -80,7 +80,7 @@ $dark-example-background-color: $dark-content-background-color;
 }
 
 // full-bleed wrapper for example
-.kss-example-wrapper {
+.docs-example-wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -98,16 +98,8 @@ $dark-example-background-color: $dark-content-background-color;
   }
 }
 
-.kss-markup {
-  width: 100%;
-
-  > pre {
-    margin: 0;
-  }
-}
-
 // example itself inside the wrapper
-.kss-example {
+.docs-example {
   display: inline-block;
   flex-basis: 100%;
 
@@ -126,8 +118,8 @@ $dark-example-background-color: $dark-content-background-color;
 }
 
 // modifier labels
-.kss-modifiers code,
-.kss-example > code {
+.docs-modifiers code,
+.docs-example > code {
   display: inline-block;
   line-height: 1.4;
   white-space: nowrap;
@@ -150,6 +142,10 @@ $dark-example-background-color: $dark-content-background-color;
   color: $class-modifier-color;
 }
 
+.docs-markup .editor {
+  margin: 0;
+}
+
 // additions to the syntax theme
 .editor {
   overflow: auto;
diff --git a/packages/docs/src/styles/_examples.scss b/packages/docs/src/styles/_examples.scss
index 6cce901c58..478d31c8a0 100644
--- a/packages/docs/src/styles/_examples.scss
+++ b/packages/docs/src/styles/_examples.scss
@@ -117,6 +117,7 @@ $options-margin: $pt-grid-size * 3;
 }
 
 .docs-overlay-example-transition {
+  $overlay-example-width: $pt-grid-size * 40;
   $enter: (
     transform: (translateY(-50vh) rotate(-10deg), translateY(0) rotate(0deg))
   );
@@ -139,9 +140,6 @@ $options-margin: $pt-grid-size * 3;
     $pt-transition-duration * 5,
     $before: "&"
   );
-
-  $overlay-example-width: $pt-grid-size * 40;
-
   top: $overlay-example-width / 2;
   left: calc(50% - #{$overlay-example-width / 2});
   z-index: $pt-z-index-overlay + 1;
@@ -214,7 +212,7 @@ $options-margin: $pt-grid-size * 3;
   line-height: $pt-navbar-height;
 }
 
-.kss-example-wrapper .pt-navbar {
+.docs-example-wrapper .pt-navbar {
   position: static;
 }
 
diff --git a/packages/docs/src/styles/_markup.scss b/packages/docs/src/styles/_markup.scss
deleted file mode 100644
index 42faf0da30..0000000000
--- a/packages/docs/src/styles/_markup.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
-// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
-// and https://github.com/palantir/blueprint/blob/master/PATENTS
-
-@import "../../../core/src/common/variables";
-@import "../../../core/src/components/button/common";
-
-.kss-markup {
-  .markup-header {
-    margin-bottom: -1px;
-    border-radius: $pt-border-radius $pt-border-radius 0 0;
-    box-shadow: inset border-shadow(0.1);
-    background: $light-gray4;
-    padding: ($pt-grid-size / 2) $pt-grid-size;
-
-    p {
-      margin-bottom: 0;
-    }
-
-    .pt-dark & {
-      box-shadow: inset border-shadow(0.3);
-      background: $dark-gray4;
-    }
-  }
-
-  .prettyprint {
-    border-radius: 0 0 $pt-border-radius $pt-border-radius;
-  }
-}
diff --git a/packages/docs/src/styles/_sections.scss b/packages/docs/src/styles/_sections.scss
index 3d1dbe7950..48dce83575 100644
--- a/packages/docs/src/styles/_sections.scss
+++ b/packages/docs/src/styles/_sections.scss
@@ -26,7 +26,7 @@
 // `.pt-fill` modifiers will always occupy an entire row.
 // (Default styles give flex-basis of 100% to each example.)
 @mixin examples-per-row($amount) {
-  .kss-example {
+  .docs-example {
     flex-basis: floor(100% / $amount);
     padding-right: $pt-grid-size * 2;
 
@@ -62,7 +62,7 @@
 #{reference("pt-checkbox")},
 #{reference("pt-radio")},
 #{reference("pt-switch")} {
-  .kss-example {
+  .docs-example {
     flex-basis: 10%;
   }
 }
@@ -105,7 +105,7 @@
 #{reference("pt-select")} {
   @include examples-per-row(4);
 
-  .kss-example {
+  .docs-example {
     padding-right: 0;
   }
 }
@@ -113,14 +113,14 @@
 #{reference("pt-select.pt-inline")} {
   justify-content: initial;
 
-  .kss-example {
+  .docs-example {
     flex-basis: $pt-grid-size * 25;
     margin-right: $options-margin;
   }
 }
 
 #{reference("pt-dialog")} {
-  .kss-example {
+  .docs-example {
     height: $pt-grid-size * 27;
   }
 
@@ -135,7 +135,7 @@
 #{reference("pt-menu.pt-menu-header")} {
   justify-content: initial;
 
-  .kss-example {
+  .docs-example {
     flex-basis: $pt-grid-size * 15;
     margin-right: $pt-grid-size * 8;
     padding-right: 0;