Merge latest changes from upstream/develop to graphext branch

* Fix tabs querySelector on jsdom (palantir#2761) * match event handler prop name with code and docs (palantir#2760) * matched icons with the original design (palantir#2780) * [Popover] captureDismiss=false by default (palantir#2776) * disable captureDismiss by default as it breaks links * fix tests * redirect old v1, v2 sites to new URLs (palantir#2773) * Remove `HACKHACK` (palantir#2790) BP requires `"@types/react": "^16.0.34"` and it is pinned by `yarn.lock`. For this version of typings, it is provided an overload, then the `HACKHACK` does not persist. ```ts function createElement<P>( type: SFC<P> | ComponentClass<P> | string, props?: Attributes & P, ...children: ReactNode[]): ReactElement<P>; ``` See issue: palantir#2785 * [RadioGroup] [HtmlSelect] options support className and disabled (palantir#2783) * Fix: <RadioGroup> passes custom className to options (+ test) * Fix: <HtmlSelect> passes custom className to options (+ test) * HTMLSelect supports disabled * test all options props * remove className test * [DatePicker] ❤️ (palantir#2789) * tests for DateUtils.getDateTime() * replace setStateWithValueIfUncontrolled with setState & updateValue helper refactor handlers to reduce let vars and clarify logic * refactor constructor into helper functions * merge disabled checks * fix test for initial state * massage imports * little bug fixes - ignoring next month change when null - correct day calculation - comments! * bump react-day-picker * areSameDay calls areSameMonth * reduce nesting * fix tests * Add Popover support for "auto-start" and "auto-end" (palantir#2772) * palantir#2770: Popover now accepts 'auto-start' and 'auto-end' positions * Update example * Update docs * Oops, undo unintended changes to example * [Button] Utils.isEmptyReactNode solves icon regression (palantir#2775) * Utils.isEmptyReactNode solves button regression * naming and test * rename in tests * Publish - @blueprintjs/core@3.3.0 * updated Sketch file (palantir#2813) * [TagInput] On paste, don't tag-ify text if no separator included (palantir#2804) * [TagInput] Leave a delimiter-less value in the input on paste * Update tests * Update docs * [DateRangePicker] all tests use enzyme (palantir#2793) * DRP tests use enzyme everywhere with a cool harness * name clash * fix tests in React 15 by using accessor to find latest element when needed * [new] Divider component (palantir#2854) * add Divider component * example * docs edits * replace all modifiers with borders * ignore coverage * remove fill from example * english is hard * [DatePicker] reuse existing components in caption (palantir#2792) * HTMLSelect: add iconProps, fix dark icon color * use HTMLSelect in caption massive reduction in styles * DatePickerNavbar renders prev/next Buttons use Button for another reduction in styles * cache month widths * DatePicker uses single handleMonthChange for all DayPicker events caption (month/year select) and navbar (prev/next buttons) now all use the same logic for changes! * add DPNavbar to DRP * fix & refactor caption & DP tests assertSelectedDays() helper in DP tests replaces getSelectedDays() * add $datepicker-padding variable * adjust paddings to use standard buttons in navbar * month icon won't exceed select bounds * dateinput tests * renames * replace borders with Divider elements also remove all negative margins * copyright, test helper * use Divider component * fix DRP tests * adjust month select icon position * margin only on caption * fix R15 tests * [DatePicker] time support: timePrecision & timePickerProps (palantir#2856) * add TimePicker props right in DatePicker! * getDateTime() to merge date and time * remove "none" from allowed timePrecision * add style for TP in DP * refactors to MomentDate and PrecisionSelect to support time * add PrecisionSelect to DP and DRP examples * import types, update styles (no divider) * revert some example changes * check null in caption * revert DRP example change * DateInput only renders DatePicker * deprecate DateTimePicker * fix dateinput test * tests for time! * strict boolean, no only * top margin on timepicker * refactors to reduce some complexity (palantir#2858) * [DateRangePicker] Shortcuts component and renderCalendars method (palantir#2859) * Shortcuts component and renderCalendars method to greatly simplify render() * bind handleNextState * Publish - @blueprintjs/icons@3.1.0 * remove dependencies section * [table] fix invisible table menu icon (palantir#2866) Fixes palantir#2865 * [Spinner] restore IE support (palantir#2868) * fix Spinner in IE by adding HTML wrapper tag for the animation * fix loading button spinner position * add tagName test * attempt to fix changing value on IE * added latest version (palantir#2862) * Publish - @blueprintjs/core@3.4.0 - @blueprintjs/table@3.1.1 * sketch file updated date * sandbox link in readme * remove quotes on $ns variable value (palantir#2881) * [Icon] render HTML element & tagName prop (palantir#2884) * Icon tagName prop and set `.bp3-icon-{name}` on element * refactor icon styles so svg is child - only render font glyph if the icon element is :empty * icon docs * color prop becomes fill attribute on svg, overrides css colors * fix tests * oops fix icon classes on non-icon elements (like callouts & buttons) * fix text ref (palantir#2888) * Skeleton: fix FF support! (palantir#2887) and refactor styles for simpler keyframes * [OverflowList] fix browser zoom behavior (palantir#2886) * fix OverflowList when zoomed * less magical number * [docs] better version tag styles (palantir#2889) * [docs] better version tag styles * remove obsolete flex override on tag icons * center docs-nav-buttons and key-combo * [Skeleton] Increase animation contrast (palantir#2885) * [Spinner] add additional child element to isolate spinner from parent (palantir#2890) * add spinner-animation element to isolate spinner from parent * comments about elements * Publish - @blueprintjs/core@3.5.0 * [Icon] revert to inline-block (palantir#2896) * clean up comments * take no chances * revert to inline-block and set block on svg instead of relying on flex child fixes all noted regressions * Publish - @blueprintjs/core@3.5.1 * Incorrect argument name (palantir#2898) Copied this over and realized that the argument should not be item but rather film. * [Suggest] Added selectedItem prop (palantir#2874) * Added selected item prop on the ISuggestProps def. * Init the Suggest state with the selected item prop. * Fixed Suggest support for controlled mode. * Fixed a tslint coma issue. * Made the state the only source of truth, added tests. * Added more tests, improved controlled mode support Now the Suggest does not update its underlying state in controlled mode, just like the EditableText component. * Added support for controlled empty selection. * prop docs * whitespace * [TagInput] Use $input-padding-horizontal when empty for consistency with <InputGroup> (palantir#2900) * Use -padding-horizontal in empty <TagInput> * Remove -empty class, use pure CSS approach * Add left-icon toggle to example * 🔧 switch to tree-sitter-typescript (palantir#2908) * switch to tree-sitter-typescript, move syntax pkgs to docs-data * update syntax tokens * 🔧 switch to circle-github-bot (palantir#2907) * add circle-github-bot * new preview script * restore cache in circle job * delete old scripts * [timepicker] Fix allowing to type time that exceeds time bounds (palantir#2795) * [DateRangePicker] support time selection (palantir#2895) * add time selection unit tests * add maybeRender placeholder * add wrapper div for calendars + time * add time precision to DRP example * reorder function * DateRangePicker now has time selection field * Updated DateRangePicker example to show time when precision is selected * Updated props to include timePickerProps and fixed/cleaned up tests for DateRangePicker * renamed timepicker classes appropiately, and code cleanup * updated momentTime to pass props * clicking on a shortcut doesn't change the time * removed only from describe in tests * removed unneeded CSS property and added test for making sure that time is preserved when un-selecting / reselecting date * Um/fix collapse animation (palantir#2911) * fixes collapse opening animation on first open * fix documentation * Add condensed property to HTML tables (palantir#2904) * Add condensed property to HTML tables * Move description to small instead of condensed * Deprecate small property on HTML tables * comment format * move collapse animation state docs onto the enum values, CLOSING_END -> CLOSING (palantir#2914) * bump sass-inline-svg (palantir#2915) * [docs] Modifiers & update DTP deprecation (palantir#2909) * add modifiers docs * update DTP deprecation notice * back to present tense since we're ready to ship * [Switch] fix switch styles variables for dark theme (palantir#2912) * [Select] Add resetOnQuery prop (palantir#2894) * [Select] Add resetActiveItemOnQuery prop * Switch prop name from resetActiveItemOnQuery to resetOnQuery and default prop to true * Match documentation to current functionality * Move default prop down to the lowest level, queryList
graphext · Sep 10, 2018 · f6c4762 · f6c4762
1 parent 6f22666
commit f6c4762
Show file tree

Hide file tree

Showing 112 changed files with 2,286 additions and 1,821 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -92,7 +92,6 @@ jobs:
       - restore_cache: *restore_cache
       - run: yarn dist:libs
       - run: yarn dist:apps
-      # skip dist:docs because we do not publish GitHub Pages from CI
       - persist_to_workspace: *persist_to_workspace
 
   test-react-16: &test-react
@@ -134,8 +133,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: '.'
-      - store_artifacts:
-          path: docs
+      - restore_cache: *restore_cache
       - store_artifacts:
           path: packages/docs-app/dist
       - store_artifacts:
@@ -144,7 +142,7 @@ jobs:
           path: packages/table-dev-app/dist
       - run:
           name: Submit Github comment with links to built artifacts
-          command: ./scripts/submit-preview-comment
+          command: node ./scripts/preview.js
 
   deploy-npm:
     <<: *setup_env

diff --git a/README.md b/README.md
@@ -7,10 +7,13 @@ Blueprint is a React-based UI toolkit for the web.
 It is optimized for building complex, data-dense web interfaces for _desktop applications_.
 If you rely heavily on mobile interactions and are looking for a mobile-first UI toolkit, this may not be for you.
 
+
 [**Read the introductory blog post ▸**](https://medium.com/@palantir/scaling-product-design-with-blueprint-25492827bb4a)
 
 [**View the full documentation ▸**](http://blueprintjs.com/docs)
 
+[**Try it out on CodeSandbox ▸**](https://codesandbox.io/s/rypm429574)
+
 [**Read our FAQ on the wiki ▸**](https://github.com/palantir/blueprint/wiki/Frequently-Asked-Questions)
 
 ## :tada: 3.0 is here! :tada:
@@ -97,12 +100,6 @@ Run `yarn dev` from the root directory to watch changes across all packages and
 Alternately, each library has its own dev script to run the docs app and watch changes to just that package (and its dependencies): `yarn dev:core`, `yarn dev:datetime`, etc.
 One exception is `table`: since it has its own dev application, the `dev:table` script runs `table-dev-app` instead of the docs.
 
-### Updating dependencies
-
-1. Edit the `package.json` where you wish to change dependencies.
-1. Run `yarn` at the root to update lockfiles.
-1. Commit the result.
-
 ### Updating documentation
 
 Much of Blueprint's documentation lives inside source code as JSDoc comments in `.tsx` files and KSS markup in `.scss` files. This documentation is extracted and converted into static JSON data using [documentalist](https://github.com/palantir/documentalist/).

diff --git a/package.json b/package.json
@@ -46,13 +46,11 @@
     "@types/react-transition-group": "^2.0.6",
     "@types/sinon": "^4.1.2",
     "@types/webpack": "^3.8.8",
-    "better-handlebars": "github:wmeldon/better-handlebars",
     "chai": "^4.1.2",
+    "circle-github-bot": "^1.0.0",
     "cross-env": "^5.1.3",
     "gh-pages": "^1.1.0",
     "http-server": "^0.11.1",
-    "language-less": "github:atom/language-less",
-    "language-typescript": "github:giladgray/language-typescript#10.1.15",
     "lerna": "^2.7.1",
     "npm-run-all": "^4.1.2",
     "sinon": "^4.1.4",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@blueprintjs/core",
-  "version": "3.2.0",
+  "version": "3.5.1",
   "description": "Core styles & components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -64,7 +64,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-test-renderer": "^16.2.0",
-    "sass-inline-svg": "^1.1.0",
+    "sass-inline-svg": "^1.2.0",
     "typescript": "~2.8.3",
     "webpack": "^3.10.0"
   },

diff --git a/packages/core/src/common/_variables.scss b/packages/core/src/common/_variables.scss
@@ -6,7 +6,8 @@
 @import "mixins";
 
 // Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
-$ns: "bp3" !default;
+// Do not quote this value, for Less consumers.
+$ns: bp3 !default;
 
 // easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)

diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
@@ -14,6 +14,7 @@ const NS = process.env.BLUEPRINT_NAMESPACE || "bp3";
 export const ACTIVE = `${NS}-active`;
 export const ALIGN_LEFT = `${NS}-align-left`;
 export const ALIGN_RIGHT = `${NS}-align-right`;
+export const CONDENSED = `${NS}-condensed`;
 export const DARK = `${NS}-dark`;
 export const DISABLED = `${NS}-disabled`;
 export const FILL = `${NS}-fill`;
@@ -100,6 +101,8 @@ export const DIALOG_FOOTER = `${DIALOG}-footer`;
 export const DIALOG_FOOTER_ACTIONS = `${DIALOG}-footer-actions`;
 export const DIALOG_HEADER = `${DIALOG}-header`;
 
+export const DIVIDER = `${NS}-divider`;
+
 export const EDITABLE_TEXT = `${NS}-editable-text`;
 export const EDITABLE_TEXT_CONTENT = `${EDITABLE_TEXT}-content`;
 export const EDITABLE_TEXT_EDITING = `${EDITABLE_TEXT}-editing`;
@@ -206,6 +209,7 @@ export const START = `${NS}-start`;
 export const END = `${NS}-end`;
 
 export const SPINNER = `${NS}-spinner`;
+export const SPINNER_ANIMATION = `${SPINNER}-animation`;
 export const SPINNER_HEAD = `${SPINNER}-head`;
 export const SPINNER_NO_SPIN = `${NS}-no-spin`;
 export const SPINNER_TRACK = `${SPINNER}-track`;

diff --git a/packages/core/src/common/utils.ts b/packages/core/src/common/utils.ts
@@ -24,6 +24,23 @@ export function isFunction(value: any): value is Function {
     return typeof value === "function";
 }
 
+/**
+ * Returns true if `node` is null/undefined, false, empty string, or an array
+ * composed of those. If `node` is an array, only one level of the array is
+ * checked, for performance reasons.
+ */
+export function isReactNodeEmpty(node?: React.ReactNode, skipArray = false): boolean {
+    return (
+        node == null ||
+        node === "" ||
+        node === false ||
+        (!skipArray &&
+            Array.isArray(node) &&
+            // only recurse one level through arrays, for performance
+            (node.length === 0 || node.every(n => isReactNodeEmpty(n, true))))
+    );
+}
+
 /**
  * Converts a React child to an element: non-empty string or number or
  * `React.Fragment` (React 16.3+) is wrapped in given tag name; empty strings

diff --git a/packages/core/src/components/_index.scss b/packages/core/src/components/_index.scss
@@ -9,6 +9,7 @@
 @import "card/card";
 @import "collapse/collapse";
 @import "context-menu/context-menu";
+@import "divider/divider";
 @import "dialog/dialog";
 @import "editable-text/editable-text";
 @import "forms/index";

diff --git a/packages/core/src/components/button/_button.scss b/packages/core/src/components/button/_button.scss
@@ -88,10 +88,9 @@ Styleguide button
     }
 
     .#{$ns}-button-spinner {
+      // spinner appears centered within button
       position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+      margin: 0;
     }
 
     > :not(.#{$ns}-button-spinner) {

diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
@@ -11,7 +11,7 @@ import { Alignment } from "../../common/alignment";
 import * as Classes from "../../common/classes";
 import * as Keys from "../../common/keys";
 import { IActionProps } from "../../common/props";
-import { safeInvoke } from "../../common/utils";
+import { isReactNodeEmpty, safeInvoke } from "../../common/utils";
 import { Icon, IconName } from "../icon/icon";
 import { Spinner } from "../spinner/spinner";
 
@@ -149,7 +149,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
         return [
             loading && <Spinner key="loading" className={Classes.BUTTON_SPINNER} size={Icon.SIZE_LARGE} />,
             <Icon key="leftIcon" icon={icon} />,
-            ((text != null && text !== "") || (children != null && children !== "")) && (
+            (!isReactNodeEmpty(text) || !isReactNodeEmpty(children)) && (
                 <span key="text" className={Classes.BUTTON_TEXT}>
                     {text}
                     {children}

diff --git a/packages/core/src/components/collapse/collapse.tsx b/packages/core/src/components/collapse/collapse.tsx
@@ -33,8 +33,10 @@ export interface ICollapseProps extends IProps {
     keepChildrenMounted?: boolean;
 
     /**
-     * The length of time the transition takes, in milliseconds. This must match the duration of the animation in CSS.
-     * Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
+     * The length of time the transition takes, in milliseconds. This must match
+     * the duration of the animation in CSS. Only set this prop if you override
+     * Blueprint's default transitions with new transitions of a different
+     * length.
      * @default 200
      */
     transitionDuration?: number;
@@ -48,41 +50,51 @@ export interface ICollapseState {
     animationState: AnimationStates;
 }
 
+/**
+ * `Collapse` can be in one of six states, enumerated here.
+ * When changing the `isOpen` prop, the following happens to the states:
+ * isOpen={true}  : CLOSED -> OPEN_START -> OPENING -> OPEN
+ * isOpen={false} : OPEN -> CLOSING_START -> CLOSING -> CLOSED
+ */
 export enum AnimationStates {
-    CLOSED,
+    /**
+     * The body is re-rendered, height is set to the measured body height and
+     * the body Y is set to 0.
+     */
+    OPEN_START,
+
+    /**
+     * Animation begins, height is set to auto. This is all animated, and on
+     * complete, the state changes to OPEN.
+     */
     OPENING,
+
+    /**
+     * The collapse height is set to auto, and the body Y is set to 0 (so the
+     * element can be seen as normal).
+     */
     OPEN,
+
+    /**
+     * Height has been changed from auto to the measured height of the body to
+     * prepare for the closing animation in CLOSING.
+     */
     CLOSING_START,
-    CLOSING_END,
+
+    /**
+     * Height is set to 0 and the body Y is at -height. Both of these properties
+     * are transformed, and then after the animation is complete, the state
+     * changes to CLOSED.
+     */
+    CLOSING,
+
+    /**
+     * The contents of the collapse is not rendered, the collapse height is 0,
+     * and the body Y is at -height (so that the bottom of the body is at Y=0).
+     */
+    CLOSED,
 }
 
-/*
- * A collapse can be in one of 5 states:
- * CLOSED
- * When in this state, the contents of the collapse is not rendered, the collapse height is 0,
- * and the body Y is at -height (so that the bottom of the body is at Y=0).
- *
- * OPEN
- * When in this state, the collapse height is set to auto, and the body Y is set to 0 (so the element can be seen
- * as normal).
- *
- * CLOSING_START
- * When in this state, height has been changed from auto to the measured height of the body to prepare for the
- * closing animation in CLOSING_END.
- *
- * CLOSING_END
- * When in this state, the height is set to 0 and the body Y is at -height. Both of these properties are transformed,
- * and then after the animation is complete, the state changes to CLOSED.
- *
- * OPENING
- * When in this state, the body is re-rendered, height is set to the measured body height and the body Y is set to 0.
- * This is all animated, and on complete, the state changes to OPEN.
- *
- * When changing the isOpen prop, the following happens to the states:
- * isOpen = true : CLOSED -> OPENING -> OPEN
- * isOpen = false: OPEN -> CLOSING_START -> CLOSING_END -> CLOSED
- * These are all animated.
- */
 export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Collapse`;
 
@@ -104,9 +116,6 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
     private height: number = 0;
 
     public componentWillReceiveProps(nextProps: ICollapseProps) {
-        if (this.contents != null && this.contents.clientHeight !== 0) {
-            this.height = this.contents.clientHeight;
-        }
         if (this.props.isOpen !== nextProps.isOpen) {
             this.clearTimeouts();
             if (this.state.animationState !== AnimationStates.CLOSED && !nextProps.isOpen) {
@@ -116,18 +125,16 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
                 });
             } else if (this.state.animationState !== AnimationStates.OPEN && nextProps.isOpen) {
                 this.setState({
-                    animationState: AnimationStates.OPENING,
-                    height: `${this.height}px`,
+                    animationState: AnimationStates.OPEN_START,
                 });
-                this.setTimeout(() => this.onDelayedStateChange(), this.props.transitionDuration);
             }
         }
     }
 
     public render() {
         const isContentVisible = this.state.animationState !== AnimationStates.CLOSED;
         const shouldRenderChildren = isContentVisible || this.props.keepChildrenMounted;
-        const displayWithTransform = isContentVisible && this.state.animationState !== AnimationStates.CLOSING_END;
+        const displayWithTransform = isContentVisible && this.state.animationState !== AnimationStates.CLOSING;
         const isAutoHeight = this.state.height === "auto";
 
         const containerStyle = {
@@ -141,10 +148,8 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
             transition: isAutoHeight ? "none" : undefined,
         };
 
-        // HACKHACK: type cast because there's no single overload that supports all
-        // three ReactTypes (string | ComponentClass | StatelessComponent)
         return React.createElement(
-            this.props.component as any,
+            this.props.component,
             {
                 className: classNames(Classes.COLLAPSE, this.props.className),
                 style: containerStyle,
@@ -170,15 +175,25 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
     }
 
     public componentDidUpdate() {
+        if (this.contents != null && this.contents.clientHeight !== 0) {
+            this.height = this.contents.clientHeight;
+        }
         if (this.state.animationState === AnimationStates.CLOSING_START) {
             this.setTimeout(() =>
                 this.setState({
-                    animationState: AnimationStates.CLOSING_END,
+                    animationState: AnimationStates.CLOSING,
                     height: "0px",
                 }),
             );
             this.setTimeout(() => this.onDelayedStateChange(), this.props.transitionDuration);
         }
+        if (this.state.animationState === AnimationStates.OPEN_START) {
+            this.setState({
+                animationState: AnimationStates.OPENING,
+                height: this.height + "px",
+            });
+            this.setTimeout(() => this.onDelayedStateChange(), this.props.transitionDuration);
+        }
     }
 
     private contentsRefHandler = (el: HTMLElement) => {
@@ -197,7 +212,7 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
             case AnimationStates.OPENING:
                 this.setState({ animationState: AnimationStates.OPEN, height: "auto" });
                 break;
-            case AnimationStates.CLOSING_END:
+            case AnimationStates.CLOSING:
                 this.setState({ animationState: AnimationStates.CLOSED });
                 break;
             default:

diff --git a/packages/core/src/components/components.md b/packages/core/src/components/components.md
@@ -9,6 +9,7 @@
 @page card
 @page collapse
 @page collapsible-list
+@page divider
 @page editable-text
 @page html
 @page html-table

diff --git a/packages/core/src/components/divider/_divider.scss b/packages/core/src/components/divider/_divider.scss
@@ -0,0 +1,19 @@
+// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the terms of the LICENSE file distributed with this project.
+
+@import "../../common/variables";
+
+$divider-margin: $pt-grid-size / 2 !default;
+
+.#{$ns}-divider {
+  margin: $divider-margin;
+  // since the element is empty, it will occupy minimal space and only show
+  // the appropriate border based on direction of container.
+  border-right: 1px solid $pt-divider-black;
+  border-bottom: 1px solid $pt-divider-black;
+
+
+  .#{$ns}-dark & {
+    border-color: $pt-dark-divider-black;
+  }
+}