Add styling info to Explorer Readme (#687)

* update readme with styling note

* version patch

* regen docs

docs/docs/sanddance-explorer/v4/index.html

@@ -33,6 +33,19 @@ <h2>Installation</h2>
 <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #0000FF">*</span><span style="color: #000000"> </span><span style="color: #AF00DB">as</span><span style="color: #000000"> </span><span style="color: #001080">ReactDOM</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;react-dom&#039;</span><span style="color: #000000">;</span>
 <span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Explorer</span><span style="color: #000000">, </span><span style="color: #001080">use</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@msrvida/sanddance-explorer&#039;</span><span style="color: #000000">;</span>
 
+<span style="color: #008000">//quickstart: use the included stylesheet</span>
+<span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;@msrvida/sanddance-explorer/dist/css/sanddance-explorer.css&quot;</span>
+
+<span style="color: #008000">/*</span>
+<span style="color: #008000">  in your own stylesheet, you can modify the sanddance-explorer class to fit your needs.</span>
+<span style="color: #008000">  Example:</span>
+
+<span style="color: #008000">.sanddance-explorer {</span>
+<span style="color: #008000">  height: 800px;</span>
+<span style="color: #008000">}</span>
+
+<span style="color: #008000">*/</span>
+
 <span style="color: #001080">fluentui</span><span style="color: #000000">.</span><span style="color: #795E26">initializeIcons</span><span style="color: #000000">();</span>
 
 <span style="color: #795E26">use</span><span style="color: #000000">(</span><span style="color: #001080">fluentui</span><span style="color: #000000">, </span><span style="color: #001080">React</span><span style="color: #000000">, </span><span style="color: #001080">ReactDOM</span><span style="color: #000000">, </span><span style="color: #001080">vega</span><span style="color: #000000">);</span>

docs/docs/sanddance-explorer/v4/interfaces/controls.IDialogProps.html

@@ -486,7 +486,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> key</h3>
 				<aside class="tsd-sources">
 					<p>Inherited from FluentUITypes.IDialogProps.key</p>
 					<ul>
-						<li>Defined in fluentui-react-cdn-typings/node_modules/@types/react/index.d.ts:130</li>
+						<li>Defined in fluentui-react-cdn-typings/node_modules/@types/react/index.d.ts:129</li>
 					</ul>
 				</aside>
 			</section>
@@ -547,7 +547,7 @@ <h3><span class="tsd-flag ts-flagOptional">Optional</span> ref</h3>
 				<aside class="tsd-sources">
 					<p>Inherited from FluentUITypes.IDialogProps.ref</p>
 					<ul>
-						<li>Defined in fluentui-react-cdn-typings/node_modules/@types/react/index.d.ts:136</li>
+						<li>Defined in fluentui-react-cdn-typings/node_modules/@types/react/index.d.ts:135</li>
 					</ul>
 				</aside>
 			</section>

docs/docs/sanddance-explorer/v4/modules.html

@@ -109,7 +109,7 @@ <h3><span class="tsd-flag ts-flagConst">Const</span> Explorer</h3>
 				<div class="tsd-signature tsd-kind-icon">Explorer<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">typeof </span><a href="classes/Explorer_Class.html" class="tsd-signature-type" data-tsd-kind="Class">Explorer_Class</a><span class="tsd-signature-symbol"> = ...</span></div>
 				<aside class="tsd-sources">
 					<ul>
-						<li>Defined in <a href="https://github.com/microsoft/SandDance/blob/master/packages/sanddance-explorer/src/explorer.tsx#L1557">sanddance-explorer/src/explorer.tsx:1557</a></li>
+						<li>Defined in <a href="https://github.com/microsoft/SandDance/blob/master/packages/sanddance-explorer/src/explorer.tsx#L1558">sanddance-explorer/src/explorer.tsx:1558</a></li>
 					</ul>
 				</aside>
 			</section>

packages/sanddance-explorer/README.md

@@ -26,6 +26,19 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Explorer, use } from '@msrvida/sanddance-explorer';
 
+//quickstart: use the included stylesheet
+import "@msrvida/sanddance-explorer/dist/css/sanddance-explorer.css"
+
+/*
+  in your own stylesheet, you can modify the sanddance-explorer class to fit your needs.
+  Example:
+
+.sanddance-explorer {
+  height: 800px;
+}
+
+*/
+
 fluentui.initializeIcons();
 
 use(fluentui, React, ReactDOM, vega);

packages/sanddance-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@msrvida/sanddance-explorer",
-  "version": "4.1.6",
+  "version": "4.1.7",
   "description": "SandDance data exploration React component.",
   "main": "dist/es6/index.js",
   "repository": {